3 efectos de movimiento de desplazamiento sin esfuerzo que puede agregar a sus titulares con Divi

Los nuevos efectos de desplazamiento de Divi brindan toneladas de nuevas posibilidades de diseño a las páginas que crea. Puede agregar un efecto de desplazamiento personalizado a cada contenedor y sincronizar los efectos en consecuencia. Esta libertad de diseño te ayuda fácilmente a resaltar cierto contenido de una manera elegante. En este tutorial, le mostraremos cómo agregar efectos de movimiento de desplazamiento a sus titulares. De esa manera, puede poner un énfasis adicional en sus titulares y mantener a sus visitantes involucrados. ¡También podrá descargar los archivos JSON de forma gratuita!

Hagámoslo.

Avance

Antes de sumergirnos en el tutorial, echemos un vistazo rápido al resultado en diferentes tamaños de pantalla.

Ejemplo 1

Escritorio

Móvil

Ejemplo # 2

Escritorio

Móvil

Ejemplo # 3

Escritorio

Móvil

Descargue los diseños de la sección de efectos de movimiento de desplazamiento GRATIS

Para poner sus manos en los diseños de las secciones gratuitas, primero deberá descargarlos 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!

1. Cree el diseño de su sección Hero en una página nueva o existente

Agregar nueva sección

Color de fondo

Comience agregando una nueva sección a la página en la que está trabajando. Abra la configuración de la sección y cambie el color de fondo a blanco.

• Color de fondo: #FFFFFF

Espaciado

Vaya a la pestaña de diseño y modifique también los valores de espaciado.

• Acolchado superior: 15vw (escritorio), 20vw (tableta), 25vw (teléfono)
• Acolchado inferior: 0vw

Desbordes

Y para asegurarnos de que los efectos de desplazamiento no provoquen la aparición de barras de desplazamiento horizontales, también ocultaremos los desbordamientos de la sección.

• Desbordamiento horizontal: oculto
• Desbordamiento vertical: oculto

Agregar fila n. ° 1

Estructura de la columna

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

Dimensionamiento

Sin agregar ningún módulo todavía, abra la configuración de fila y modifique el ancho y el ancho máximo en la configuración de tamaño.

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

Espaciado

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

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

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

Agregar contenido H1

El único módulo que necesitamos en esta fila es un módulo de texto con algo de contenido H1.

Configuración de texto H1

Cambie la configuración de texto H1 del módulo en consecuencia:

• Fuente de encabezado: Playfair Display
• Peso de la fuente del encabezado: negrita
• Alineación del texto del encabezado: centro
• Color del texto del encabezado: # 000000
• Tamaño del texto del encabezado: 6vw

Agregar fila n. ° 2

Estructura de la columna

Luego, agregue otra fila usando la siguiente estructura de columnas:

Fondo degradado

Sin agregar ningún módulo todavía, abra la configuración de fila y use un fondo degradado.

• Color 1: # 444444
• Color 2: # 000000
• Tipo de degradado: lineal
• Dirección del gradiente: 237 grados

Dimensionamiento

Modifique también la configuración de tamaño de la fila.

• Usar ancho de canalón personalizado: Sí
• Ancho de la canaleta: 1
• Ancho: 100%
• Ancho máximo: 100%

Espaciado

Luego, agregue un poco de relleno superior e inferior personalizado.

• Acolchado superior: 0vw
• Acolchado inferior: 10vw (escritorio), 15vw (tableta), 20vw (teléfono)

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

Agregar contenido

El primer módulo que necesitamos en esta fila es un módulo de texto con algún contenido.

Configuración de texto

Vaya a la pestaña de diseño del módulo y cambie la configuración del texto de la siguiente manera:

• Fuente de texto: Playfair Display
• Color del texto: #dddddd
• Tamaño del texto: 6vw
• Altura de la línea de texto: 1em
• Intensidad del desenfoque de la sombra del texto: 0.29em
• Color de la sombra del texto: #ffffff
• Alineación de texto: centro

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

Agregar contenido

Luego, agregue otro módulo de texto con algún contenido descriptivo de su elección.

Configuración de texto

Cambie la configuración de texto del módulo de la siguiente manera:

• Fuente de texto: Open Sans
• Color del texto: # e8e8e8
• Tamaño del texto: 0.9vw (escritorio), 2vw (tableta), 2.5vw (teléfono)
• Altura de la línea de texto: 2em
• Alineación de texto: centro

Dimensionamiento

Modifique también la configuración de tamaño.

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

Espaciado

E incluya algunos márgenes superior e inferior en diferentes tamaños de pantalla.

• Margen superior: 10vw (escritorio), 15vw (tableta), 20vw (teléfono)
• Margen inferior: 3vw (escritorio), 8vw (tableta), 13vw (teléfono)

Agregar módulo de botones a la columna

Agregar copia

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

Alineación

Continúe cambiando la alineación de los botones en la pestaña de diseño.

• Alineación de botones: centro

Configuración de botones

Luego, diseñe el botón de la siguiente manera:

• Usar estilos personalizados para el botón: Sí
• Tamaño del texto del botón: 0.8vw (escritorio), 1.5vw (tableta), 2.5vw (teléfono)
• Color del texto del botón: #ffffff
• Color del borde del botón: #ffffff
• Radio del borde del botón: 1 px
• Fuente del botón: Open Sans
• Peso de la fuente del botón: negrita
• Estilo de fuente del botón: mayúsculas

Espaciado

E incluya algunos valores de relleno personalizados en diferentes tamaños de pantalla.

• Acolchado superior: 1vw (escritorio), 2vw (tableta), 3vw (teléfono)
• Acolchado inferior: 1vw (escritorio), 2vw (tableta), 3vw (teléfono)
• Acolchado izquierdo: 2.5vw (escritorio), 5vw (tableta), 8vw (teléfono)
• Relleno derecho: 2.5vw (escritorio), 5vw (tableta), 8vw (teléfono)

2. Aplicar efectos de desplazamiento

Ejemplo 1

Módulo de texto # 1

Movimiento horizontal

Ahora que hemos diseñado la apariencia general de nuestra sección de héroes, es hora de aplicar los diferentes efectos de movimiento de desplazamiento a nuestra copia. Para recrear el primer ejemplo, abra el primer módulo de texto y utilice el siguiente movimiento horizontal:

• Habilitar movimiento horizontal: Sí
• Desplazamiento inicial: 0
• Desplazamiento medio: 0
  • 0% - 80% (escritorio)
  • 0% - 95% (tableta y teléfono)
• Desplazamiento final: -10

Fundido de entrada y salida

También agregaremos un efecto de aparición y desaparición gradual.

• Activar desvanecimiento de entrada y salida: Sí
• Opacidad inicial: 100%
• Opacidad media: 100%
  • 0% - 70% (escritorio)
  • 0% - 95% (tableta y teléfono)
• Opacidad final: 0%

Módulo de texto # 2

Movimiento horizontal

Luego, abra el segundo módulo de texto en su sección y aplique el siguiente movimiento horizontal:

• Habilitar movimiento horizontal: Sí
• Desplazamiento inicial: 10
• Desplazamiento medio: 0
  • 10% - 70% (escritorio)
  • 10% - 95% (tableta y teléfono)
• Desplazamiento final: 10

Fundido de entrada y salida

Junto con un efecto de fundido de entrada y salida a juego:

• Activar desvanecimiento de entrada y salida: Sí
• Opacidad inicial: 0%
• Opacidad media: 100%
  • 35% - 60% (escritorio)
  • 35% - 95% (tableta y teléfono)
• Opacidad final: 0%

Ejemplo # 2

Módulo de texto # 1

Movimiento vertical

¿Quiere recrear el segundo efecto de movimiento de desplazamiento? Abra el primer módulo de texto en su sección y agregue el siguiente movimiento vertical:

• Habilitar movimiento vertical: sí
• Desplazamiento inicial: 0
• Desplazamiento medio: 0
  • 90% (escritorio)
  • 95% (tableta y teléfono)
• Desplazamiento final: -8

Escalando hacia arriba y hacia abajo

Agregue un efecto de escalado hacia arriba y hacia abajo también.

• Habilitar escalado hacia arriba y hacia abajo: Sí
• Escala inicial: 20%
• Escala media: 100%
  • 20% - 80% (escritorio)
  • 20% - 95% (tableta y teléfono)
• Escala final: 20%

Módulo de texto # 2

Movimiento vertical

Luego, abra el segundo módulo de texto y use la siguiente configuración de movimiento vertical:

• Habilitar movimiento vertical: sí
• Desplazamiento inicial: 0
• Desplazamiento medio: 0
  • 15% - 70% (escritorio)
  • 15% - 90% (tableta y teléfono)
• Desplazamiento final: -8

Escalando hacia arriba y hacia abajo

A continuación, agregue un efecto de escalado hacia arriba y hacia abajo.

• Habilitar escalado hacia arriba y hacia abajo: Sí
• Escala inicial: 0%
• Escala media: 100%
  • 30% - 70% (escritorio)
  • 30% - 90% (tableta y teléfono)
• Escala final: 100%

Difuminar

Y complete el efecto de desplazamiento agregando un efecto de desenfoque al segundo módulo de texto de su sección.

• Habilitar desenfoque: sí
• Desenfoque inicial: 10px
• Desenfoque medio: 0px
  • 40% - 73% (escritorio)
  • 40% - 95% (tableta y teléfono)
• Desenfoque final: 100px

Ejemplo # 3

Módulo de texto # 1

Movimiento horizontal

Por último, pero no menos importante, le mostraremos cómo recrear el tercer efecto de movimiento de desplazamiento. Abra el primer módulo de texto de la sección y agregue un efecto de movimiento horizontal.

• Habilitar movimiento horizontal: Sí
• Desplazamiento inicial: 0
• Desplazamiento medio: 0
  • 0% - 90%
• Desplazamiento final: 10

Fundido de entrada y salida

Utilice también un efecto de fundido de entrada y salida para este módulo.

• Activar desvanecimiento de entrada y salida: Sí
• Opacidad inicial: 100%
• Opacidad media: 100%
  • 0% - 90% (escritorio)
  • 0% - 95% (tableta y teléfono)
• Opacidad final: 0%

Giratorio

Y también aplicaremos un efecto de rotación.

• Habilitar rotación: sí
• Rotación inicial: 0 °
• Rotación media: 0 °
  • 0% - 90% (escritorio)
  • 0% - 95% (tableta y teléfono)
• Rotación final: 90 °

Módulo de texto # 2

Movimiento horizontal

Luego, abra el segundo módulo de texto en su sección y aplique la siguiente configuración de movimiento horizontal:

• Habilitar movimiento horizontal: Sí
• Desplazamiento inicial: 0
• Desplazamiento medio: 0
  • 0% - 90%
• Desplazamiento final: -10

Fundido de entrada y salida

Continúe utilizando un efecto de movimiento de desplazamiento de entrada y salida gradual.

• Activar desvanecimiento de entrada y salida: Sí
• Opacidad inicial: 100%
• Opacidad media: 100%
  • 0% - 80% (escritorio)
  • 0% - 95% (tableta y teléfono)
• Opacidad final: 0%

Giratorio

Y complete la configuración del módulo agregando un efecto de desplazamiento giratorio también.

• Habilitar rotación: sí
• Rotación inicial: 0 °
• Rotación media: 0 °
  • 0% - 80% (escritorio)
  • 0% - 90% (tableta y teléfono)
• Rotación final: -90 °

Avance

Ahora que hemos seguido todos los pasos, echemos un vistazo final al resultado en diferentes tamaños de pantalla.

Ejemplo 1

Escritorio

Móvil

Ejemplo # 2

Escritorio

Móvil

Ejemplo # 3

Escritorio

Móvil

Pensamientos finales

En esta publicación, le mostramos cómo usar los nuevos efectos de desplazamiento de Divi para agregar efectos de movimiento de desplazamiento a su titular. Hemos manejado tres ejemplos diferentes, pero las posibilidades son realmente infinitas. ¡También pudiste descargar los archivos JSON gratis! Si tiene alguna pregunta o sugerencia, no dude en 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.