Cómo utilizar las nuevas estructuras de columnas de Divi para crear impresionantes transiciones de sección

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 de Divi en curso, le mostraremos cómo utilizar las nuevas estructuras de columnas de Divi para crear transiciones de sección impresionantes. 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 echando un vistazo a los tres ejemplos diferentes que crearemos desde cero usando solo las opciones integradas de Divi. Estos ejemplos se ven igualmente bien en tamaños de pantalla más pequeños.

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

Vamos a utilizar la página de inicio del paquete de diseño de artista de maquillaje de Divi. Si desea consultar el paquete de diseño, vaya a la siguiente publicación del 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.

Transición de sección # 1

Agregar nueva sección

Localizar

Abra la página de inicio del paquete de diseño del artista de maquillaje utilizando Visual Builder de Divi. Luego, agregue una nueva sección regular justo debajo de la sección de héroe:

Espaciado

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

• Relleno superior: 0px
• Acolchado 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 también el ancho de la fila:

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

Espaciado

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

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

Filtrar

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

• Saturación: 200%

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

Ocultar divisor

Para crear el primer cuadrado en nuestro diseño, vamos a agregar 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: 120 px
• Acolchado inferior: 120px

Clonar el módulo divisor y colocarlo 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

Es necesario 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 también la configuración de Espaciado. Esto aumentará la distancia entre este módulo divisor y el de la primera columna.

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

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 n. ° 2 y colocarlo en la columna 4

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

Ocultar el módulo divisor en las columnas 3, 4 y 5 en la tableta y el teléfono

Módulo divisor abierto en la columna 3

Por supuesto, queremos que estas transiciones de sección se vean igualmente bien en tamaños de pantalla más pequeños. Por eso vamos a ocultar algunos de los módulos que hemos utilizado. 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 desactive 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égalos en los módulos divisores de las columnas 4 y 5.

Transición de sección # 2

Agregar nueva sección

Localizar

Para crear la segunda transición de 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
• Flip divisor: Vertical
• Disposición del divisor: encima 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 del divisor: encima del contenido de la sección

Espaciado

A continuación, cambie la configuración de espaciado:

• Margen superior: 100 px
• Margen inferior: 100 px
• Relleno superior: 0px
• Acolchado 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 columnas:

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 de la canaleta: 1

Espaciado

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

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

Agregue el módulo divisor n. ° 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

Cambie 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 del 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 utilizando un relleno personalizado:

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

Clonar el módulo divisor y colocarlo 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 el color de fondo

Cambie el color de fondo de este duplicado en consecuencia:

• Color de fondo: # e4edea

Clonar el módulo divisor n. ° 1 y colocarlo 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 n. ° 2 y colocarlo en la columna 4

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

Ocultar el módulo divisor en las columnas 3, 4 y 5 en la tableta y el teléfono

Ocultar en tableta y teléfono

Haremos lo mismo que hicimos con 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égalos en los módulos divisores de las columnas 4 y 5.

Transición de secció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: 150 px
• Disposición del divisor: encima del contenido de la sección

Divisor inferior

Agregue uno de abajo a continuación:

• Estilo de divisor: Buscar en la lista
• Color del divisor: #ffffff
• Altura del divisor: 150 px
• Flip divisor: Vertical
• Disposición del divisor: encima del contenido de la sección

Espaciado

Luego, vaya a la configuración de Espaciado y realice algunos cambios:

• Margen superior: 100 px
• Margen inferior: 100 px
• Relleno superior: 0px
• Acolchado 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 de la canaleta: 1

Espaciado

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

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

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

Ocultar divisor

Continúe agregando un módulo divisor a la primera columna. Desactive la opción 'Mostrar divisor'.

Color de fondo

En su lugar, agregue un color de fondo al divisor:

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

Espaciado

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

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

Clonar el módulo divisor y colocarlo en la columna 2

Cambiar el 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 el módulo divisor n. ° 1 y colocarlo en las columnas 3 y 5

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

Clonar el módulo divisor n. ° 2 y colocarlo en la columna 4

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

Ocultar el módulo divisor en las columnas 3, 4 y 5 en la tableta y el teléfono

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égalos 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 casos de uso, le mostramos cómo usar las nuevas estructuras de columnas de Divi para crear transiciones de sección sorprendentes. 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 todas las semanas. Si tiene alguna pregunta, asegúrese de dejar un comentario en la sección de comentarios a continuación.