Adding Lottie And Bodymovin Animations To Elementor Pages

A World Webscapes Tutorial

Get Started Now

How To add Lottie or Bodymovin Animations to an Elementor Page with the WP Bodymovin Plugin.

The Demo

Video Walkthrough

Install WP Bodymovin

Find A Lottie File

Find a Lottie File you wish to use and click the download JSON file button.

Create A New Animation

On the Dashboard menu, navigate to the Animations menu. Click Add New link to create a new one. Add your downloaded JSON file and use the shortcode generator to create a shortcode. Click Publish

Return to Home Page Or Place You Wish To Display.

Add An Html Block To Page

Chose the HTML widget from our list of tools. Drag it onto the page to the desired location.

Add Our Shortcode

Paste the shortcode of our animation into the box. It should be added to a dark or black section since it has white arrows. It will not show up until you view the live page, do not panic. Publish your changes.

View Page

You can now view the page and the animation shows up. But it is not interactive and does not do anything.

Make It Clickable With “A” Tags

To make it clickable to a link or anchor. We need to place the shortcode inside an HTML code for links. You can make this click to another page, popup, or anything else you need.

<a href = "#"> Lottie Shortcode </a>

Use Anchor Widget To Target

You can have your down arrows link to the bottom of the page by selecting an anchor widget. Place this on a page and set the ID to “down” no #.

View Your Page

Your animation is now viewable and clickable.