---
title: "How To Add Lottie Animation In Infobox Elementor?"
url: https://theplusaddons.com/docs/lottie-animation-in-infobox-elementor/
date: 2024-03-14
modified: 2026-04-09
author: "Aditya Sharma"
description: "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..."
image: https://theplusaddons.com/wp-content/uploads/2024/03/How-To-Add-Lottie-Animation-In-Infobox-Elementor_-1024x536.jpg
word_count: 296
---

# How To Add Lottie Animation In Infobox Elementor?

## 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.

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.](https://theplusaddons.com/docs//info-box-widget-settings-overview/)

***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](https://theplusaddons.com/elementor-widget/elementor-info-box/?utm_source=tpae&utm_medium=docs&utm_campaign=text)

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](https://theplusaddons.com/wp-content/uploads/2024/03/Lottie-Animation-URL.gif)

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](https://theplusaddons.com/wp-content/uploads/2024/03/Info-box-Lottie-Animation-URL.png)

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

![Lottie Animation infobox demo](https://theplusaddons.com/wp-content/uploads/2024/03/Lottie-Animation-infobox-demo.gif)

***Suggested Read:** [How to Create an Infobox/Service Box Carousel in Elementor.](https://theplusaddons.com/docs/create-an-infobox-service-box-carousel-in-elementor/)*

## Frequently Asked Questions

**Q: What should I do if my Lottie animation isn't displaying in the infobox?**
A: 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.

**Q: Can I use Lottie animations for all types of infobox layouts in Elementor?**
A: 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.

**Q: What are the best practices for selecting Lottie animations for my infobox?**
A: 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.

**Q: Are there any limitations when using Lottie animations in the Info Box widget?**
A: 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.

**Q: How can I find suitable Lottie animations for my project?**
A: 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.