> ## Documentation Index > Fetch the complete documentation index at: https://help.chateea.com/docs/llms.txt > Use this file to discover all available pages before exploring further. # Elemento tabla de precios > Presenta y compara tus planes con cuadrícula, carrusel o tablas, modelos de precio, descuentos y botones con acción. El elemento **Tabla de precios** (Pricing Table) te permite presentar tus planes, paquetes o niveles de servicio de forma clara y fácil de comparar. Puedes elegir entre varios diseños, usar distintos modelos de precio, destacar descuentos y configurar el botón de cada plan para que lleve al visitante a la acción correcta. Está disponible en los creadores de embudos, sitios web, blogs y tiendas en línea. ## 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 | Modo | Mejor para | Columnas y espaciado | Navegación y animación | | - | - | - | - | | **Cuadrícula** (Grid) | Comparar planes lado a lado en tarjetas | Hasta 5 columnas por fila; separación de 0 a 100 px | Ninguna | | **Carrusel** (Carousel) | Presentar planes por diapositivas y ahorrar espacio vertical | De 1 a 5 columnas por diapositiva | Avance automático, pausa al pasar el cursor, bucle infinito, animación de desvanecer o deslizar | | **Tabla clásica** (Classic) | Listas de características largas y detalladas | Usa todo el ancho | Desplazamiento horizontal con flechas | | **Tabla comparativa** (Comparison) | Comparaciones profundas con muchas columnas | Tablas anchas con columna de encabezado fija | Desplazamiento horizontal con flechas y columna fija para no perder el contexto | > [!TIP] > > Usa **Cuadrícula** para 3 o 4 planes sencillos, **Carrusel** si quieres mostrar los planes por grupos y **Clásica** o **Comparativa** cuando tengas muchas características que no caben en tarjetas. ## Modelos de precio | Modelo | Cuándo usarlo | | - | - | | **Precio fijo** | Pago único | | **Suscripción** | Cobro recurrente diario, semanal, mensual o anual | | **Desde** | Servicios variables ("Desde \$X") | | **Rango** | Servicios personalizables con precio mínimo y máximo | | **Por unidad** | Precio por artículo, hora, día, usuario, persona, etc. | | **Gratis** | Ofertas sin costo (puedes mostrar el precio anterior) | | **Personalizado** | Texto libre para casos especiales | ## 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: | Acción | Uso típico | | - | - | | **Abrir URL** | Llevar al pago o a otra página, interna o externa | | **Abrir ventana emergente** | Mostrar un formulario o un pago en una ventana de la misma página | | **Ir a una sección** | Saltar a otra parte de la página | | **Descargar archivo** | Entregar un folleto o ficha del plan | | **Sin acción** | Planes informativos o no disponibles | 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?** > > En los creadores de embudos, sitios web, blogs y tiendas en línea. > **¿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?** > > 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?** > > Sí. Elige la acción **Abrir ventana emergente** y selecciona la ventana que creaste en esa página. > **¿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?** > > Sí, con los controles de mostrar u ocultar en la configuración del botón. ## Artículos relacionados > **[Varias ventanas emergentes por página](https://help.chateea.com/docs/sitios/varias-ventanas-emergentes-por-pagina.md)** > > Crea la ventana que abrirá el botón de tu plan. > **[Acción Descargar archivo](https://help.chateea.com/docs/sitios/accion-descargar-archivo.md)** > > Entrega archivos con un clic. This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.