El bloque «Tabla de precios» te permite crear tablas de precios avanzadas y visualmente atractivas para mostrar tus productos o servicios. Tanto si presentas planes de suscripción, niveles de servicio o paquetes de productos, este bloque te ofrece un control total sobre cómo se muestra cada plan.
Cada tabla de precios incluye el nombre del plan, el precio con el símbolo de la moneda, el periodo de facturación, la descripción, el precio normal/original opcional, una lista de características y hasta dos botones de llamada a la acción. Utiliza varios bloques de tabla de precios uno al lado del otro para crear una sección completa de precios que ayude a los visitantes a comparar planes y tomar una decisión de compra.
Añadir el bloque «Tabla de precios» a tus páginas
Siga estos pasos para añadir un bloque de tabla de precios a su página 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 el encabezado y los botones del plan, seguida de una sección «Lista de características» para los elementos característicos del plan.
Encabezado del plan:
- Nombre del plan: Introduzca el nombre de su plan de precios (por ejemplo, Básico, Pro, Empresa). Este aparecerá destacado en la parte superior de la tabla de precios.
- Precio: Introduzca el precio numérico del plan (por ejemplo, 29). El símbolo de la moneda y el período se establecen por separado.
- Símbolo monetario: elija el símbolo monetario que desea mostrar en un menú desplegable con las monedas más comunes, como el dólar ($), el euro (€), la libra esterlina (£), la rupia (₹), el yen (¥) y muchas más. Seleccione Personalizado para introducir cualquier símbolo que necesite en el campo Símbolo personalizado.
- Posición del símbolo de moneda: Establezca si el símbolo de moneda aparece antes o después del número del precio.
- Periodo: Introduzca el texto del periodo de facturación que aparece después del precio (por ejemplo, /mes, /año, /usuario). Déjelo en blanco para mostrar el precio sin periodo.
- Mostrar precio normal: Actívelo para mostrar el precio original o normal por encima del precio actual, lo cual resulta útil para mostrar una tarifa con descuento. Cuando esté activado, introduzca el importe del precio normal y una etiqueta de precio normal (por ejemplo, «Normalmente») que lo preceda.
- Descripción: Introduzca un eslogan breve o una descripción del plan (por ejemplo, «Perfecto para principiantes»). Admite formato de texto enriquecido básico, incluyendo negrita, cursiva, subrayado y enlaces.
Botones:
- Mostrar botón superior: Actívelo para mostrar un botón de llamada a la acción encima de la lista de características. Cuando esté habilitado, introduzca el texto del botón superior, el enlace del botón superior y, opcionalmente, marque Abrir en una ventana nueva para el enlace. Establezca el radio del borde del botón superior (0-100 píxeles) para controlar el redondeo de las esquinas del botón.
- Mostrar botón inferior: Actívelo para mostrar un segundo botón de llamada a la acción debajo de la lista de características. Cuando esté habilitado, introduzca el texto del botón inferior, el enlace del botón inferior y, opcionalmente, marque la casilla Abrir en una ventana nueva. Establezca el radio del borde del botón inferior para que coincida con su diseño.
Lista de características:
- Elementos destacados: cada elemento destacado aparece como una fila que se puede arrastrar. Arrastra los elementos para reordenarlos. Pasa el cursor por encima de un elemento para mostrar los botones de duplicar y eliminar. Haz clic en el texto de un elemento para ampliar su configuración individual.
- Texto: Introduzca el texto descriptivo del artículo. Admite formato de texto enriquecido básico, incluyendo negrita, cursiva, subrayado y enlaces.
- Icono: Elige un icono para mostrar junto al texto de la función utilizando el selector de iconos. El icono predeterminado es una marca de verificación.
- Añadir nuevo elemento: Haga clic en el botón situado en la parte inferior de la lista de características para añadir una nueva fila de características.
Paso 3: Personalizar el diseño
En la pestaña Avanzado, puedes ajustar la tipografía, los colores, los botones y el aspecto 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: Establezca la familia, el tamaño, el grosor y el estilo de la fuente para el texto del nombre del plan.
- Color del nombre del plan: Establece el color del texto del nombre del plan.
- Tipografía del precio normal: Establezca la tipografía para el 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.
- Descripción Tipografía: Establezca la tipografía para el 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 espacio interior (0-100 píxeles) 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: Elija el tamaño del botón superior: pequeño, mediano, grande, extragrande o 2X grande.
- Icono antes del texto del botón superior: añade un icono que aparecerá antes del texto de la etiqueta del botón utilizando el selector de iconos.
- Icono superior después del texto del botón: Añade un icono que aparecerá después del texto de la etiqueta del botón utilizando el selector de iconos.
- Color del botón inferior: Establece el color de fondo del botón de llamada a la acción inferior.
- Tamaño del botón inferior: Elija el tamaño del botón inferior: pequeño, mediano, grande, extragrande o 2X grande.
- Icono del botón inferior antes del texto: añade un icono que aparece antes del texto de la etiqueta del botón inferior.
- Icono debajo del botón inferior: Añade un icono que aparece debajo del texto de la etiqueta del botón inferior.
Precio:
- Tipografía del precio: Establezca la familia, el tamaño, el grosor y el estilo de la fuente para el número principal del precio.
- Color del precio: Establece el color del número principal del precio.
- Tipografía del superíndice del precio: Establece la tipografía del símbolo de la moneda cuando se muestra como superíndice junto al precio.
- Índice superior del precio: Ajusta la posición vertical del índice superior del símbolo de la moneda en relación con el número del precio.
Lista de características:
- Lista de características Tipografía: Establece la familia, el tamaño, el grosor y el estilo de la fuente para todo el texto de los elementos de las características.
- Lista de características Color: Establece el color del texto de los elementos de la característica.
- Color del icono: Establece el color de los iconos que se muestran junto a cada elemento de la función.
- Espacio entre: Establece el espaciado (1-100 píxeles) entre cada elemento destacado de la lista.
- Alineación: Establezca la alineación horizontal de la lista de características: izquierda, centrada o derecha.
- Color de fondo: Establece un color de fondo para el área de la lista de características.
- Relleno: Establece el espacio interior (0-100 píxeles) dentro del área de la lista de características.
Bloque:
- Radio del borde: establece el redondeo de las esquinas de todo el bloque de la tabla de precios (0-100 píxeles).
- Estilo del borde: Establece el estilo del borde del bloque: continuo, punteado o discontinuo.
- Color del borde: Establece el color del borde del bloque.
- Ancho del borde: Establece el grosor del borde por cada 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 espacio exterior alrededor del bloque de la 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 espacio interior dentro del bloque de la tabla de precios (arriba, derecha, abajo, izquierda). Esto crea un espacio entre el contenido de la tabla y los bordes del bloque.
Atributos:
- ID CSS: muestra el identificador único generado automáticamente para tu bloque de tabla de precios. SeedProd crea este ID automáticamente para personalizar el estilo o la orientación de JavaScript.
- Clase personalizada: añade clases CSS personalizadas para aplicar estilos específicos de tu tema o CSS personalizado.
- Atributos personalizados: añade cualquier atributo HTML al elemento contenedor del bloque. Introduce cada atributo en una nueva línea utilizando el formato: nombre-del-atributo|valor (por ejemplo, plan-de-datos|pro).
Visibilidad del dispositivo:
- Ocultar en el escritorio: Ocultar el bloque de la tabla de precios en las pantallas de escritorio.
- Ocultar en tableta: Ocultar el bloque de la tabla de precios en dispositivos tablet.
- Ocultar en dispositivos móviles: Ocultar el bloque de la tabla de precios en dispositivos móviles.
Efectos de animación:
- Animación de entrada: elija entre varios efectos de animación que se reproducen cuando la tabla de precios aparece en pantalla. Las opciones incluyen rebote, fundido de entrada, zoom, rotación y muchas más. Añadir una animación sutil puede ayudar a llamar la atención sobre sus planes de precios en el momento adecuado.
Paso 4: Guarde los cambios
Una vez que haya terminado de configurar el bloque «Tabla de precios» y de personalizar su apariencia, asegúrese de guardar su 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 una disposición en columna para crear una sección de precios completa que permita a los visitantes comparar los planes de un vistazo. Experimenta con los fondos de los encabezados, los colores de los botones y la tipografía para crear una sección de precios que se adapte a tu marca y fomente las conversiones.