É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 usarlas. ¡Vamos a profundizar con las animaciones!
Escritorio
Móvil
Cargue el 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 prefabricado
Para aplicar uno de nuestros paquetes de diseño diseñados profesionalmente, ingrese al Divi Builder y seleccione Usar un diseño prefabricado . Esto abrirá la lista de todos los regalos 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 la(s) sección(es) y la(s) fila(s) para animar
Cuando el diseño haya importado todos los activos y la página esté cargada, querrá encontrar la sección y la(s) fila(s) a las que desea agregar animaciones. Recuerde, las secciones tienen un código de 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 a 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 elegida.
- Estilos de animación es donde elige cómo aparece la animación. Si la sección rodará de un extremo a otro o rebotará desde el costado de la página como una pelota. Los más comunes son Fade y Slide .
- 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. Arriba no es el punto de origen.
- 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á.
- 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.
- 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.
- Opacidad inicial : un valor de 0 hará que la animación comience invisible y se enfoque durante la duración. 100 significa que el elemento es completamente visible incluso antes de que comience la animación.
- Curva de velocidad : esto le permitirá ajustar la suavidad con la que comienza y termina la animación.
- 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 Once , 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 Scroll Effects . Estas son animaciones que se activan cada vez que el usuario desplaza su ventana gráfica al elemento. Los efectos de desplazamiento se pueden configurar 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 tener 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 al desplazarse.
- Posición fija : si la sección o fila se fija o no en 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, escalado de tamaño, rotación y desenfoque.
- Establecer [Característica] : 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 diferencia principal en estos frente al uso de las opciones de Animación en la sección anterior se reduce a si desea que la animación se automatice o si desea que se active cada vez que el usuario realiza una acción. Puede combinar animaciones usando las opciones 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 algunas imágenes impresionantes.
Para empezar, vamos a establecer el Estilo de animación en la configuración de Sección en Diapositiva con la Dirección de animación establecida en Arriba .
Mantendremos el resto de las opciones en sus valores predeterminados. Especialmente el Retardo de 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 00 ms . 1000ms es igual a 1 segundo, recuerda.
Dado que dejamos el tiempo de la sección en 0 ms para que se active de inmediato, queremos que la fila se desplace ligeramente, lo que permite que la animación inicial termine en su mayoría 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 e ir a las opciones de Animación . Nuevamente, seleccionaremos Slide para el Estilo de animación , y esta fila se deslizará hacia la derecha .
Además, vamos a establecer el Retraso de la animación en 1000 ms , lo que significa que 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 arriba 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 Desvanecimiento. Luego, estableceremos la Duración en 500 ms para que esta fila aparezca más rápidamente durante su animación. Lo retrasaremos 1500 ms para asegurarnos de que las otras animaciones estén completamente completas antes de que 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.
Ajustes 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. A continuación, establezca el disparador de efecto de movimiento en la mitad del elemento . Estamos usando el medio en lugar de la parte superior para garantizar que el efecto no comience a tener efecto hasta que el usuario se desplace, en caso de que la ventana gráfica 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, la fila completa parecerá deslizarse 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. Usando las herramientas integradas de animación y efectos de desplazamiento de Divi, puede crear combinaciones sorprendentes que sorprenderán a cualquier visitante que pase por allí.
¿Qué has usado para crear los efectos de animación Divi a partir de tus secciones y filas? ¡Veámoslos en los comentarios!
Imagen destacada del artículo por Vectorchok / shutterstock.com