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.
- 1 - What is a Lottie?
- 2 - Lotties: where to find them, how to create them?
- 3 - Plugins to insert a Lottie with Divi
- 4 - How to insert a Lottie with Divi for free and without plugin?
- 5 - Some Lottie ideas for your Divi layouts
- 6 - The Lotties for Divi: in conclusion...
Announcement: this article contains affiliate links that you will easily recognize. 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 little animations can brighten up your 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, with 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 :
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.
This extension enhances 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.
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.
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:
- 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 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.
- Click on the HTML button to get the code
- Define 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 where you want the Lottie to appear
- Once the Code module has been validated, it is possible that nothing will appear. Don't worry...
- Exit the Visual Builder.
- Once out of the Visual Builder, you will see the Lottie appear!
- 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...
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:
👉 Customize your shopping cart page:
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 other tips and resources directly on 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!