Si alguna vez has tratado de quitar el efecto animado que hacen los textos y distintos elementos de las diapositivas de Divi ya te habrás dado cuenta de que no hay un ajuste para ello.
Me refiero a ese efecto que hace como si rebotase desde abajo, como en la siguiente captura…
Si, como a mi, ese efecto le sobra, al menos tiene solución, en 2 pasos.
Índice de contenidos
Añade una clase CSS a la diapositiva
Este primer paso no tiene misterio (bueno, ninguno), solo tienes que editar el carrusel de diapositivas y añadirle una clase CSS personalizada, por ejemplo mi_diapositiva.
Guarda los cambios en el módulo y en la página dónde esté.
Desactiva la animación
Ahora que ya tenemos una clase CSS sobre la que actuar, para no hacerlo indiscriminadamente, vamos a aplicar la magia del CSS para desactivar ese efecto de animación.
Para ello abre el Personalizador de WordPress (Apariencia > Personalizar) y ve a la sección de «CSS adicional».
Ahí añade el siguiente código, cambiando el nombre de la clase CSS del ejemplo por la que tú hayas elegido.
/* Desactivar animación diapositiva Divi - Requiere la clase CSS mi_diapositiva */
.mi_diapositiva .et_pb_slide_image ,.mi_diapositiva .et_pb_slide:first-child .et_pb_slide_image img.active {
animation-name: none!important;
-webkit-animation-name: none!important;
-moz-animation-name: none!important;
-ms-animation-name: none!important;
-o-animation-name: none!important;
}
.mi_diapositiva .et_pb_slide_description {
-webkit-animation-name: fadeOut!important;
-moz-animation-name: fadeOut!important;
-ms-animation-name: fadeOut!important;
-o-animation-name: fadeOut!important;
animation-name: fadeOut!important;
}Publica los cambios y ya lo tienes. Ahora los elementos de las diapositivas de ese carrusel ya no harán la animación.
Por supuesto, puedes aplicar la clase CSS a cualquier carrusel de diapositivas de Divi en el que quieras anular el efecto de animación.
¿Te gustó este artículo? ¡Ni te imaginas lo que te estás perdiendo en YouTube!
