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 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.
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.
Creatte gives you the following options directly from their library interface:
- STATIC or ANIMATION
- 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.
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:
- 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.
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.
