¿Cómo utilizar la sección Tabla de precios en el Editor de bloques de Waclis?

La sección Tabla de precios del Editor de bloques de Waclis permite presentar y comparar diferentes alternativas comerciales dentro de una misma composición.

Puedes utilizarla para mostrar:

• planes;

• paquetes;

• membresías;

• servicios;

• abonos;

• alternativas de contratación;

• niveles de una solución;

• propuestas con diferentes prestaciones;

• opciones de producto cuando la comparación por características sea importante.

Dentro del Editor de bloques encontrarás diferentes diseños en:

Secciones → Tabla de precios

Puedes seleccionar una composición prediseñada y luego personalizar:

• nombre de cada opción;

• precio;

• moneda;

• período;

• descripción;

• características incluidas;

• características no incluidas;

• botones;

• enlaces;

• colores;

• fondo;

• opción destacada;

• cantidad de Cards;

• distribución responsive.

¿Qué es una Tabla de precios?

Una Tabla de precios organiza varias alternativas para que el visitante pueda compararlas.

Por ejemplo:

┌──────────────────┐ ┌──────────────────┐ ┌──────────────────┐
│ BÁSICO           │ │ PROFESIONAL      │ │ EMPRESA          │
│                  │ │                  │ │                  │
│ $ XX / mes       │ │ $ XX / mes       │ │ Consultar        │
│                  │ │                  │ │                  │
│ ✓ Opción A       │ │ ✓ Opción A       │ │ ✓ Opción A       │
│ ✓ Opción B       │ │ ✓ Opción B       │ │ ✓ Opción B       │
│                  │ │ ✓ Opción C       │ │ ✓ Opción C       │
│                  │ │                  │ │ ✓ Opción D       │
│ [ ELEGIR ]       │ │ [ ELEGIR ]       │ │ [ CONTACTAR ]    │
└──────────────────┘ └──────────────────┘ └──────────────────┘

El objetivo principal es que el visitante pueda responder rápidamente:

¿Qué opciones existen?

¿Cuánto cuesta cada una?

¿Qué incluye?

¿Cuál se adapta mejor a mi necesidad?

¿Cómo continúo?

¿Cuándo conviene utilizar una Tabla de precios?

Es especialmente útil cuando existen alternativas comparables.

Por ejemplo:

PLAN INICIAL

PLAN PROFESIONAL

PLAN EMPRESA

o:

PAQUETE 10 HORAS

PAQUETE 20 HORAS

PAQUETE 40 HORAS

o:

SERVICIO BÁSICO

SERVICIO AVANZADO

SERVICIO PERSONALIZADO

¿Cuándo puede no ser la sección adecuada?

No es necesario utilizar una Tabla de precios cuando existe una única opción.

Por ejemplo:

Servicio de instalación

USD XXX

puede presentarse mediante:

• Texto e imagen;

• Card;

• CTA;

• otra composición.

La Tabla de precios aporta valor principalmente cuando existe algo que comparar.

Tabla de precios y catálogo de Productos no son lo mismo

La Tabla de precios es una composición de contenido dentro del Editor de bloques.

Puede utilizarse para comunicar:

• planes;

• paquetes;

• alternativas;

pero no debe confundirse con el contenido dinámico del catálogo de Productos.

Si tu Página web ya administra productos mediante el catálogo de Waclis, no necesitas reconstruir manualmente todos esos productos mediante Cards de precios.

Ejemplo

Puedes utilizar una Tabla de precios para:

PLAN DE SERVICIO A
PLAN DE SERVICIO B
PLAN DE SERVICIO C

pero mantener:

PRODUCTOS
↓
catálogo dinámico

como contenido independiente.

Tabla de precios y Características

Una Tabla de precios puede incluir características de cada opción.

Por ejemplo:

Plan A
✓ 5 usuarios
✓ Soporte

Plan B
✓ 10 usuarios
✓ Soporte
✓ Integración

La diferencia es que aquí las características existen para comparar opciones comerciales.

¿Cómo agregar una Tabla de precios?

Ingresa al Editor de bloques de la página o área editable donde quieras incorporarla.

Después abre:

Secciones

y selecciona:

Tabla de precios

Paso 1: elige la composición

Waclis mostrará las alternativas prediseñadas disponibles.

Elige principalmente según:

• cantidad de opciones;

• cantidad de información;

• presencia de botones;

• estilo de Cards;

• importancia del precio;

• necesidad de destacar una opción.

No necesitas conservar:

• nombres;

• importes;

• textos;

• colores;

• características;

del ejemplo.

Paso 2: agrega la sección

Selecciona la composición elegida.

Después podrás modificar cada Card individualmente.

Paso 3: utiliza Navigator

Una Tabla de precios puede tener una estructura conceptual similar a:

Section
└── Container
    └── Grid Row
        ├── Grid Column
        │   └── Pricing Card
        │       ├── Heading
        │       ├── Price
        │       ├── Paragraph
        │       ├── List
        │       └── Button
        │
        ├── Grid Column
        │   └── Pricing Card
        │       └── ...
        │
        └── Grid Column
            └── Pricing Card
                └── ...

La estructura exacta dependerá del diseño seleccionado.

Navigator es especialmente útil para:

• seleccionar una Card completa;

• clonar;

• eliminar;

• mover;

• cambiar el fondo de una opción;

• identificar Lists, Buttons o textos.

¿Qué seleccionar?

Cambiar nombre del plan

Selecciona:

Heading

Cambiar descripción

Selecciona:

Paragraph

Cambiar una característica

Selecciona el elemento correspondiente de:

List

o texto.

Cambiar el fondo de una opción

Selecciona:

Card o contenedor correspondiente.

Duplicar una opción completa

Selecciona:

Pricing Card / Grid Column

según la estructura.

No clones únicamente el precio

Si quieres crear una cuarta opción y clonas solamente:

$ 99

obtendrás otro texto dentro de la misma Card.

Necesitas duplicar la unidad completa.

Paso 4: define las opciones antes de diseñar

Antes de personalizar colores y estilos, define claramente:

• nombre;

• precio;

• período;

• qué incluye;

• qué diferencia una opción de otra;

• acción.

Ejemplo

INICIAL

USD 20 / mes

✓ Función A
✓ Función B

[ COMENZAR ]

PROFESIONAL

USD 50 / mes

✓ Función A
✓ Función B
✓ Función C
✓ Función D

[ COMENZAR ]

EMPRESA

Consultar

✓ Todo lo anterior
✓ Configuración personalizada
✓ Atención específica

[ CONTACTAR ]

Utiliza nombres que ayuden a distinguir las alternativas

Por ejemplo:

Inicial

Profesional

Empresa

o:

Básico

Avanzado

Completo

o:

10 horas

20 horas

40 horas

Evita nombres casi idénticos

Por ejemplo:

Plan 1

Plan 2

Plan 3

puede funcionar técnicamente, pero aporta poca información.

También puedes nombrar según necesidad

Por ejemplo:

Para comenzar

Para crecer

Para equipos

cuando realmente ayude a comprender cada alternativa.

Paso 5: configura el precio

El precio debe ser claro.

Por ejemplo:

USD 29

o:

$ 29.900

según la moneda y mercado correspondientes.

Indica la moneda cuando pueda existir ambigüedad

Especialmente si la Página web recibe visitas de diferentes países.

Por ejemplo:

USD 50

es más claro que:

$ 50

cuando el símbolo podría interpretarse de distintas maneras.

Utiliza el formato de moneda apropiado para tu público

Mantén consistencia.

Evita mezclar dentro de una misma Tabla:

$50

USD 75

75 dólares

sin una razón.

Período

Si el importe corresponde a un período, indícalo.

Por ejemplo:

USD 25 / mes

USD 240 / año

USD 50 / usuario / mes

cuando esas condiciones sean realmente las correspondientes.

No muestres únicamente el número

Por ejemplo:

99

sin explicar:

• moneda;

• período;

• unidad;

puede generar dudas.

Precio único

Si no es recurrente, puedes comunicarlo como:

USD 500

Pago único

cuando corresponda.

Precio “desde”

Si el importe representa un valor inicial y puede variar:

Desde USD 300

puede ser más preciso que:

USD 300

si no todos los clientes pagan exactamente ese importe.

¿Cuándo utilizar “Desde”?

Cuando exista realmente una condición que haga variar el precio.

Por ejemplo:

• tamaño del proyecto;

• cantidad;

• configuración;

• alcance;

• opciones adicionales.

No utilices “Desde” para presentar un valor que nunca se ofrece

El precio publicado debe representar una alternativa real.

Precio a consultar

No todas las opciones necesitan un importe fijo.

Puedes utilizar:

Consultar

A medida

Solicitar presupuesto

según el caso.

Ejemplo

EMPRESA

Precio personalizado

Configuración según necesidades.

[ SOLICITAR PRESUPUESTO ]

Mantén la acción coherente

Si el precio es:

Consultar

el Button debería probablemente ser:

Contactar

o:

Solicitar presupuesto

y no necesariamente:

Comprar ahora

si todavía no existe un precio definido.

Paso 6: explica brevemente para quién es cada opción

Una pequeña descripción puede ayudar mucho.

Por ejemplo:

Inicial

Para profesionales y proyectos pequeños.

Profesional

Para empresas que necesitan más herramientas.

Empresa

Para equipos con necesidades avanzadas.

Evita descripciones genéricas

Por ejemplo:

Una excelente opción.

no ayuda a comparar.

Mejor

Pensado para equipos que necesitan administrar múltiples usuarios.

si esa es realmente la diferencia.

Paso 7: organiza las características

Una Tabla de precios funciona mejor cuando las diferencias son fáciles de comparar.

Por ejemplo:

INICIAL

✓ 5 usuarios
✓ Soporte por email
✓ Función A

PROFESIONAL

✓ 10 usuarios
✓ Soporte
✓ Función A
✓ Función B
✓ Función C

Utiliza una estructura consistente

Si todas las Cards comparan las mismas categorías, el visitante puede recorrerlas fácilmente.

Ejemplo

Usuarios
Almacenamiento
Soporte
Integraciones

en todas las opciones.

Evita comparar cosas distintas en cada Card

Por ejemplo:

Plan A:

✓ Soporte
✓ 5 usuarios

Plan B:

✓ Diseño moderno
✓ Crece con tu negocio

Plan C:

✓ Integraciones
✓ Seguridad

La comparación resulta difícil porque cada columna habla de cosas diferentes.

Mantén la misma lógica

Por ejemplo:

Usuarios
Funciones
Soporte
Integraciones

para todas.

Características no incluidas

Puedes indicar diferencias cuando sea necesario.

Por ejemplo:

✓ Función A
✓ Función B
— Función C

o utilizar otro tratamiento visual.

No abuses de cruces rojas

Una Card llena de:

✕ No incluye
✕ No incluye
✕ No incluye

puede resultar visualmente negativa.

También puedes mostrar solamente lo que incluye y mantener la comparación clara.

“Todo lo anterior”

Puede resultar útil:

✓ Todo lo incluido en Profesional
✓ Función adicional
✓ Soporte avanzado

pero obliga al visitante a mirar otra Card.

Para comparaciones precisas

Puede ser más claro repetir las características principales.

Por ejemplo:

✓ 20 usuarios
✓ Integraciones
✓ Soporte
✓ Reportes

Evita textos excesivamente largos dentro de cada característica

Por ejemplo:

✓ Acceso completo a todas las diferentes herramientas que permiten administrar diferentes aspectos de la plataforma...

puede simplificarse.

Mejor

✓ Acceso completo

y explicar detalles en otra sección si es necesario.

Cantidad de características

Muestra las que ayudan a decidir.

No necesitas listar cada detalle del servicio.

Si existen 40 características

Puedes:

• resumir las principales;

• agregar un CTA hacia una comparación completa;

• utilizar Acordeón;

• crear otra página.

Una Tabla de precios debe facilitar la decisión

No convertirla en una documentación técnica.

Paso 8: configura el Button

Cada opción suele tener una acción.

Por ejemplo:

Elegir plan

Comenzar

Contratar

Solicitar información

Contactar

Utiliza acciones coherentes entre Cards

Si las tres pueden contratarse directamente:

[ ELEGIR PLAN ]

puede utilizarse en todas.

Si una requiere contacto

Puedes diferenciar:

Inicial
[ ELEGIR PLAN ]

Profesional
[ ELEGIR PLAN ]

Empresa
[ CONTACTAR ]

Evita cambiar el verbo sin razón

Por ejemplo:

Plan A → Empezar
Plan B → Obtener
Plan C → Seguir

si todos llevan al mismo proceso.

La consistencia reduce dudas.

Configura la URL

Utiliza Navigator para seleccionar el:

• Link;

• Button;

• elemento correspondiente.

Recuerda que:

cambiar el texto del botón no garantiza que cambie su URL.

Después de editar

Utiliza:

Guardar Cambios → Ver página

y prueba cada opción.

Paso 9: destacar una opción

Muchas Tablas de precios utilizan una Card destacada.

Por ejemplo:

             MÁS ELEGIDO

[ Inicial ] [ PROFESIONAL ] [ Empresa ]

¿Por qué destacar una opción?

Puede ayudar cuando existe una alternativa que realmente quieres recomendar para un determinado perfil.

Puedes destacar mediante

• color;

• borde;

• fondo;

• etiqueta;

• mayor tamaño visual;

• Button con mayor contraste.

No necesitas utilizar todas estas técnicas a la vez

Por ejemplo:

RECOMENDADO

┌───────────────────┐
│ PROFESIONAL       │
│                   │
│ USD 49 / mes      │
│                   │
│ [ ELEGIR PLAN ]   │
└───────────────────┘

puede ser suficiente.

Utiliza etiquetas claras

Por ejemplo:

Recomendado

Más elegido

Ideal para empresas

solo cuando representen una clasificación real y apropiada.

Evita afirmaciones engañosas

No utilices:

Más elegido

si no tienes fundamento para presentarlo de esa manera.

Puedes utilizar simplemente:

Recomendado

cuando la empresa desea orientar hacia una opción concreta, siempre que quede claro que se trata de una recomendación.

No hagas que la opción destacada parezca obligatoria

Las demás alternativas deben seguir siendo:

• visibles;

• comprensibles;

• utilizables.

El destaque no debe impedir comparar

Evita:

Card destacada enorme
+
otras dos casi invisibles

si el usuario realmente necesita evaluar las tres.

Paso 10: promociones y descuentos

Puedes mostrar:

Antes USD 50

Ahora USD 39

cuando existe una promoción real.

Aclara condiciones relevantes

Por ejemplo:

USD 39 / mes

Precio promocional durante los primeros 3 meses

si esa es la condición real.

No ocultes que el precio cambiará posteriormente

Si después pasa a otro importe, el visitante debería poder comprenderlo.

Precio anual

Puedes utilizar:

USD 240 / año

Precio mensual equivalente

Si quieres comunicar:

Equivale a USD 20 / mes

asegúrate de que el cálculo sea correcto y de que quede claro si el cobro es anual.

Evita ambigüedad

Por ejemplo:

USD 20 / mes

cuando en realidad el cliente debe pagar:

USD 240 en un único pago anual

puede generar una expectativa incorrecta.

Precio mensual vs anual

Si ofreces ambos, puedes presentarlos claramente.

Por ejemplo:

Mensual:
USD XX / mes

Anual:
USD XXX / año

No agregues un selector mensual/anual si no existe realmente la funcionalidad

Un diseño visual como:

[ Mensual ] [ Anual ]

puede parecer interactivo.

Si no existe una lógica real detrás, no lo presentes como un control funcional.

Puedes mostrar ambas alternativas como contenido estático

Por ejemplo:

Pago mensual
USD XX / mes

Pago anual
USD XXX / año

si corresponde.

Impuestos y otros cargos

Cuando sea relevante para tu oferta, deja claro si existen condiciones adicionales que el visitante necesita conocer.

Por ejemplo:

• impuestos;

• configuración;

• instalación;

• envío;

• cargos adicionales.

No necesitas convertir la Card en una página legal, pero evita que el importe se interprete incorrectamente.

Ejemplo

USD 99 / mes

Implementación inicial no incluida.

si esa condición realmente aplica.

Otro ejemplo

Precio final según configuración.

cuando corresponda.

Precios variables

Si el importe depende de:

• usuarios;

• cantidad;

• volumen;

• proyecto;

puedes comunicar:

Desde USD XX

o:

Consultar

Evita dar una falsa precisión

Si el precio puede variar considerablemente, mostrar:

USD 1.000

como si fuera fijo puede ser menos útil que:

Presupuesto personalizado

Tabla de precios sin precios

Sí puede utilizarse una estructura de comparación aunque el importe sea:

Consultar

en todas las opciones.

Por ejemplo:

PAQUETE A
Características...
[ SOLICITAR COTIZACIÓN ]

PAQUETE B
Características...
[ SOLICITAR COTIZACIÓN ]

En ese caso la sección funciona más como comparación de paquetes.

Cantidad de Cards

No existe una cantidad obligatoria.

Puedes utilizar:

• 2;

• 3;

• 4;

• más opciones.

Pero a medida que aumenta la cantidad, la comparación se vuelve más compleja.

Dos opciones

[ PLAN A ] [ PLAN B ]

puede ser muy claro.

Tres opciones

[ INICIAL ] [ PROFESIONAL ] [ EMPRESA ]

es una estructura muy habitual.

Cuatro opciones

[ A ] [ B ] [ C ] [ D ]

puede funcionar en desktop, pero requerirá especial atención responsive.

Cinco o más

Puede resultar difícil mantener:

• ancho;

• legibilidad;

• comparación.

Considera:

• varias filas;

• otra estructura;

• página específica;

• tabla comparativa más detallada.

No mantengas cinco Cards diminutas en una única fila

El visitante debe poder leer:

• precio;

• características;

• CTA.

Clonar una opción

Si necesitas agregar una Card:

1. abre Navigator;

2. selecciona la unidad completa;

3. utiliza Clonar elemento;

4. reemplaza:

   • nombre;

   • precio;

   • período;

   • descripción;

   • características;

   • Button;

   • URL;

   • ID si existe.

No clones únicamente la lista

Si quieres crear un nuevo plan.

No clones únicamente Grid Column sin saber qué contiene

Puede ser correcto si la Card completa está dentro de ella, pero comprueba Navigator primero.

Revisa la copia completamente

Especialmente:

• precio;

• textos;

• enlace;

• IDs.

Eliminar una opción

Selecciona la unidad completa.

Recuerda:

Waclis no solicita confirmación.

Si eliminas el nivel equivocado:

Deshacer

inmediatamente.

No elimines únicamente el precio y dejes una Card vacía

Si quieres pasar de tres alternativas a dos, elimina la unidad completa y reorganiza la grilla.

Mover opciones

Puedes cambiar el orden.

Por ejemplo:

Antes:

Empresa
Inicial
Profesional

Después:

Inicial
Profesional
Empresa

Esto suele facilitar la comparación progresiva.

Orden de menor a mayor

Es una estructura habitual:

más simple
↓
más completo
↓
personalizado

Pero no es obligatorio

Puedes ordenar según:

• popularidad;

• público;

• lógica comercial.

Mantén una razón comprensible.

Comparación progresiva

Puede resultar especialmente clara:

PLAN A
incluye base

PLAN B
incluye base + adicionales

PLAN C
incluye todo

Evita diferencias arbitrarias

Cada escalón debería responder a una necesidad.

Responsive

Una Tabla de tres Cards puede verse:

Desktop

[ A ] [ B ] [ C ]

Tablet

Puede transformarse en:

[ A ] [ B ]

[ C ]

o mantener tres si existe suficiente espacio.

Celular

Puede ser:

[ A ]

[ B ]

[ C ]

No mantengas tres columnas estrechas en celular

Una Card de precios contiene bastante información.

En móvil generalmente necesita más ancho.

Utiliza Grid Row

Configura las columnas para los distintos tamaños de pantalla.

Recuerda:

los iconos superiores de dispositivos son una previsualización.

La estructura responsive real se configura mediante las herramientas del editor.

Cuatro Cards en desktop

Puede convertirse en:

Tablet

[ A ] [ B ]

[ C ] [ D ]

Mobile

[ A ]

[ B ]

[ C ]

[ D ]

Orden en móvil

Mantén el mismo orden lógico.

Por ejemplo:

Inicial
Profesional
Empresa

Opción destacada en móvil

Si Profesional es la recomendada, puede seguir apareciendo:

Inicial

RECOMENDADO
Profesional

Empresa

No reordenes automáticamente la opción recomendada al principio sin pensar

Puede resultar útil en algunos diseños, pero también romper la progresión de precios.

Decide conscientemente.

Altura de las Cards

Una opción puede tener más características que otra.

Por ejemplo:

Plan A
4 elementos

Plan C
10 elementos

La Card C será naturalmente más alta.

¿Todas deben tener la misma altura?

No obligatoriamente.

Pero una grilla comparativa suele resultar más ordenada cuando:

• precios;

• CTA;

• estructura;

mantienen cierta alineación.

Primera solución: organizar contenidos

Utiliza una cantidad y estructura de características razonablemente consistente.

Segunda solución: layout flexible

Si necesitas que Buttons queden alineados, puedes trabajar con una Card flexible.

Evita recurrir directamente a Height rígido.

Height fijo

Por ejemplo:

.pricing-card {
    height: 520px;
}

puede fallar si agregas:

• otra característica;

• un texto más largo;

• responsive.

Min Height

Puede ser más flexible cuando necesitas una base visual común.

Por ejemplo:

.precios-section .precio-card {
    min-height: 500px;
}

si el diseño realmente lo requiere.

Comprueba siempre celular.

No agregues contenido irrelevante solamente para igualar alturas

No es necesario que todas tengan exactamente la misma cantidad de bullets si las diferencias son reales.

Alineación de Buttons

Una buena Tabla permite que el visitante encuentre los CTA rápidamente.

Por ejemplo:

[ Card A ] [ Card B ] [ Card C ]
   botón      botón      botón

visualmente alineados.

Si los Buttons quedan a alturas muy diferentes

Revisa:

• contenido;

• estructura;

• layout de Card.

No compenses cada Card con Margin diferente si puedes utilizar una estructura consistente.

Typography

Debes mantener una jerarquía clara.

Por ejemplo:

PROFESIONAL      ← nombre

USD 49           ← precio principal

/ mes            ← período secundario

Descripción      ← contexto

Características  ← detalle

[ ELEGIR ]       ← acción

Precio con mayor protagonismo

Normalmente el importe será uno de los elementos visuales más importantes.

Pero no debe hacer desaparecer:

• nombre;

• período;

• condiciones.

Ejemplo

USD 49
/ mes

es más fácil de interpretar que:

49

sin contexto.

Decimales

Evita mostrar decimales innecesarios si no forman parte real del precio.

Mantén el formato comercial utilizado por la empresa.

Alineación

Puedes utilizar Cards:

• centradas;

• alineadas a izquierda.

Ambas opciones son posibles.

Centrada

Puede funcionar con planes simples:

      PROFESIONAL

       USD 49

     ✓ Función
     ✓ Función

       [ ELEGIR ]

Alineada a izquierda

Puede resultar más fácil de leer cuando existen muchas características.

Mantén consistencia entre las Cards

Evita una Card:

• centrada;

otra:

• izquierda;

y otra:

• derecha;

sin una intención clara.

Fondo de las Cards

Puedes utilizar:

• blanco;

• fondo de color;

• borde;

• sombra.

Opción destacada

Puede usar:

fondo principal de marca

mientras las demás utilizan blanco.

Pero comprueba siempre:

• contraste;

• legibilidad.

No utilices un color intenso que haga ilegibles características secundarias

Revisa:

• Heading;

• precio;

• textos;

• iconos;

• Button.

Border

Puede ayudar a separar Cards.

Por ejemplo:

┌─────────────────────┐
│ PLAN                │
│                     │
└─────────────────────┘

Border radius

Mantén coherencia con el diseño general.

Sombra

Una sombra suave puede ayudar, pero no es necesaria.

Especialmente si ya existe:

• borde;

• fondo diferente.

No agregues demasiados efectos

Una Tabla de precios necesita priorizar la comparación.

Badge o etiqueta

Dentro de los componentes del editor existe también Badge, que puede ser útil en composiciones personalizadas.

Por ejemplo:

[ RECOMENDADO ]

PROFESIONAL

Si la sección prediseñada ya incluye una etiqueta, puedes modificarla.

Mantén la etiqueta breve

Por ejemplo:

Recomendado

Más popular

Para equipos

No agregues tres etiquetas a la misma Card

Por ejemplo:

RECOMENDADO
MÁS ELEGIDO
MEJOR VALOR
OFERTA

genera ruido.

Promoción temporal

Puedes utilizar:

20 % OFF

solo si existe realmente.

Revisa la fecha de finalización

Una promoción vencida dentro de la Tabla puede generar información incorrecta.

Precio anterior

Puedes mostrarlo con menor jerarquía:

Antes USD 60

USD 45 / mes

si corresponde.

No utilices un precio anterior ficticio para crear sensación de descuento

La información debe ser real.

Tabla de precios y confianza

Una comparación clara puede reducir dudas.

Ayuda especialmente cuando el visitante puede comprender:

• qué paga;

• qué recibe;

• qué cambia entre opciones;

• qué debe hacer.

Evita condiciones importantes escondidas

Si una opción requiere:

contrato mínimo de 12 meses

y esto es esencial para interpretar el precio, no debería quedar oculto de manera engañosa.

Puedes resumir la condición y enlazar información adicional.

Texto adicional debajo de la Tabla

Puedes agregar:

Todos los planes incluyen...

o:

¿Necesitas una configuración diferente?

[ CONTACTAR ]

Esto evita repetir información

Si los tres planes incluyen:

Soporte básico

puedes evaluar si tiene sentido aclararlo una vez debajo, dependiendo del diseño.

Pero cuidado

Si la comparación necesita mostrar claramente qué incluye cada opción, repetirlo puede ser más útil.

La claridad tiene prioridad sobre ahorrar una línea.

CTA posterior a la Tabla

Puede ser muy útil:

¿NO SABES QUÉ OPCIÓN ELEGIR?

Nuestro equipo puede ayudarte.

[ CONTACTAR ]

Especialmente si existen opciones complejas

El visitante puede necesitar asesoramiento.

Tabla de precios en Home

Puede funcionar si los precios son una parte central de la propuesta.

Por ejemplo:

Beneficios
↓
Planes
↓
FAQ
↓
CTA

No es obligatorio mostrar todos los detalles en Home

Puedes presentar:

• resumen;

• precios principales;

• CTA hacia una página completa.

Tabla de precios en una página de Servicio

Puede ser más apropiada si existen:

• paquetes;

• niveles;

• modalidades.

Tabla de precios en una landing page

Puede utilizarse cerca del momento de decisión:

Propuesta
↓
Beneficios
↓
Testimonios
↓
Precios
↓
FAQ
↓
CTA

Precios antes o después de Beneficios

Depende de la estrategia de la página.

Si el visitante necesita comprender el valor antes de ver el precio, los Beneficios pueden aparecer primero.

No escondas el precio innecesariamente

Si la empresa comunica precios públicamente, facilita encontrarlos.

Tabla de precios y FAQ

Una combinación muy útil:

TABLA DE PRECIOS

↓

PREGUNTAS FRECUENTES

¿Puedo cambiar de plan?
¿El precio incluye...?
¿Cómo se factura?

La FAQ puede resolver dudas posteriores a la comparación.

Tabla de precios y Características

Puedes utilizar:

CARACTERÍSTICAS GENERALES
↓
TABLA DE PRECIOS

o integrar las características directamente en las Cards.

Tabla de precios y CTA

Cada Card puede tener su CTA y, además, un CTA general de asesoramiento.

Clases compartidas

En personalizaciones avanzadas puedes utilizar una estructura como:

precios-section
precio-card
precio-card-destacada
precio-nombre
precio-importe
precio-periodo
precio-lista
precio-button

Linked styles

Es normal que todas las Cards compartan:

precio-card

Esto facilita mantener:

• Padding;

• Border radius;

• Typography;

• sombra.

Para destacar una

Puedes agregar:

precio-card-destacada

sin eliminar:

precio-card

Ejemplo

class="precio-card precio-card-destacada"

No necesitas darle un ID diferente a cada Card solamente por Linked styles

Utiliza estilos compartidos cuando quieras mantener consistencia.

ID para opciones específicas

Si necesitas anclas o una personalización única, puedes utilizar:

id="plan-profesional"

Mantén cada ID único.

Revisa IDs después de clonar

Si duplicas:

id="plan-profesional"

actualiza la copia.

CSS personalizado

Puedes limitarlo a la sección.

Por ejemplo:

.precios-section .precio-card {
    padding: 28px;
    border-radius: 16px;
}

Card destacada

.precios-section .precio-card-destacada {
    transform: translateY(-8px);
}

si el diseño lo necesita.

Pero cuidado con transformar demasiado la Card

En móvil una elevación visual puede generar:

• espacios extraños;

• desbordamientos.

Comprueba responsive.

Responsive

@media (max-width: 768px) {
    .precios-section .precio-card-destacada {
        transform: none;
    }
}

puede ser apropiado en una personalización concreta.

Utiliza primero Grid y Estilo

No escribas CSS para crear tres columnas si Grid Row ya lo permite.

Evita CSS global

No utilices:

.card {
    border-radius: 16px;
}

si solo quieres modificar la Tabla de precios.

Hover

Puedes utilizar Hover en Cards.

Por ejemplo:

Card normal
↓
sombra ligeramente mayor al pasar el cursor

Pero recuerda

Una Card de precio puede ser clicable o no.

Si solo el Button es interactivo, un Hover demasiado fuerte sobre toda la Card puede hacer pensar que toda ella puede seleccionarse.

Hover del Button

Suele ser más importante.

No utilices Hover para revelar el precio

El precio debe estar visible normalmente.

Tampoco ocultes características esenciales hasta Hover

Los dispositivos táctiles funcionan de manera diferente.

Animaciones

Puedes utilizar:

Avanzado → Animate on scroll

sobre:

• Section;

• Row;

• Cards.

No retrases la comparación

Evita delays muy largos entre Card A, B y C.

El visitante necesita comparar simultáneamente.

Puede resultar mejor animar la fila completa

en lugar de hacer aparecer cada precio muy lentamente.

Ejemplo práctico: tres planes

Queremos:

ELIGE LA OPCIÓN ADECUADA

INICIAL
USD 20 / mes
✓ Función A
✓ Función B
[ ELEGIR ]

PROFESIONAL
USD 50 / mes
✓ Función A
✓ Función B
✓ Función C
[ ELEGIR ]

EMPRESA
Consultar
✓ Todo lo anterior
✓ Opciones avanzadas
[ CONTACTAR ]

Paso 1

Abre:

Secciones → Tabla de precios

Paso 2

Selecciona una composición de tres Cards.

Paso 3

Utiliza Navigator para identificar cada unidad.

Paso 4

Modifica nombres.

Paso 5

Modifica precios.

Paso 6

Agrega:

• moneda;

• período;

cuando corresponda.

Paso 7

Actualiza las características.

Paso 8

Elimina características de ejemplo.

Paso 9

Configura Buttons.

Paso 10

Revisa URLs.

Paso 11

Destaca la opción recomendada si corresponde.

Paso 12

Revisa desktop.

Paso 13

Revisa tablet.

Paso 14

Revisa celular.

Paso 15

Guarda.

Paso 16

Utiliza:

Ver página

y prueba cada Button.

Ejemplo práctico: servicios con presupuesto

PAQUETE INICIAL

Desde USD XXX

Incluye:
✓ Relevamiento
✓ Configuración base

[ SOLICITAR PRESUPUESTO ]


PAQUETE AVANZADO

Desde USD XXX

Incluye:
✓ Relevamiento
✓ Configuración avanzada
✓ Capacitación

[ SOLICITAR PRESUPUESTO ]

Aquí “Desde” ayuda a comunicar que el valor puede variar.

Ejemplo práctico: opción personalizada

EMPRESA

A medida

Pensado para proyectos con requerimientos especiales.

✓ Configuración personalizada
✓ Integraciones
✓ Acompañamiento

[ CONTACTAR ]

Ejemplo práctico: precio anual

PROFESIONAL

USD 240 / año

Pago anual.

[ CONTRATAR ]

Si quieres agregar:

Equivale a USD 20 / mes

asegúrate de que la información sea exacta y quede claro que el cobro sigue siendo anual.

Ejemplo práctico: promoción

PROFESIONAL

Antes USD 50 / mes

USD 39 / mes

Promoción válida durante los primeros 3 meses.

[ COMENZAR ]

cuando esa condición sea real.

¿Qué hacer si una Card tiene mucho más contenido?

Primero revisa si realmente necesita todas las características.

Puedes:

• resumir;

• agrupar;

• enlazar más información.

¿Qué hacer si los Buttons quedan desalineados?

Revisa:

• longitud de List;

• estructura;

• Min Height;

• layout de Card.

Evita utilizar un Margin diferente en cada Button si puedes resolverlo estructuralmente.

¿Qué hacer si una Card es mucho más alta?

No es obligatoriamente un error.

Pero comprueba si dificulta comparar.

¿Qué hacer si quiero todas iguales?

Utiliza una estructura flexible y una organización consistente.

Evita Height rígido sin probar contenido largo.

¿Qué hacer si el precio se corta en celular?

Revisa:

• Font size;

• ancho;

• unidades;

• Padding.

Por ejemplo:

USD 1.299,99 / usuario / mes

puede necesitar una composición responsive más flexible.

No reduzcas todo a 12 px para hacerlo entrar

Puedes separar visualmente:

USD 1.299,99

/ usuario / mes

¿Qué hacer si cuatro Cards no entran?

Configura:

• cuatro por fila en desktop;

• dos por fila en tablet;

• una por fila en móvil.

¿Qué hacer si la Card destacada queda demasiado grande en móvil?

Revisa estilos específicos:

• Transform;

• Scale;

• Margin;

• Border.

Puede ser conveniente reducir la diferencia visual en pantallas pequeñas.

¿Qué hacer si la opción recomendada cambia?

Actualiza:

• etiqueta;

• Class específica;

• color;

• CTA;

según corresponda.

No dejes dos Cards marcadas como:

Recomendado

sin intención.

¿Qué hacer si cambio un precio y cambia el estilo de todos?

Eso puede ser normal si estás modificando:

Estilo

sobre una Class compartida.

Cambiar el contenido desde:

Contenido

debería permitir que cada importe sea diferente.

¿Qué hacer si quiero un precio de color distinto?

Agrega una Class adicional o un ID específico si realmente existe una razón.

¿Qué hacer si cloné un plan y mantiene el mismo Link?

Actualiza la URL.

¿Qué hacer si mantiene el mismo ID?

Cambia el identificador.

¿Qué hacer si eliminé una Card pero queda un hueco?

Revisa:

• Grid Row;

• tamaños de columnas.

Si pasas de tres Cards a dos, puede ser conveniente redistribuirlas.

Ejemplo

Antes:

[ A ] [ B ] [ C ]

Después de eliminar C:

[ A ] [ B ]

puedes ajustar las columnas para aprovechar mejor el espacio.

¿Qué hacer si quiero agregar una cuarta?

Clona la unidad completa y después revisa la distribución desktop/tablet/mobile.

¿Qué hacer si el texto “Consultar” queda pequeño respecto de los precios?

Puedes mantener una jerarquía visual equivalente.

Por ejemplo:

A MEDIDA

con una Typography similar en importancia al importe.

¿Qué hacer si no quiero mostrar precio?

No dejes el área vacía.

Utiliza un mensaje claro:

Consultar

o:

Presupuesto personalizado

¿Qué hacer si los precios cambian frecuentemente?

La Tabla requiere mantenimiento manual dentro del contenido editable.

Revisa que los importes publicados correspondan a las condiciones vigentes.

No publiques un precio si no puedes mantenerlo actualizado

En determinados casos puede ser preferible:

Solicitar presupuesto

Utilizar IA para organizar una Tabla de precios

ChatGPT, Claude o Gemini pueden ayudarte a estructurar información existente.

Por ejemplo:

Tengo estos tres planes:

[pegar información real]

Quiero presentarlos en una Tabla de precios.

Organiza cada opción con:

- Nombre.
- Descripción de máximo 15 palabras.
- Precio y período.
- Máximo 6 características principales.
- CTA.

Mantén exactamente las diferencias reales entre los planes.

No inventes funciones, precios, descuentos ni condiciones.

IA para comparar planes

Puedes pedir:

Estas son las características reales de tres planes:

[pegar información]

Organízalas para que las mismas categorías se comparen en el mismo orden:

1. Usuarios.
2. Funciones.
3. Soporte.
4. Integraciones.
5. Límites.

No agregues características nuevas.

IA para detectar diferencias poco claras

Revisa esta Tabla de precios:

[pegar contenido]

Indícame qué opciones parecen demasiado similares y qué diferencias reales no están suficientemente visibles.

Utiliza únicamente la información proporcionada.

No sugieras nuevas funciones.

IA para simplificar características

Tengo estas características extensas:

[pegar lista]

Redúcelas a textos de máximo 6 palabras para una Tabla de precios.

Mantén el significado.

No elimines condiciones importantes.

IA para revisar claridad de precios

Puedes solicitar:

Revisa estos precios y textos:

[pegar contenido]

Identifica cualquier ambigüedad relacionada con:

- moneda;
- período;
- pago único o recurrente;
- precio "desde";
- promociones;
- condiciones adicionales.

No modifiques los importes.

Propón únicamente mejoras de redacción.

IA para CSS

Por ejemplo:

Estoy trabajando con una Tabla de precios en Waclis.

La sección utiliza:
.precios-section

Las Cards:
.precio-card

La recomendada:
.precio-card-destacada

Necesito:
- tres Cards por fila en desktop;
- una por fila en celular;
- Border radius de 16 px;
- Padding de 28 px;
- sombra suave;
- la Card destacada ligeramente elevada en desktop;
- sin elevación en celular.

No modifiques otras Cards de la Página web.

No agregues JavaScript.

Devuélveme solamente el CSS necesario.

Buenas prácticas para Tabla de precios

Recomendamos:

• utilizarla cuando existan opciones comparables;

• nombrar claramente cada alternativa;

• indicar moneda;

• indicar período;

• utilizar “Desde” solo cuando corresponda;

• utilizar “Consultar” cuando el precio sea personalizado;

• mantener características comparables;

• destacar las diferencias importantes;

• evitar listas excesivamente largas;

• utilizar CTA claros;

• comprobar todas las URLs;

• destacar una opción solamente cuando tenga sentido;

• informar promociones de forma precisa;

• mantener precios y condiciones actualizados;

• adaptar la grilla a cada dispositivo;

• utilizar Navigator antes de clonar o eliminar;

• revisar IDs después de clonar;

• limitar CSS a la sección;

• probar todos los Buttons mediante Ver página.

Errores frecuentes

Utilizar una Tabla de precios cuando no existe nada que comparar

Considera una Card o CTA.

Mostrar solamente un número

Indica moneda y período cuando corresponda.

No aclarar si es mensual o anual

Puede generar confusión.

Mostrar precio mensual cuando el cobro obligatorio es anual sin explicarlo

Aclara la modalidad.

Utilizar “Desde” sin una oferta real en ese valor

Mantén información precisa.

Mostrar un precio fijo cuando en realidad depende completamente del proyecto

Puede ser preferible “Consultar”.

Mezclar monedas sin explicación

Mantén consistencia.

Comparar características diferentes en cada Card

Utiliza una estructura comparable.

Agregar 20 características a cada opción

Prioriza.

Esconder condiciones importantes

Proporciona suficiente contexto.

Destacar una opción con una etiqueta engañosa

Utiliza mensajes apropiados.

Hacer la Card recomendada tan grande que las demás parezcan inaccesibles

Mantén equilibrio.

Utilizar promociones vencidas

Actualiza los importes.

Inventar precios anteriores

Los descuentos deben ser reales.

Clonar solamente el precio

Clona la unidad completa.

Clonar una Card y olvidar la URL

Prueba todos los CTA.

Repetir IDs

Mantén identificadores únicos.

Eliminar Card y dejar una columna vacía

Reorganiza Grid Row.

Mantener cuatro Cards estrechas en celular

Adapta la grilla.

Utilizar Height fijo y cortar contenido

Prefiere estructuras flexibles.

Ocultar características hasta Hover

La comparación debe funcionar también en móvil.

Utilizar CSS global para .card

Limita el scope.

No comprobar los Buttons

Prueba cada acción.

No revisar precios periódicamente

Mantén la información vigente.

Flujo recomendado

1. DEFINIR LAS OPCIONES
↓
2. IDENTIFICAR DIFERENCIAS
↓
3. DEFINIR PRECIOS Y CONDICIONES
↓
4. ELEGIR DISEÑO
↓
5. AGREGAR TABLA DE PRECIOS
↓
6. REVISAR NAVIGATOR
↓
7. MODIFICAR NOMBRES
↓
8. MODIFICAR PRECIOS / PERÍODOS
↓
9. MODIFICAR CARACTERÍSTICAS
↓
10. CONFIGURAR CTA
↓
11. CONFIGURAR LINKS
↓
12. DESTACAR OPCIÓN SI CORRESPONDE
↓
13. REVISAR PROMOCIONES / CONDICIONES
↓
14. ADAPTAR GRID RESPONSIVE
↓
15. GUARDAR CAMBIOS
↓
16. VER PÁGINA
↓
17. PROBAR TODOS LOS CTA

Checklist antes de publicar una Tabla de precios

• Las opciones realmente pueden compararse.

• Cada opción tiene un nombre claro.

• Los precios son correctos.

• La moneda está indicada cuando corresponde.

• El período está indicado.

• Queda claro si el pago es mensual, anual o único.

• “Desde” se utiliza correctamente si existe.

• Las opciones a medida están identificadas claramente.

• Las promociones son reales.

• Las promociones siguen vigentes.

• Los precios anteriores son correctos si se muestran.

• Las condiciones relevantes están aclaradas.

• Las características son comparables.

• El orden de características es consistente.

• No hay listas excesivamente largas.

• La opción destacada está correctamente identificada.

• No utilizo etiquetas promocionales engañosas.

• Los Buttons tienen textos claros.

• Las URLs son correctas.

• Probé todos los CTA.

• Revisé URLs después de clonar.

• Los IDs personalizados son únicos.

• Revisé Navigator.

• Linked styles tiene el alcance esperado.

• Las Cards mantienen una apariencia coherente.

• Desktop se ve correctamente.

• Tablet se ve correctamente.

• Celular se ve correctamente.

• Las Cards se reorganizan correctamente.

• Los precios no se cortan.

• Los Buttons no desbordan.

• No existe scroll horizontal inesperado.

• El contenido puede crecer sin cortarse.

• El CSS personalizado está limitado a esta sección.

• Las animaciones son moderadas.

• Guardé los cambios.

• Revisé el resultado mediante Ver página.

En resumen

La sección Tabla de precios permite presentar diferentes alternativas comerciales de forma ordenada y comparable.

Una estructura habitual puede ser:

PLAN
↓
PRECIO
↓
PERÍODO
↓
DESCRIPCIÓN
↓
CARACTERÍSTICAS
↓
CTA

Por ejemplo:

PROFESIONAL

USD 49 / mes

Para equipos que necesitan herramientas adicionales.

✓ Función A
✓ Función B
✓ Función C

[ ELEGIR PLAN ]

La clave es que el visitante pueda comprender rápidamente:

qué opción existe + cuánto cuesta + qué incluye + cómo continuar.

Recuerda aclarar correctamente:

• moneda;

• período;

• pago único o recurrente;

• precios “desde”;

• promociones;

• alternativas personalizadas.

Si un precio depende completamente del proyecto, puede ser más claro utilizar:

Consultar

o:

Presupuesto personalizado

en lugar de mostrar un importe que pueda interpretarse como fijo.

También mantén las características comparables entre Cards.

En responsive:

Desktop
[ A ] [ B ] [ C ]

puede transformarse en:

Mobile

[ A ]

[ B ]

[ C ]

Utiliza Grid Row para adaptar la distribución y no fuerces varias Cards estrechas en una pantalla pequeña.

Si destacas una opción:

hazlo para orientar, no para impedir comparar las demás.

Y recuerda que precios, descuentos y condiciones son contenidos que pueden quedar desactualizados.

Revísalos periódicamente.

Finalmente:

Guardar Cambios → Ver página → revisar todos los precios → probar todos los CTA.

Una buena Tabla de precios no debería hacer que el visitante trabaje para comprender las diferencias.

Debería hacer exactamente lo contrario:

facilitar la comparación y ayudarlo a elegir la alternativa adecuada.