Divi 5’s Lottie Module brings dynamic, lightweight animations to your pages, making your pages more engaging and interactive. The right visuals are key to grabbing attention and keeping visitors engaged. With the Lottie Module, Divi 5 allows you to add professional-looking animations that are also performance-friendly.
In this post, we’ll explain everything you need to know about the Lottie Module, including its features, setup process, customization options, and ways to use it. Let’s jump in!
What Are Lottie Files?
Lottie animations are lightweight, JSON-based graphics that render as scalable vectors. They deliver scalable visuals without the hefty file sizes of videos or GIFs. Thanks to its ability to combine performance with flexibility, Lottie has gained in popularity, making it popular for modern web design. Unlike traditional animations, Lottie files use vector-based JSON data, ensuring crisp visuals and smooth playback across all devices and screen sizes.
Subscribe To Our Youtube Channel
In Divi 5, the Lottie Module seamlessly integrates these animations into the Visual Builder, allowing users to add dynamic, modern touches to their Divi websites in a few clicks. Whether highlighting a CTA or adding flair to a hero section, the Lottie Module makes incorporating animations without complex coding effortless.
With the Lottie Module, Divi 5 transforms how you bring motion to your web designs, making them captivating and efficient.
Key Features
The Lottie Module in Divi 5 is a versatile tool packed with capabilities that make creating dynamic, optimized animations easy. It offers control over animation behavior, allowing you to tweak speed, direction, triggers, and more. Let’s take a look at some of its key features.
Ease of Use
The Lottie Module in Divi 5 is designed with simplicity in mind, making it beginner-friendly and accessible to users of all skill levels. You don’t need to be a coding expert to add professional, eye-catching animations to your Divi website.
Thanks to the number of resources available online, sourcing animations is easy. Platforms like LottieFiles and Lordicon offer extensive libraries of free and premium Lottie animations, ranging from subtle loading icons to vibrant graphics.
For those seeking a unique touch, you can create custom animations using tools like Adobe After Effects with the Bodymovin plugin. This plugin exports animations as JSON files compatible with the Lottie Module. Whether you choose pre-made or custom animations, the process is straightforward.
Customization Options
The Lottie Module in Divi 5 offers customization options, giving you control over several aspects of the Lottie file. For interactive experiences, use Trigger Animation to choose when to activate the animation, such as on load, when the element enters the viewport, hover, click, or scroll. You can enable Loop Animation to allow continuous motion on your Lottie file, adjust the Animation Speed, select the Direction (forward or backward), and choose between normal or bounce in the Play Mode field.
Uploading JSON Animations
Adding Lottie animations to Divi 5 requires uploading JSON files, the standard format for Lottie files. However, WordPress doesn’t natively support JSON uploads in its media library, so you’ll need to take additional steps to ensure you can upload them.
The first option is to create a child theme and add a PHP snippet to your child theme’s functions.php file. This method is lightweight and ensures secure handling of your animation files. Alternatively, you can use a plugin like File Upload Types to allow JSON uploads without touching any code, making it ideal for users who prefer a plug-and-play solution. For a step-by-step guide to implementing either method, check out our support article, which walks you through the process to set up your Divi 5 website for JSON uploads.
How To Use The Lottie Module In Divi 5
Adding a Lottie animation in Divi 5 is straightforward. Create or download a Lottie animation from a source like Lottiefiles or Lordicon. Find and click the Lottie Module in the Visual Builder to add it to your page.
Upload the JSON file or locate it in your WordPress media gallery.
Choose the Trigger Animation. You can set it to animate on load, view, hover, click, or scroll to animate.
If you’d like your Lottie animation to have an interactive element to it, use the module’s Scroll to Animate trigger.
Using this trigger offers a great way to create dynamic and engaging user experiences. Instead of using the animation when the page loads, scroll to animate ties the animation’s progress directly to the user’s scrolling behavior. As the user scrolls down the page, the animation progresses frame by frame. This makes the animation an interactive element that makes the experience feel more dynamic.
If you’d like the animation to loop endlessly, enable the Loop Animation toggle. You can also set the Animation Speed, control the Direction (forward or backward), and select Normal or Bounce for Play Mode.
In the Design tab, you can control the sizing, alignment, height, spacing, and more.
Although you can’t change the colors of your Lottie files within Divi 5, most Lottie websites allow you to choose specific colors and stroke widths before you download them.
As you can see, adding a Lottie file to your Divi 5 website takes seconds and adds a bit of flair to your webpages without worrying about performance.
Practical Examples Using The Lottie Module
The Lottie Module in Divi 5 offers a wide range of applications, adding flair to websites with dynamic animations. From enhancing contact pages to eye-catching hero sections, its flexibility suits all types of designs.
With its seamless integration and customization options, Divi users can create engaging, performance-friendly experiences across their entire website.
Contact Pages
Adding Lottie animations can make your contact pages more engaging. For example, place looping Lottie Modules next to business hours, telephone numbers, and other contact information to create an interactive and inviting experience that boosts conversions without slowing down your site.
404 Pages
Turn frustrating 404 errors into memorable moments with playful Lottie animations. Add a spinning compass or animated search icon to your 404 page, paired with a short message.
Use the loop animation setting to keep the motion continuous, and trigger it on load to instantly grab attention. This makes the 404 page feel less like a dead end and more like a creative touchpoint.
Featured Products
Showcase your favorite Woo products or categories with Lottie animations to highlight products on sale. For example, place a sale badge Lottie animation next to a featured product to highlight it.
First, set the animation to trigger on load. Then, it activates as users browse, drawing their eyes to products and boosting visual appeal.
Services Sections
Bring your services section to life with Lottie animations that visually represent your offerings. For example, use looping animations for your marketing agency, adjusting speed to match the tone.
Additionally, set the view trigger to activate animations as users explore, ensuring a dynamic, professional presentation.
Hero Sections
Make your hero sections unforgettable with bold Lottie animations that set the tone for your website. First, add a smooth background animation using Divi’s Lottie Module. Then, place it behind rows and modules with Divi’s position settings.
For example, a flowing, modern animation or subtle particle effect can add depth to your site with little effort. Use the on-load trigger for immediate impact and adjust the play mode to bounce for a captivating effect.
Conclusion
In Divi 5, the Lottie Module simplifies adding lightweight, dynamic animations to websites. Seamlessly integrated into the Visual Builder, it enables professional animations with minimal effort. Flexible controls, extensive customization, and free Lottie file platforms make enhancing your site easy.
Ready to try the Lottie Module? Share your thoughts or creations in the comments or on social media.
Leave A Reply