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

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 la sección gratuita, primero deberá descargarlos usando el botón a continuación. Para obtener acceso a la descarga, deberá suscribirse a nuestro boletín utilizando 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 será «resuscrito» ni recibirá correos electrónicos adicionales.

1. Cree su diseño de sección principal 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

Pase 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

desbordamientos

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

• Desbordamiento horizontal: oculto
• Desbordamiento vertical: oculto

Añadir Fila #1

Estructura de la columna

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

Dimensionamiento

Sin agregar ningún módulo todavía, abra la configuración de la 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 relleno superior e inferior predeterminado.

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

Agregue 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 del título: Playfair Display
• Peso de la fuente del encabezado: Negrita
• Alineación del texto del título: Centro
• Color del texto del encabezado: #000000
• Tamaño del texto del título: 6vw

Añadir Fila #2

Estructura de la columna

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

Fondo degradado

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

• Color 1: #444444
• Color 2: #000000
• Tipo de gradiente: 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 del canalón: 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)

Agregue el Módulo de Texto #2 a la Columna

Agregar contenido

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

Configuración de texto

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

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

Agregue el Módulo de Texto #3 a la Columna

Agregar contenido

Luego, agregue otro módulo de texto con algún contenido de descripción 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 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 alguna copia de su elección.

Alineación

Continúe cambiando la alineación del botón 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: 1px
• 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.

• Relleno superior: 1vw (escritorio), 2vw (tableta), 3vw (teléfono)
• Acolchado inferior: 1vw (escritorio), 2vw (tableta), 3vw (teléfono)
• Relleno 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 principal, 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 use el siguiente movimiento horizontal:

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

Fundido de entrada y salida

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

• Habilitar aparición y desaparición gradual: 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, abre el segundo Módulo de Texto en tu sección y aplica el siguiente movimiento horizontal:

• Habilitar movimiento horizontal: Sí
• Compensación inicial: 10
• Desplazamiento medio: 0
  
  • 10% – 70% (Escritorio)
  • 10% – 95% (tableta y teléfono)
• Compensación final: 10

Fundido de entrada y salida

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

• Habilitar aparición y desaparición gradual: 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 en su lugar? Abra el primer módulo de texto en su sección y agregue el siguiente movimiento vertical:

• Habilitar movimiento vertical: Sí
• Compensación inicial: 0
• Desplazamiento medio: 0
  
  • 90% (Escritorio)
  • 95% (tableta y teléfono)
• Compensación final: -8

Escalando hacia arriba y hacia abajo

Agregue un efecto de escala 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í
• Compensación inicial: 0
• Desplazamiento medio: 0
  
  • 15% – 70% (Escritorio)
  • 15% – 90% (tableta y teléfono)
• Compensación 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í
• Compensación inicial: 0
• Desplazamiento medio: 0
  
  • 0% – 90%
• Compensación final: 10

Fundido de entrada y salida

Utilice también un efecto de aparición y desaparición gradual para este módulo.

• Habilitar aparición y desaparición gradual: 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í
• Compensación inicial: 0
• Desplazamiento medio: 0
  
  • 0% – 90%
• Compensación final: -10

Fundido de entrada y salida

Continúe utilizando un efecto de movimiento de desplazamiento de aparición y desaparición gradual.

• Habilitar aparición y desaparición gradual: 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 también un efecto de desplazamiento giratorio.

• 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 título. Hemos manejado tres ejemplos diferentes, pero las posibilidades son realmente infinitas. ¡También pudo descargar los archivos JSON de forma gratuita! 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 regalos de Divi, asegúrese de suscribirse  a nuestro boletín de correo electrónico  y  al canal de YouTube  para que siempre sea una de las primeras personas en conocer y obtener los beneficios de este contenido gratuito.