---
title: "How to Add Lottie Animation to Process Steps in Elementor?"
url: https://theplusaddons.com/docs/add-lottie-animation-to-process-steps-in-elementor/
date: 2024-06-13
modified: 2026-04-09
author: "Aditya Sharma"
description: "Are you looking to add a Lottie animation to the process steps in Elementor? With the Process Steps widget from The Plus Addons for Elementor, you can easily add a..."
image: https://theplusaddons.com/wp-content/uploads/2024/06/How-to-Add-Lottie-Animation-to-Process-Steps-in-Elementor_-3-1024x536.jpg
word_count: 301
---

# How to Add Lottie Animation to Process Steps in Elementor?

## Key Takeaways

- The Plus Addons for Elementor includes a Process Steps widget that allows users to add Lottie animations to process step circles.
- Users must obtain a JSON file URL from LottieFiles.com to use a Lottie animation in the Process Steps widget.
- The Lottie Width and Lottie Height sections enable users to adjust the size of the Lottie animation for responsive devices.

Are you looking to add a Lottie animation to the process steps in Elementor? With the Process Steps widget from The Plus Addons for Elementor, you can easily add a Lottie animation to the process step circle.

*To check the complete feature overview documentation of The Plus Addons for Elementor Process Steps widget, [click here](https://theplusaddons.com/docs//add-process-steps-in-elementor/).*

***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-process-steps/)

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 Process/Steps widget to the page and follow the steps -

1. After selecting the appropriate style, add the required process steps and content from the **Process/Steps** section.

2. Then open the repeater item on which you want to add the Lottie animation. Select **Lottie** from the **Select Icon** dropdown.

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

![](https://theplusaddons.com/wp-content/uploads/2024/06/process-steps-lottie-new.gif)

From the **Lottie Width** and **Lottie Height** sections, you can adjust the Lottie width and height for responsive devices.

You can further adjust the Lottie animation from the style tab.

Now you’ll see the Lottie animation playing in that specific process step item.

***Suggested Reading***: *[How to Create Vertical Process Steps in Elementor?](https://theplusaddons.com/docs//create-vertical-process-steps-in-elementor/)*

## Frequently Asked Questions

**Q: What if the Lottie animation doesn't play in the process steps?**
A: If the Lottie animation isn't playing, ensure that you have pasted the correct JSON file URL in the Lottie URL field of the Process/Steps widget. This URL must be obtained from LottieFiles.com after enabling the Asset Link toggle. If the link is incorrect or the animation is not properly configured, it won't display as intended.

**Q: Can I use any Lottie animation for my process steps?**
A: You can use any Lottie animation available on LottieFiles.com as long as you have its JSON file URL. After creating an account and selecting an animation, ensure to enable the Asset Link toggle to generate the correct link. This flexibility allows you to customize your process steps with animations that suit your design needs.

**Q: What settings work best for displaying Lottie animations in process steps?**
A: For optimal display of Lottie animations in process steps, adjust the Lottie Width and Lottie Height settings for responsive devices. This ensures that your animations look good on all screen sizes. Additionally, fine-tuning these dimensions can enhance the visual appeal and user experience of your site.

**Q: What should I do if I can't find the Lottie animation I want?**
A: If you're struggling to find a specific Lottie animation, consider exploring the Featured section on LottieFiles.com after logging into your account. This section highlights popular and free animations that may fit your needs. Saving to your workspace is a quick way to manage and preview your selections.

**Q: Does The Plus Addons for Elementor support other page builders for Lottie animations?**
A: The Plus Addons for Elementor is designed exclusively for use with Elementor. It does not support other page builders like Gutenberg, Beaver Builder, or Divi. If you're looking to implement Lottie animations, ensure you're using Elementor along with The Plus Addons for Elementor for full compatibility.

**Q: How can I check the features of the Process Steps widget?**
A: To explore all the features of the Process Steps widget from The Plus Addons for Elementor, you can refer to the complete feature overview documentation. This resource provides detailed insights into what the widget can do and how to maximize its capabilities for your design projects.