Want to add lightweight, scalable animations to your website without using heavy video files? The Lottie widget in aThemes Addons for Elementor lets you embed Lottie JSON animations with customizable playback controls, triggers, and styling options.
In this guide, we’ll walk you through how to use the Lottie widget in aThemes Addons for Elementor.
Before you get started, make sure you’ve installed and activated the aThemes Addons plugin on your WordPress site along with Elementor.
Activating the Widget
Go to your WordPress admin dashboard and navigate to the aThemes Addons dashboard. Search for the Lottie widget and toggle it on to activate it.
Exploring Widget Options
Configuring the Lottie File Section
The Lottie File section includes the following options:
- Source Type – Choose between Media Library or URL to load your Lottie animation.
- JSON URL – Enter the URL of the Lottie JSON file if you selected URL as the source type.
- JSON File – Upload the Lottie JSON file from your media library if you selected Media Library.
Configuring the Settings Section
The Settings section includes the following options:
- Autoplay – Toggle automatic playback of the animation on or off.
- Loop – Toggle continuous looping of the animation on or off.
- Reverse – Toggle to play the animation in reverse.
- Speed – Adjust the playback speed of the animation.
- Trigger Type – Choose from None, Viewport, Hover, Scroll, or Click to control when the animation plays.
- Viewport Position – Set the start and end points for viewport-triggered animations.
- Size – Set the size of the Lottie animation container.
- Alignment – Align the animation to the left, center, or right.
- Rotate – Rotate the animation by a specified number of degrees.
- Render Type – Choose between Canvas or SVG rendering.
- Link – Add a URL to make the animation clickable, with options for link target.
Customizing the Style Tab
The Style tab lets you customize the Lottie animation appearance. Adjust opacity, transition duration, and CSS filters. Define separate styles for normal and hover states to create interactive visual effects.
Following Usage Tips
- Use high-quality Lottie animations from trusted sources for the best results.
- Set an appropriate trigger type to match how you want visitors to interact with the animation.
- Experiment with different speeds and playback options to find the right feel for your design.
- Use the style options to blend the animation seamlessly with your site design.
That’s it! You’ve successfully learned how to use the Lottie widget in aThemes Addons for Elementor to add lightweight, engaging animations to your website.
Next, would you like to integrate email marketing with your site? Check out our guide on using the Mailchimp widget to learn more.
