Limited time offer. Pay once use FOREVER. 50,000+ Lottie animations & illustrations

Learn more

How to add Lottie to Divi

By Aram Movsisyan

Date 08 04 2022

How to add Lottie to Divi

WordPress is by far the most widely used CMS powering over 35% of all websites online. The platform is widely used because it doesn't require coding skills, and new functionalities are always being added through 3rd party plugins.

We will cover incorporating Lottie animations using one of WordPress's most popular web builders, Divi. Adding JSON-based animations just takes a few clicks thanks to Divi's highly accessible no-code, drag and drop web builder. After reading, you will be able to add Lottie animations to your WordPress website confidently.

Advantages of adding Lottie Animation in Divi

 Websites that utilize animation are more interactive, engaging, and unique. There are many methods to include motion elements to your pages, but Lottie is by far the most effective due to its minimal size and customization capabilities.

  • Pages will be More Interactive
  • Increase User Engagement
  • Set Your Self Apart from Competitors

Because Lottie uses JSON (JavaScript Object Notation), the animations exist on a web page in code rather than the entire file. This keeps pages running fast and allows the developer to easily make changes without using animation software.

How to Use Lottie Animations in Divi

 Divi is one of the most popular website builders for WordPress. We're going to show you just how easy it is to include animations on web pages by walking you through the steps in Divi.

 You will need:

  • Lottie animation Library – We use Creattie
  • A WP website built with Divi
  • Plugin to add your animation to a Divi module – We use Supreme Modules Lite

Step 1: Choose a Lottie Animation from Creattie

Creattie offers an extensive Lottie library of animated illustrations and icons perfect for every sector, and new packs are added monthly.

Navigate to

Click FREE in the header menu.

Browse the free animated illustrations; we chose PIZZARIA. But you can pick from animated illustrations or icons. Creattie also offers more paid options. 

choose lottie from creattie


Click on the Lottie animation you want to add to your webpage in Divi. Before downloading, you can customize the animation to fit the aesthetic of the other content on your page.

animated illustration creattie

Creatte gives you the following options directly from their library interface:

  • Two different animation styles
  • Colors
  • Speed
  • Timeframe

Once you've customized your animation, click DOWNLOAD.

A .JSON file will immediately begin downloading; it should only take a few seconds.

Step 2: Download Divi Supreme Plugin 

Now that you have your Lottie animation, you need to download the free Divi Supreme plugin that allows you to include JSON on Divi's visual builder.

In your WordPress Dashboard, hover over the PLUGINS button on the left-hand menu and click ADD NEW.

Type in SUPREME MODULES in the search bar and click ENTER.

The first search option should be "Supreme Modules Lite – Extra Theme and Divi Builder." Next, click DOWNLOAD, then ACTIVATE.

divi plugin directory

Several plugins enable JSON animation uploads. Another great option is the Divi Conkit Pro. The plugin has many features that add functionality and unique design elements on DIVI, including Lottie animations.

Step 3: Add Module in Divi

Now you are ready to add your animation to your web page!

First, navigate to the page you want to edit and enable Divi's visual builder. Then, add a new section, and choose the number of rows and columns you want to include in the new section, we picked a basic two-column layout, but you can make the animation as big or small as you want, thanks to the vector-based animation.

add lottie module in Divi

Step 4: Click Supreme Lottie

In the new section, click the PLUS sign to add a module. Then, scroll down to SUPREME LOTTIE; the new plugin features will be highlighted in purple.

supreme lottie

You will be redirected to the WordPress media upload page. 

Step 5: Upload JSON File 

We saved the Lottie animation to our desktop, so we accessed the file through the UPLOAD FILE button and the DESKTOP directory.

upload JSON file to divi plugin

When you find the Lottie animation, ours is titled PIZZARIA.JSON, upload into WordPress.

choose a JSON file

Step 6: Customize

customize JSON animation

After the file is uploaded, you will see your animation and be directed back to the DIVI builder. Supreme Modules allows you to customize the animation with the following:

  • Delay – You can set a delay so the animation doesn't start moving for a set amount of time (in milliseconds) once it appears on the UI.
  • Speed – Choose how fast you want the animation to run.
  • Loop – Choose between running the animation script once or on an infinite loop.
  • Direction – You can pick if you want the animation to run how the designer built it or in reverse.
Supreme Lottie Settings

You can make these changes because Lottie is JSON-based. The Plugin accesses the JavaScript file to make customizations directly from the Divi module.

Other types of files like GIF and SVG require the developer to upload a file restricting the customization capabilities. If you wanted to make a change, you would have to make a completely new animation and upload it into WordPress.

Supreme Modules doesn't allow you to change the animation color once it's been uploaded. But if you do decide to change your mind, going back to the Creattie library and downloading a new file after making color adjustments only takes a couple of clicks.

You have access to a full-color palette in the Creattie library so you can adjust the animation's appearance to reflect your branding and assimilate it with other elements on the page.

Final Words

As you can see, adding a Lottie animation in Divi is extremely simple. Lottie is the future of webpage and application animation because it is JSON-based, allowing you to upload and make changes quickly. In addition, the animation won't slow down your page load speeds.

Visit Creattie's library to browse the extensive selection of animations and animated icons. While there are free options to choose from, purchasing art from the platform is highly cost-effective and gives you more control over customization.  

Ignore me if you can

Attract, impress and win more customers with Lottie animations by Creattie.