Lottie

Introduction

The Lottie Widget adds lightweight animations to your site, allowing custom speed, triggers, and design for an interactive experience.

Key Use Cases for the Lottie Widget in Elementor:

• Enhance your website with lightweight, high-quality animations using the Lottie widget.
• Customize animation triggers, speed, and design to create an engaging and interactive user experience.

Prerequisite

• Elementor
• Animation Addons for Elementor

How to Activate a Lottie widget ?

To activate the Lottie widget, follow these steps:

1. Go to Animation Addons → Elements in your WordPress dashboard.
2. Locate the Lottie widget in the list.
3. Toggle it on to enable the widget.

This will activate the Lottie widget for you to use!

How to Add Lottie Widget in Elementor

1. Open the page where you want to add the Lottie Widget.
2. Launch the Elementor editor.
3. In the Elementor panel, search for “Lottie Widget.“
4. Drag the Event Slider widget to your desired section.
5. The Event Slider widget will now be available for customization.

How to Configure the Lottie Widget 

Enable it, create a new page, set a title, choose the Elementor Full Width template, and publish. Adjust options as needed.

Note: Selecting full Elementor elements in a template unlocks all widgets and customization options, boosting design flexibility and functionality. 

Navigate to the Edit with Elementor option to access the editor interface. 

After selection, the Elementor panel appears with all tools and customization options.

Click the “+” icon to add a container, then select the appropriate column structure and layout.

Here’s the interface where you can configure the settings and customize the Event Slider Widget across various tabs. 

Configuring Lottie Widget : A Step-by-Step Guide

Once the Lottie widget is added to your page, you can configure its settings under different tabs: Content,Style and Advanced.

Content Settings

You will find two options there – Settings and Additional Properties.

Settings

• In the settings options, you’ll find features such as source, upload JSON file, trigger, autoplay, controls, loop, and speed. Work on these settings, and you’ll be able to make the most of their differences to enhance your experience.

Additional Properties

The renderer and intermission options can be found under additional properties in the settings. Customize them according to your preferences to enhance your experience.

Style Settings

• In the style section, I’ve set the dimensions. Feel free to adjust them as needed to suit your design preferences.

Advanced Settings

In the advanced settings, you’ll find a variety of advanced features designed to enhance your designs. Experiment with these options and experience the difference they make.

Final Outcome

That’s it! You’ve successfully learned how to configure the Lottie widget in Elementor to create dynamic and engaging animations on your website.

For any further assistance or inquiries, feel free to contact our support team!