Cómo agregar efectos de animación a secciones / filas en Divi

En el tutorial de Divi de hoy, le mostraremos cómo agregar efectos de animación a secciones y filas en Divi. El tema Divi en sí mismo proporciona algunos efectos de animación relevantes que lo ayudan a brindar un nivel adicional de interacción a su sitio web. Estos efectos son fáciles de asignar a una imagen dentro de su Divi Builder en la subcategoría Animación de la pestaña Avanzado.

Sin embargo, si está buscando una forma de agregar estos efectos de animación a otros módulos, secciones o filas de su sitio web, también es posible. En esta publicación, le mostraremos exactamente cómo hacerlo. Además de mostrarte cómo agregar los efectos de animación integrados, también te mostraremos cómo integrar wow.js y animate.css en tu sitio web Divi.

Al final de esta publicación, podrá agregar efectos agradables tanto a sus filas como a sus secciones. Para ayudarlo a visualizar el proceso, nos gustaría compartir el siguiente ejemplo (que le mostraremos cómo lograrlo al final de esta publicación):

¿Divi Animations o Wow.js y Animate.css?

Probablemente se esté preguntando en qué casos debería considerar el uso de animaciones Divi y en qué casos wow.js y animate.css harían el trabajo mejor. Si bien el uso de la animación incorporada de Divi es la solución más fácil si no está buscando crear algunos efectos de animación avanzados, los efectos wow.js y animate.css definitivamente también brindarán un gran valor agregado a su sitio web.

Cuándo usar animaciones Divi

Hay cinco efectos de animación disponibles dentro de Divi que puede usar:

• El fade-in
• La diapositiva inferior
• El deslizamiento izquierdo
• El deslizamiento correcto
• La parte superior deslizable

Aunque solo hay cinco posibilidades, también son las más utilizadas. Son simples y van al grano. Si desea darle un efecto extra agradable a su sitio web, sin poner demasiado esfuerzo, los efectos de animación Divi son el camino a seguir. Cada uno de estos efectos se activa desde el momento en que se desplaza y tiene una vista del módulo, fila o sección a la que ha agregado el efecto. De esa manera, sus visitantes no se perderán los efectos que se encuentran en la parte inferior de la página, por ejemplo.

Para integrar los efectos de animación de Divi, no es necesario que haya un tema secundario cargado en su sitio web. Puede agregar fácilmente estos efectos mientras sigue trabajando en el tema principal.

Cuándo usar Wow.js y Animate.css

La integración de wow.js y animate.css en su sitio web es algo que probablemente le gustará mucho debido a las muchas opciones que tiene. Hay 14 categorías de efectos de animación que contienen diferentes efectos que son relevantes para esa categoría. Las categorías entre las que puede elegir son las siguientes:

• Buscadores de atención
• Entradas rebotantes
• Salidas rebotantes
• Entradas que se desvanecen
• Salidas que se desvanecen
• Aletas
• Velocidad de la luz
• Entradas giratorias
• Salidas giratorias
• Entradas corredizas
• Salidas correderas
• Entradas de zoom
• Salidas de zoom
• Especiales

Puede ver todos los efectos que están disponibles haciendo clic en el siguiente enlace. Estos efectos de animación también aparecen al desplazarse.

Cómo agregar efectos de animación a secciones / filas en Divi

Suscríbete a nuestro canal de Youtube

Utilice los efectos de animación incorporados

La primera posibilidad que le mostraremos son los efectos de animación incorporados. Le mostraremos cómo aplicar los efectos tanto a una sección como a una fila. Abra la página donde le gustaría realizar las modificaciones.

En nuestro ejemplo, agregaremos los efectos de animación a la primera sección y fila de nuestra página. Agregar la animación para la sección o la fila es en ambos casos lo mismo. Los códigos de clase CSS para los diferentes efectos de animación son los siguientes:

• Clase CSS de aparición gradual : et-waypoint et_pb_animation_fade_in
• Clase CSS de deslizamiento inferior: et-waypoint et_pb_animation_bottom
• Clase CSS deslizante izquierda: et-waypoint et_pb_animation_left
• Deslizamiento derecho: clase CSS: et-waypoint et_pb_animation_right
• Clase CSS de deslizamiento superior: et-waypoint et_pb_animation_top

Agregar efecto de animación a la fila

Para agregar la animación a una determinada fila, abra la configuración de esa fila y vaya a la pestaña Avanzado. Dentro de la pestaña Avanzado, coloque la clase CSS del efecto de animación en el campo Clase CSS. En este caso, le mostraremos cómo agregar la animación de aparición gradual.

Agregar efecto de animación a la sección

El mismo método para agregar un efecto de animación a una fila se aplica también a una sección. Vaya a la pestaña Avanzado y coloque la clase CSS del efecto de animación de su elección en el campo Clase CSS. En este ejemplo, le mostraremos cómo agregar el efecto de animación de deslizamiento superior.

El resultado

Una vez que haya agregado los efectos a su sección y fila, verá el siguiente resultado en su lugar:

Agregue Wow.js y Animate.css a su tema secundario

En la siguiente parte, le mostraremos cómo agregar wow.js y animate.css a su sitio web de WordPress y cómo usarlo en todo su tema Divi.

En primer lugar, quiero dar crédito a Jeremy Cookson por esta publicación sobre cómo integrar wow.js y animate.css en WordPress. En esta parte de la publicación, le mostraremos exactamente cómo hacer que la integración suceda para un sitio web de WordPress creado con el tema Divi.

Para agregar wow.js y animate.css a su página web, deberá utilizar un tema secundario en su sitio web. Si se pregunta cómo crear un tema hijo, consulte esta publicación. Una vez que haya creado los archivos principales de su tema secundario, deberá agregar otros dos archivos para completar su tema secundario con los efectos de animación.

Descargue los archivos y agréguelos a su tema infantil

Mantenga el tema de su hijo a su alcance y descargue los siguientes dos archivos mientras tanto haciendo clic en los siguientes dos enlaces:

• animate.min.css
• wow.min.js

Una vez que haya descargado los dos archivos, cree subcarpetas dentro de su tema hijo. Nombra uno de ellos CSS y el otro JS. Después de eso, coloque animate.min.css en la carpeta CSS y wow.min.js en la carpeta JS.

Cargar tema secundario

Lo siguiente que deberá hacer es cargar y activar el tema hijo al que acaba de agregar wow.js y animate.css. Vaya a su Panel de WordPress> Apariencia> Temas> Y haga clic en 'Agregar nuevo' en la parte superior de la página.

Agregue código PHP a su archivo Functions.php

Una vez que haya subido el tema hijo, agregue las siguientes líneas de código PHP al archivo functions.php de su tema hijo:

// * Poner en cola Animate.CSS y WOW.js
add_action ('wp_enqueue_scripts', 'sk_enqueue_scripts');
function sk_enqueue_scripts () {
wp_enqueue_style ('animar', get_stylesheet_directory_uri (). '/css/animate.min.css');
wp_enqueue_script ('wow', get_stylesheet_directory_uri (). '/js/wow.min.js', array (), ”, verdadero);
}
// * Poner en cola el script para activar WOW.js
add_action ('wp_enqueue_scripts', 'sk_wow_init_in_footer');
función sk_wow_init_in_footer () {add_action ('print_footer_scripts', 'wow_init');}
// * Agregar JavaScript antes de la función </body> wow_init () {?>
<tipo de secuencia de comandos = ”texto / javascript”>
nuevo WOW (). init (); </script> <? php}

Agregar animaciones a filas y secciones

El sistema para agregar los efectos wow.js y animate.css a filas y secciones es el mismo que para los efectos de animación Divi. Deberá abrir la configuración de la fila o sección a la que desea agregar el efecto de animación. A continuación, puede colocar la clase CSS asignada a la animación en el campo Clase CSS de su sección o fila.

Agregar animación a la fila

Para el ejemplo que le mostraremos con la fila, estamos usando el efecto fadeInRight que encontramos en la lista de efectos de animación. Vaya a la pestaña Avanzado de su configuración de Fila y agregue el 'wow fadeInRight' al campo Clase CSS. Cada vez que desee agregar un efecto a una parte de su sitio web, asegúrese de poner 'wow' delante del efecto que está utilizando.

Resultado

Cuando haya agregado la clase CSS y obtenga una vista previa de la página en la que está trabajando, debería haber logrado el siguiente resultado:

Agregar animación a la sección

El mismo método se aplica para agregar un efecto de animación a una sección. Vaya a la pestaña Avanzado y agregue la Clase CSS 'wow bounceInDown' al campo Clase CSS de su sección.

Resultado

Si siguió todos los pasos correctamente, debería lograr el siguiente resultado:

Opciones avanzadas

En caso de que desee agregar algunas especificaciones adicionales a su animación, también puede hacerlo. Puede, por ejemplo, agregar un tiempo de retraso a uno de sus efectos de animación. Esto puede resultar útil cuando se combina una animación de sección con una animación de fila dentro de esa misma sección. De esa manera, se asegura de que los efectos de animación no se superpongan entre sí.

Para mostrarte cómo agregar este tiempo de demora, vamos a combinar los dos efectos que usamos en la parte anterior de esta publicación. Se asigna un efecto de animación a la sección y el otro a la fila. Para asegurarnos de que el efecto de animación de la fila no se pierda, le agregaremos un tiempo de retraso de 2 segundos.

Abra la configuración de la fila y vuelva a la pestaña Avanzado. Dentro del campo Clase CSS, agregue otra clase llamada 'retraso'. Esta clase aún no existe, pero estamos a punto de agregarla en nuestro próximo paso.

Ahora, agregue la clase CSS de retraso a la configuración de la página en la que está trabajando haciendo clic en el siguiente botón:

A continuación, agregue la clase CSS con las líneas de código CSS al campo CSS personalizado. Si desea agregar un tiempo de retraso de 2 segundos, como vamos a hacer en este ejemplo, necesitará las siguientes líneas de código CSS:

.delay {
-webkit-animation-delay: 2s;
-moz-animation-delay: 2s;
-ms-animation-delay: 2s;
-o-animation-delay: 2s;
}

Resultado

Una vez que haya agregado el tiempo de retraso, el resultado debería verse así:

Pensamientos finales

En esta publicación, le mostramos cómo agregar efectos de animación a su sitio web Divi. Te proporcionamos dos posibilidades. El primero le muestra cómo utilizar los efectos de animación estándar proporcionados por Divi. La segunda posibilidad le permite integrar wow.js y animate.css. El uso de efectos de animación en su sitio web puede ayudarlo a enfatizar el contenido que desea compartir con sus visitantes. Además de eso, también se ve genial. Si tiene alguna pregunta o sugerencia; asegúrese de dejar un comentario en la sección de comentarios a continuación.

¡Asegúrese de suscribirse a nuestro boletín informativo por correo electrónico y al canal de YouTube para que nunca se pierda un gran anuncio, un consejo útil o un obsequio de Divi!

Imagen destacada de Stocker top / shutterstock.com