add_action( 'wp_footer', function() { if ( ! defined( 'ELEMENTOR_VERSION' ) ) { return; } ?>

Elementor Premium Addons and Lottie

Elementor's Premium addons are a great overall plugin for the base version of Elementor (if you don't have pro). However, if you're looking to do a few key features with Lottie animations there are some bottlenecks at this point in time with the Premium addons plugin (as of early 2023). Here's an inside look at why and how to best utilize their features.
Table of Contents

Premium Addons for Elementor

If you aren’t familiar with the premium addons bundle for Elementor, it’s a 3rd party (Elementor approved) suite of premium widgets and section templates for Elementor. Developed by the Leap13 team, they have both a free and pro version.

Out-of-the-box this bundle is a great value add to your Elementor page building, giving you access to all sorts of pre-made widgets like carousels, tabs, pricing tables, sliders and more.

The premium addons for Elementor can also be used in tandem with Lottie animations. However at this point in time there are some restrictions that limit how you can use them.

Features Included

Unlike some plugins, the Premium addons team has done a great job at making the user experience and navigation easy to use. It’s quite self explanatory and you can choose which widgets you want to use and which shouldn’t take up space behind the scenes. 

I’m a big fan of this feature as I try and avoid extra ‘bloat’ wherever possible. 

Using Lottie with Elementor Premium Addons

The biggest restriction is that Lotties cannot be used as a full screen background animation using sections, columns or containers. I’ll include some screenshots below but essentially, the premium Addons package allows you to add a lottie animation what any position on the page.

Now this alone is a great feat, especially if you have the base version of Elementor. If you aren’t familiar with Lottie animations, feel free to learn more about them here:

Premium Addons Animations

Here’s an example of what the premium addon’s ‘lottie background’ looks like when editing your page.

Technically, you can add a lottie animation within a section, column or most other base widgets within Elementor (as their website says “anywhere an icon or image can be placed”). 

how to use the lottie widget for Premium Addons

To start, navigate to the column, section or widget that you’d like to ‘place’ the lottie animation. In this instance, I’m using a container (previously Elementor sections). I’m prompted to enable lottie animations for this section, so I do. 

After enabling the lottie animation feature, you’ll be prompted to add an item. This is where you’ll link to your lottie/JSON file. Go ahead and click on ‘add item.’

Now, you’ll be faced with many more settings. If it’s too small to see within the screenshot below, the big ones are where the lottie animation is loading from, the size and how the animation triggers will play (on hover, autoplay, etc.). 

Notice in the screenshot above, the lottie animation has a blue bordered box around it. This is the display of the premium addons widget and you can actually click and drag it around to place anywhere on the page. Very nifty. 

The Drawback (for my own purposes)

The drawback of the premium addons (at this point in time) is that there isn’t the ability to add a lottie animation behind the content so that it’s 100% responsive, without having to add multiple locations. 

(below is a screenshot of what I mean)

Notice below, I’ve circled in green, the background type – this is where I’d ideally like to place the lottie widget. If you are using the base (free) version of Elementor you won’t see this option but for pro users, you’ll see these four options:

All Widget Settings Inside Premium Addons

The other factor that I noticed, and I can’t say if it’s the same for you, is that when I installed the Premium addons with the pro version of Elementor, the lottie live preview widget did not render (when adding in the lottie widget from inside Elementor pro).

It does however seem to right itself when switching the ‘lottie setting to ‘enabled’ inside the global settings of the Premium Addons.

There could of course be another conflict of plugin on my end but I’m using the Hello theme from Elementor and base settings. Personally, I like to see the live render from inside the Elementor’s Lottie widget and not have to be dependent on the Premium addon’s features.

Overall (Biased) Review

If you’re not interested in this feature or it’s not a deal breaker for you, I highly recommend checking this plugin suite out. It’s definitely one of the better Elementor plugins that I’ve seen but I try and keep most of my widgets within the base version of Elementor Pro.

Get In Touch

Questions and Conversations

Submit Your Project Info

Questions, comments or feedback on anything you’ve seen here. I’ll get back to you as soon as possible.