Intro
We’re delighted to present Elementor Lottie Animations Free Widget, the latest addition to Premium Addons family. This exciting new widget comes with extensive customization options, allowing you to easily incorporate captivating Lottie Animation files into your website, certain to spark your interest.
In this article, we’ll explore the usage of Elementor Lottie Animations Widget within Elementor Page Builder. Let’s dive right in!
Requirements:
- You will need Premium Addons PRO plugin installed and activated on your website.
- Also, make sure that this addon is enabled so you can find it in the Elementor editor. Check this article to know how to do that.
- Premium Addons works only with Elementor Page Builder plugin so you will need to have it installed and activated as well.
Key Features
- General Setting: Select the Lottie animations File source to be from External URL or Media File.
Animation JSON URL
Get your JSON URL by applying the following steps.
- Go and open LottieFiles.com.
- Select the Lottie animated file that you want to use.
- Once you select it, open the file then copy the link located at Lottie Animation URL.
- Go back to the Elementor editor and paste the copied URL into the Animation JSON URL field.
- Loop: Loop option is activated by default. Switching “Off” this option will make the Lottie Animation file work only for just one time.
- Reverse: The reverse option will make the Lottie Animation file move backward.
- Animation Speed: You have the flexibility to modify the speed of the Lottie Animation, either slowing it down or speeding it up, according to your specific requirements.
- Trigger: You have the choice to pick from a variety of trigger options.
- ViewPort: Enabling this option will ensure that the Lottie Animation file starts work when it becomes visible within the viewport.
- Hover: Enable it will cause the Lottie Animation file to activate exclusively when the mouse cursor is positioned over it.
- Scroll: Selecting this option will make the Lottie Animation file work only while scrolling the page up/down.
- Size: Set the size of Lottie’s animations.
- Rotate: Adjust the rotation angle of the Lottie animations. check the video tutorial from here.
- Alignment: Select the Lottie animation widget to be left, center, or right.
- Link: Enable/disable adding an existing page link or an external link to your Lottie Animation file.
- Render As: Render the Lottie as SVG or Canvas, and set the render type to canvas if you’re having performance issues on the page.
Style
From the Style tab you can control and manage the following options for Normal/Hover state:
- Background Color: Select the background color on normal/hover state.
- Opacity: Set the opacity level of Elementor Lottie Animations on normal/hover state.
- CSS Filters: You can also customize the image style on normal/hover state further by selecting one of the available filters: Blur, Brightness, Contrast, Saturation, or Hue.
- Border Type: Select between the following border types, as well as the color and the width of the border on each side of Elementor Lottie Animation widget.
- Border Radius: Increasing the border-radius will add circular corners to Elementor Lottie Animation widget.
- Advanced Border Radius: Apply custom radius values for Elementor Lottie Animation widget. Get the radius value from here.
- Padding: Adjust the padding using pixels, em, or %.
Conclusion
Elementor Lottie Animations Widget offered by Premium Addons brings a fresh and dynamic dimension to web design. Its extensive customization options enable users to effortlessly embed eye-catching Lottie Animation files on their websites, creating an interactive and visually engaging online experience for their audience.
- Tagged Under:
- lottie animations
- lottie files
