Ventajas
- Diseño flexible: cuadrícula, carrusel, tabla clásica o tabla comparativa.
- Comparación clara: desplazamiento horizontal con flechas y columna fija en el modo comparativo.
- Varios modelos de precio: pago único, suscripción, desde, rango, por unidad, gratis o texto libre.
- Señales de conversión: precio anterior tachado, insignias de descuento y leyendas.
- Control de la acción: el botón puede abrir una URL, una ventana emergente, llevar a una sección o descargar un archivo.
- Coherencia de marca: colores, espaciado y separación entre columnas.
- Listo para celular: las columnas se adaptan a pantallas pequeñas.
Cómo configurar la tabla de precios
1
Abre el editor
En el menú lateral, haz clic en Sitios, abre tu embudo o sitio web y haz clic en Editar en la página.
2
Agrega el elemento
Arrastra Tabla de precios desde el panel de elementos al lienzo.
3
Elige el diseño
En la barra de configuración derecha, selecciona Cuadrícula, Carrusel, Clásica o Comparativa.
4
Configura los planes
Define precios, características, botones y estilos de cada plan.
5
Revisa y publica
Revisa la vista de escritorio y de celular, y luego haz clic en Guardar y Publicar.
Modos de diseño
Modelos de precio
Lista de características
- Agrega, reordena o elimina características en cada plan (columna).
- Agrupa las características relacionadas y usa la misma redacción en todos los planes para que sea fácil comparar.
- Si la lista es larga, usa los diseños Clásica o Comparativa.
Funciones de precio inteligente
- Precio anterior tachado para destacar un descuento.
- Insignias de descuento para resaltar promociones.
- Leyendas opcionales para notas de facturación, impuestos o condiciones.
Botones y acciones
El botón de cada plan es donde la comparación se convierte en venta. Puedes configurar estas acciones:
También puedes personalizar el texto del botón (por ejemplo, “Empieza tu prueba gratis”), agregar una leyenda debajo y mostrar u ocultar el botón o la leyenda.
Apariencia y estilo
- Ajusta colores, tipografía, espaciado, bordes y separación entre columnas (0 a 100 px).
- Mantén buen contraste en textos, insignias y botones.
- Usa el mismo relleno en todas las tarjetas para que el diseño se vea estable.
En celulares
- Los diseños de varias columnas pueden reducirse a menos columnas para que se lean bien.
- Las tablas Clásica y Comparativa mantienen el desplazamiento horizontal con flechas.
- En el modo Comparativa, la columna de encabezado sigue fija para que no se pierdan los nombres de los planes.
- Revisa siempre la vista de escritorio y de celular y ajusta el espaciado o la tipografía si hace falta.
Preguntas frecuentes
¿Dónde puedo usar la tabla de precios?
¿Dónde puedo usar la tabla de precios?
En los creadores de embudos, sitios web, blogs y tiendas en línea.
¿Cuántas columnas puedo mostrar a la vez?
¿Cuántas columnas puedo mostrar a la vez?
Hasta 5 por fila en Cuadrícula y de 1 a 5 por diapositiva en Carrusel.
¿Puedo mostrar el precio anterior junto al nuevo?
¿Puedo mostrar el precio anterior junto al nuevo?
Sí. Activa el precio anterior tachado y, si quieres, agrega una insignia de descuento.
¿El botón de un plan puede abrir un formulario o un pago en ventana emergente?
¿El botón de un plan puede abrir un formulario o un pago en ventana emergente?
Sí. Elige la acción Abrir ventana emergente y selecciona la ventana que creaste en esa página.
¿Qué pasa en celulares?
¿Qué pasa en celulares?
Las columnas pueden reducirse y las tablas permiten desplazamiento horizontal con flechas. En el modo comparativo, la columna de encabezado se mantiene visible.
¿Puedo ocultar botones o leyendas?
¿Puedo ocultar botones o leyendas?
Sí, con los controles de mostrar u ocultar en la configuración del botón.
Artículos relacionados
Varias ventanas emergentes por página
Crea la ventana que abrirá el botón de tu plan.
Acción Descargar archivo
Entrega archivos con un clic.