---
title: "How to Use LottieFiles Animation with the Animated Service Box in Elementor?"
url: https://theplusaddons.com/docs/lottiefiles-animation-with-the-animated-service-box-in-elementor/
date: 2024-05-29
modified: 2026-04-09
author: "Aditya Sharma"
description: "Do you want to use the LottieFiles animation in the Animated Service Box widget? LottieFiles are very lightweight files that allow you to easily add complex animations to your website...."
image: https://theplusaddons.com/wp-content/uploads/2024/05/How-to-Use-Lottie-Animation-with-the-Animated-Service-Box-in-Elementor_-1024x536.jpg
word_count: 346
---

# How to Use LottieFiles Animation with the Animated Service Box in Elementor?

## Key Takeaways

- LottieFiles are lightweight files that allow users to add complex animations to their websites.
- The Plus Addons for Elementor Animated Service Boxes widget requires the JSON file URL of the LottieFile for integration.
- Users can style and control the Lottie animation from the Style tab after adding it to the Animated Service Box.

Do you want to use the LottieFiles animation in the Animated Service Box widget? LottieFiles are very lightweight files that allow you to easily add complex animations to your website.

By using LottiesFiles animation with the Animated Service Boxes widget from The Plus Addons for Elementor you can create unique and engaging designs.

*To check the complete feature overview documentation of The Plus Addons for Elementor Animated Service Boxes widget, [click here](https://theplusaddons.com/docs//animated-service-boxes-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.***

For this, you need to have the JSON file URL of the LottieFile you want to use.

First, go to[ LottieFiles.com](https://lottiefiles.com/) and create a free account there if you don’t have one.

Now log into your account and go to[ Featured](https://lottiefiles.com/featured) here you’ll find all the free Lottie files.

Click on the animation you like, it will open in a popup, click on the **Save to workspace to generate** button.

It will open the Lottie animation in a new window.

From the right panel enable the **Enable Asset Link** toggle. 

Then copy the Lottie file URL from the **Asset link** field. 

Then, add the Animated Service Boxes widget to a page and follow the steps -

1. Select **Info Banner**, **Hover Section** or **Services Element** from the **Main Style** dropdown.

Let’s select the Services Element here.

2. After selecting the appropriate style enable the **Image/Icon** toggle.

3. In the **Animated Service Boxes** section, you have to add the content. By default, you’ll find three items, open one item.

4. You can add a title in the **Title** field. 

5. Then select **Lottie** from the Select Icon dropdown.

![](https://theplusaddons.com/wp-content/uploads/2024/05/animated-service-boxes-lottie.gif)

6. After that paste the copied JSON link in the **Lottie URL** field.

Then add the necessary information in the remaining fields as per your requirement.

Following this process you can add Lottie files to the other items.

You can style and control the Lottie animation from the Style tab.

Now you’ll see beautiful Lottie animation on your selected Animated Service Box style.

![](https://theplusaddons.com/wp-content/uploads/2024/05/animated-service-boxes-lottie-demo.gif)

## Frequently Asked Questions

**Q: What should I do if the LottieFiles animation is not displaying in the Animated Service Box?**
A: If the LottieFiles animation isn't showing, double-check that you have copied the correct JSON file URL from LottieFiles. Ensure that the 'Enable Asset Link' toggle is activated in your LottieFiles settings. Additionally, verify that the Animated Service Boxes widget from The Plus Addons for Elementor is installed and activated, as this widget is essential for using Lottie animations.

**Q: Can I use LottieFiles animations for different styles in the Animated Service Box?**
A: Yes, you can use LottieFiles animations for various styles within the Animated Service Box widget. The widget allows you to select from different styles such as Info Banner, Hover Section, or Services Element. Choose the style that best fits your design needs, and then add your Lottie animation accordingly. This flexibility enables you to create diverse and engaging designs.

**Q: What is the best practice for selecting Lottie files for my Animated Service Box?**
A: When selecting Lottie files for your Animated Service Box, choose animations that complement your website's overall theme and message. LottieFiles offers a range of free animations; ensure they are lightweight to maintain site performance. Using animations that are visually appealing but not overly complex can enhance user engagement without slowing down your page.

**Q: What happens if I forget to enable the Image/Icon toggle in the Animated Service Box?**
A: If you forget to enable the Image/Icon toggle in the Animated Service Box, the Lottie animation will not appear as intended. This toggle is crucial for displaying your selected Lottie animation. Always ensure that this setting is activated before pasting your Lottie URL to avoid display issues.

**Q: Are there any limitations when using LottieFiles with the Animated Service Box?**
A: One limitation to consider is that LottieFiles animations require a JSON file URL, which means you need to create an account on LottieFiles.com to access and save animations. Additionally, the Animated Service Boxes widget is part of The Plus Addons for Elementor, so it won't work with other page builders like Gutenberg or Divi. This restriction is important to keep in mind when planning your design.

**Q: How can I style the Lottie animation in the Animated Service Box?**
A: You can style the Lottie animation in the Animated Service Box using the Style tab within the widget settings. This feature allows you to control various aspects of the animation's appearance, such as size and alignment. Proper styling ensures that the animation integrates seamlessly with your overall page design, enhancing visual appeal.