How To Add Lottie Animation In Infobox Elementor?

Updated onApril 9, 2026By

Key Takeaways

  • The Plus Addons for Elementor allows users to add Lottie animations to infoboxes using the Info Box Widget.
  • Users must create a free account on LottieFiles.com to copy the Lottie file URL for embedding.
  • The Info Box Widget supports both Listing and Carousel layouts for displaying infoboxes with Lottie animations.
Table Of Content

Looking to add some fun to your Elementor infoboxes? You can easily add cool animated Lottie files to them. Lottie uses vector animations to make smooth graphics and motion in a small file size.

With the Info Box Widget from The Plus Addons for Elementor, you can add amazing Lottie animations to your infoboxes in just a few clicks. 

To check the complete feature overview documentation of The Plus Addons for Elementor Info Box widget, click here.

Requirement  – This widget is a part of The Plus Addons for Elementor, make sure its installed & activated to enjoy all its powers.

LIVE WIDGET LINK

First, go to LottieFiles.com and create a free account there if you don’t have one.

Now log into your account and search for Icon here you’ll find all the Lottie Icons.

Click on the animation you like, it will open in a popup, copy the Lottie file URL from the Asset Link & embed field. You need to have an account on Lottiefiles.com to copy the animation URL.

Lottie animation url

Now, add the Info Box widget to the page and follow the steps –

1. From the Select Layout dropdown, you can select Listing or Carousel.

Let’s select Listing here.

From Icon Box Style, select the appropriate display style for the info box.

Add the infobox title and content in the Title and Description fields as per your requirements.

2. Then select Lottie from the Select Icon dropdown.

Note: With the Carousel layout, there are two Select Icon dropdowns – one for all info boxes together and one for each info box individually.

3. In the Lottie URL field paste the copied Lottie file URL.

Info box lottie animation url

Now you should have a beautiful Lottie animation icon with a Lottie file.

Lottie animation infobox demo

Suggested Read: How to Create an Infobox/Service Box Carousel in Elementor.

About the Author

Photo of Aditya Sharma CMO of The Plus Addons for Elementor
CMO · The Plus Addons for Elementor · 10 years experience

He has spent years in the WordPress ecosystem building, breaking, and optimizing sites until they actually perform. He works at the intersection of speed, growth, and usability, helping creators ship websites that load fast and convert. An active WordPress community contributor sharing through tools, tutorials, and direct collaboration. Tested practice, not theory.

WordPressElementorn8nAIClaudeAutomationServer
LinkedIn X GitHub YouTube Website
Get Instant Answers to all your questions about The Plus Addons for Elementor, trained on 1000+ Docs and Videos

Related Frequently Asked Questions

What should I do if my Lottie animation isn't displaying in the infobox?

If your Lottie animation isn't showing up, first ensure that you've copied the correct Lottie file URL from LottieFiles.com. Double-check that the URL is pasted into the Lottie URL field in the Info Box widget. Also, confirm that The Plus Addons for Elementor is installed and activated, as the widget relies on it to function properly.

Can I use Lottie animations for all types of infobox layouts in Elementor?

Lottie animations can be used with both Listing and Carousel layouts in the Info Box widget. However, note that the Carousel layout has two Select Icon dropdownsu2014one for all info boxes together and another for each box individually. This allows for more customization in how animations are displayed.

What are the best practices for selecting Lottie animations for my infobox?

When choosing Lottie animations, consider the theme and purpose of your infobox. Select animations that enhance the message you want to convey without overwhelming the viewer. For a cleaner look, opt for simpler animations that complement your content, as overly complex animations can distract from the information presented.

Are there any limitations when using Lottie animations in the Info Box widget?

While Lottie animations add visual appeal, they may not be suitable for every context. For instance, if your audience has slower internet connections, large Lottie files could impact loading times. Always test the performance of your page after adding animations to ensure a smooth user experience.

How can I find suitable Lottie animations for my project?

To find Lottie animations, visit LottieFiles.com and use the search feature to browse various icons and animations. You can filter results based on categories or styles that match your project's theme. This will help you select animations that are visually cohesive with your overall design.

Last reviewed: April 9, 2026

Related Docs