El bloque Tabla de Precios te permite crear tablas de precios avanzadas y visualmente atractivas para mostrar tus productos o servicios. Ya sea que estés presentando planes de suscripción, niveles de servicio o paquetes de productos, este bloque te da control total sobre cómo se muestra cada plan.
Cada tabla de precios incluye un nombre de plan, precio con símbolo de moneda, período de facturación, descripción, precio regular/original opcional, una lista de características y hasta dos botones de llamada a la acción. Usa varios bloques de Tabla de Precios uno al lado del otro para crear una sección de precios completa que ayude a los visitantes a comparar planes y tomar una decisión de compra.
Añadir el Bloque de Tabla de Precios a tus Páginas
Sigue estos pasos para añadir un bloque de Tabla de Precios a tu página de SeedProd:
Paso 1: Añadir el Bloque
En Diseño > Bloques, arrastra y suelta el bloque Tabla de Precios en la sección deseada de tu página.
Paso 2: Configurar los Ajustes de Contenido
Una vez añadido, haz clic en el bloque Tabla de Precios para abrir su configuración. La pestaña Contenido está organizada en un área de configuración principal para la cabecera del plan y los botones, seguida de una sección Lista de Características para los elementos de las características del plan.
Cabecera del Plan:
- Nombre del Plan: Introduce el nombre de tu plan de precios (por ejemplo, Básico, Pro, Empresa). Esto aparece de forma destacada en la parte superior de la tabla de precios.
- Precio: Introduce el precio numérico del plan (por ejemplo, 29). El símbolo de moneda y el período se establecen por separado.
- Símbolo de Moneda: Elige el símbolo de moneda a mostrar de una lista desplegable de monedas comunes, incluyendo Dólar ($), Euro (€), Libra (£), Rupia (₹), Yen (¥) y muchas más. Selecciona Personalizado para introducir cualquier símbolo que necesites en el campo Símbolo Personalizado.
- Posición del Símbolo de Moneda: Establece si el símbolo de moneda aparece Antes o Después del número del precio.
- Período: Introduce el texto del período de facturación que aparece después del precio (por ejemplo, /mes, /año, /usuario). Deja en blanco para mostrar el precio sin período.
- Mostrar Precio Regular: Activa para mostrar un precio original o regular encima del precio actual — útil para mostrar una tarifa con descuento. Cuando esté activado, introduce el importe del Precio Regular y una Etiqueta de Precio Regular (por ejemplo, “Normalmente”) que lo preceda.
- Descripción: Introduce un breve eslogan o descripción para el plan (por ejemplo, “Perfecto para principiantes”). Admite formato básico de texto enriquecido, incluyendo negrita, cursiva, subrayado y enlaces.
Botones:
- Mostrar Botón Superior: Activa para mostrar un botón de llamada a la acción encima de la lista de características. Cuando esté activado, introduce el Texto del Botón Superior, el Enlace del Botón Superior y, opcionalmente, marca Abrir en Nueva Ventana para el enlace. Establece el Radio del Borde del Botón Superior (0–100px) para controlar el redondeo de las esquinas del botón.
- Mostrar botón inferior: Activa esta opción para mostrar un segundo botón de llamada a la acción debajo de la lista de características. Cuando esté habilitado, introduce el Texto del botón inferior, el Enlace del botón inferior y, opcionalmente, marca Abrir en una ventana nueva. Establece el Radio del borde del botón inferior para que coincida con tu diseño.
Lista de características:
- Elementos de características: Cada característica aparece como una fila arrastrable. Arrastra los elementos para reordenarlos. Pasa el ratón sobre un elemento para ver los botones de duplicar y eliminar. Haz clic en el texto de un elemento para expandir su configuración individual.
- Texto: Introduce el texto de la característica para el elemento. Admite formato básico de texto enriquecido, incluyendo negrita, cursiva, subrayado y enlaces.
- Icono: Elige un icono para mostrar junto al texto de la característica usando el selector de iconos. El valor predeterminado es un icono de marca de verificación.
- Añadir nuevo elemento: Haz clic en el botón en la parte inferior de la lista de características para añadir una nueva fila de características.
Paso 3: Personaliza el Diseño
En la pestaña Avanzado, puedes ajustar la tipografía, los colores, los botones y la apariencia general de tu Tabla de Precios. La pestaña Avanzado está organizada en cinco secciones de estilo seguidas de los controles estándar de espaciado y visibilidad.
Encabezado:
- Tipografía del nombre del plan: Establece la familia de fuentes, el tamaño, el grosor y el estilo del texto del nombre del plan.
- Color del nombre del plan: Establece el color del texto del nombre del plan.
- Tipografía del precio normal: Establece la tipografía del texto del precio normal (original) cuando la opción Mostrar precio normal está habilitada.
- Color del precio normal: Establece el color del texto del precio normal.
- Tipografía de la descripción: Establece la tipografía del texto de la descripción del plan.
- Color de la descripción: Establece el color del texto de la descripción.
- Color de fondo: Establece el color de fondo del área del encabezado (nombre del plan, precio y descripción).
- Relleno: Establece el espaciado interior (0–100px) dentro del área del encabezado.
Botones:
- Color del botón superior: Establece el color de fondo del botón superior de llamada a la acción.
- Tamaño del botón superior: Elige el tamaño del botón superior: Pequeño, Mediano, Grande, Extra Grande o 2X Grande.
- Icono antes del texto del botón superior: Añade un icono que aparezca antes del texto de la etiqueta del botón usando el selector de iconos.
- Icono después del texto del botón superior: Añade un icono que aparezca después del texto de la etiqueta del botón usando el selector de iconos.
- Color del botón inferior: Establece el color de fondo del botón inferior de llamada a la acción.
- Tamaño del botón inferior: Elige el tamaño del botón inferior: Pequeño, Mediano, Grande, Extra Grande o 2X Grande.
- Icono antes del texto del botón inferior: Añade un icono que aparezca antes del texto de la etiqueta del botón inferior.
- Icono después del texto del botón inferior: Añade un icono que aparezca después del texto de la etiqueta del botón inferior.
Precio:
- Tipografía del precio: Establece la familia de fuentes, el tamaño, el grosor y el estilo del número de precio principal.
- Color del precio: Establece el color del número de precio principal.
- Tipografía de superíndice de precio: Establece la tipografía para el símbolo de moneda cuando se muestra como superíndice junto al precio.
- Superíndice superior de precio: Ajusta la posición vertical del superíndice del símbolo de moneda en relación con el número del precio.
Lista de características:
- Tipografía de la lista de características: Establece la familia de fuentes, el tamaño, el grosor y el estilo del texto de cada elemento de la característica.
- Color de la lista de características: Establece el color del texto de los elementos de las características.
- Color del icono: Establece el color de los iconos que se muestran junto a cada elemento de la característica.
- Espacio entre: Establece el espaciado (1-100px) entre cada elemento de la característica en la lista.
- Alineación: Establece la alineación horizontal de la lista de características: Izquierda, Centro o Derecha.
- Color de fondo: Establece un color de fondo para el área de la lista de características.
- Relleno: Establece el espaciado interior (0-100px) dentro del área de la lista de características.
Bloque:
- Radio del borde: Establece el redondeo de las esquinas de todo el bloque de tabla de precios (0-100px).
- Estilo del borde: Establece el estilo del borde del bloque: Sólido, Punteado o Discontinuo.
- Color del borde: Establece el color del borde del bloque.
- Ancho del borde: Establece el grosor del borde por lado (Superior, Derecho, Inferior, Izquierdo). Activa el icono de sincronización para aplicar el mismo valor a todos los lados a la vez.
Espaciado:
- Margen: Controla el espaciado exterior alrededor de tu bloque de tabla de precios (Superior, Derecho, Inferior, Izquierdo). Esto determina cuánto espacio aparece entre la tabla y los elementos circundantes en la página.
- Relleno: Ajusta el espaciado interior dentro de tu bloque de tabla de precios (Superior, Derecho, Inferior, Izquierdo). Esto crea espacio entre el contenido de la tabla y los bordes del bloque.
Atributos:
- ID de CSS: Muestra el identificador único generado automáticamente para tu bloque de tabla de precios. Este ID es creado automáticamente por SeedProd para estilos personalizados o para apuntar con JavaScript.
- Clase Personalizada: Agregue clases CSS personalizadas para aplicar estilos específicos de su tema o CSS personalizado.
- Atributos personalizados: Añade cualquier atributo HTML al elemento contenedor del bloque. Introduce cada atributo en una línea nueva usando el formato: nombre-atributo|valor (por ejemplo, data-plan|pro).
Visibilidad del Dispositivo:
- Ocultar en escritorio: Oculta el bloque de tabla de precios en pantallas de escritorio.
- Ocultar en tableta: Oculta el bloque de tabla de precios en dispositivos tableta.
- Ocultar en móvil: Oculta el bloque de tabla de precios en dispositivos móviles.
Efectos de Animación:
- Animación de entrada: Elige entre varios efectos de animación que se reproducen cuando la tabla de precios entra en la vista. Las opciones incluyen Rebote, Fundido de entrada, Zoom de entrada, Girar de entrada y muchas más. Añadir una animación sutil puede ayudar a atraer la atención a tus planes de precios en el momento adecuado.
Paso 4: Guarde sus Cambios
Una vez que hayas terminado de configurar el bloque de tabla de precios y personalizar su apariencia, asegúrate de guardar tu trabajo.
¡Has añadido correctamente un bloque de Tabla de Precios a tu página! Coloca varios bloques de Tabla de Precios uno al lado del otro en un diseño de columna para crear una sección de precios completa que permita a los visitantes comparar planes de un vistazo. Experimenta con los fondos de las cabeceras, los colores de los botones y la tipografía para crear una sección de precios que coincida con tu marca y genere conversiones.