You too are a fan of these small animations cute that you sometimes find on websites or mobile apps? It's called a Lottie. If you don't know, you're in the right place, because this article will explain you why and how to add Lottie in Divi.
1 â What is Lottie?
One Lottie, or Lottie File or Lottie Animation is a very light file JSON format which allows to animate icons, logos or images within your site or application. These small animations allow to brighten your layout, improve Your users' commitment and increase the conversion rate.
A Lottie is a recent format that was created at the base by Airbnb, to improve interactions in its mobile application. Then a native library was created so that the Lotties the web.
Today, thanks to plugins or a little code, you can easily integrate Lottie into WordPress but also in Divi !
Did you know that? You can test Divi for free by visiting on this page and by clicking on "TRY IT FOR FREE"
2 - Where to find them, how to create them?
So, create your own Lottie is not given to everyone. You will need to be in possession of various software including Adobe After Effects. You will have to install the AE BodyMovin plugin, create your images with Sketch, etc. So it's not that simple!
But I have good news. There is a partially free library where you will find hundreds of Lotties all ready, this is the site Lottie Files :

Just create a free account to access all download files. See you in the category Free Lotteries to start making your deal.
Need to master Divi? Discover my training that accompanies 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 have found your happiness in the bookshop of the Lotties, you can easily embark them on your Divi site using dedicated plugins.
3.1 â Using Divi Supreme
I've already introduced this plugin for Divi, to remind you, here is a small video (at 7
Divi Supreme is a freemium extension (a free part, a paid part) that brings +49 new modules within the Divi Visual Builder.

This extension enriches your experience with Visual Builder and the good news is that Lottie module is available.
So you can insert any animated image from the Lottie Files library in less time than it took to write.
Note however that you will need the Pro version of the plugin to benefit from this module.
3.2 â Using BrainAddons for Divi Builder
Alternative: BrainAddons for Divi Builder.

This is also a matter of freemium plugin for Divi, composed of 20 free modules + 20 paid modules. And you know, the Lottie module is proposed in the pro (pay) 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, as they have the advantage of offering a wide range of additional modules for Divi and you will have the opportunity to absorb your investment. In addition, these modules allow you to define the behavior of the inserted Lottie: animation at click, scroll, hover, loop, duration, etc.
On the other hand, if you are thinking of using the Lotties on your site on time, you should find another solution, free of charge...
Easy! Official website Lottie Files allows easy embarkation of animations within the Divi Builder.

Then visit the site 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: Embed Code (iFrame code)
- Option B: HTML code
Option A: with iFrame code
If you choose this first option, it's very simple:

- Copy the iFrame code
- Within your Divi layout, insert a Code module
- Paste the iFrame code in the dedicated field
- You will see the Lottie in your layout. The only concern is that it is possible that this one is cropped (cut).
If this is your case, it is possible that Option B is more suitable...
Option B: with Script + HTML
This second option is no more complicated and has the advantage of being able to define some parameters such as size, height, loop, autoplay, etc.

- Click the HTML button to get the code
- Set the settings you need, for example, change the size of the Lottie
- Copy the generated code below the Lottie preview
- Back in your Divi layout, add a Code module to where you want to see the Lottie appear

- Once the Code module has been validated, nothing may appear. Don't worry...
- Leave the Visual Builder.
- Once released from the Visual Builder, you will see the Lottie appear!
- The only hit is that the Lottie reader is also visible.
Unfortunately, I tried everything ("play none" in CSS) but nothing does, this reader cannot (a priori) be deleted. So, free sometimes has its limits...
Need more resources for Divi? Discover the other articles in this section!
5 - Some ideas from Lottes for your layouts with Divi
When I went through the library of Lottes, I had some ideas...
Customize your 404 error page:
You will find all the Fancy 404 error here.
Customize your search page:
Use this tutorial to create a search page and insert an appropriate Lottie. You will find all the Lotteries in the "search" category here.
Customize your shopping cart page:
Follow this tutorial to customize your cart page and add one of the Lotteries in the Shop category :
And it's not over! You can insert Lotties where you like! Enjoy it, it's very light and it does not slow down your site.
Discover many other tips and resources directly on the blog ofElegantthemes.
6 - The Lotties for Divi: in conclusion...
So, I'm curious, did you know the Lottes? What do you think of these animations? You saw that it was easy to use them in Divi...
Note that on this page I inserted 6 Lotties direct in Gutenberg (This article is written with the WordPress editor, not with the Divi Visual Builder). Then just use option B of this tutorial and insert the code in a HTML BlockSimply!


Super ces lotties ! Je connaissais pas. Si quelqu’un trouve comment enlever le lottie-player ce serait cool đ
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 đ
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Ă©.
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.
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.
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 ? đđđđ
Coucou Christine ! Tu parles de ma page Ă propos sur La Webeuse ?
Oui Lycia, je parle de la page « à propos » de la Webeuse đđđ
Ah câest simplement les options dâanimation des modules de Divi (onglet Style > Animation)
Bonsoir Lycia , et voici mon article illustrĂ© par des lotties ….grĂące a toi đđ
https://desroulettessouslespieds.fr/visiter-ile-saint-honorat-cannes/
Qu’en penses tu ?
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
Merci Lycia đ„° . « La fille qui dit bye », c’est mon avatar facebook , et ma signature d’article….tu ne m’avais pas reconnue đ€Łđ€Łđ€Ł ?
MDR
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.
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
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 !
Oui tu as raison je vais corriger bientĂŽt