Divi Tips

Lotties for Divi: how does it work?

Published on 14/06/2021 | 17 comments

1,142 words


Are you also a fan of those cute little animations that you sometimes find on websites or mobile applications? It's called a Lottie. If you don't know what a lottie is, you've come to the right place, because this article will explain why and how to add lotties to Divi.

Announcement: this article contains affiliate links that you will easily recognise. The classic links are in purple and sponsored links are in pink.

1 - What is a Lottie?

A Lottieor Lottie File or Lottie Animation is a very light file in JSON format that allows you to animate icons, logos or images within your site or application. These small animations can brighten up your page layoutThis will improve user engagement and increase conversion rates.

A Lottie is a recent format that was originally created by Airbnb to improve interactions in its mobile application. Then, a native library was created so that Lotties could invade the web.

Nowadays, thanks to plugins or a little code, you can easily integrate Lotties into WordPress but also in Divi !

Did you know? You can test Divi for free by visiting on this page and clicking on "TRY IT FOR FREE

2 - Lotties: where to find them, how to create them?

So creating your own Lottie is not for everyone. You will need to have a variety of software including Adobe After Effects. You will need to install the AE BodyMovin pluginCreate your images with Sketch, etc. So it's not that simple!

However, I have some good news. There is a partially free bookshop where you can find hundreds of ready-made Lotties, it's called Lottie Files :

lottie files
Lottie Files bookshop

Simply create a free account to access all the files for download. Go to the free lotties category to start shopping.

Need to master Divi? Discover my training which will guide you step by step in the understanding and use of Divi! Learn more about Divi training.

3 - Plugins to insert a Lottie with Divi

Once you've found what you're looking for in the Lotties library, you can easily embed them on your Divi site using dedicated plugins.

3.1 - Using Divi Supreme

I have already presented you this plugin for Divi, as a reminder, here is a short video (at 7'24, you will discover my test of Lottie):

Divi Supreme is a freemium extension (one part free, one part paid) that brings +49 new modules to the Divi Visual Builder.

Divi Supreme version gratuite
Divi Supreme free version

This extension enriches your experience with the Visual Builder and the good news is that a Lottie" module is available.

So you can insert any animated image from the Lottie Files library in less time than it took me to write it.

Please note that you will need the Pro version of the plugin to use this module.

3.2 - Using BrainAddons for Divi Builder

Alternatively: BrainAddons for Divi Builder.

BrainAddons for Divi
BrainAddons for Divi - free version

Again, this is a freemium plugin for DiviThe programme consists of 20 free modules + 20 paying modules. And as you can imagine, the Lottie module is offered in the pro (paid) version of the plugin. Just like Divi Supreme.

4 - How to insert a Lottie with Divi for free and without plugin?

If you plan to use this type of animation regularly, I advise you to invest in one of the 2 plugins mentioned above, because they have the advantage of offering a wide range of additional modules for Divi and you will have the opportunity to amortize your investment. Moreover, these modules allow you to define the behaviour of the inserted lottie: click, scroll, hover, loop, duration, etc.

On the other hand, if you are planning to use Lotties on your site from time to time, you should find another solution, free of charge...

It's easy! The official Lottie Files website makes it easy to embed animations into the Divi Builder.

Lottie dans Divi sans plugin

Please visit the website Lottie Files and select the Lottie of your choice, click on it. I chose these cute little birds...

A window opens and offers you several options to embed this animation on your site. We will focus on 2 options:

  • Option A: the Embed Code (iFrame code)
  • Option B: the HTML code

Option A: with iFrame code

If you choose the first option, it is very simple:

lottie divi sans plugin 2
Inserting the lottie using an iFrame
  1. Copy the iFrame code
  2. Within your Divi layout, insert a Code module
  3. Paste the iFrame code in the dedicated field
  4. You will see the Lottie appear in your layout. The only problem is that it may be cropped.

If this is your case, it is possible that option B is more suitable...

Option B: with Script + HTML

This second option is not more complicated and has the advantage of being able to define some parameters such as size, height, loop, autoplay, etc.

lottie divi sans plugin 3
Adjusting the lottie settings
  1. Click on the HTML button to get the code
  2. Define the settings you need, for example, change the size of the Lottie
  3. Copy the generated code below the Lottie preview
  4. Back in your Divi layout, add a Code module where you want the Lottie to appear
lottie divi sans plugin 4
Inserting the lottie using HTML + Script
  1. Once the Code module has been validated, it is possible that nothing will appear. Don't worry...
  2. Exit the Visual Builder.
  3. Once out of the Visual Builder, you will see the Lottie appear!
  4. The only problem is that the Lottie reader is also visible.

Unfortunately, I tried everything ("display none" in CSS) but nothing works, this player cannot (a priori) be removed. So, sometimes free has its limits...

Need more resources for Divi? Check out the other articles in this section!

5 - Some Lottie ideas for your Divi layouts

While browsing through Lotties' library, I got some ideas...

👉 Customise your 404 error page:

You will find all the 404 error lotties here.

👉 Customize your search page:

Use this tutorial for creating a search page and insert an appropriate Lottie. You will find all the Lotties from the "research" category here.

👉 Customize your shopping cart page:

Follow this tutorial to customize your shopping cart page and add one of the Lotties in the Shop category :

And that's not all! You can insert Lotties anywhere you like! Enjoy it, it's very light and it does not slow down your site.

Discover many more tips and resources directly on the Elegantthemes blog.

6 - The Lotties for Divi: in conclusion...

So I'm curious: did you know about the Lotties? What do you think of these animations? Did you see how easy it was to use them in Divi?

Note that on this page I have inserted 6 Lotties directly into Gutenberg (this article is written with the WordPress editor, not the Divi Visual Builder). Then just use option B in this tutorial and insert the code into an HTML Block, plain and simple!

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

You might like it too:

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


  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.