Introducing Divi Layouts Extended this festive season

Access Cyber Monday Sale

Jun 29, 2021 | Divi Resources

How to Add Lottie Animations on Your Divi Website (With & Without a Plugin)

Lottie animations on a website look attractive and a great way to capture users’ attention. If you’re looking to add Lottie animations to your Divi website, this blog post will guide you to do that easily. Lottie animations are a new form of displaying moving animations that are customizable yet smaller than PNGs and GIFs. 

To add Lottie for web pages in Divi, we’re going to use a premium plugin and an alternative way that will not use any plugin. So, you can add Lottie animations for free on your website. 

Therefore, without any delay, let’s find out how you can do that.

Adding Lottie Animations on Divi Website Without a Plugin

Bringing some effects on the website without using a plugin is something that most users and developers fascinate. You don’t have to invest money, add extra scripts and go through different processes. The same could be done with Lottie, and the following steps will help you do that without giving much of the effort.

Step 1: Go to the LottieFiles & Create an Account

To add Lottie animations to your Divi website, the first thing you need to do is select and download the Lottie animation. And to that, you need to go to It’s a Lottie library that allows you to download Lottie files for free.

LottieFiles homepage

After opening, create a free account if you don’t have one already, and move to the next step.

Step 2: Search Your Desired Lottie Animations

Once created the account on LottieFiles, go to the search bar and look for your needed animation. Or you could also try the Discover and other menu items available there.

LottieFiles Animations search options

Step 3: Copy Animations Web Player Code

When you search for a particular Lottie animation or try the discover option, you’d find a lot of animations created by the community available to use for free.

LottieFiles community work

Click the animation you want to use on your website. It will open a popup to provide you with different options to use it.

LottieFiles options after clicking on it

Scroll down on the popup and click the <html> option under the “Use this animation in” field. It will lead you to a new page, where you could apply customizations to the animation. For example, play direction, background color, dimensions, autoplay, and more.

Lottie animations customization options at LottieFiles

Apply tweaks according to the requirement. And once done with the tweaks, copy the Lottie web player code from Generated Code field by clicking the Copy Code.

Copying Lottie animation code

Step 4: Add Lottie Animations Web Player Code on the Page

After copying the code, go to the page where you want to add moving Lottie graphics. Then, insert Divi Code Module.

Divi code module

Inside the code module, paste the code you’ve copied before from LottieFiles.

Pasting Lottie Animations code in Code module

And with that, you’ve added Lottie animation on your Divi site without using any plugin. Though, it will be only visible on the front-end. This is how the animation would look like after adding it to the site.

I’ve selected the web player controls while copying the code. You can disable that and let Lottie animation work when users click or hover.

Downside of This Approach

Adding Lottie animations on a Divi website without using a plugin is simple and free. You don’t have to invest money other than time. But, the downside of this approach is that you’ve to invest a lot of time if later you want to edit its working. You have to go to the site, tweak the options, copy the code and paste it again and again every time you’d need a change in a single animation.

Therefore, to save time and follow fewer steps, what you can do is, use a Lottie plugin. And the following steps will guide you on how to do that.

Adding Lottie Animations in Divi Using a Plugin

Lottie animations look good, and with a plugin to add them on-site, they become more good and exciting. Follow the below steps, and add them to your site in no time with additional customization options.

Step 1: Get Divi Plus Plugin

Divi Plus is a multipurpose plugin for Divi that provides you with many features and options to design a beautiful website. It includes over 50+ modules that also comprise the Lottie module. And to add Lottie animation, we’ll be using that module. So, therefore, you need to get the Divi Plus plugin.

Once got the plugin and installed it on your website, move to the next step, where we’ll download our Lottie JSON file.

Step 2: Download Lottie Animations JSON File or Copy URL

Go to, search for your needed animation, and click the one you want to add to the site. It will open the popup with different options.

Downloading Lottie JSON file

Click the Download button at the top → Lottie JSON. Or you could copy the animation URL from Lottie Animation URL field.

Step 3: Insert Lottie Module

After downloading the Lottie JSON file, go to the page where you want to add the Lottie Animations and insert the DP Lottie module.

Inserting Divi Plus Lottie module

If you haven’t enabled the Divi Plus settings module, follow this guide to enable Divi Plus Lottie module.

Step 4: Upload Lottie Animations File

Now, after inserting the Lottie module, upload the JSON file you’ve downloaded by clicking the Upload button.

Uploading Lottie JSON file

It will open the media file uploader, where you could either upload the file or use the URL by clicking “Insert from URL.”

Uploading Lottie JSON file through WordPress media uploader

Once the file has been uploaded successfully, you will get your Lottie animation as the following illustration.

Step 5: Apply Customizations

Without using a plugin, you’d have to change the code again and again to tweak your Lottie animations. But with Divi Plus Lottie module, you can perform several customizations right on the builder. Therefore, it saves you time and enables you to add beautiful Lottie animations on the site with little or no effort. The customization options it provides are as follows,

Divi Plus Lottie module customization options

Divi Plus Lottie Module Customization Options

  • Animation Trigger – It allows you to activate Lottie animation on Hover, Click, and Autoplay.
  • Direction – Play them in Reverse and Normal direction.
  • Loop– Lottie won’t stop playing.
  • Animation Speed – Set Lottie playing speed fast or slow.

To understand the functioning of these Lottie customization options, you might want to check out the module’s demo page. Furthermore, in addition to these options, you could also use Divi’s native module to perform tweaks even further. For instance, sizing, placement, background color, and more which you’d not be able to do without plugin way.

Wrapping Up

So, those are the steps to add Lottie animations on a Divi website with and without a plugin. Both the steps are easy to follow and provides you with beautiful Lottie’s. However, with a plugin, you’ll not have to perform the same task repeatedly to change a particular animation’s working.

Therefore, if you want to add Lottie animations to your Divi website easily and without tiring repeated steps, go and get the Divi Plus plugin. Let us know; this tutorial was helpful to add Lottie to a website. Have you tried Divi Plus Lottie module already? Then what was your experience using it?

Posted By:
Karan loves making web beautiful with his keen eyes toward design.

1 Comment

  1. Hayden

    Does this method still work without a plugin? Just tried it in a blank section with nothing but code and it doesn’t seem to actually show in the editor


Submit a Comment

Your email address will not be published. Required fields are marked *

1 Comment

  1. Hayden

    Does this method still work without a plugin? Just tried it in a blank section with nothing but code and it doesn’t seem to actually show in the editor


Submit a Comment

Your email address will not be published. Required fields are marked *

Popular on Divi Extended

Divi Extended Black Friday Sale Divi Plus WooCommerce Extended Divi Child Theme Divi Header Layouts
Cyber Monday Popup