Hace unas semanas llegaba un gran día para todos aquellos diseñadores web que utilizamos el maquetador visual Divi de Elegant Themes en nuestros diseños. A partir de ese momento estaban disponibles las animaciones de Divi.

Lo más importante de todo es que con esta incorporación de las animaciones al maquetador se acaba lo de tirar de código CSS para animar elementos.

Guiado por la emoción del momento, me puse manos a la obra y probé las animaciones. Quería saber qué tipos permitía Divi, cómo añadirlas y, sobre todo, si afectan a la velocidad de carga de un sitio web.

Así son las nuevas animaciones de Divi

Probando en mi nueva web las animaciones que acaba de lanzar Divi para módulos, filas y secciones.Un gran paso necesario ¡Me encantan!

Publié par Max Camuñas sur vendredi 8 septembre 2017

 

Aquí puedes ver el primer vídeo que grabé y subí a Facebook, en el que hacía un repaso muy rápido a las animaciones de Divi, pero en el que no tuve tiempo para profundizar en cada una de ellas.

Por ese motivo, he decidido crear este artículo, para probar cada una de las animaciones, explicar en qué consiste cada una de ellas y también analizar cómo afectan a la velocidad de carga de WordPress.

 

Repaso a las 7 animaciones de Divi


Antes de pasar a hablar de cada una de las animaciones de Divi, conviene mencionar algunas consideraciones previas:

  1. Divi incluye 7 animaciones diferentes, por el momento (imagino que con el paso del tiempo irá añadiendo otras diferentes).
  2. Se pueden animar todos los elementos de un sitio web: secciones, filas y módulos.
  3. Para animar un elemento, tienes que ir a sus ajustes de diseño y buscar el apartado Animation Style.
  4. Las animaciones vienen desactivadas por defecto (none).

Así son las animaciones de Divi: tipos y cómo añadirlas a tu diseño

 

1) Animación desvanecer (fade)

La primera animación se trata de un sencillo efecto de desvanecido, como puedes ver en el texto “Qui som”.

¿Qué puedes configurar en esta animación?

  • La repetición: una sola vez o de forma continua.
  • La duración.
  • El retraso.
  • La opacidad.
  • La velocidad.

Así son las animaciones de Divi: tipos y cómo añadirlas a tu diseño

 

2) Animación diapositiva (slide)

La segunda animación tiene un efecto diapositiva, que aparece desde el fondo y se expande hacia delante.

¿Qué puedes configurar en esta animación?

  • La repetición: una sola vez o de forma continua.
  • La dirección: centro, derecha, izquierda, arriba y abajo.
  • La duración.
  • El retraso.
  • La intensidad.
  • La opacidad.
  • La velocidad.

Así son las animaciones de Divi: tipos y cómo añadirlas a tu diseño

 

3) Animación rebote (bounce)

Es la animación que tengo instalada en la cabecera de la home de esta web y que puedes ver en la parte destacada del post. Se trata de un efecto que aparece desde el fondo hacia delante e incluye un efecto rebotado.

¿Qué puedes configurar en esta animación?

  • La repetición: una sola vez o de forma continua.
  • La dirección: centro, derecha, izquierda, arriba y abajo.
  • La duración.
  • El retraso.
  • La opacidad.
  • La velocidad.

Así son las animaciones de Divi: tipos y cómo añadirlas a tu diseño

 

4) Animación zoom

Con esta animación conseguirás un efecto zoom en el elemento que quieras animar.

¿Qué puedes configurar en esta animación?

  • La repetición: una sola vez o de forma continua.
  • La dirección: centro, derecha, izquierda, arriba y abajo.
  • La duración.
  • El retraso.
  • La intensidad.
  • La opacidad.
  • La velocidad.

Así son las animaciones de Divi: tipos y cómo añadirlas a tu diseño

 

5) Animación invertir (flip)

La quinta animación consiste en un efecto que invierte el elemento animado, es decir, le da la vuelta en un giro de 90º en función de cómo se configure.

¿Qué puedes configurar en esta animación?

  • La repetición: una sola vez o de forma continua.
  • La dirección: centro, derecha, izquierda, arriba y abajo.
  • La duración.
  • El retraso.
  • La intensidad.
  • La opacidad.
  • La velocidad.

Así son las animaciones de Divi: tipos y cómo añadirlas a tu diseño

 

6) Animación doblado (fold)

Esta animación consiste en un efecto doblado del elemento, es decir, que se “doble” la fila, columna o modulo que esté animado.

¿Qué puedes configurar en esta animación?

  • La repetición: una sola vez o de forma continua.
  • La dirección: centro, derecha, izquierda, arriba y abajo.
  • La duración.
  • El retraso.
  • La intensidad.
  • La opacidad.
  • La velocidad.

Así son las animaciones de Divi: tipos y cómo añadirlas a tu diseño

 

7) Animación rodado (roll)

La última animación es la más “loca” de todas, pues consigue que el elemento gire completamente en función de cómo lo configures.

¿Qué puedes configurar en esta animación?

  • La repetición: una sola vez o de forma continua.
  • La dirección: centro, derecha, izquierda, arriba y abajo.
  • La duración.
  • El retraso.
  • La intensidad.
  • La opacidad.
  • La velocidad.

Así son las animaciones de Divi: tipos y cómo añadirlas a tu diseño

 

Cómo personalizar las animaciones de Divi


Como he mencionado en cada una de ellas, las animaciones de Divi incluyen una serie de parámetros de configuración y personalización:

 

Dirección de la animación

Permite configurar que el elemento se anime desde la parte superior, inferior, izquierda o derecha y el estilo se ajustará automáticamente.

 

Duración de la animación

Por defecto, las duraciones de las animaciones se establecen en un segundo. No obstante, puedes acelerar o reducir su duración.

 

Retardo de la animación

Las animaciones se reproducen automáticamente en cuanto el elemento animado es visualizado por el navegador al desplazarte por la página. La adición de un retardo aumentará el tiempo que tarda antes de que se produzca la animación una vez que el elemento esté visible en la pantalla. Mediante la combinación de diferentes elementos animados con retrasos escalonados, puedes crear algunos efectos muy chulos.

 

Intensidad de la animación

Con este parámetro puedes aumentar el control deslizante para hacer tus animaciones más rápidas, o bien disminuir el control deslizante para hacerlas más sutiles.

 

Opacidad de la animación

Por defecto, todas las animaciones se atenúan desde una opacidad inicial de 0. Puedes ajustar esta cifra para minimizar o eliminar el efecto de atenuación.

 

Curva de velocidad de la animación

Aquí puedes ajustar la curva de velocidad que se utiliza durante la animación, cada una de las cuales proporciona una sensación ligeramente diferente.

 Cómo personalizar las animaciones de Divi

Consejos para añadir animaciones a tu diseño web


A pesar de que las animaciones son un elemento muy chulo que le dan un toque moderno y creativo a los sitios web, debes tener en cuenta una serie de recomendaciones a la hora de usarlas:

  1. No abuses de las animaciones. Cuidado con ellas, las carga el diablo. Te recomiendo animar únicamente aquellos elementos que aporten un valor visual atractivo y que sean estrictamente necesarios. No te pongas a animar partes de tu web a lo loco.
  2. Incluye animaciones en tu sitio web con criterio ¿A qué me refiero con criterio? Pues, por ejemplo, si vas a animar varios elementos de una página concreta, no los pongas todos juntos. Es decir, deja suficiente espacio entre las diferentes animaciones para que el usuario disfrute de ellas y no se vuelva loco.

Ésos son básicamente los dos consejos que te puedo dar a la hora de incluir animaciones en tu sitio web 🙂

 

¿Afectan las animaciones de Divi a la velocidad de carga?


Cuando me enteré que Divi había incluido las animaciones en su maquetador, la primera pregunta que me hice fue cómo afectarían a la WPO de los sitios web.

Si me lees habitualmente, ya sabrás que el tema de la velocidad de carga me tiene un pelín “obsesionado” últimamente. Quiero que todos mis sitios estén bien optimizados y carguen muy rápido.

Entonces, la mejor forma de saber si las animaciones afectan o no a la velocidad era probándolo.

Me puse manos a la obra e hice varias pruebas, tanto en mi web como en otras diseñadas con Divi.

Tras incluir varias animaciones en una misma página de cada sitio web y medir la velocidad de carga con Pingdom, descrubrí que las animaciones de Divi no tienen ningún afecto negativo en el proceso de carga del sitio web. De hecho, tampoco afectan al PageSpeed de Google.

De este modo, aquí puedes ver un ejemplo de optimización y carga de uno de mis últimos diseños para un cliente del servicio de diseño web en WordPress 100% personalizado.

¡Flipo con estos datos de WPO en mis diseños!

Publié par Max Camuñas sur vendredi 6 octobre 2017

 

Por lo tanto, puedes usar las animaciones sin problema (aunque siempre con cabeza) en tu sitio web.

¡Hasta aquí este repaso a las animaciones de Divi! Espero que este post te sea de gran utilidad si estás pensando en usarlas y quieres saber cómo configurarlas 😉

You have Successfully Subscribed!

Pin It on Pinterest

Share This