Lotties para Divi: ¿cómo funciona?

¿También es usted fan de esas simpáticas animaciones que a veces se encuentran en las páginas web o en las aplicaciones para móviles? Se llama Lottie. Si no sabes lo que es un lottie, has llegado al lugar adecuado, porque este artículo te explicará por qué y cómo añadir lotties a Divi.

Aviso: este artículo contiene enlaces de afiliación que reconocerá fácilmente. Los enlaces clásicos están en púrpura y los enlaces patrocinados están en rosa.

1 - ¿Qué es una Lottie?

A Lottieo Archivo Lottie o Animación de Lottie es un archivo muy ligero en formato JSON que le permite animar iconos, logotipos o imágenes dentro de su sitio o aplicación. Estas pequeñas animaciones pueden alegrar su diseño de la páginaEsto mejorará el compromiso de los usuarios y aumentará las tasas de conversión.

A Lottie es un formato reciente que fue creado originalmente por Airbnb, para mejorar las interacciones en su aplicación móvil. Entonces, se creó una biblioteca nativa para que Lotties pudiera invadir la web.

Hoy en día, con plugins o un poco de código, puedes fácilmente integrar Lotties en WordPress pero también en Divi !

¿Lo sabías? Puede probar Divi de forma gratuita visitando en esta página y haciendo clic en "PRUEBA GRATUITA

2 - Lotos: ¿dónde encontrarlos, cómo crearlos?

Así que crear tu propia Lottie no es para todo el mundo. Deberá disponer de diversos programas informáticos, incluido Adobe After Effects. Tendrá que instalar el Plugin AE BodyMovinCrea tus imágenes con Sketch, etc. Así que no es tan sencillo.

Sin embargo, tengo buenas noticias. Hay una librería parcialmente gratuita en la que se pueden encontrar cientos de Lotties ya hechos, se llama Archivos Lottie :

Basta con crear una cuenta gratuita para acceder a todos los archivos que se pueden descargar. Ir a la categoría de lotes libres para empezar a comprar.

¿Necesitas dominar Divi? ¡Descubre mi formación que te guiará paso a paso en la comprensión y uso de Divi! Más información sobre la formación en Divi.

3 - Plugins para insertar un Lottie con Divi

Una vez que hayas encontrado lo que buscas en la biblioteca de Lotties, puedes incrustarlos fácilmente en tu sitio Divi utilizando plugins dedicados.

3.1 - Uso de Divi Supreme

Ya os he presentado este plugin para Divi, como recordatorio, aquí tenéis un breve vídeo (a los 7'24, descubriréis mi prueba de Lottie):

Divi Supreme es una extensión freemium (una parte gratuita y otra de pago) que aporta +49 nuevos módulos al Divi Visual Builder.

Esta extensión mejora su experiencia con el Visual Builder y la buena noticia es que un Módulo "Lottie". está disponible.

Así que puedes insertar cualquier imagen animada de la biblioteca de Lottie Files en menos tiempo del que me llevó escribirla.

Tenga en cuenta que necesitará la versión Pro del plugin para utilizar este módulo.

3.2 - Uso de BrainAddons para Divi Builder

Alternativamente: BrainAddons para Divi Builder.

De nuevo, se trata de un plugin freemium para DiviEl programa consta de 20 módulos gratuitos + 20 módulos de pago. Y como puede imaginar, el Módulo Lottie se ofrece en la versión pro (de pago) del plugin. Al igual que Divi Supreme.

4 - ¿Cómo insertar un Lottie con Divi de forma gratuita y sin plugin?

Si piensas utilizar este tipo de animaciones con regularidad, te aconsejo que inviertas en uno de los 2 plugins mencionados anteriormente, ya que tienen la ventaja de ofrecer una amplia gama de módulos adicionales para Divi y tendrás la oportunidad de amortizar tu inversión. Además, estos módulos permiten definir el comportamiento del lote insertado: clic, desplazamiento, hover, bucle, duración, etc.

Por otra parte, si tiene previsto utilizar Lotties en su sitio de vez en cuando, debería encontrar otra solución, gratuita...

Es fácil. El sitio web oficial de Lottie Files facilita la incrustación de animaciones en el Divi Builder.

Visite el sitio web Archivos Lottie y selecciona el Lottie de tu elección, haz clic en él. Elegí estos lindos pajaritos...

Se abre una ventana que le ofrece varias opciones para incrustar esta animación en su sitio. Nos centraremos en dos opciones:

• Opción A: el código de incrustación (código iFrame)
• Opción B: el código HTML

Opción A: con código iFrame

Si elige la primera opción, es muy sencillo:

1. Copiar el código del iFrame
2. Dentro de su diseño Divi, inserte un Módulo de código
3. Pegue el código del iFrame en el campo correspondiente
4. Verás que el Lottie aparece en tu maqueta. El único problema es que puede estar recortado.

Si este es su caso, es posible que la opción B sea más adecuada...

Opción B: con Script + HTML

Esta segunda opción no es más complicada y tiene la ventaja de poder definir algunos parámetros como el tamaño, la altura, el bucle, la reproducción automática, etc.

1. Haga clic en el botón HTML para obtener el código
2. Defina los ajustes que necesita, por ejemplo, cambie el tamaño del Lottie
3. Copie el código generado debajo de la vista previa de Lottie
4. De vuelta en su diseño Divi, añada un módulo de código donde desea que aparezca el Lottie

5. Una vez validado el módulo Código, es posible que no aparezca nada. No te preocupes...
6. Salga del Visual Builder.
7. Una vez fuera del Visual Builder, ¡verás cómo aparece el Lottie!
8. El único problema es que el lector Lottie también es visible.

Desgraciadamente, lo he intentado todo ("display none" en CSS) pero nada funciona, este reproductor no puede (a priori) ser eliminado. Así que, a veces, la libertad tiene sus límites...

¿Necesita más recursos para Divi? Consulte los demás artículos de esta sección.

5 - Algunas ideas de Lottie para sus diseños de Divi

Mientras hojeaba la biblioteca de Lotties, obtuve algunas ideas...

👉 Personaliza tu página de error 404:

Encontrará todos los 404 error lotes aquí.

👉 Personaliza tu página de búsqueda:

Utiliza esto tutorial para crear una página de búsqueda e insertar un Lottie apropiado. Encontrará todos los Loterías de la categoría "investigación" aquí.

👉 Personaliza la página de tu cesta de la compra:

Siga esto tutorial para personalizar la página del carrito de la compra y añadir uno de los Lotties en la categoría Tienda :

Y eso no es todo. ¡Puedes insertar Lotties donde quieras! Disfrútalo, es muy ligero y no ralentiza su sitio web.

Descubra muchos más consejos y recursos directamente en el blog de Elegantthemes.

6 - Los Lotties para Divi: en conclusión...

Así que tengo curiosidad: ¿sabías lo de los Lotties? ¿Qué le parecen estas animaciones? ¿Has visto lo fácil que es utilizarlos en Divi?

Tenga en cuenta que en esta página, he insertado 6 Lotties directamente en Gutenberg (este artículo está escrito con el editor de WordPress, no con el Divi Visual Builder). A continuación, utilice la opción B de este tutorial e inserte el código en un bloque HTML, ¡simplemente!