Lotties for Divi: how does it work?

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 :

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 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.

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:

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.

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

5. Once the Code module has been validated, it is possible that nothing will appear. Don't worry...
6. Exit the Visual Builder.
7. Once out of the Visual Builder, you will see the Lottie appear!
8. 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!