Cómo crear hermosas transiciones de desplazamiento de fondo degradado con Divi

Recientemente, se han agregado algunas opciones de desplazamiento adicionales a Divi, lo que le permite crear efectos aún más interesantes sin tener que tocar una sola línea de código. Ahora puede, por ejemplo, crear increíbles transiciones de desplazamiento de fondo degradado. Al combinar degradados de columna, fila y sección, puede lograr diseños únicos. En este tutorial, le mostraremos exactamente cómo hacerlo. Comenzaremos siguiendo algunos pasos generales. Una vez hecho esto, nos centraremos en tres ejemplos de diseño individualmente. ¡También podrá descargar el archivo JSON de forma gratuita!

Hagámoslo.

Avance

Antes de sumergirnos en el tutorial, echemos un vistazo rápido a los tres ejemplos diferentes que recrearemos a lo largo de este tutorial.

Ejemplo 1

Ejemplo # 2

Ejemplo # 3

Descarga The Hero Sections GRATIS

Suscríbete a nuestro canal de Youtube

Para poner sus manos en estas secciones de héroe gratuitas, primero deberá descargarlas 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 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 se le “volverá a suscribir” ni recibirá correos electrónicos adicionales.

Descarga los archivos

Descárgalo gratis

Únase al boletín de Divi y le enviaremos por correo electrónico una copia del último paquete de diseño de página de destino de Divi, además de toneladas de otros recursos, consejos y trucos increíbles y gratuitos de Divi. Síguelo y serás un maestro de Divi en poco tiempo. Si ya está suscrito, simplemente escriba su dirección de correo electrónico a continuación y haga clic en descargar para acceder al paquete de diseño.

DESCARGAR

Te has suscripto satisfactoriamente. ¡Verifique su dirección de correo electrónico para confirmar su suscripción y obtenga acceso a paquetes de diseño Divi semanales gratuitos!

Pasos generales

Agregar nueva sección

Espaciado

Comencemos por seguir algunos pasos generales. Agregue una nueva sección a la página en la que está trabajando y elimine todo el relleno predeterminado. Eliminar todo el relleno superior e inferior nos ayudará, más adelante, a combinar fondos degradados de columnas, filas y secciones.

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

Agregar nueva fila

Estructura de la columna

Continúe agregando una nueva fila usando la siguiente estructura de columnas:

Dimensionamiento

Sin agregar ningún módulo todavía, abra la configuración de la fila y permita que la fila ocupe todo el ancho del contenedor de la sección.

• Ancho: 100%
• Ancho máximo: 100%

Espaciado

Continúe con la configuración de espaciado y elimine todo el relleno superior e inferior predeterminado.

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

Agregar el módulo de texto n. ° 1 a la columna

Agregar contenido H1

¡Comencemos a agregar módulos! El primero que necesitamos es un módulo de texto con algo de contenido H1.

Configuración de texto H1

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

• Fuente de encabezado: Montserrat
• Alineación del texto del encabezado: centro
• Color del texto del encabezado: # 000000
• Tamaño del texto del encabezado: 3vw (escritorio), 6vw (tableta y teléfono)
• Espaciado de letras de encabezado: 0.7vw

Dimensionamiento

Abra la configuración de tamaño a continuación y cambie el ancho junto con la alineación del módulo.

• Ancho: 48% (escritorio), 60% (tableta y teléfono)
• Alineación del módulo: centro

Espaciado

Complete el diseño del módulo agregando un margen superior.

• Margen superior: 10vw

Agregar módulo divisor a la columna

Visibilidad

¡Pasemos al siguiente módulo! Agregue un módulo divisor y asegúrese de que la opción 'Mostrar divisor' esté habilitada.

• Mostrar divisor: Sí

Línea

A continuación, cambie el color de la línea.

• Color de línea: # 000000

Dimensionamiento

Pase a la configuración de tamaño y aplique la siguiente configuración:

• Peso del divisor: 0,1 vw
• Ancho: 10% (escritorio), 16% (tableta), 25% (teléfono)
• Alineación del módulo: centro

Espaciado

Agregue también algunos valores de relleno personalizados en diferentes tamaños de pantalla.

• Acolchado superior: 2vw (escritorio), 4vw (tableta), 6vw (teléfono)
• Acolchado inferior: 2vw (escritorio), 4vw (tableta), 6vw (teléfono)

Agregar el módulo de texto n. ° 2 a la columna

Agregar contenido

Pasemos al siguiente módulo, que es otro módulo de texto. Agregue algún contenido de párrafo de su elección.

Configuración de texto

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

• Fuente de texto: Open Sans
• Alineación del texto: justificar
• Altura de la línea de texto: 2,3 em

Dimensionamiento

Modifique el ancho y la alineación del módulo en la configuración de tamaño a continuación:

• Ancho: 30% (escritorio), 54% (tableta), 70% (teléfono)
• Alineación del módulo: centro

Agregar módulo de botones a la columna

Agregar copia

El siguiente y último módulo que necesitamos en la columna es un módulo de botones. Agregue una copia de su elección.

Alineación

Vaya a la pestaña de diseño y cambie la alineación de los botones.

• Alineación de botones: centro

Configuración de botones

Modifique también la configuración de los botones.

• Usar estilos personalizados para el botón: Sí
• Tamaño del texto del botón: 0.8vw (escritorio), 2vw (tableta), 2.8vw (teléfono)
• Color del texto del botón: # 000000
• Ancho del borde del botón: 1 px
• Radio del borde del botón: 1 px
• Fuente del botón: Montserrat

Espaciado

Y agregue algunos valores de espaciado personalizados en diferentes tamaños de pantalla.

• Margen superior: 2vw (escritorio), 8vw (tableta y teléfono)
• Margen inferior: 10vw
• Acolchado superior: 1vw (escritorio), 2vw (tableta), 3vw (teléfono)
• Acolchado inferior: 1vw (escritorio), 2vw (tableta), 3vw (teléfono)
• Acolchado izquierdo: 3vw (escritorio), 6vw (tableta), 8vw (teléfono)
• Relleno derecho: 3vw (escritorio), 6vw (tableta), 8vw (teléfono)

Clonar sección dos veces

Una vez que haya completado la sección, puede clonarla dos veces; uno para cada ejemplo.

Recrear transición de desplazamiento de fondo degradado n. ° 1

Sección

Fondo degradado predeterminado

¡Comencemos a crear la primera transición de desplazamiento! Abra la configuración de la sección y agregue el siguiente fondo degradado predeterminado:

• Color 1: # d1d1ff
• Color 2: # f7f7f7
• Dirección del gradiente: 90 grados
• Posición inicial: 50%
• Posición final: 50%

Fondo degradado flotante

Modifica el fondo degradado al pasar el mouse.

• Color 1: # f7f7f7
• Color 2: # ffc1c7
• Dirección del gradiente: 90 grados
• Posición inicial: 50%
• Posición final: 50%

Hilera

Fondo degradado predeterminado

Abra la configuración de fila a continuación y aplique la siguiente configuración predeterminada de fondo degradado:

• Color 1: # 7032ff
• Color 2: rgba (255,255,255,0)
• Dirección del gradiente: 90 grados
• Posición inicial: 10%
• Posición final: 10%

Fondo degradado flotante

Modifica el fondo degradado al pasar el mouse.

• Color 1: rgba (255,255,255,0)
• Color 2: # ff324a
• Dirección del gradiente: 90 grados
• Posición inicial: 90%
• Posición final: 90%

Recrear transición de desplazamiento de fondo degradado n. ° 2

Sección

Fondo degradado predeterminado

¡Pasemos al segundo ejemplo! Abra la configuración de la sección y agregue el siguiente fondo degradado:

• Color 1: # f7f7f7
• Color 2: #eceaff
• Dirección del gradiente: 156 grados
• Posición inicial: 50%
• Posición final: 50%

Fondo degradado flotante

Agregue un fondo degradado diferente al pasar el mouse:

• Color 1: #ffeaec
• Color 2: # f7f7f7
• Dirección del gradiente: 204 grados
• Posición inicial: 50%
• Posición final: 50%

Hilera

Fondo degradado predeterminado

Abra la configuración de fila a continuación y aplique la siguiente configuración de fondo degradado:

• Color 1: # a932ff
• Color 2: rgba (255,255,255,0)
• Tipo de degradado: radial
• Dirección radial: abajo a la izquierda
• Posición inicial: 14%
• Posición final: 14%

Fondo degradado flotante

Cambie el fondo del degradado de la fila al pasar el mouse en consecuencia:

• Color 1: # ff324a
• Color 2: rgba (255,255,255,0)
• Tipo de degradado: radial
• Dirección radial: arriba a la izquierda
• Posición inicial: 14%
• Posición final: 14%

Columna

Fondo degradado predeterminado

Pase a la configuración de la columna y agregue el siguiente fondo degradado:

• Color 1: # a932ff
• Color 2: rgba (255,255,255,0)
• Tipo de degradado: radial
• Dirección radial: arriba a la derecha
• Posición inicial: 14%
• Posición final: 14%

Fondo degradado flotante

Modifique el fondo del degradado de la columna al pasar el mouse:

• Color 1: # ff324a
• Color 2: rgba (255,255,255,0)
• Tipo de degradado: radial
• Dirección radial: abajo a la derecha
• Posición inicial: 14%
• Posición final: 14%

Recrear transición de desplazamiento de fondo degradado n. ° 3

Sección

Fondo degradado predeterminado

¡Pasemos al siguiente y último ejemplo! Abra la configuración de la sección y aplique el siguiente fondo degradado:

• Color 1: # ffc1c7
• Color 2: #ffffff
• Tipo de degradado: radial
• Dirección radial: superior
• Posición inicial: 45%
• Posición final: 45%

Fondo degradado flotante

Modifica el fondo degradado de la sección al pasar el mouse.

• Color 1: # ffc1c7
• Color 2: #ffffff
• Tipo de degradado: radial
• Dirección radial: izquierda
• Posición inicial: 20%
• Posición final: 20%

Hilera

Fondo degradado predeterminado

Abra la configuración de la fila a continuación y agregue el siguiente fondo degradado:

• Color 1: # d3dfff
• Color 2: rgba (255,255,255,0)
• Tipo de degradado: radial
• Dirección radial: Inferior
• Posición inicial: 45%
• Posición final: 45%

Fondo degradado flotante

Modifique el fondo degradado en consecuencia:

• Color 1: # d3dfff
• Color 2: rgba (255,255,255,0)
• Tipo de degradado: radial
• Dirección radial: derecha
• Posición inicial: 20%
• Posición final: 20%

Columna

Fondo degradado predeterminado

Por último, pero no menos importante, agregue un fondo degradado de columna y ¡listo!

• Color 1: # f7f7f7
• Color 2: rgba (255,255,255,0)
• Tipo de degradado: radial
• Dirección radial: centro
• Posición inicial: 41%
• Posición final: 41%

Avance

Ahora que hemos seguido todos los pasos, ¡echemos un vistazo final al resultado de los tres ejemplos que recreamos a lo largo de este tutorial!

Ejemplo 1

Ejemplo # 2

Ejemplo # 3

Pensamientos finales

En esta publicación, le mostramos cómo usar creativamente las opciones adicionales de desplazamiento de fondo degradado de Divi para crear hermosas transiciones de desplazamiento solo con las opciones integradas de Divi. Comenzamos con algunos pasos generales y continuamos recreando cada uno de los tres ejemplos. Si tiene alguna pregunta o sugerencia, ¡asegúrese de dejar un comentario en la sección de comentarios a continuación!

Si está ansioso por aprender más sobre Divi y obtener más obsequios de Divi, asegúrese de suscribirse a nuestro boletín por correo electrónico y al canal de YouTube para que siempre sea una de las primeras personas en conocer y obtener beneficios de este contenido gratuito.