Tutorial Divi: ¿Qué son los Divi Scroll Effects y cómo usarlos dentro de Divi?

En este tutorial te explicaremos a fondo que es la opción de Divi: Divi Scroll Effects y como puedes usarla e implementarla en tu sitio web. Muchos usuarios de Divi me han preguntado como se usa esta herramienta que tuvimos en la actualización de Divi del 5 de febrero de 2020, y pues bien, elaboramos este tutorial detallado donde te guiamos paso a paso para entender esta poderosa opción de Divi.

Tiempo de lectura estimado: 4 minutos

Únete a nuestra comunidad y comienza a diseñar el futuro hoy. Aprende, innova y crece junto a nosotros. Accede a todo nuestro contenido desde $12/mes*
Transforma tu carrera con UXDIVI
Únete a nuestra comunidad y comienza a diseñar el futuro hoy. Aprende, innova y crece junto a nosotros

Accede a todo nuestro contenido desde US $12/mes*
Transforma tu carrera con UXDIVI

Índice

¿Que es Divi Scroll Effects?

Los Divi Scroll Effects son una opción que integró ET en una de las últimas actualizaciones importante de Divi. Esta opción te permite configurar de manera “no tan sencilla” efectos de desplazamiento a todos los elementos que desees dentro de Divi.

Esta opción te permite crear animaciones y transiciones avanzadas que reaccionan al scroll que hacen tus usuarios a medida que se desplazan hacia arriba y hacia abajo de la página.

A diferencia de las animaciones tradicionales, los efectos de desplazamiento están directamente relacionados con el comportamiento de desplazamiento o scroll que pueden hacer los usuarios de tu sitio web. 

La velocidad y la dirección de la animación se basa en qué tan rápido y en qué dirección se desplaza el usuario. La línea de tiempo de la animación se basa en la posición del elemento dentro de la ventana del navegador, o lo que llamamos en el tutorial “viewport”.

ET integró seis tipos de Divi Scroll Effects únicos

Divi Scroll Effect viene con seis efectos de desplazamiento diferentes, cada uno de los cuales se puede personalizar individualmente usando una nueva interfaz de usuario de efectos de desplazamiento, que particularmente, siempre cuestan entender al principio. Algo muy interesante es que también se pueden combinar cualquiera estos seis tipos de los efectos para crear animaciones más complejas.

Movimiento vertical

El efecto de movimiento vertical permite que cualquier elemento se mueva hacia arriba y hacia abajo en la página en función de la velocidad y la dirección que se desplaza un usuario.

Movimiento horizontal

El efecto de movimiento horizontal es como el efecto de movimiento vertical, excepto que permite que los elementos se muevan hacia la izquierda y hacia la derecha en la pantalla según la dirección y la velocidad que se desplaza un usuario.

Difuminar o desenfoque

El efecto de desenfoque enfocará o desenfocará elementos del sitio web en función de la velocidad y la dirección en la que se desplaza un usuario.

Desvanecimiento

El efecto de desvanecimiento hará que los elementos del sitio web aparezcan y desaparezcan en función de la velocidad y la dirección en la que se desplaza un usuario.

Escalado

El efecto de escala aumentará o disminuirá el tamaño de cualquier elemento según la velocidad y la dirección en la que se desplaza un usuario.

Rotación

El efecto de rotación hace rotar un elemento en cualquier dirección en función de la velocidad y la dirección que se desplaza un usuario.

Al controlar los valores inicial, medio y final, controlas lo que hace la animación. Una vez que se establecen los valores, Divi se encarga del resto y hará la transición del elemento a medida que hay scroll en la ventana del navegador, creando así una animación personalizada.

Lo que no me gusta: interfaz poco intuitiva.

Uno de los puntos más flacos, al menos al principio, es la interfaz de control de los efectos y animaciones, pues de entrada no es completamente intuitiva, y tampoco está traducida al español por completo, pero bueno, justo para eso grabamos el video, donde explicamos detenidamente como usar cada uno de los elementos de esta interfaz.

Hay tres capas de selectores que puedes oprimir, y cada uno de ellos te da una función especifica, qué, tienes que probar al menos dos o tres veces para entender su funcionamiento.

Concluciones:

Divi Scroll Effects o efectos de desplazamiento de Divi es una gran función que podría hacer que tu sitio web realmente marque la diferencia en si diseño y dinamismo con respecto a otros diseños, pero la curva de aprendizaje de esta opción no es la más rápida. Te recomendamos que te armes de un poco de tiempo y paciencia, hagas diferentes pruebas, y una vez consigas el efecto que deseas para tu diseño, lo establezcas en un “Preset o prediseño” de manera que luego lo puedas usar sin problema en otros elementos.

¿Qué opinas de está opción? ¿Qué es lo que te ha resultado más complicado con ella? Queremos saber que piensas, déjanos tus comentarios en la parte inferior de este post.

¡Nos vemos en la próxima!

Artículos relacionados

Comentarios

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

¡Registrate en nuestro próximo Live!
24 de noviembre de 2023 9:30 hrs (CDMX)
En este evento exclusivo, abordaremos las preguntas más frecuentes que los usuarios hacen sobre Divi, además de responder a cualquier otra pregunta que nuestros suscriptores de la academia tengan en mente.
10
días
10
horas
10
minutos
10
segundos
¡Registrate en nuestro próximo Live!
24 de noviembre de 2023 9:30 hrs (CDMX)
10
días
10
hrs
10
min
10
seg
25% OFF BLACK FRIDAY SALE!
Del 24 al 30 de noviembre 2023 descuentos por:
¿Aún no eres miembro Premium ⭐ de UXDivi? ¡Esta es tu oportunidad de oro! Únete a nuestra comunidad de expertos en Divi y disfruta de recursos exclusivos, tutoriales avanzados, y una red de profesionales al alcance de tu mano.
10
días
10
horas
10
minutos
10
segundos
25% OFF BLACK FRIDAY SALE!
10
días
10
hrs
10
min
10
seg
Aprovecha un DESCUENTO DEL 25% en tu suscripción Premium. ¡Solo durante Black Friday!
10
días
10
hrs
10
min
10
seg
Aprovecha un DESCUENTO DEL 25% ¡Solo durante Black Friday!