Adding Lottie And Bodymovin Animations To Elementor Pages

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

This tutorial is now out of date: Elementor has released a new Lottie Widget as of Pro 2.10. If you are a Free user, then you can still use this.

The Demo

[bodymovin anim_id=”9043″ loop=”true” width=”50%” height=”50%” align=”left”]

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

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>

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.

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.

Share on facebook
Share on twitter
Share on linkedin
Share on pinterest