Animar cualquier tipo de contenido en Divi
Hoy veremos cómo Animar cualquier contenido en Divi. Si ya has desarrollado alguna web con Divi, sabrás que sus innumerables opciones permiten satisfacer prácticamente todas las necesidades que nos van surgiendo. Sin embargo, a veces necesitas echar mano de un poco de CSS . Esto nos va a permitir personalizar determinados detalles. Precisamente eso es lo que haremos en esta práctica. Da lo mismo que sea una sección completa, una fila con las columnas que lo forman o un módulo de forma independiente. De forma predeterminada solo tenemos control para animar los módulos de imagen desde el panel de ajustes. Así que vamos a ver cómo animar cualquier contenido, no solo las imágenes.
Nota: en la actualización de Divi de Octubre de 2017 ya es posible. Los chicos de Divi han incluido un panel de animación para todos los módulos.
Tutoriales Divi. Animar cualquier contenido en Divi
Dentro del código de Divi podemos encontrar la clase «et-waypoint», que nos va a permitir generar el código para animar nuestro contenido. Simplemente tenemos que poner esta clase donde queramos que se ejecute y a continuación la clase de la animación que queremos aplicar. Las animaciones disponibles son:
- et_pb_animation_fade_in
- et_pb_animation_bottom
- et_pb_animation_top
- et_pb_animation_right
- et_pb_animation_left
Por ejemplo, para crear una animación de arriba a abajo del contenido de una fila. Pulsaremos en ajustes de fila y en la pestaña CSS personalizado vamos al campo Clase CSS y ponemos et-waypoint et_pb_animation_top.
Esto animará la fila en bloque. La primera clase oculta el elemento y le dirá a Divi que hacer cuando sea visible (et-waypoint), que es lo que controla la segunda clase (et_pb_animation_top). Es posible que queramos hacer un efecto aplicado a la columna izquierda de la fila (texto). Y otro distinto a la columna de la derecha. Para esto se añade el código dentro de cada casilla de CSS asignada a cada columna dentro de los ajustes de fila.
Por lo tanto, si hubiéramos querido animar solo el bloque de texto (sin el fondo), habríamos aplicado el código CSS sobre el módulo de texto y no a la columna dentro de la fila. A pesar de que he probado el código sobre todos los módulos posibles pero sí sobre unos cuantos, como galería o encabezados, entre otros, y funciona correctamente. Cabe decir que ha habido muchas actualizaciones después de escribir este post. Así, en la última de octubre se han incluido opciones de animaciones sin necesidad de código. De todas formas, nunca viene mal aprender otra forma de animar. ¿No te parece? Puedes ver el vídeo para observar los pasos y los efectos en acción.
