How to Add a Lottie Animation in Divi Builder

Lottie is a rising animation format. Many web designers and developers started adopting it to replace GIF and other animation formats used in the web development. The main reason web developers are switching to Lottie is that Lottie is likely to lighter. Elementor and Brizy already support Lottie while Divi Builder hasn’t yet so far. If you want to add a Lottie animation to your Divi Builder page, you can use Divi Supreme.

Divi Supreme is a popular Divi plugin, available as a freemium plugin. The free version of Divi Supreme is available on the WordPress plugin directory. The free version of Divi Supreme comes with twenty-one creative Divi modules, including the Supreme Lottie module which you can use to add a Lottie animation to your Divi Builder page.

How to Add a Lottie Animation in Divi Builder

First, you need to install the Divi Supreme plugin on your WordPress site. Activate the plugin right away once installed. Next, create a new page and edit it with Divi Builder (or edit an existing one). On the Divi Builder editor, add the Supreme Lottie module.

On the appearing panel, paste the URL of the Lottie file you want to add to the Lottie JSON File field. Or if you want to upload a JSON file of your Lottie animation, you can click the UPLOAD button to select the JSON file.

Once the Lottie animation is added, you can then enable/disable the loop option, set the delay, set the direction, set the animation speed, and viewport.

To add a link to your Lottie animation, you can open the Link block under the Content tab.

Next, you can switch to the Design tab to style up your Lottie animation. You can set the Lottie animation size on the Sizing block. While to set the spacing (margin and padding), you can open the Spacing block.

Make sure to click the green checklist icon on the settings panel to apply the changes. Once you are done editing your page, you can publish/update it.