Are you wondering how to create Lottie animations on WordPress?
If your answer is yes, then this comprehensive article is for you.
We’ll mention an amazing multi-purpose plugin that helps you do so and customize it to your needs.
So, stay with us till the end.
What are Lottie Animations?
Years before, exporting animations of the expected quality wasn’t easy.
When created, they were of huge sizes, which weren’t friendly to the site’s performance.
Then came Lottie animations, which are highly lightweight, interactive, scalable, and compatible animation files and are the perfect choices to make your WordPress website super engaging and healthy.
They have become one of the most beloved components for users to add to their website.
Benefits of Adding Lottie Animations on Your Site
You’re probably wondering how Lottie WordPress animations benefit your site. There are dozens of reasons why.
Let’s look at five advantages that you’ll gain with them:
- They look picture-perfect in every resolution.
- Because they’re small, your site’s speed remains intact, and the site’s SEO is undisturbed.
- Interactive and based on user’s input, it maintains a positive UI.
- Customizable animations that you can modify as per your site’s identity.
- Affordable/free of cost.
These points show that learning how to add Lottie animations in WordPress is one of many amazing decisions.
How to Add Lottie Animation in WordPress? (Step-by-Step Guide)
Now that we’ve established what Lottie WordPress animations are and why they are useful, let’s proceed with how to create Lottie animations on WordPress.
Step 1: Create an Account on LottieFiles
First, you need to create an account on lottiefiles.com. This website allows you to export free Lottie animations.
You can log in and skip to the next step if you already have an account.
However, if you don’t have one, click the Sign Up button at the top right corner.
You’ll view a popup where you can create an account by signing in with your Google, Facebook, or GitHub account.
There’s also an option to create a unique account only for this site if you’re not up to the above option.
Choose the option that you prefer and enter the required information.
There you go; we’ve completed the first step of creating WordPress animations.
Step 2: Choose an Animation and Save it to Your Workspace
To get Lottie animations for your website, head to the Products menu and select the Free Animations tab.
Here, you’ll find awesome yet free Lottie animations for your website.
Unfortunately, animations with crown icons require you to purchase the premium plans for your account.
For now, let’s select the first animation for our site.
Click on it, and you’ll see an interface like this. Press the Download button at the top of the popup, and the animation will be added to your workspace.
Step 3: Install the BlockArt Blocks plugin
Next, log in to your WordPress website and go to the dashboard.
There are a lot of WordPress plugins on the market that may allow you to add Lottie animations to your site.
In this tutorial, we’ll use BlockArt Blocks, one of the most powerful Gutenberg plugins. It has many features and robust blocks that can empower any site.
Above all, this plugin has an amazing Lottie WordPress block that will help us add animation to our site.
Go over to Plugins >> Add New Plugin.
On the search bar, type “BlockArt Blocks”.
Install the plugin and activate it.
Step 4: Add the Lottie Block and Attach the Animation
After activating the BlockArt Blocks plugin on your WordPress website and setting everything up, we need to add the Lottie block on a page or post.
In this article, we’ll be using it on a post. Go to Posts >> Add New Post.
This is the post editor. You can add blocks, templates, and much more to create attractive posts for your site. Click on the “+” icon at the line.
Then, type in “Lottie” and select the block.
You’ll find the option to either upload the Lottie file from your device or insert a URL to the Lottie file on the internet.
Let’s discuss both processes briefly.
We’ll be going back to our Lottiefiles dashboard.
1. Upload the Downloaded File
To upload the file, you need to download it to your computer. To do this, click on the animation from your dashboard. Then, select this icon in the top bar.
You’ll be given options on which file type to download it from. We’ll be downloading it as a Lottie JSON file.
Then, download it to your computer.
Next, open the page that you were editing before. On the Lottie block, click on the Upload button.
Then, select the animation file from our device.
After that, you can see the Lottie WordPress animation on your backend like this,
2. Insert the URL to the File on the Block
You may also enter a URL to link the animation file directly to your site.
To do this, return to your animation on LottieFiles and click the Handoff & Embed button on the sidebar.
There, enable the Asset Link by clicking on this icon.
After that, copy the Asset link below.
Then, back to your page/post editor, click the Insert from URL button on the Lottie block.
Paste the URL and press Enter.
Voila, the Lottie animation is visible on your site.
Step 5: Customize the Animation and Save the Changes
Now, let’s explain why we chose the BlockArt Blocks plugin to insert the Lottie animations.
It has a wide range of customization options and features that you can utilize to enhance the animation even more.
These settings answer all your questions about how to make Lottie animations attractive.
Let’s find out what’s stored for us!
i. General Settings
You can modify how the Lottie animation works on your website from the General settings.
From the Layout panel, you can replace the Lottie animation with another by uploading another file or adding another URL.
You may adjust the animation width, making it bigger or smaller.
Select the conditions for the animation from the Play On tab.
With the Mode tab, you can select whether the animation rewinds or not after its duration.
If you enable the loop option, the animation will keep playing on the screen. The Show Controls will allow users to control the animations from the front end.
Below them are options to control speed, delay, and loop count for animations.
ii. Style Settings
You have to make your animations attractive. These settings will help you do it quickly.
You can align the animation to the left, right, or center and change the background color of the Lottie animation.
iii. Advanced Settings
These settings create flexibility in the animations.
You can adjust the block’s spacing, change its Z-index, hide it on specific devices, and add additional CSS to it.
You can create Lottie animations for your website by utilizing all these settings.
After you’ve made all the right changes, click on the Publish button at the top right corner, and you’re all set!
So, this is how you can add Lottie animation in WordPress.
Wrapping Up the Tutorial on How to Create Lottie Animations on WordPress!
Now that this article has ended, let’s review what we’ve learned together.
We successfully added Lottie animations to our WordPress site in 5 simple steps with the help of the BlockArt Blocks plugin.
We also looked at the powerful customization options with the plugin to enhance our animations further.
We hope our article on how to make Lottie animations was helpful. If you want to learn more about the plugin we used, check out our article on the introduction to BlockArt Blocks.
And, if you still have some time to spend, we suggest you look at our articles on the best countdown timer plugins and timeline plugins.
Have an amazing website-building experience!
