Cómo crear tablas de precios horizontales con Divi

Las tablas de precios horizontales son una excelente manera de promocionar productos con muchas características. Y, con el nuevo diseño de cinco columnas de Divi, esto es sorprendentemente fácil de hacer. Sin embargo, al igual que con cualquier diseño que tenga cinco o más columnas, el desafío consiste en hacer que el diseño sea receptivo para que también se vea bien en dispositivos móviles. En este tutorial, le mostraré cómo crear tablas de precios horizontales que se vean geniales en todos los dispositivos. E incluso le mostraré lo fácil que es duplicar sus tablas de precios horizontales y usar nuevas funciones de diseño como "buscar y reemplazar" para cambiar rápidamente el esquema de color de cada una de sus tablas con unos pocos clics.

Empecemos.

Vistazo

Empezando

Para este tutorial, todo lo que necesitará es Divi. Y usaremos Visual Builder. Dado que crearemos las tablas desde cero, deberá crear una nueva página, implementar el constructor visual y luego seleccionar la opción "Crear diseño desde cero".

Después de eso, estará listo para comenzar. ¡Vamos a hacerlo!

Configuración de la fila de cinco columnas para sus tablas de precios horizontales

Para empezar, demos un diseño de cinco columnas a la sección que ya nos espera en el constructor visual.

Antes de comenzar a agregar módulos, actualice la configuración de la sección para tener un ancho personalizado sin ningún relleno superior o inferior.

Ancho: 1200px
Alineación de la sección: centro
Relleno personalizado: 0px superior, 0px inferior

Luego, vaya a la configuración de la fila para darle rápidamente un color de fondo a su fila y también a las tres columnas del medio de la siguiente manera:

Color de fondo: # 00cbc9
Color de fondo de la columna 2: # 00cbc9
Color de fondo de la columna 3: #eeeeee
Color de fondo de la columna 4: #eeeeee

Luego actualice el tamaño de la siguiente manera:

Hacer esta fila de ancho completo: SÍ
Ancho de la canaleta: 1
Ecualizar alturas de columna: SÍ

Tendremos que volver a la configuración de las filas en un momento para actualizar el espaciado, pero por ahora comencemos a agregar los anuncios a cada una de nuestras columnas para el contenido.

Llenar las columnas con módulos de contenido

El título del producto

En la primera columna, agregue un módulo de texto con el siguiente encabezado en el cuadro de contenido (debajo de la pestaña de texto):

<h2>Starter</h2>

Esto servirá como lugar para el título de su plan o producto que presenta. En este ejemplo, este sería un plan de “inicio” de algún tipo.

Luego actualice la siguiente configuración de diseño:

Estilo de fuente del título 2: TT
Color del texto del encabezado 2: #ffffff
Tamaño del texto del encabezado 2: 38px
Relleno personalizado (escritorio): 90% superior, 90% inferior, 10% a la izquierda
Relleno personalizado (tableta): 30% superior, 30% inferior

Agregar desenfoques para los títulos de las categorías de funciones

En la segunda columna, agregue un módulo de propaganda. Luego elimine el texto de relleno en el cuadro de contenido y deje solo el texto del Título. Luego, elija usar un ícono en lugar de una imagen y actualice el ícono con uno de su elección.

Vaya a la pestaña de diseño y actualice el resto de la configuración de la siguiente manera:

Color del icono: # 00cbc9
Ubicación de la imagen / icono: Izquierda
Tamaño del texto del título: 16px
Acolchado personalizado: parte inferior 2vw
Ancho del borde de la fila inferior: 4px
Color del borde inferior: #cccccc

Dado que este diseño de propaganda se utilizará como título de categoría de características en las columnas 2, 3 y 4, puede copiar el módulo de propaganda y pegarlo en la segunda y tercera columna.

Me doy cuenta de que el espaciado no se ve muy bien en este momento. Y es posible que tenga la tentación de agregar algo de espacio a nivel de módulo, pero para este diseño, me resulta más fácil hacer ajustes de espacio a nivel de columna (debajo de la configuración de fila). Llegaremos a eso más tarde.

Agregar módulos de texto para obtener una lista de descripciones de funciones

Siguiente Agregue un módulo de texto debajo de la propaganda en la segunda columna. Luego agregue el siguiente código html de la tabla en el cuadro de contenido:

• la descripción de la función va aquí.
• la descripción de la función va aquí.
• la descripción de la función va aquí.
• la descripción de la función va aquí.

Tipo de estilo de lista desordenada: Cuadrado
Sangría de elemento de lista desordenado: 4px
Relleno personalizado: 20 píxeles en la parte superior, 20 píxeles en la parte inferior, 5% a la izquierda, 5% a la derecha

Ahora, como hicimos con los anuncios publicitarios, siga adelante, copie el módulo de texto y péguelo debajo de cada uno de los módulos publicitarios en las columnas 3 y 4.

Agregar el precio y el botón a la última columna

En la última columna (Columna cinco), usaré un módulo de tabla de precios para obtener el diseño del texto de precios con el signo de dólar. Esto es todo lo que realmente necesitamos del módulo de tablas de precios, por lo que eliminaré el resto del contenido y los elementos de diseño, dejando el texto de precios y el signo de dólar. Podría usar el botón que se incluye con el módulo de tablas de precios, pero esto fue un poco más difícil de hacer algo de magia receptiva en la tableta (verá lo que quiero decir más adelante). Entonces también usaré un módulo de botones.

Continúe y agregue el Módulo de tablas de precios a la quinta columna. Elimine una de las dos tablas que se incluyen de forma predeterminada haciendo clic en el icono de la papelera a la derecha de una de ellas.

Luego, elimine el color de fondo agregando un código de color completamente transparente.

Color de fondo: rgba (255,255,255,0)

Luego actualice lo siguiente:

Color de fondo del encabezado de la tabla: rgba (255,255,255,0)
Color de texto de moneda y frecuencia: #ffffff
Tamaño del texto de moneda y frecuencia: 30 px
Precio del color del texto: #ffffff
Ancho del borde: 0px
Margen personalizado (tableta): -100% a la derecha
Margen personalizado (smartphone): 0% a la derecha
Relleno personalizado: 0px superior, 10px inferior, 0px izquierda, 0px derecha

Ahora vaya a la configuración de la mesa individual haciendo clic en el icono de engranaje a la izquierda del menú de visualización de la mesa individual.

Ahora elimine el contenido predeterminado para el título, subtítulo y contenido. Esto dejará solo la moneda y el texto del precio.

Ahora sé lo que estás pensando en este momento. ¿Qué hacer con esa línea fronteriza debajo del texto del precio? Bueno, hay un pequeño fragmento de CSS personalizado para eso. Vaya a la pestaña avanzada y agregue el siguiente CSS al cuadro de entrada Pricing Top:

Precio superior:

border: none;

¡Así es como puede destripar con éxito la tabla de precios solo para el texto de precios y el símbolo de moneda!

Para el botón, agregue un módulo de botón debajo del módulo de tablas de precios y actualice lo siguiente:

Alineación de botones: centro
Color del texto: claro
Margen personalizado (tableta): -100% a la derecha
Margen personalizado (smartphone): 0% a la derecha

El margen personalizado coincidirá con el margen que agregamos al módulo de tablas de precios para obtener un módulo de ancho completo en la tableta. Dado que el diseño de cinco columnas en la tableta colocará la quinta columna en el lado izquierdo de un diseño de dos columnas, tirar del módulo un -100% hacia la derecha forzará el módulo a la anchura total de la fila.

Agregar el diseño de flecha y el espaciado de columna receptivo

Agregar la flecha mediante capas de degradados

Para crear el efecto de diseño de flecha en la primera columna, colocaremos dos fondos degradados en capas. El primer fondo degradado se agregará a nivel de columna. Agregaremos el siguiente más adelante a nivel de módulo.

Para agregar el fondo degradado, vaya a la configuración de la fila y agregue lo siguiente:

Columna 1 Fondo degradado Color izquierdo: rgba (255,255,255,0)
Color de fondo degradado de la columna 1: #eeeeee (debe coincidir con el color de fondo de la columna 2)
Dirección del gradiente: -245 grados
Posición inicial: 75%
Posición final: 0%

Guarde la configuración y vaya a la configuración del módulo de texto en la columna uno. Aquí es donde agregaremos la segunda capa de degradado de fondo para completar la flecha. Actualice lo siguiente:

Columna 1 Gradiente Color de fondo a la izquierda: #eeeeee
Columna 1 Fondo degradado Color derecho: rgba (255,255,255,0)
Dirección del gradiente: 245 grados
Posición inicial: 25%
Posición final: 0%

Observe que los valores son igualmente opuestos entre sí. Por ejemplo, el orden de los colores ha cambiado, los 245 grados cambió de negativo a positivo y el 75% ahora es el 25% (la diferencia). Así es como se consigue que los lados de la punta de la flecha sean perfectamente simétricos.

Espaciado de filas y columnas

Regrese a la configuración de la fila y ajustemos el espaciado de nuestra Fila y Columnas actualizando lo siguiente:

Relleno personalizado: 0px arriba, 0px abajo, 0px izquierda, 0px derecha
Relleno personalizado 2: 5% arriba, 5% abajo, 2% izquierda, 2% derecha
Relleno personalizado 3: 5% arriba, 5% abajo, 2% izquierda, 2% derecha
Relleno personalizado 4: 5% arriba, 5% abajo, 2% izquierda, 2% derecha
Relleno personalizado 5: 10% superior, 10% inferior

Quizás se pregunte por qué no utilicé un ancho de 2 canaletas y terminé con él. Bueno, eso es porque quería maximizar el espacio dentro de las columnas que contienen texto tanto como sea posible para mejorar la legibilidad en todos los dispositivos. Cada pequeño espacio que podamos ahorrar importa. Es por eso que los márgenes entre columnas se crean con porcentajes de relleno izquierdo y derecho.

Duplicar la tabla para nuevas tablas y combinaciones de colores

Obviamente, querrá tener varias tablas de precios horizontales para que los usuarios las comparen. Para crear la segunda tabla de precios, duplique toda la sección que contiene la primera tabla que creó.

Luego, abra la configuración de Fila, coloque el cursor sobre el color de fondo y haga clic en buscar y reemplazar.

En "Dentro de", elija "Esta sección".
En "Reemplazar ancho", agregue el color: # f84f51
Luego marque la casilla para Reemplazar todos los valores encontrados en la sección (no solo el color de fondo).

Luego haga clic en Reemplazar y observe cómo sucede la magia. Esta es una forma rápida y sencilla de cambiar todas las instancias del color anterior por un nuevo color.

No olvide guardar la configuración de la fila antes de salir para guardar los cambios.

Ahora tiene una nueva tabla con una nueva combinación de colores.

Repita este proceso nuevamente para agregar otra tabla con el color: # bdc958

Hacer una tabla destacada

Para que una de sus tablas se vea destacada y se destaque un poco, puede agregar una sombra de cuadro a la sección que sostiene la tabla, así como cambiar el color gris utilizado para los fondos y degradados de las columnas a un bonito color blanco.

Para hacer esto, vaya a la configuración de la sección para la segunda sección (la del medio) y actualice lo siguiente:

Box Shadow: ver captura de pantalla
Posición vertical de la sombra del cuadro: 0px
Fuerza de desenfoque de sombra de caja: 80px

Para reemplazar el color de fondo gris, vaya a la configuración de la fila y busque el color de fondo de la columna 2 (#eeeeee). Haga clic derecho sobre él y haga clic en "buscar y reemplazar". La actualización lo siguiente:

En "Dentro de", elija "Esta sección".
En "Reemplazar ancho", agregue el color: #ffffff
Luego marque la casilla para Reemplazar todos los valores encontrados en la sección (no solo el color de fondo).
Luego haga clic en "Reemplazar".

Uso de Buscar y reemplazar para probar fuentes

Si desea utilizar una fuente diferente en toda la tabla, puede probar fácilmente diferentes mediante la función "Buscar y reemplazar". A propósito, dejé la fuente predeterminada para todos los módulos para que este proceso sea sencillo. Para cambiar la fuente de toda la página de tablas, todo lo que necesita hacer es abrir la configuración del módulo de texto en la primera columna de cualquier sección de la tabla (en realidad, puede ser cualquier módulo que use la fuente predeterminada en su página). A continuación, haga clic con el botón derecho en la fuente del título 2 que se está utilizando y seleccione "Buscar y reemplazar". Luego actualice lo siguiente:

En "Dentro", mantenga "Esta página".
En "Reemplazar ancho", seleccione una fuente (estoy usando Roboto Condensed).
Luego marque la casilla para Reemplazar todos los valores encontrados en la sección (o no podría marcarla para reemplazar todas las fuentes h2).
Luego haga clic en "Reemplazar".

Ahora se han cambiado todas las fuentes en toda la página.

¡Eso es todo! Ahora las tablas de precios horizontales están completas.

Veamos el resultado.

El ajuste de cinco columnas en la tableta y el teléfono inteligente también funciona a la perfección.

Pensamientos finales

El diseño de cinco columnas de Divi, junto con las potentes funciones de diseño disponibles en Visual Builder, le permiten crear hermosas tablas de precios horizontales. Y ajustar los colores y las fuentes mediante Buscar y reemplazar es un gran ahorro de tiempo, mejorando aún más el proceso de diseño. Espero que el tutorial le resulte tanto informativo como inspirador.

Espero tener noticias tuyas en los comentarios.

¡Salud!