Cómo crear hermosas transiciones de sección con las nuevas funciones de diseño de Divi

En este tutorial de Divi, le mostraremos cómo crear hermosas transiciones de sección utilizando nada más que las opciones integradas de Divi.

Las secciones son la base de todo el contenido que comparte en su sitio web. Cada sección es un capítulo y pasar de una sección a otra es parte del proceso de narración. Hacer esta transición lo más suave posible enfatizará el mensaje que está tratando de articular. Para ayudarlo con eso, le mostraremos cómo puede crear hermosas transiciones de sección para su próximo proyecto de sitio web.

Vistazo

Antes de sumergirnos en todas las diferentes transiciones de sección individualmente, echemos un vistazo a lo que puede esperar:

Cómo crear hermosas transiciones de sección con las nuevas funciones de diseño de Divi

Suscríbete a nuestro canal de Youtube

Recrear secciones

Comenzaremos recreando las dos secciones que usaremos en todos los ejemplos. En estas dos secciones, hemos utilizado el relleno necesario para aprovechar al máximo las transiciones. Sin embargo, si está utilizando secciones con una altura diferente, es posible que tenga que ajustar ligeramente los fondos degradados que se están utilizando para que coincidan perfectamente con las secciones.

Crear primera sección

Comience creando la primera sección estándar y eligiendo una fila de ancho completo.

Configuración de la sección

Necesitaremos un relleno superior e inferior de '300px' que puede agregar dentro de la subcategoría Espaciado de la pestaña Diseño.

Primer módulo de texto

Luego, agregaremos un módulo de texto a nuestra fila de ancho completo. Escriba el texto que desea que aparezca y vaya a la pestaña Diseño. Dentro de la pestaña Diseño, use la siguiente configuración para la subcategoría Texto:

• Fuente de texto: Comfortaa
• Tamaño de fuente de texto: 50
• Altura de la línea de texto: 1.7em
• Orientación del texto: centro

Segundo módulo de texto

Haga lo mismo para el segundo módulo de texto, pero use la siguiente configuración en su lugar:

• Fuente de texto: Comfortaa
• Tamaño de fuente de texto: 16
• Altura de la línea de texto: 1.7em
• Orientación del texto: centro

Módulo de botones

Por último, también agregaremos un módulo de botones. Comience eligiendo la alineación central en la pestaña Diseño.

Luego, abra la subcategoría Botón, habilite la opción 'Usar estilos personalizados para el botón' y elija '20' como Tamaño del texto del botón.

Mientras todavía está en la subcategoría Botón, use el siguiente fondo degradado para el botón:

• Primer color: # 2b87da
• Segundo color: # 29c4a9
• Tipo de degradado: lineal
• Dirección del gradiente: 162 grados
• Posición inicial: 0%
• Posición final: 100%

Crear segunda sección

Agregue otra sección estándar, pero elija una fila de tres columnas en su lugar.

Configuración de la sección

La segunda sección hará uso de un relleno de '300px' para la parte superior e inferior también.

Módulo de propaganda

A continuación, agregaremos un módulo Blurb a la primera columna de la fila. Una vez que haya decidido el texto que desea que aparezca, desplácese hacia abajo en la pestaña Contenido, habilite la opción 'Usar icono' y seleccione un icono.

Una vez que haya hecho eso, pase a la pestaña Diseño y use la siguiente configuración para la Subcategoría de iconos:

• Color del icono: # 515151
• Ubicación de la imagen / icono: parte superior
• Usar tamaño de fuente del icono: Sí
• Tamaño de fuente del icono: 55px

Luego, asegúrese de que la siguiente configuración se aplique a la subcategoría Texto del encabezado:

• Fuente de encabezado: Comfortaa
• Alineación del texto del encabezado: centro
• Tamaño de fuente del encabezado: 18

Y, por último, estas son las configuraciones para la Subcategoría del texto del cuerpo:

• Fuente del cuerpo: Comfortaa
• Alineación del texto del cuerpo: centro
• Tamaño de fuente del cuerpo: 14
• Altura de la línea del cuerpo: 1.7em

Módulo de clonación de propaganda

Una vez que haya creado el módulo Blurb, clónelo dos veces y colóquelo en las otras dos columnas de la fila.

1. Todo el camino en diagonal

Ahora que hemos creado las secciones, es hora de comenzar a agregar las transiciones de sección. El primer ejemplo que le mostraremos cómo crear consiste en líneas diagonales simples.

Configuración de fondo degradado de la primera sección

Abra la configuración de la primera sección y agregue el siguiente fondo degradado:

• Primer color: #dddddd
• Segundo color: # f7f7f7
• Tipo de degradado: lineal
• Dirección del gradiente: 183 grados
• Posición inicial: 85%
• Posición final: 70,05%

Configuración de fondo degradado de la segunda sección

En su lugar, la segunda sección necesitará la siguiente configuración de fondo degradado:

• Primer color: # f7f7f7
• Segundo color: #dddddd
• Tipo de degradado: lineal
• Dirección del gradiente: 183 grados
• Posición inicial: 85%
• Posición final: 69,05%

Quitar el acolchado superior de la segunda sección

Lo último que deberá hacer para este ejemplo es eliminar el relleno superior de la segunda sección.

2. Encuéntrame a mitad de camino

El siguiente ejemplo que nos gustaría compartir es uno muy elegante en el que se utilizan dos fondos de degradado opuestos. Al usar este efecto, las secciones se sienten como si se siguieran unas a otras.

Configuración de fondo degradado de la primera sección

Para la primera sección, necesitaremos la siguiente configuración de fondo degradado:

• Primer color: rgba (255,255,255,0)
• Segundo color: rgba (224,43,32,0.07)
• Tipo de degradado: radial
• Dirección radial: arriba a la izquierda
• Posición inicial: 60%
• Posición final: 50%

Configuración de fondo degradado de la segunda sección

La segunda sección disfrutará del siguiente fondo degradado:

• Primer color: rgba (255,255,255,0)
• Segundo color: rgba (224,43,32,0.33)
• Tipo de degradado: radial
• Dirección radial: abajo a la derecha
• Posición inicial: 58%
• Posición final: 50%

3. Fusión

El siguiente ejemplo es un poco diferente al resto. Necesitará una sección adicional entre ambas secciones para lograr el resultado que puede notar en la imagen a continuación.

Configuración de fondo degradado de la primera sección

Para su primera sección, necesitará el siguiente fondo degradado:

• Primer color: rgba (12,113,195,0.19)
• Segundo color: rgba (255,255,255,0.39)
• Tipo de degradado: radial
• Dirección radial: abajo a la izquierda
• Posición inicial: 50%
• Posición final: 50%

Configuración de fondo degradado de la segunda sección

Para la segunda sección, usaremos la siguiente configuración de fondo degradado:

• Primer color: rgba (224,43,32,0.17)
• Segundo color: rgba (255,255,255,0.39)
• Tipo de degradado: radial
• Dirección radial: arriba a la derecha
• Posición inicial: 50%
• Posición final: 50%

Agregar nueva sección estándar en el medio

Una vez que haya agregado los fondos degradados a ambas secciones, es hora de agregar una sección entre ellas.

Agregar color de fondo degradado a una nueva sección

Esa nueva sección también necesitará un fondo degradado, usando la siguiente configuración:

• Primer color: rgba (12,113,195,0.19)
• Segundo color: rgba (224,43,32,0.17)
• Tipo de degradado: lineal
• Dirección del gradiente: 92 grados
• Posición inicial: 43%
• Posición final: 62%

4. Inversa

Luego, también tenemos una transición de sección que no es tan llamativa como las otras pero aún logra agregar un toque sutil a tus secciones.

Configuración de fondo degradado de la primera sección

El fondo degradado de la primera sección es el siguiente:

• Primer color: # f2f2f2
• Segundo color: rgba (104,153,193,0.58)
• Tipo de degradado: radial
• Dirección radial: abajo a la derecha
• Posición inicial: 7,9%
• Posición final: 7,9%

Configuración de fondo degradado de la segunda sección

Y el segundo fondo degradado necesitará la siguiente configuración de fondo degradado:

• Primer color: rgba (104,153,193,0.58)
• Segundo color: # f2f2f2
• Tipo de degradado: radial
• Dirección radial: arriba a la derecha
• Posición inicial: 8%
• Posición final: 8%

5. Punteros

El quinto ejemplo parece un poco más limpio y minimalista que los otros. Puede percibir la transición de dos formas al ver los indicadores o los círculos (o ambos).

Configuración de fondo degradado de la primera sección

Utilice el siguiente fondo degradado para la primera sección:

• Primer color: # f4f4f4
• Segundo color: #ffffff
• Tipo de degradado: radial
• Dirección radial: superior
• Posición inicial: 88%
• Posición final: 88,05%

Configuración de fondo degradado de la segunda sección

Por último, aplique la siguiente configuración de fondo degradado a la segunda sección:

• Primer color: rgba (43,135,218,0)
• Segundo color: rgba (12,113,195,0.43)
• Tipo de degradado: radial
• Dirección radial: Inferior
• Posición inicial: 87%
• Posición final: 87%

6. Rompecabezas

El último ejemplo definitivamente hace que las secciones se sientan como si estuvieran juntas.

Configuración de fondo degradado de la primera sección

Abra la configuración de la primera sección y use el siguiente fondo degradado:

• Primer color: rgba (160,181,193,0.46)
• Segundo color: rgba (255,255,255,0)
• Tipo de degradado: radial
• Dirección radial: superior
• Posición inicial: 56,3%
• Posición final: 43%

Configuración de fondo degradado de la segunda sección

Luego, use la siguiente configuración de fondo degradado para la segunda sección:

• Primer color: rgba (242,242,242,0)
• Segundo color: rgba (160,181,193,0.46)
• Tipo de degradado: radial
• Dirección radial: superior
• Posición inicial: 56%
• Posición final: 40%

Cambiar el relleno de la primera sección

Para que las dos secciones se ajusten mejor, cambiaremos el relleno superior e inferior de la primera sección a '150px'.

Quitar el acolchado superior de la segunda sección

Por último, también eliminaremos el relleno superior de la segunda sección.

Pensamientos finales

Las transiciones de sección ayudan a conectar diferentes secciones y su propósito. En esta publicación, hemos compartido 6 ejemplos que puede recrear usando nada más que las opciones integradas de Divi. Si tiene alguna pregunta o sugerencia; ¡No dude en dejar un comentario en la sección de comentarios a continuación!

¡Asegúrese de suscribirse a nuestro boletín informativo por correo electrónico y al canal de YouTube para que nunca se pierda un gran anuncio, un consejo útil o un obsequio de Divi!

Imagen destacada de NikVector / shutterstock.com