How to add Lottie Animation in Elementor
Want to add Lottie animation in elementor? The Lottie widget we will use is from Premium Addons. You can use it to add beautiful, lightweight animations to your WordPress website. You can use these animations anywhere on your WordPress website to breathe life into even the most mundane pages and posts.
Here, I will show you the easiest way to add Lottie animation in Elementor so let’s get into it.
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.
Search and select the Lottie widget from the menu bar on the left-hand side of your screen then drag and drop it in the selected area.
A window with the basic setting options will appear. Under the Content tab, It will give you many options to customize your Lottie animation.
A lot of ready-made animations are available for adding to your webpage. There is a file source option that lets us add animation files to the page. We can either import animations through a URL, or we can upload the animation file from our computer.
Importing a Lottie Animation
Now, head over to the LottieFiles website to download the animation. Click “Get started for free” and sign up using any of the options. After signing up, click “Animations” in the menu.
Here, you can either choose from the list of featured animations or you can use the search bar to look for something specific.
Importing Using URL
If you like it, copy its Lottie Animation URL provided below. Then, head back to your Elementor editing page. Paste the copied URL in the “Animation JSON URL” field below the File Source option. This animation will instantly become available on your page and you can customize it just like any other Elementor widget.
You can customize the animation itself by making it loop, play it in reverse, or changing its animation speed using the options in the Content tab in the sidebar. Also, you can customize its behavior on the page by creating a trigger for it to start playing. You can choose the viewport, hover, or scroll as triggers.
In the Style section, You can alter its opacity. Finally, the Advanced section lets us add further customizations for margins, motion effects, borders, responsiveness, and more.
Here is a preview of the animation from our own website as an example.
Alright! Now you know how to add Lottie animation in Elementor. We hope this guide has helped you.
Feel free to contact us if you need any help regarding this topic. Do let us know the topics you want us to cover in the comment section or reach out to us with your queries by clicking the contact form below
