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 LottieFiles.com. It’s a Lottie library that allows you to download Lottie files for free.

LottieFiles homepage

After opening LottieFiles.com, 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 LottieFiles.com, 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
Karan loves making web beautiful with his keen eyes toward design.

0 Comments

Submit a Comment

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.

0 Comments

Submit a Comment

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.

15 Best eCommerce Website Builders to Use in 2021

15 Best eCommerce Website Builders to Use in 2021

If you’re here, then it would be wrong to say that you’ve not ever interacted with an eCommerce platform. Most of the people living today, once in their lifetime, have come across an eCommerce platform and interacted with it. Because according to an Inviqa report it’s...

Using Divi for RTL Website? Here Are 3 Things You Need To Know

Using Divi for RTL Website? Here Are 3 Things You Need To Know

Running a website for the business is one of the crucial aspects of running a business in today’s time. Whether you’re manufacturing fashion apparel or designing web projects, an online platform is always a plus. Based on this, more and more businesses are adopting...

An Amazing Guide on Divi Scroll Effects & How to Use Them Creatively

An Amazing Guide on Divi Scroll Effects & How to Use Them Creatively

Divi Scroll Effects are a great way to turn a simple Divi website into a modern one. And not only modern but highly interactive with enhanced engagement for different areas of the site. You could highlight CTAs, content sections and hook users to the purpose you've...

Popular on Divi Extended

Divi Plus Divi Child Theme Divi Header Layouts