How to add Lottie to Divi

By Aram Movsisyan

Date 08 04 2022

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

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:

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

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:

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.

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.

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.

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.

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

Step 6: Customize

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:

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.  

Want to get free Lottie animations?

Sign up now and get thousands of free premium icons and Lottie animations.
Let's go