Convertir columnas en planes de precios con Divi

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 planes de precios de columna GRATIS

Para poner sus manos en el diseño de planes de precios de columna gratis, primero deberá descargarlo usando el botón a continuación. Para obtener acceso a la descarga, deberá suscribirse a nuestro boletín utilizando 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 será «resuscrito» ni recibirá correos electrónicos adicionales.

¡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: #ededed
• 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: 200px
• Relleno inferior: 200px

Agregar nueva fila

Estructura de la columna

Continúe agregando una nueva fila a la sección utilizando 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 del canalón: 1
• Ancho: 80 % (computadora de escritorio y tableta), 90 % (teléfono)
• Ancho máximo: 1400 px (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 gradiente: Radial
• Dirección radial: inferior
• Posición inicial: 31%
• Posición final: 31%

Borde

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

Sombra de la caja

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

• Fuerza de desenfoque de sombra de cuadro: 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.

• Abajo: 100%
• Derecha: 100%

Escala de transformación de desplazamiento

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

• Fondo: 120%
• Derecha: 120%

Traducció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: 34 px (escritorio), 0 px (tableta y teléfono)
• Derecha: 0px

Pasar el cursor Transformar Traducir

Devuelva los valores de traducción de transformación a la normalidad al pasar el mouse.

• Abajo: 0px
• Derecha: 0px

Rotación de transformación predeterminada

Pase a 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)

Pasar el cursor Transformar Girar

Devuelva el valor a ‘0 grados’ al pasar el mouse.

• Izquierda: 0 grados

desbordamientos

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

Cambie el índice z de la columna a través de diferentes tamaños de pantalla a continuación. Esto nos ayudará a mantener el apilamiento en orden.

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

Índice Z flotante

Al pasar el mouse, queremos que la columna aparezca encima de las otras. 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 transiciones.

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

Configuración de la columna 2

¡A por 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 gradiente: Radial
• Dirección radial: inferior
• Posición inicial: 31%
• Posición final: 31%

Borde

Agregue ’20px’ del radio del borde a continuación.

Sombra de la caja

Junto con una sombra de caja sutil.

• Fuerza de desenfoque de sombra de cuadro: 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.

• Fondo: 120%
• Derecha: 120%

desbordamientos

Cambie los desbordamientos horizontales y verticales a continuación.

• 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

Índice Z flotante

Modifique 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 transiciones.

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

Configuración de la columna 3

¡Vamos 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 gradiente: Radial
• Dirección radial: inferior
• Posición inicial: 31%
• Posición final: 31%

Borde

Agregue el radio del borde ’20px’ a continuación.

Sombra de la caja

Junto con una sombra de caja sutil.

• Fuerza de desenfoque de sombra de cuadro: 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 permanezcan en ‘100%’.

• Abajo: 100%
• Derecha: 100%

Escala de transformación de desplazamiento

Modifique estos valores al pasar el mouse.

• Fondo: 120%
• Derecha: 120%

Traducción de transformación predeterminada

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

• Abajo: -34px (Escritorio), 0px (Tableta y Teléfono)
• Derecha: 0px

Pasar el cursor Transformar Traducir

Devuelva los valores a ‘0px’ al pasar el mouse.

• Abajo: 0px
• Derecha: 0px

Rotación de transformación predeterminada

Continúe rotando la columna en su estado predeterminado.

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

Pasar el cursor Transformar Girar

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

• Izquierda: 0 grados

desbordamientos

Asegúrese de que los desbordamientos estén 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

Índice Z flotante

Modifique 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 transiciones.

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

Agregue el 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 de Blurb e inserte un título.

Seleccionar icono

Seleccione un icono a continuación.

Configuración de iconos

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

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

Ajustes de título

Cambie la configuración del texto del título a continuación.

• 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 poco de margen superior también.

• Margen superior: 80px

Agregue el módulo divisor a la columna 1

Visibilidad

En el 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

Pase 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
• Altura: 0px

Espaciado

Por último, agregue un poco de margen superior.

• Margen superior: 50px

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

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

• Fuente del texto: Poppins
• Peso de fuente de 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 márgenes personalizados y valores de relleno.

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

Agregue el Módulo de Texto #2 a la Columna 1

Agregar contenido

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

Configuración de texto

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

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

Espaciado

Agregue también un margen superior e inferior personalizado.

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

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. Introduzca 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: 100px
• Fuente del botón: Poppins
• Peso de la fuente del botón: Negrita

Espaciado

También agregaremos algunos márgenes personalizados y valores de relleno.

• Margen superior: 50px
• Margen inferior: -40px
• Relleno superior: 23px
• Relleno 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 caja.

• Fuerza de desenfoque de sombra de cuadro: 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 iconos y títulos de Blurb

Asegúrese de cambiar los íconos y títulos de la publicidad para cada duplicado.

Cambiar el contenido del módulo de texto

Junto con el contenido del módulo de texto.

Cambiar botó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 hayas completado este paso, ¡habrás 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 columna de Divi. ¡Puede personalizar los planes de precios sin tener que tocar una sola línea de código CSS! Este tutorial solo muestra 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 regalos de Divi, asegúrese de suscribirse  a nuestro boletín de correo electrónico  y  al canal de YouTube  para que siempre sea una de las primeras personas en conocer y obtener los beneficios de este contenido gratuito.