Premium Addons for Elementor has made it very easy to add Lottie animations to your Elementor pages. Almost all of our widgets are now compatible with Lottie Animations. For further information please check this article.
However, sometimes you like one of the Lottie animations but you want to change some colors, speed, etc. So today we will have a quick guide for how to edit Lottie animations.
Requirements:
- You will need Premium Addons free plugin installed and activated on your website.
- Also, make sure that this widget/feature/addon is enabled so you can find it in the Elementor editor
- Premium Addons works only with Elementor Page Builder plugin so you will need to have it installed and activated as well.
Step 1: Go to Lottiefiles.com and log in so you can download and edit the Lottie animations.
Step 2: Browse and search for the animation that matches your needs. Then click on Edit Layer Colors button.
Step 3: Navigate to Lottie Editor if you already have a JSON you can upload it from here.
Step 4: For every layer, you can show/hide it and pick a color for it.
Step 5: From Lottie Properties there’re some important options and preferences you can set.
- Animation Preferences:
- Change Lottie file Dimensions.
- Set the FPS (Frame Per Seconds) value.
- Set the duration for the animation.
- Playback Settings:
- You can change or remove the Background Color.
- Set the Playback Speed.
- Grouped Colors: Here we can find all colors that used in this Lottie Animation.
- Export As Lottie JSON: Export you files after save changes to use it on your website or project.
Now you can use the exported JSON file with any Elementor Widget that is integrated with Lottie Animations.
If you still need any further assistance, feel free to contact Premium Addons support team. We would be more than glad to help 😁
