Adding Lottie And Bodymovin Animations To Elementor Pages

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

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.

No Additional Content Here Yet.

This area is used to display additional content that you would like to be hidden. This can be useful for mobile users. For more information on this area and how to make one visit the Read More Toggle Tutorial.

Getting Stuck?

We Can Help You

if you are having trouble with Wordpress or Elementor, we do our best to help. We can walk you through an issue via email, phone, or TeamViewer.

We can also create Elementor templates for sections or pages to help you achieve a look or style you need. These can be easily exported/imported to your website via JSON files.

Hourly Rates Will Apply.

Share this post

Share on facebook
Share on twitter
Share on linkedin
Share on print
Share on email

Farhad Black Suede Heels

99 $

Fabulous items for fabulous prices.
You deserve it.

Farhad Black Leather Purse

99 $

Fabulous items for fabulous prices.
You deserve it.

Farhad Black Printed Trench

159 $

Fabulous items for fabulous prices.
You deserve it.

Farhad Black Silk Scarf

49 $

Fabulous items for fabulous prices.
You deserve it.