Cómo agregar animaciones a secciones / filas

Érase una vez en Internet, agregar animación a su sitio era una tarea engorrosa y algo especializada. Divi, sin embargo, posee poderosas herramientas de animación y efectos de desplazamiento que puede implementar sin necesidad de mucha experiencia técnica. Cualquiera puede agregar estos efectos a sus sitios con un mínimo esfuerzo. Si bien los procesos de este tutorial se pueden aplicar a cualquier elemento dentro de Divi, hoy nos centraremos en las secciones y filas para lograr efectos específicos al usarlos. ¡Vamos a profundizar en las animaciones!

Avance

Escritorio

Móvil

Cargue Divi Builder en una página o publicación

Lo primero que deberá hacer es ingresar al Divi Builder. Ya sea que elija uno de nuestros paquetes de diseño (usaremos el paquete de diseño del club de tenis para este artículo) o un diseño propio, todos los pasos se llevan a cabo dentro de la configuración de Sección y Fila .

Con este diseño, estaremos animando 1 sección y 3 filas para lograr un efecto de carga secuencial.

Elija un diseño prediseñado

Para aplicar uno de nuestros paquetes de diseño diseñados profesionalmente, ingrese a Divi Builder y seleccione Usar un diseño prediseñado . Aparecerá la lista de todos los obsequios que ofrecemos.

Elija un diseño

A continuación, simplemente elija qué paquete de diseño desea utilizar. Puede ordenar por categoría o buscar palabras clave para ver lo que hemos creado para usted.

Ubique las secciones y filas para animar

Cuando el diseño haya importado todos los activos y la página esté cargada, querrá encontrar la sección y las filas a las que desea agregar animaciones. Recuerde, las secciones están codificadas en color azul en Divi Builder y las filas son verdes .

Con eso planeado, ¡vamos a agregar esas animaciones!

Cómo agregar animación a secciones y filas - Opción 1

Agregar una animación a una sección Divi es muy simple. Primero debe ingresar a la configuración de la sección . Luego, navegue hasta la pestaña Diseño y desplácese hasta que vea las opciones de Animación .

En las opciones de Animación , ajustará hasta 8 opciones diferentes para la animación que elija.

1. Estilos de animación es donde eliges cómo aparece la animación. Si la sección se desplaza de un extremo a otro o rebota desde el costado de la página como una pelota. Los más comunes son Fade y Slide .
2. Dirección : establecerá la dirección hacia la que se mueve el elemento. Un valor de arriba significa que la sección comenzará en la parte inferior y se moverá hacia arriba. Up no es el punto de origen.
3. Duración : cuánto dura la animación de principio a fin. Un valor más bajo lo acelerará y uno más alto lo ralentizará.
4. Retraso : esta opción evita que la animación se active lo antes posible y puede ayudar a llamar la atención sobre ella más que si se activara de inmediato.
5. Intensidad : cuanto más bajo sea el valor, más suave que la animación, mientras que los valores más altos son más ágiles y agresivos.
6. Opacidad inicial : un valor de 0 hará que la animación comience a ser invisible y se enfoque durante la duración. 100 significa que el elemento es completamente visible incluso antes de que comience la animación.
7. Curva de velocidad : esto le permitirá ajustar la suavidad con la que comienza y termina la animación.
8. Repetir : ¿su animación es un efecto único o es algo que desea repetir una y otra vez? Si una animación se establece en Una vez , la página debe recargarse para iniciarla nuevamente.

Cómo agregar animación a secciones y filas - Opción 2

Divi también tiene una función llamada Efectos de desplazamiento . Estas son animaciones que se activan cada vez que el usuario desplaza su ventana de visualización al elemento. Los efectos de desplazamiento se pueden establecer en cualquier elemento y se pueden combinar con las opciones de animación que mencionamos anteriormente.

Cómo habilitar los efectos de desplazamiento

Nuevamente, cualquier elemento en Divi se puede configurar para que tenga habilitados los efectos de desplazamiento, pero hoy estamos tratando con secciones y filas. Así que ingrese la configuración de su Sección , navegue a la pestaña Avanzado y busque el encabezado Efectos de desplazamiento .

Elija los efectos y disparadores

Dentro de las opciones de Efectos de desplazamiento , encontrará varias pestañas para diferentes tipos de animaciones que puede activar en el desplazamiento.

• Posición fija : si la sección o fila se adhiere o no a la pantalla del usuario a medida que se desplaza.
• Efectos de transformación : estos son los efectos de animación reales: movimiento horizontal y vertical, aparición / desaparición gradual, escala de tamaño, rotación y desenfoque.
• Establecer [Función] : podrá establecer dónde el efecto es más visible en la pantalla y cuándo / dónde ocurre
• Activador de efecto de movimiento : determinará si la animación comienza cuando la parte superior del elemento ingresa a la ventana gráfica, el centro del elemento o la parte inferior.

La principal diferencia entre estos y el uso de las opciones de Animación de la sección anterior se reduce a si desea que la animación se automatice o si desea que se active todas y cada una de las veces que el usuario realiza una acción. Puede combinar animaciones usando las opciones de Efectos de desplazamiento y Animación, que usaremos para el efecto del tutorial principal.

Combinar animaciones para secciones y filas

Puede crear algunos efectos sorprendentes para sus sitios combinando varias animaciones para que se activen en diferentes momentos. Al usar la opción Retraso de animación , su sitio puede animar una serie de secciones, filas y elementos en secuencia para lograr algunos efectos visuales impresionantes.

Para empezar, vamos a establecer el Estilo de animación en la configuración de la Sección para Deslizar con la Dirección de animación establecida en Arriba .

Mantendremos el resto de opciones en sus valores predeterminados. Especialmente el retraso de la animación . Queremos que la sección se active cuando esté a la vista.

Configuración de animación para la fila 1

A continuación, ajustaremos la primera fila de la sección. Entramos en la configuración de Fila , vamos a las opciones de Animación en la pestaña Diseño y nuevamente seleccionamos Diapositiva . Esta vez, queremos cambiar la Dirección a Abajo y el Retardo de animación a 5 00ms . 1000 ms es igual a 1 segundo, recuerda.

Dado que dejamos el tiempo de la sección en 0ms para que se active de inmediato, queremos que la fila esté ligeramente desplazada, lo que permite que la animación inicial termine en su mayor parte antes de que comience esta.

Configuración de animación para la fila 2

A continuación, vamos a ir a la configuración de la segunda fila de la página y a las opciones de Animación . Nuevamente, seleccionaremos Diapositiva para el Estilo de animación , y esta fila se deslizará hacia la derecha .

Además, vamos a establecer el Retardo de animación en 1000 ms , lo que significa que este se activará tan pronto como finalice la primera animación.

Configuración de animación para la fila 3

Para la tercera fila que estamos animando, usaremos Efectos de desplazamiento para lograr nuestros objetivos. Debido a que nuestra tercera fila comienza justo encima del pliegue, la mayoría de las animaciones no se verían si simplemente usáramos un retraso de tiempo como lo hicimos con los otros elementos. Así que vamos a hacer que ese no sea el caso.

Opciones de animación

En primer lugar, vamos a repetir los procesos anteriores. Solo con esta fila, estamos configurando el Estilo de animación en Fundido. Luego, estableceremos la Duración en 500ms para que esta fila aparezca más rápidamente durante su animación. Vamos a retrasarlo por 1.500 ms para asegurar las otras animaciones son totalmente completa antes de que este comience.

Finalmente, asegúrese de verificar que la Opacidad inicial esté configurada en 0% . Queremos que esta fila sea invisible hasta que esté lista para ser vista.

Configuración de efectos de desplazamiento

Aquí es donde las cosas se ponen divertidas porque podemos combinar efectos. Haga clic en la pestaña Avanzado de la Fila y busque Efectos de desplazamiento . Busque la pestaña Movimiento horizontal y asegúrese de activarla. Luego, establezca el Disparador de efectos de movimiento en la mitad del elemento . Estamos usando el medio en lugar de la parte superior para asegurarnos de que el efecto no comience a surtir efecto hasta que el usuario se desplace, en caso de que la ventana del usuario muestre la parte superior de la fila.

Con ese conjunto, la fila esperará hasta que todo lo demás termine de animarse para aparecer, y luego, cuando el usuario se desplace hacia ella, parecerá que toda la fila se desliza desde el costado de la pantalla.

Resultados finales

Cuando termine todo eso, sus resultados deberían ser similares a esto.

Escritorio

Móvil

Conclusión

Agregar efectos de animación es una forma segura de hacer que su sitio sea más dinámico, más interesante y más atractivo visualmente. Con las herramientas de efectos de desplazamiento y animación incorporadas de Divi, puede crear combinaciones asombrosas que sorprenderán a cualquier visitante que pase por allí.

¿Qué ha utilizado los efectos de animación Divi para crear a partir de sus secciones y filas? ¡Veámoslos en los comentarios!

Imagen destacada del artículo por Vectorchok / shutterstock.com