Lottier – Lottie Animated Images for Divi Builder — is a powerful WordPress plugin that seamlessly integrates Lottie animations into the Divi Builder ecosystem. Lottie is a revolutionary file format that allows you to use beautiful, high-quality animations on your website without the performance drawbacks of GIFs or traditional video files. These JSON-based animations are incredibly lightweight, scalable to any size without pixelation, and can be manipulated interactively, offering a superior alternative for modern web design.
With Lottier, adding complex animations becomes as simple as adding any other Divi module. The plugin provides an intuitive interface within the Divi Builder, where you can upload your Lottie JSON files or paste a URL from a Lottie library. You gain complete control over how the animation behaves, including settings for autoplay, looping, speed, and even the direction of play. This empowers Divi users of all skill levels to create dynamic, engaging, and professional-looking websites that capture and hold visitor attention.
Why is this important?
In today's fast-paced digital world, user attention is a scarce commodity. Visitors often leave a website within seconds if it doesn't immediately capture their interest. Static pages are no longer enough. According to industry studies, websites with dynamic, interactive content see an 86% higher conversion rate and can increase user session time by up to 150%. However, traditional animations like GIFs are large and slow to load, negatively impacting your site's performance and SEO rankings. Google reports that a 1-second delay in mobile page load can decrease conversions by 20%.
This is where Lottier becomes a game-changer for your Divi website. It solves the critical problem of balancing visual appeal with performance. By using Lottie animations, which are often 90% smaller than equivalent GIFs, you can add stunning visual effects without slowing down your site. This ensures a smooth user experience, keeps visitors engaged longer, and helps improve your search engine rankings, directly translating to more leads, sales, and a stronger online presence.
Features
- Seamless Divi Builder Integration: Adds a dedicated "Lottier" module directly into the Divi Builder for easy access and use.
- Multiple Animation Sources: Upload your own Lottie JSON files or simply paste a URL from popular Lottie libraries.
- Advanced Playback Controls: Full control over autoplay, looping, playback speed, and animation direction.
- Viewport Animation Triggers: Start animations only when they become visible on the screen to save resources and improve performance.
- Interactive Triggers: Configure animations to play on user actions like mouse hover, scroll, or click for an interactive experience.
- Fully Responsive: Lottie animations are vector-based, ensuring they look crisp and perfect on any screen size, from mobile phones to 4K displays.
- Lightweight and Performant: Uses the highly optimized Lottie-web player for smooth playback with a minimal performance footprint.
- Custom Sizing Options: Easily adjust the width and height of your animations directly within the Divi module settings.
- Lazy Loading: Built-in lazy loading for animations to improve initial page load times and overall site speed.
- No Coding Required: A completely visual interface means you can implement complex animations without writing a single line of code.
Benefits Over Static Images
| Feature | Static Image (JPEG/PNG) | Animated GIF | Lottier (Lottie Animation) |
|---|---|---|---|
| Engagement | Low | Medium | Very High |
| File Size | Medium | Very Large | Extremely Small |
| Scalability | Poor (Pixelates) | Poor (Pixelates) | Excellent (Vector) |
| Interactivity | None | None | Full (On hover, click, scroll) |
| Quality | Good | Poor (Limited colors) | Exceptional (Full color) |
| Performance Impact | Low | High | Very Low |
How to install the plugin?
- Download the plugin archive using the button above.
- Navigate to Plugins > Add New in your WordPress dashboard.
- Click "Upload Plugin" at the top and select the downloaded ZIP file.
- Install, activate the plugin, and follow the quick setup wizard instructions.
FAQ
What is a Lottie file and where can I find animations?
A Lottie is a JSON-based animation file format that is small, high-quality, and interactive. It's a vector-based format, so it scales without losing quality. You can find thousands of free and premium Lottie animations on websites like LottieFiles.com. Designers create these animations in Adobe After Effects and export them as .json files using the Bodymovin plugin.
Will using this plugin slow down my website?
No, quite the opposite. Lottier is designed for performance. Lottie animations are significantly smaller than GIFs or video files, leading to faster loading times. The plugin also includes performance features like viewport triggers and lazy loading, ensuring that animations only load and play when needed, which further optimizes your site's speed.
Can I use Lottier animations as a background for a Divi section?
While the Lottier module itself is designed to be placed as a standard element, you can achieve a background effect with some creative use of Divi's positioning options. You can place the Lottier module within a section and use absolute positioning to place it behind other content. This allows you to create dynamic and animated backgrounds for your sections or rows.
Is Lottier compatible with the latest version of Divi and WordPress?
Yes, the plugin is regularly updated to ensure full compatibility with the latest versions of the Divi Builder, the Divi theme, and the core WordPress software. We recommend keeping both WordPress and Divi updated to their latest stable versions for the best performance and security.
