How to Add Lottie Animations to Elementor Website?

There are many ways to add a Lottie Animation to your website using Elementor Page Builder & Premium Addons for Elementor. We will go through each method and will describe what is the best usage cases for each method.

Adding a Lottie Animation as a Foreground Object

The simplest way to add a Lottie animation as a foreground object is to use: Lottie Animations Elementor Widget. It’s a free widget included in Premium Addons for Elementor.

If you need a more advanced widget, Image Layers Elementor Widget will be perfect for you. Using this widget will allow you to add a single Lottie Animation, multiple Lottie animations in layers, or even combine Lottie animation layers with other images and text layers.

Screenshot showing Elementor Image Layers Widget settings after adding Lottie animation files to it.
Lottie Animations Integrated in Elementor Image Layers Widget

Using Lottie Animations as Background Objects

If you want to use Lottie Animations as backgrounds inside your Elementor web page, You can use Lottie Animation Section Addon. It allows you to add a single Lottie Animation or multi-layers Lottie Animations to any Elementor section as a background. You can even combine it with other backgrounds and section addons.

This is showing Lottie Animations Section Add-on settings for Elementor Page Builder.
Lottie Animations Section Add-on for Elementor Page Builder

Using Lottie Animation Instead of a Regular Image Inside a Specific Widget

You can use Lottie Animations instead of regular images in all Premium Addons for Elementor widgets below:

Related Docs:

Download Now it's free!

Extend your Elementor Page Builder capabilities now with Premium Addons. 44+ Elementor Widgets Totally Free of charge.

Premium Addons for Elementor plugin logo

Stay Updated

Subscribe to our newsletter to receive the latest updates and features.