Lotties for Divi: how does it work?

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:

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

1. Click the HTML button to get the code
2. Set 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 to where you want to see the Lottie appear

5. Once the Code module has been validated, nothing may appear. Don't worry...
6. Leave the Visual Builder.
7. Once released from the Visual Builder, you will see the Lottie appear!
8. 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!