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


Recientemente, se han agregado algunas opciones de desplazamiento adicionales a Divi, lo que le permite crear efectos aún más geniales sin tener que tocar una sola línea de código. Ahora puede, por ejemplo, crear increíbles transiciones de desplazamiento de fondo de degradado. Al combinar gradientes 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ás descargar el archivo JSON gratis!

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

pasar las transiciones

Ejemplo # 2

pasar las transiciones

Ejemplo # 3

pasar las transiciones

Descargar The Hero Sections GRATIS

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

Suscríbase a nuestro canal de Youtube

Para poner tus manos sobre estas secciones de héroes gratuitas, primero tendrás que 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 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.

Pasos generales

Agregar nueva sección

Espaciado

Comencemos por algunos pasos generales. Agregue una nueva sección a la página en la que está trabajando y elimine todo el relleno predeterminado. Quitar todo el relleno superior e inferior, más adelante, nos ayudará a combinar fondos de gradiente de columna, fila y sección.

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

pasar las transiciones

Agregar nueva fila

Estructura de columna

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

pasar las transiciones

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áx .: 100%

pasar las transiciones

Espaciado

Pase a la configuración de espaciado y elimine todos los rellenos superiores e inferiores predeterminados.

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

pasar las transiciones

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

Añadir contenido H1

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

pasar las transiciones

Configuraciones de texto H1

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

  • Fuente del encabezado: Montserrat
  • Encabezado de texto: Centro
  • Color del texto del encabezado: # 000000
  • Tamaño del texto de encabezado: 3vw (escritorio), 6vw (tableta y teléfono)
  • Espacio entre letras de encabezado: 0.7vw

pasar las transiciones

Dimensionamiento

A continuación, abra la configuración de tamaño 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

pasar las transiciones

Espaciado

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

  • Margen superior: 10vw

pasar las transiciones

Agregar módulo divisor a la columna

Visibilidad

¡Al próximo módulo! Agregue un módulo divisor y asegúrese de que la opción "Mostrar divisor" esté habilitada.

  • Mostrar divisor: sí

pasar las transiciones

Línea

Cambie el color de la línea a continuación.

  • Color de línea: # 000000

pasar las transiciones

Dimensionamiento

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

  • Divisor de peso: 0.1vw
  • Ancho: 10% (escritorio), 16% (tableta), 25% (teléfono)
  • Alineación del módulo: centro

pasar las transiciones

Espaciado

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

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

pasar las transiciones

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

Agregar contenido

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

pasar las transiciones

Configuraciones de texto

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

  • Fuente de texto: Open Sans
  • Alineación de texto: justificar
  • Altura de la línea de texto: 2.3em

pasar las transiciones

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

pasar las transiciones

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

pasar las transiciones

Alineación

Pase a la pestaña de diseño y cambie la alineación del botón.

  • Alineación de botones: centro

pasar las transiciones

Configuraciones de botones

Modifique la configuración del botón también.

  • 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: 1px
  • Radio del borde del botón: 1px
  • Fuente del botón: Montserrat

pasar las transiciones

pasar las transiciones

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
  • Relleno superior: 1vw (escritorio), 2vw (tableta), 3vw (teléfono)
  • Relleno 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)

pasar las transiciones

Clonar la sección dos veces

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

pasar las transiciones

Recrea la transición de desplazamiento del fondo del gradiente n. ° 1

pasar las transiciones

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 de degradado: 90 grados
  • Posición de inicio: 50%
  • Posición final: 50%

pasar las transiciones

Desplazar fondo degradado

Modifique el fondo del degradado al pasar el mouse por encima.

  • Color 1: # f7f7f7
  • Color 2: # ffc1c7
  • Dirección de degradado: 90 grados
  • Posición de inicio: 50%
  • Posición final: 50%

pasar las transiciones

Fila

Fondo degradado predeterminado

A continuación, abra la configuración de la fila y aplique la siguiente configuración de fondo degradado predeterminada:

  • Color 1: # 7032ff
  • Color 2: rgba (255,255,255,0)
  • Dirección de degradado: 90 grados
  • Posición de inicio: 10%
  • Posición final: 10%

pasar las transiciones

Desplazar fondo degradado

Modifique el fondo del degradado al pasar el mouse por encima.

  • Color 1: rgba (255,255,255,0)
  • Color 2: # ff324a
  • Dirección de degradado: 90 grados
  • Posición de inicio: 90%
  • Posición final: 90%

pasar las transiciones

Recrea la transición de desplazamiento del fondo del gradiente n. ° 2

pasar las transiciones

Sección

Fondo degradado predeterminado

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

  • Color 1: # f7f7f7
  • Color 2: #eceaff
  • Dirección de degradado: 156 grados
  • Posición de inicio: 50%
  • Posición final: 50%

pasar las transiciones

Desplazar fondo degradado

Agregue un fondo degradado diferente al pasar el mouse:

  • Color 1: #ffeaec
  • Color 2: # f7f7f7
  • Dirección de degradado: 204 grados
  • Posición de inicio: 50%
  • Posición final: 50%

pasar las transiciones

Fila

Fondo degradado predeterminado

A continuación, abra la configuración de la fila 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 de inicio: 14%
  • Posición final: 14%

pasar las transiciones

Desplazar fondo degradado

Cambie el fondo del degradado de 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 de inicio: 14%
  • Posición final: 14%

pasar las transiciones

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

pasar las transiciones

Desplazar fondo degradado

Modifique el fondo del gradiente 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 de inicio: 14%
  • Posición final: 14%

pasar las transiciones

Recrea la transición de desplazamiento del fondo del gradiente n. ° 3

pasar las transiciones

Sección

Fondo degradado predeterminado

¡En el 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 de inicio: 45%
  • Posición final: 45%

pasar las transiciones

Desplazar fondo degradado

Modifique el fondo del degradado de sección al pasar el mouse sobre él.

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

pasar las transiciones

Fila

Fondo degradado predeterminado

A continuación, abra la configuración de la fila 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 de inicio: 45%
  • Posición final: 45%

pasar las transiciones

Desplazar fondo degradado

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

pasar las transiciones

Columna

Fondo degradado predeterminado

Por último, pero no menos importante, agrega un fondo de 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 de inicio: 41%
  • Posición final: 41%

pasar las transiciones

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

pasar las transiciones

Ejemplo # 2

pasar las transiciones

Ejemplo # 3

pasar las transiciones

Pensamientos finales

En esta publicación, le mostramos cómo usar creativamente las opciones adicionales de desplazamiento del fondo del degradado de Divi para crear hermosas transiciones de desplazamiento con las opciones integradas de Divi solamente. 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 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.