Convirtiendo columnas en planes de precios con Divi

Las nuevas opciones de columna de Divi han traído un montón de nuevas posibilidades de diseño a nuestros flujos de trabajo. Ayudan a unir varios módulos sin tener que tocar una sola línea de código CSS. En esta publicación, convertiremos las columnas en planes de precios utilizando solo las opciones integradas de Divi. También jugaremos con las opciones de transformación de desplazamiento de columna para lograr algunos efectos de desplazamiento impresionantes. ¡También podrás descargar el JSON gratis!

Hagámoslo.

Avance

Antes de sumergirnos en el tutorial, echemos un vistazo rápido al resultado en diferentes tamaños de pantalla.

Escritorio

Móvil

Descargue el diseño de los planes de precios de la columna GRATIS

Para tener en sus manos el diseño de planes de precios de columnas gratuitas, primero deberá descargarlo usando el botón a continuación. Para obtener acceso a la descarga, deberá suscribirse a nuestra lista de correo electrónico Divi Daily mediante el formulario a continuación. ¡Como nuevo suscriptor, recibirás aún más bondad Divi y un paquete Divi Layout gratis todos los lunes! Si ya está en la lista, simplemente ingrese su dirección de correo electrónico a continuación y haga clic en descargar. No se le “volverá a suscribir” ni recibirá correos electrónicos adicionales.

Descarga los archivos

Descárgalo gratis

Únase al boletín de Divi y le enviaremos por correo electrónico una copia del último paquete de diseño de página de destino de Divi, además de toneladas de otros recursos, consejos y trucos increíbles y gratuitos de Divi. Síguelo y serás un maestro de Divi en poco tiempo. Si ya está suscrito, simplemente escriba su dirección de correo electrónico a continuación y haga clic en descargar para acceder al paquete de diseño.

DESCARGAR

Te has suscripto satisfactoriamente. ¡Verifique su dirección de correo electrónico para confirmar su suscripción y obtenga acceso a paquetes de diseño Divi semanales gratuitos!

¡Empecemos a recrear!

Suscríbete a nuestro canal de Youtube

Agregar nueva sección

Fondo degradado

Agregue una nueva sección regular a la página en la que está trabajando y abra la configuración de la sección. Vaya a la configuración de fondo y agregue un fondo degradado lineal:

• Color 1: # editado
• Color 2: #ffffff
• Posición inicial: 30%
• Posición final: 30%

Espaciado

También estamos agregando algo de relleno superior e inferior a la sección.

• Relleno superior: 200 px
• Acolchado inferior: 200px

Agregar nueva fila

Estructura de la columna

Continúe agregando una nueva fila a la sección usando la siguiente estructura de columnas:

Dimensionamiento

Sin agregar ningún módulo todavía, abra la configuración de la fila, vaya a la pestaña avanzada y cambie la configuración de tamaño en consecuencia:

• Usar ancho de canalón personalizado: Sí
• Ancho de la canaleta: 1
• Ancho: 80% (escritorio y tableta), 90% (teléfono)
• Ancho máximo: 1400px (escritorio), 90% (tableta), 100% (teléfono)

Configuración de la columna 1

También necesitaremos modificar la configuración de la columna, comenzando con la primera. Abra la configuración de la columna 1.

Fondo degradado

Aplique el siguiente fondo degradado a la columna 1:

• Color 1: # f7f7f7
• Color 2: #ffffff
• Tipo de degradado: radial
• Dirección radial: Inferior
• Posición inicial: 31%
• Posición final: 31%

Frontera

Agregue también un radio de borde '20px' a la columna.

Sombra de la caja

Y para crear algo de profundidad en la página, también agregaremos una sombra de cuadro sutil.

• Fuerza de desenfoque de sombra de caja: 80px
• Color de sombra: rgba (0,0,0,0.11)

Escala de transformación predeterminada

Como puede notar en la vista previa de esta publicación, las columnas se transforman ligeramente. Vaya a la configuración de transformación y asegúrese de que la opción de escala de transformación permanezca '100%' en su estado predeterminado.

• Inferior: 100%
• Derecha: 100%

Escala de transformación de desplazamiento

Modifique los valores de escala de transformación al pasar el mouse.

• Inferior: 120%
• Derecha: 120%

Conversión de transformación predeterminada

También estamos empujando ligeramente la columna hacia la derecha en el escritorio usando la configuración de traducción de transformación. Agregue las siguientes entradas:

• Abajo: 34px (escritorio), 0px (tableta y teléfono)
• Derecha: 0px

Conversión de transformación de desplazamiento

Devuelve los valores de conversión de transformación a la normalidad al pasar el mouse.

• Abajo: 0px
• Derecha: 0px

Transformar Girar por defecto

Continúe con la configuración de rotación de transformación y agregue el siguiente valor a la izquierda:

• Izquierda: 352 grados (escritorio), 0 grados (tableta y teléfono)

Hover Transformar Girar

Devuelva el valor a '0deg' al pasar el mouse.

• Izquierda: 0deg

Desbordes

Más adelante en esta publicación, agregaremos un botón al final de la columna. Ese botón se superpondrá al borde inferior de la columna. Para que esto sea posible, necesitaremos hacer visibles los desbordamientos de nuestra columna.

• Desbordamiento horizontal: visible
• Desbordamiento vertical: visible

Índice Z predeterminado

A continuación, cambie el índice z de la columna en diferentes tamaños de pantalla. Esto nos ayudará a mantener el apilado en orden.

• Índice Z: 9 (escritorio), 11 (tableta y teléfono)

Hover Z Index

Al pasar el mouse, queremos que la columna aparezca encima de las demás. Para que esto suceda, aumentaremos el índice z al pasar el mouse.

• Índice Z: 11

Transiciones

También estamos creando una transición suave al aumentar la duración de la transición en la configuración de las transiciones.

• Duración de la transición: 500 ms

Configuración de la columna 2

¡A la segunda columna! Continúe y abra la configuración de la columna.

Fondo degradado

Aplique la siguiente configuración de fondo degradado:

• Color 1: # fff200
• Color 2: #ffffff
• Tipo de degradado: radial
• Dirección radial: Inferior
• Posición inicial: 31%
• Posición final: 31%

Frontera

A continuación, agregue '20px' de radio del borde.

Sombra de la caja

Junto con una sombra de caja sublte.

• Fuerza de desenfoque de sombra de caja: 50px
• Color de sombra: rgba (0,0,0,0.14)

Escala de transformación predeterminada

La segunda columna es nuestro plan de precios destacado. Para asegurarnos de que esto no pase desapercibido, aumentaremos el tamaño de la columna en la configuración de escala de transformación.

• Abajo: 112% (escritorio), 100% (tableta y teléfono)
• Derecha: 112% (escritorio), 100% (tableta y teléfono)

Escala de transformación de desplazamiento

Modifique los valores de escala de transformación al pasar el mouse.

• Inferior: 120%
• Derecha: 120%

Desbordes

A continuación, cambie los desbordamientos horizontal y vertical.

• Desbordamiento horizontal: visible
• Desbordamiento vertical: visible

Índice Z predeterminado

Luego, vaya a la configuración de visibilidad y aumente el índice z de la columna.

• Índice Z: 10

Hover Z Index

Modifica el índice z al pasar el mouse.

• Índice Z: 12

Transiciones

Y aumente la duración de la transición en la configuración de las transiciones.

• Duración de la transición: 500 ms

Configuración de la columna 3

¡A la tercera y última columna! Abra la configuración de la columna.

Fondo degradado

Vaya a la configuración de fondo y agregue el siguiente fondo degradado:

• Color 1: # f7f7f7
• Color 2: #ffffff
• Tipo de degradado: radial
• Dirección radial: Inferior
• Posición inicial: 31%
• Posición final: 31%

Frontera

A continuación, agregue un radio de borde '20px'.

Sombra de la caja

Junto con una sutil sombra de caja.

• Fuerza de desenfoque de sombra de caja: 80px
• Color de sombra: rgba (0,0,0,0.11)

Escala de transformación predeterminada

¡Es hora de transformar la columna! Asegúrese de que los valores de escala de transformación predeterminados sigan siendo '100%'.

• Inferior: 100%
• Derecha: 100%

Escala de transformación de desplazamiento

Modifique estos valores al pasar el mouse.

• Inferior: 120%
• Derecha: 120%

Conversión de transformación predeterminada

También estamos empujando la columna hacia la izquierda en el escritorio aplicando algunos valores de conversión de transformación personalizados.

• Abajo: -34px (escritorio), 0px (tableta y teléfono)
• Derecha: 0px

Conversión de transformación de desplazamiento

Devuelva los valores a '0px' al pasar el mouse.

• Abajo: 0px
• Derecha: 0px

Transformar Girar por defecto

Continúe girando la columna en su estado predeterminado.

• Izquierda: 8deg (escritorio), 0deg (tableta y teléfono)

Hover Transformar Girar

Cambie el valor de rotación de transformación izquierda de nuevo a '0px' al pasar el mouse.

• Izquierda: 0deg

Desbordes

Asegúrese de que los desbordamientos sean visibles a continuación.

• Desbordamiento horizontal: visible
• Desbordamiento vertical: visible

Índice Z predeterminado

Luego, vaya a la configuración de visibilidad y asegúrese de que el índice z predeterminado sea 9.

• Índice Z: 9

Hover Z Index

Modifica el índice z al pasar el mouse.

• Índice Z: 11

Transiciones

Y aumente la duración de la transición en la configuración de las transiciones.

• Duración de la transición: 500 ms

Agregar módulo Blurb a la columna 1

Añadir título

¡Es hora de comenzar a agregar módulos a la primera columna! Agregue un nuevo módulo Blurb e inserte un título.

Seleccionar icono

Seleccione un icono a continuación.

Configuración de iconos

Vaya a la pestaña de diseño y cambie la configuración del icono en consecuencia:

• Color del icono: # 000000
• Ubicación del icono: Arriba
• Usar tamaño de fuente del icono: Sí
• Tamaño de fuente del icono: 50px

Configuración de título

A continuación, cambie la configuración del texto del título.

• Fuente del título: Poppins
• Alineación del texto del título: centro
• Color del texto del título: # 000000
• Tamaño del texto del título: 27px

Espaciado

Y agregue un margen superior también.

• Margen superior: 80 px

Agregar módulo divisor a la columna 1

Visibilidad

Pasemos al segundo módulo, que es un módulo divisor. Asegúrese de que la opción 'Mostrar divisor' esté habilitada.

• Mostrar divisor: Sí

Línea

Vaya a la pestaña de diseño y cambie el color del divisor a negro.

• Color de línea: # 000000

Dimensionamiento

Modifique también la configuración de tamaño.

• Peso del divisor: 6px
• Ancho: 14%
• Alineación del módulo: centro
• Alto: 0px

Espaciado

Por último, agregue un margen superior.

• Margen superior: 50 px

Agregue el módulo de texto n. ° 1 a la columna 1

Agregar contenido

Continúe agregando un módulo de texto justo debajo del módulo divisor e inserte algún contenido de su elección.

Configuración de texto

Vaya a la pestaña de diseño y cambie la configuración del texto en consecuencia:

• Fuente de texto: Poppins
• Peso de la fuente del texto: Ligero
• Alineación de texto: centro
• Color del texto: # 4f4f4f
• Altura de la línea de texto: 2,3 em

Espaciado

Agregue también algunos valores de margen y relleno personalizados.

• Margen superior: 50 px
• Acolchado superior: 10px
• Acolchado inferior: 10px

Agregue el módulo de texto n. ° 2 a la columna 1

Agregar contenido

Justo debajo del módulo de texto anterior, necesitaremos otro módulo de texto. Ingrese algún contenido de su elección.

Configuración de texto

Vaya a la pestaña de diseño y cambie la configuración del texto en consecuencia:

• Fuente de texto: Poppins
• Peso de la fuente del texto: Pesado
• Alineación de texto: centro
• Color del texto: # 000000
• Tamaño del texto: 47px
• Altura de la línea de texto: 1em

Espaciado

Agregue también un margen superior e inferior personalizado.

• Margen superior: 50 px
• Margen inferior: 80 px

Agregar módulo de botones a la columna 1

Agregar copia

El siguiente y último módulo que necesitamos en la columna 1 es un módulo de botones. Ingrese alguna copia de su elección.

Alineación

Vaya a la pestaña de diseño y cambie la alineación del botón al centro.

• Alineación de botones: centro

Configuración de botones

Dale estilo al botón también.

• Usar estilos personalizados para el botón: Sí
• Tamaño del texto del botón: 17px
• Color del texto del botón: # 000000
• Color de fondo del botón: #FFFFFF
• Ancho del borde del botón: 0px
• Radio del borde del botón: 100 px
• Fuente del botón: Poppins
• Peso de la fuente del botón: negrita

Espaciado

También agregaremos algunos valores de margen y relleno personalizados.

• Margen superior: 50 px
• Margen inferior: -40px
• Acolchado superior: 23px
• Acolchado inferior: 23px
• Relleno izquierdo: 70px
• Relleno derecho: 70px

Sombra de la caja

Y lo completaremos dándole al módulo de botones una sutil sombra de cuadro.

• Fuerza de desenfoque de sombra de caja: 50px
• Color de sombra: rgba (0,0,0,0.3)

Clonar todos los módulos dos veces y colocar duplicados en las columnas restantes

Una vez que haya completado todos los módulos en la columna 1, puede clonarlos dos veces y colocar los duplicados en las dos columnas restantes de la fila.

Cambiar los iconos y títulos de Blurb

Asegúrese de cambiar los íconos de propaganda y los títulos de cada duplicado.

Cambiar el contenido del módulo de texto

Junto con el contenido del módulo de texto.

Botón de cambio n. ° 2

Por último, pero no menos importante, abra el botón en la columna 2 y cambie la configuración del botón. Una vez que haya completado este paso, ¡habrá terminado!

• Color del texto del botón: #FFFFFF
• Color de fondo del botón: # 8300E9

Avance

Ahora que hemos seguido todos los pasos, echemos un vistazo final al resultado en diferentes tamaños de pantalla.

Escritorio

Móvil

Pensamientos finales

En esta publicación, le mostramos cómo convertir columnas en planes de precios utilizando las nuevas opciones de columnas de Divi. ¡Puede personalizar los planes de precios sin tener que tocar una sola línea de código CSS! Este tutorial solo sirve para mostrar cómo las nuevas opciones de columna lo ayudan a unir diferentes módulos en un hermoso diseño. Si tiene alguna pregunta o sugerencia, ¡no dude en dejarla en la sección de comentarios a continuación!

Si está ansioso por aprender más sobre Divi y obtener más obsequios de Divi, asegúrese de suscribirse a nuestro boletín por correo electrónico y al canal de YouTube para que siempre sea una de las primeras personas en conocer y obtener beneficios de este contenido gratuito.