Convertir 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 múltiples módulos sin tener que tocar una sola línea de código CSS. En esta publicación, vamos a convertir 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 sorprendentes. ¡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

planes de precios de columna

Móvil

planes de precios de columna

Descargue el diseño de los planes de precios de la 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 nuestra lista de correo electrónico Divi Daily mediante el siguiente formulario. Como nuevo suscriptor, ¡recibirás aún más bondad Divi y un paquete de diseño Divi 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 "volverá a suscribir" ni recibirá correos electrónicos adicionales.

¡Comencemos a recrearnos!

(incrustar) https://www.youtube.com/watch?v=Gr5HlS8BflU (/ incrustar)

Suscríbase 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: # finalizado
  • Color 2: #ffffff
  • Posición de inicio: 30%
  • Posición final: 30%

planes de precios de columna

Espaciado

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

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

planes de precios de columna

Agregar nueva fila

Estructura de columna

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

planes de precios de columna

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 personalizado: sí
  • Ancho de canal: 1
  • Ancho: 80% (computadora de escritorio y tableta), 90% (teléfono)
  • Ancho máximo: 1400 px (escritorio), 90% (tableta), 100% (teléfono)

planes de precios de columna

Configuración de columna 1

También tendremos que modificar la configuración de la columna, comenzando por la primera. Abra la configuración de la columna 1.

planes de precios de columna

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 de inicio: 31%
  • Posición final: 31%

planes de precios de columna

Frontera

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

planes de precios de columna

Sombra de la caja

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

  • Caja Shadow Blur Fuerza: 80px
  • Color de sombra: rgba (0,0,0,0.11)

planes de precios de columna

Escala de transformación predeterminada

Como puede observar en la vista previa de esta publicación, las columnas están ligeramente transformadas. 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%

planes de precios de columna

Escala de transformación de desplazamiento

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

  • Inferior: 120%
  • Derecha: 120%

planes de precios de columna

Traducción de transformación predeterminada

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

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

planes de precios de columna

Hover Transform Traducir

Haga que los valores de traducción de transformación vuelvan a la normalidad al pasar el mouse por encima.

  • Inferior: 0px
  • Derecha: 0px

planes de precios de columna

Transformación predeterminada Girar

Pase a la configuración de rotación de transformación y agregue el siguiente valor a la izquierda:

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

planes de precios de columna

Desplazar Transformar Girar

Vuelva a colocar el valor en "0deg" al pasar el mouse por encima.

  • Izquierda: 0 grados

planes de precios de columna

Desbordamientos

Más adelante en esta publicación, agregaremos un botón en la parte inferior 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

planes de precios de columna

Í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 apilamiento en orden.

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

planes de precios de columna

Hover Z Index

Al pasar el mouse, queremos que la columna aparezca encima de las otras. Para que esto suceda, aumentaremos el índice z al pasar el ratón por encima.

  • Índice Z: 11

planes de precios de columna

Transiciones

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

  • Duración de transición: 500 ms

planes de precios de columna

Configuración de columna 2

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

planes de precios de 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 de inicio: 31%
  • Posición final: 31%

planes de precios de columna

Frontera

Agregue "20 píxeles" del radio del borde a continuación.

planes de precios de columna

Sombra de la caja

Junto con una sombra de cuadro sublte.

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

planes de precios de columna

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 la escala de transformación.

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

planes de precios de columna

Escala de transformación de desplazamiento

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

  • Inferior: 120%
  • Derecha: 120%

planes de precios de columna

Desbordamientos

Cambie los desbordamientos horizontales y verticales a continuación.

  • Desbordamiento horizontal: visible
  • Desbordamiento vertical: visible

planes de precios de columna

Índice Z predeterminado

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

  • Índice Z: 10

planes de precios de columna

Hover Z Index

Modifique el índice z al pasar el mouse por encima.

  • Índice Z: 12

planes de precios de columna

Transiciones

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

  • Duración de transición: 500 ms

planes de precios de columna

Configuración de columna 3

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

planes de precios de 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 de inicio: 31%
  • Posición final: 31%

planes de precios de columna

Frontera

Agregue un radio de borde de "20 px" a continuación.

planes de precios de columna

Sombra de la caja

Junto con una sutil caja de sombra.

  • Caja Shadow Blur Fuerza: 80px
  • Color de sombra: rgba (0,0,0,0.11)

planes de precios de columna

Escala de transformación predeterminada

¡Hora de transformar la columna! Asegúrese de que los valores de escala de transformación predeterminados permanezcan "100%".

  • Inferior: 100%
  • Derecha: 100%

planes de precios de columna

Escala de transformación de desplazamiento

Modifique estos valores al pasar el mouse por encima.

  • Inferior: 120%
  • Derecha: 120%

planes de precios de columna

Traducción de transformación predeterminada

También estamos empujando la columna hacia la izquierda en el escritorio mediante la aplicación de algunos valores de traducción de transformación personalizados.

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

planes de precios de columna

Hover Transform Traducir

Vuelva a colocar los valores en "0px" al pasar el mouse por encima.

  • Inferior: 0px
  • Derecha: 0px

planes de precios de columna

Transformación predeterminada Girar

Continúe girando la columna en su estado predeterminado.

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

planes de precios de columna

Desplazar Transformar Girar

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

  • Izquierda: 0 grados

planes de precios de columna

Desbordamientos

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

  • Desbordamiento horizontal: visible
  • Desbordamiento vertical: visible

planes de precios de columna

Í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

planes de precios de columna

Hover Z Index

Modifique el índice z al pasar el mouse por encima.

  • Índice Z: 11

planes de precios de columna

Transiciones

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

  • Duración de transición: 500 ms

planes de precios de columna

Agregar módulo de difusión 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.

planes de precios de columna

Seleccionar icono

Seleccione un icono a continuación.

planes de precios de columna

Configuraciones de iconos

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

  • Color del icono: # 000000
  • Colocación del icono: arriba
  • Usar tamaño de fuente de icono: sí
  • Tamaño de fuente del icono: 50 px

planes de precios de columna

Configuraciones 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: 27 px

planes de precios de columna

Espaciado

Y agregue un poco de margen superior también.

  • Margen superior: 80 px

planes de precios de columna

Agregar 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í

planes de precios de columna

Línea

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

  • Color de línea: # 000000

planes de precios de columna

Dimensionamiento

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

  • Divisor de peso: 6px
  • Ancho: 14%
  • Alineación del módulo: centro
  • Altura: 0px

planes de precios de columna

Espaciado

Por último, agregue un poco de margen superior.

  • Margen superior: 50 px

planes de precios de columna

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.

planes de precios de columna

Configuraciones de texto

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

  • Fuente de 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.3em

planes de precios de columna

Espaciado

Agregue algunos márgenes personalizados y valores de relleno también.

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

planes de precios de columna

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.

planes de precios de columna

Configuraciones de texto

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

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

planes de precios de columna

Espaciado

Agregue también algunos márgenes superior e inferior personalizados.

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

planes de precios de columna

Agregar módulo de botón 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.

planes de precios de columna

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

planes de precios de columna

Configuraciones de botones

Dale estilo al botón también.

  • Usar estilos personalizados para el botón: Sí
  • Tamaño del texto del botón: 17 px
  • 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 fuente del botón: negrita

planes de precios de columna

planes de precios de columna

Espaciado

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

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

planes de precios de columna

Sombra de la caja

Y lo completaremos dando al Módulo de botones una sombra de cuadro sutil.

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

planes de precios de columna

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.

planes de precios de columna

Cambiar los iconos y títulos de Blurb

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

planes de precios de columna

Cambiar contenido del módulo de texto

Junto con el contenido del módulo de texto.

planes de precios de columna

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 haya completado este paso, ¡ya está!

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

planes de precios de columna

Avance

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

Escritorio

planes de precios de columna

Móvil

planes de precios de columna

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 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 Divi, asegúrese de Suscríbete a nuestro boletín de correo electrónico y Canal de Youtube así que siempre serás una de las primeras personas en conocer y obtener beneficios de este contenido gratuito.