Divi Tips

Lotties para Divi: ¿cómo funciona?

Publicado el 14/06/2021 | 17 comentarios

1.142 palabras

5

¿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 :

lottie files
Librería Lottie Files

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.

Divi Supreme version gratuite
Versión gratuita de Divi Supreme

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.

BrainAddons for Divi
BrainAddons para Divi - versión gratuita

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.

Lottie dans Divi sans plugin

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:

lottie divi sans plugin 2
Inserción del lote mediante un iFrame
  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.

lottie divi sans plugin 3
Ajuste de la configuración de Lottie
  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
lottie divi sans plugin 4
Inserción del lote mediante HTML + Script
  1. Una vez validado el módulo Código, es posible que no aparezca nada. No te preocupes...
  2. Salga del Visual Builder.
  3. Una vez fuera del Visual Builder, ¡verás cómo aparece el Lottie!
  4. 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!

Lottie pour Divi
Divi Lottie
obtenir divi bouton
quizz divi bouton
newsletter bouton
formation divi bouton
guide divi pdf bouton
bouton support divi

Puede que a ti también te guste:

Comment utiliser 7, 8, 9, 10+ colonnes dans Divi ?

Comment utiliser 7, 8, 9, 10+ colonnes dans Divi ?

Votre client souhaite afficher une ligne avec les logos de ses 9 principaux clients… Comment faites vous ? Dans cet article, je vous explique comment aligner plus de 6 éléments sur une même ligne !

Comment utiliser la Flexbox CSS dans Divi ?

Comment utiliser la Flexbox CSS dans Divi ?

Laissez-moi vous faire découvrir une autre manière de créer vos mises en page Divi en utilisant la Flexbox. Ce module CSS puissant permet de faire des choses extraordinaires 🤩.

Divi AI : l’intelligence artificielle arrive dans Divi !

Divi AI : l’intelligence artificielle arrive dans Divi !

Découvrez les prémices du futur de l’édition de sites avec l’intelligence artificielle. Divi AI propose aujourd’hui la génération de textes et d’images… Et demain ? Sera-t-il possible de créer un site de A à Z à l’aide de prompts ?

17 Commentaires

  1. Cyril

    Super ces lotties ! Je connaissais pas. Si quelqu’un trouve comment enlever le lottie-player ce serait cool 🙂

  2. Cyril

    Ah mais c’est très simple en fait pour enlever le player !! Il suffit de décocher « controls » avant de copier/coller le code 😆

  3. David C.

    Bonjour Lycia,

    Pas mal, bonne trouvaille.
    Perso je ne connaissais pas.

    Sinon on peut aussi faire plus de chose avec du SVG. Il faudra cependant connaître un minimum le code SVG pour arriver à un bon résultat mais c’est bien plus poussé.

  4. Lycia Diaz

    Merci David, oui le SVG est aussi très intéressant mais en effet, rien n’est « pré-maché », il faudra s’y connaitre un peu 😉 alors que la bibliothèque LottieFiles est vraiment pratique.

  5. Lycia Diaz

    Oh punaise Cyril, c’est vrai ? Quelle quiche que je suis 😉 je n’ai pas vu cette option. Merci pour l’info, les autres lecteurs vont être contents de ton intervention 😉 Merci encore.

  6. Cj-envadrouille

    Super ces petites animations je les trouve adorables . Je vais me laisser tenter pour les roulettes.
    Comme nous parlons animations tu nous expliqueras un jour comment tu as réalisé les animations de ta page à propos ? 😉😉🙏🙏

  7. Lycia Diaz

    Coucou Christine ! Tu parles de ma page À propos sur La Webeuse ?

  8. Cj-envadrouille

    Oui Lycia, je parle de la page « à propos » de la Webeuse 👍👍👍

  9. Lycia Diaz

    Ah c’est simplement les options d’animation des modules de Divi (onglet Style > Animation)

  10. Lycia Diaz

    Oh trop génial ! La plage, les cocotiers, le voilier… trop sympa ! Mais à la fin de l’article avec la fille qui dit « bye », c’est un lottie aussi ? Car il me semble pas animé… bisous

  11. Cj-envadrouille

    Merci Lycia 🥰 . « La fille qui dit bye », c’est mon avatar facebook , et ma signature d’article….tu ne m’avais pas reconnue 🤣🤣🤣 ?

  12. Lycia Diaz

    MDR

  13. Mélanie

    Bonjour Lycia, merci pour ton article sur les lotties. J’utilise divi supreme, mais les lotties ne s’affichent pas sur mobile. Je ne sais pas pourquoi.

  14. Lycia Diaz

    Ah c’est bizarre. Quand les images ne s’affichent pas sur mobile c’est parce qu’elles ont des accents dans le nom du fichier mais pour les lotties aucune idée

  15. Gwendal

    Bonjour Lycia, super article ! Comme l’a dit Cyril, pour enlever le player, il faut décocher la case Controls. Ce serait super top de modifier ton article pour gagner du temps 😝. Merci pour tes articles !

  16. Lycia Diaz

    Oui tu as raison je vais corriger bientôt

Soumettre un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.