DiviFlash Lottie module allows you to add Lottie animations to your Divi website and control how they behave.
Activation Required: This module is disabled by default. To use it, you need to enable it manually. Refer to our guide for step-by-step instructions.
Let’s see the settings in brief and how to make better use of it —
Content Tab
This tab contains the settings for adding and controlling the Lottie animation.
Lottie Source
Lottie File Location: Choose the source of the Lottie file. Available options include:
- External File URL: Load the animation using a direct URL to the JSON file.
- From Media: Upload and select the Lottie JSON file from the WordPress media library.
Note: If you choose to upload the Lottie file from media, you must enable the “JSON file upload” option from the DiviFlash dashboard.
Lottie Settings
- Animation Trigger: Choose what action triggers the animation (for example viewport, hover, or scroll).
- Threshold: Define the viewport threshold required to trigger the animation. A value of 0 means the animation starts as soon as it enters the viewport. Higher values require more of the element to be visible before the animation begins. (Available only when “Viewport” is selected as the Animation Trigger.)
- Pause Animation Mouse Leave: Pause the animation when the cursor leaves the animation area. (Available only when “Hover” is selected as the Animation Trigger.)
- Track Divi Scroll Effect: Enable this option to synchronize the animation with Divi’s built-in scroll effects. (Available only when “Scroll” is selected as the Animation Trigger.)
- Loop: Enable this option to continuously repeat the animation.
- Animation Speed: Adjust the playback speed of the animation.
- Reverse Direction: Enable this option to play the animation in reverse.
- Renderer: Choose the rendering method used to display the animation.
Link: Use this default Divi setting to add a link to the entire module.
Background: Add a background color, gradient, image, video, pattern, or mask to the module.
Element Label: Rename the module to organize it more easily in the Divi Builder. (Only you can see this label.)
Design Tab
Use this tab to control the layout and visual appearance of the Lottie module.
Sizing: Adjust the width, height, and alignment of the module.
Spacing: Add custom margin and padding to the module’s container.
Border: Customize the border style, width, and color. And style each border separately or apply the same style to all sides.
Box Shadow: Add shadow effects to the module.
Filters: Apply color filters to enhance the appearance.
Transform: Scale, rotate, move, or skew the module.
Animation: Apply reveal animation effects and customize delay, duration, repeat settings, and animation type.
Advanced Tab
This tab provides additional settings for advanced users who want greater control over the module with custom code, conditions, and more.
Need Help?
If you have any questions or need assistance, contact our support team: [email protected]