Adding Lottie And Bodymovin Animations To Elementor Pages

A World Webscapes Tutorial

September 10, 2019

Adding Lottie And Bodymovin Animations To Elementor Pages

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

Table of Contents

Tools Used

Elementor

Difficulty

Difficulty 89%

Get Started Now

69702281_10218655631477096_8116706367953174528_o

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 by changing the #bottom.

Use Anchor Widget To Target

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

View Your Page

Your animation is now viewable and clickable.