Published on December 8, 2023
Since its inception in 2003, WordPress has undergone significant evolution. Initially renowned as top blogging software, it’s now the go-to content management system for various websites beyond blogs. WordPress owes its reputation to its user-friendliness: it’s easy to navigate, boasts an intuitive interface, eliminates the need for HTML editing software, offers 100% customizable designs, and allows seamless enhancement of website functionality through plugins.
Before we explore adding your free Lottie animation through plugins, there’s a crucial first step: choosing your Lottie.
On the LottieFiles website, look for your preferable animation. Selecting “Type” will give you the option to look for a free file. When you’d pick your preferred animation, you then have the choice to download it in three formats: JSON, animated GIF, and an MP4 file. Select and save the Lottie JSON file to your computer.
Installing A Plugin of Your Choice
Unfortunately, the original WB Bodymovin plugin was removed from the WordPress plugin repository in November of last year and no one yet knows why. But the good news is there are alternatives available for the Gutenberg editor, particularly for two common builders: Divi and Elementor. Let’s have a look at these alternatives in detail and in between, we’ll also discuss how to use them to add free Lottie animations in WordPress.
Gutenberg Blocks – Ultimate Addons for Gutenberg
In case you’re using the Gutenberg editor, this free plugin can come in handy. A fun fact about Gutenberg editor is that it is native to all WordPress installations. All you need to do is install and active this plugin through your plugin manager.
In order to implement your free Lottie animation, you need to add a new block while building a post or page. After adding it, scroll down till you come across the list of blocks under the heading that says Ultimate Addons Blocks. You’ll find the Lottie block at the very bottom.
After you’ve added the Lottie block, an upload button will appear. Click on the button and select your download Lottie JSON file. The free Lottie animation will automatically reshape to fit the platform and that’s what makes Lottie so special. It can fit anywhere without having its quality ruined.
“To customize or control your animation—adjusting hover effects, speed, looping, and size—navigate to the customization menu on the right side of your screen. If you’re using the Classic Editor for WordPress, you can still utilize this plugin, albeit limited to pages and posts created with Gutenberg. To toggle between Gutenberg and the Classic Editor, head to the settings of the Classic Editor plugin. Choose ‘Yes’ next to ‘Allow users to switch editors.’ Once done, you’re all set to create new pages and posts using your preferred editor.”
Supreme Modules Lite
A free plugin for Divi users, Supreme Modules helps to add various modules into Divi’s native system and that includes the Lottie module as well. Supreme Modules helps to bring together the functionality of Divi and the customization of the free Lottie animation. By Divi’s built-in controls, you have the liberty to place the animation anywhere you like on the page.
The plugin, however, will only work if Divi, which is a premium builder, is installed. So, after the installation of Divi, you can install and activate Supreme Modules and add the Lottie module to any column you deem best. Later on, the model will display an intuitive settings board that enables you to upload and edit your free Lottie animation.
Premium Addons for Elementor
“Here’s something incredible for all Elementor Website Builder Plugin users! Premium Addons for Elementor, a free plugin, offers an exceptional experience. Elevating the awesomeness further, Premium Addons lets you utilize Lotties not only within its own module but also in various other modules. Now that’s what we call true generosity!”
To empower you with the option to add your free Lottie animation anywhere you like, this animation functionality has been enabled in sixteen of its free and pro widgets. Bidding adieu to the mind-boggling CSS animations, you can now add your selected Lottie animation to widgets, such as headings, buttons, and pricing tables, to enhance the visual aesthetic of your design. This couldn’t get any cooler, right?
To conclude, by picking your preference, you can install your plugin and provide a fantastic user experience by making your website interactive with cool Lottie animations. We don’t mean to sound like an awful salesperson but hey, you can create an awesome website today with WordPress and free Lottie animations. So, what are you waiting for?
