Cómo usar las nuevas estructuras de columnas de Divi para crear impresionantes transiciones de secciones

Cada semana, le proporcionamos paquetes de diseño Divi nuevos y gratuitos que puede usar para su próximo proyecto. Para uno de los paquetes de diseño, también compartimos un caso de uso que lo ayudará a llevar su sitio web al siguiente nivel.

Esta semana, como parte de nuestra iniciativa de diseño Divi en curso , le mostraremos cómo usar las nuevas estructuras de columnas de Divi para crear impresionantes transiciones de sección. Combinaremos diferentes estructuras de columnas con algunas de las opciones integradas de Divi para llevar el diseño de nuestra página al siguiente nivel.

¡Hagámoslo!

Avance

Comencemos por echar un vistazo a los tres ejemplos diferentes que crearemos desde cero usando solo las opciones integradas de Divi. Estos ejemplos se ven igual de bien en tamaños de pantalla más pequeños.

Use la página de inicio del paquete de diseño de artista de maquillaje de Divi

Vamos a utilizar la página de destino del paquete de diseño de maquillador de Divi. Si desea ver el paquete de diseño, vaya a la siguiente publicación de blog . Aunque estamos demostrando este tutorial usando un paquete de diseño específico, también puede usar fácilmente las técnicas en otros diseños.

Sección Transición #1

Agregar nueva sección

Localizar

Abra la página de inicio del paquete de diseño de maquilladores usando Visual Builder de Divi. Luego, agrega una nueva sección regular justo debajo de la sección principal:

Espaciado

Elimine todo el espaciado predeterminado de su sección a continuación:

  • Relleno superior: 0px
  • Relleno inferior: 0px

Agregar nueva fila

Estructura de la columna

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

Dimensionamiento

Aumente el ancho de la fila también:

  • Hacer esta fila de ancho completo: Sí
  • Usar ancho de canalón personalizado: Sí
  • Ancho del canalón: 0

Espaciado

Elimine el relleno superior e inferior predeterminado a continuación:

  • Relleno superior: 0px
  • Relleno inferior: 0px

Filtrar

Para hacer que la fila sea más vibrante, aumente la saturación en la configuración de Filtro:

  • Saturación: 200%

Agregue el módulo divisor #1 a la columna 1

Ocultar divisor

Para crear el primer cuadrado en nuestro diseño, agregaremos un Módulo divisor a la columna 1. Desactive la opción ‘Mostrar divisor’.

Fondo degradado

A continuación, agregue un fondo degradado al módulo divisor:

  • Color 1: rgba(255.255.255,0)
  • Color 2: rgba (176.182.219, 0,34)

Espaciado

Para crear el cuadrado, cambie los valores de Espaciado:

  • Margen superior: -120px
  • Relleno superior: 120px
  • Relleno inferior: 120px

Módulo divisor de clones y lugar en la columna 2

Una vez que haya terminado de modificar el módulo DIvider, clónelo y colóquelo en la segunda columna.

Cambiar fondo degradado

Se deben realizar algunos cambios en este duplicado, comenzando con el fondo degradado:

  • Color 1: rgba (228.237.234, 0,58)
  • Color 2: rgba (255.255.255,0)

Cambiar espaciado

Cambie la configuración de Espaciado también. Esto aumentará la distancia entre este Módulo Divisor y el de la primera columna.

  • Margen superior: 142px
  • Relleno superior: 120px
  • Relleno inferior: 120px

Clonar el módulo divisor n.° 1 dos veces y colocarlo en las columnas 3 y 5

Clone el módulo divisor púrpura dos veces y coloque los duplicados en las columnas 3 y 5.

Clonar el Módulo Divisor #2 y Colocarlo en la Columna 4

Clone el módulo divisor verde también y colóquelo en la columna 4.

Ocultar módulo divisor en las columnas 3, 4 y 5 en tabletas y teléfonos

Módulo divisor abierto en la columna 3

Por supuesto, queremos que estas transiciones de sección se vean igual de bien en tamaños de pantalla más pequeños. Por eso vamos a ocultar algunos de los módulos que hemos usado. Comience abriendo la configuración del módulo divisor en la columna 3.

Ocultar en tableta y teléfono

Vaya a la pestaña Avanzado y deshabilite el módulo en el teléfono y la tableta.

Copiar estilos de visibilidad

También necesitaremos ocultar los divisores en las columnas 4 y 5. Para acelerar el proceso, copie la configuración de visibilidad del divisor en la columna 3:

Pegar estilos de visibilidad

Y péguelos en los módulos divisores en las columnas 4 y 5.

Sección Transición #2

Agregar nueva sección

Localizar

Para crear la transición de la segunda sección, agregue una nueva sección aquí:

Divisor superior

Abra la configuración de la sección y agregue el siguiente divisor superior:

  • Estilo de divisor: Buscar en la lista
  • Color del divisor: #ffffff
  • Altura del divisor: 236px
  • Voltear el divisor: Vertical
  • Disposición de los divisores: en la parte superior del contenido de la sección

Divisor inferior

Del mismo modo, agregue un divisor inferior también:

  • Estilo de divisor: Buscar en la lista
  • Color del divisor: #ffffff
  • Altura del divisor: 236px
  • Disposición de los divisores: en la parte superior del contenido de la sección

Espaciado

Cambie la configuración de Espaciado a continuación:

  • Margen superior: 100px
  • Margen inferior: 100px
  • Relleno superior: 0px
  • Relleno inferior: 0px

Agregar nueva fila

Estructura de la columna

¡Es hora de agregar una fila a la nueva sección! Elija la siguiente estructura de columna:

Dimensionamiento

Sin agregar ningún módulo, abra la configuración de la fila y cambie el ancho:

  • Hacer esta fila de ancho completo: Sí
  • Usar ancho de canalón personalizado: Sí
  • Ancho del canalón: 1

Espaciado

Elimine también todo el relleno superior e inferior predeterminado:

  • Relleno superior: 0px
  • Relleno inferior: 0px

Agregue el módulo divisor #1 a la columna 1

Color de fondo

A continuación, agregue un módulo divisor a la primera columna. Abra su configuración y agregue un color de fondo:

  • Color de fondo: rgba(176,182,219,0.34)

Color del divisor

Cambia también el color del divisor:

  • Color del divisor: #ffffff

Estilo divisor

Luego, vaya a la configuración de Estilos y use el siguiente Estilo de divisor:

  • Estilo divisor: Doble

Peso del divisor

El peso del divisor debe ser el siguiente:

  • Peso del divisor: 18px

Espaciado

Por último, pero no menos importante, aumente el tamaño del Módulo divisor usando un relleno personalizado:

  • Relleno superior: 50px
  • Relleno inferior: 50px

Módulo divisor de clones y lugar en la columna 2

Una vez que haya terminado con el módulo divisor en la primera columna, clónelo y coloque el duplicado en la segunda columna.

Cambiar color de fondo

Cambie el color de fondo de este duplicado en consecuencia:

  • Color de fondo: #e4edea

Clonar módulo divisor n.° 1 y colocar en las columnas 3 y 5

Continúe clonando el módulo divisor púrpura dos veces y colocando los duplicados en las columnas 3 y 5.

Clonar el Módulo Divisor #2 y Colocarlo en la Columna 4

Clone el módulo divisor verde también y coloque el duplicado en la columna 4.

Ocultar módulo divisor en las columnas 3, 4 y 5 en tabletas y teléfonos

Ocultar en tableta y teléfono

Vamos a hacer lo mismo que hicimos para el ejemplo de transición de la primera sección. Abra la configuración del Módulo divisor en la columna 3 y ocúltelo en el teléfono y la tableta.

Copiar estilos de visibilidad

Copie estos estilos de visibilidad.

Pegar estilos de visibilidad

Y péguelos en los módulos divisores en las columnas 4 y 5.

Sección Transición #3

Agregar nueva sección

Localizar

Para agregar la última transición de sección a su página, agregue una nueva sección aquí:

Divisor superior

Abra la configuración de la sección y agregue un divisor superior:

  • Estilo de divisor: Buscar en la lista
  • Color del divisor: #ffffff
  • Altura del divisor: 150px
  • Disposición de los divisores: en la parte superior del contenido de la sección

Divisor inferior

Agregue uno inferior a continuación:

  • Estilo de divisor: Buscar en la lista
  • Color del divisor: #ffffff
  • Altura del divisor: 150px
  • Voltear el divisor: Vertical
  • Disposición de los divisores: en la parte superior del contenido de la sección

Espaciado

Luego, ve a la configuración de Espaciado y haz algunos cambios:

  • Margen superior: 100px
  • Margen inferior: 100px
  • Relleno superior: 0px
  • Relleno inferior: 0px

Agregar nueva fila

Estructura de la columna

La fila que necesitaremos en esta sección tiene la siguiente estructura de columnas:

Dimensionamiento

Sin agregar ningún módulo, abra la configuración de la fila y aumente el ancho de su fila:

  • Hacer esta fila de ancho completo: Sí
  • Usar ancho de canalón personalizado: Sí
  • Ancho del canalón: 1

Espaciado

Elimine todo el relleno superior e inferior predeterminado a continuación:

  • Relleno superior: 0px
  • Relleno inferior: 0px

Agregue el módulo divisor #1 a la columna 1

Ocultar divisor

Continúe agregando un módulo divisor a la primera columna. Deshabilite la opción ‘Mostrar divisor’.

Color de fondo

Agregue un color de fondo al divisor en su lugar:

  • Color de fondo: rgba(176,182,219,0.34)

Espaciado

Aumente el tamaño del módulo utilizando relleno superior e inferior:

  • Relleno superior: 100px
  • Relleno inferior: 100px

Módulo divisor de clones y lugar en la columna 2

Cambiar color de fondo

Clone el módulo divisor en la primera columna y coloque el duplicado en la segunda. Abra su configuración y cambie el color de fondo:

  • Color de fondo: rgba(228,237,234,0.58)

Clonar módulo divisor n.° 1 y colocar en las columnas 3 y 5

Clone el módulo divisor púrpura dos veces y colóquelo en las columnas 3 y 5.

Clonar el Módulo Divisor #2 y Colocarlo en la Columna 4

Clone el módulo divisor verde también y coloque el duplicado en la columna 4.

Ocultar módulo divisor en las columnas 3, 4 y 5 en tabletas y teléfonos

Ocultar en tableta y teléfono

Oculte el módulo divisor en la columna 3 en la tableta y el teléfono.

Copiar estilos de visibilidad

Copie estos estilos de visibilidad.

Pegar estilos de visibilidad

¡Y péguelos en el Módulo divisor en las columnas 4 y 5 y listo!

Avance

Ahora que hemos seguido todos los pasos, echemos un vistazo final a los tres ejemplos diferentes que hemos creado.

Pensamientos finales

En esta publicación de blog de caso de uso, le mostramos cómo usar las nuevas estructuras de columnas de Divi para crear impresionantes transiciones de sección. Este tutorial es parte de nuestra iniciativa de diseño Divi en curso, donde tratamos de poner algo en su caja de herramientas de diseño cada semana. Si tiene alguna pregunta, ¡asegúrese de dejar un comentario en la sección de comentarios a continuación!