How to Add a Lottie Animation to a Custom Footer Using Kadence

The Kadence Lottie animation block in the free version of Kadence Blocks adds an innovation to WordPress that no other free plugin offers: a no-code way to easily add animations to any WordPress site. 

To celebrate the launch of the Kadence Lottie Block, we’re offering a Get Animated with Kadence sale, offering 25% off all annual bundles. This sale ends tonight (February 22, 2022), so do take advantage of it!

In this post, we want to show you a cool way to use a Lottie animation in a site footer using Kadence Elements Templates. This theme-building tool is a pro feature you can get with one of the bundles currently on sale. Today, we’re building on two previous articles on Kadence Elements Templates and our Lottie Block announcement, which you might want to check out, too.

Kadence Elements Templates are the easiest way to customize specific page layouts in WordPress, and Lottie animations are the best way to add low-bandwidth high quality animations to your WordPress site. Together, Kadence Elements Templates and Lottie Animations create a unique opportunity for Kadence users to add attention grabbing, customized content to their sites.

Of course, you can use the Lottie Animation block anywhere you use blocks. And there is much more that you can do with Kadence Elements Templates. Here, however, we’re showing a simple, fun use case where you can use both.

Requirements

You’ll need a couple of things to ensure you can do this. 

First, make sure you have the free version of Kadence Blocks installed. This is where you will access the Lottie Animations block. The Lottie block is available to use anywhere you use blocks. 

Next, make sure you have Kadence Pro installed and activated with your license so that you can access Kadence Elements Templates. You can get the Kadence Pro plugin from the downloads page in the account area of KadenceWP.com. 

Once you have it installed and active, head to Appearance > Kadence and toggle Hooked Elements on. This will give you access to Kadence Elements Templates and theme building.

Building your custom footer with Kadence Elements Templates

Then, head to Appearance > Kadence > Elements to add a new template. Click “Add New” and then choose Template from the element type selections.

Next, add a title for your element template that is familiar to you, but not something that will be visible to the front end of your site. You’re just adding something here that will help you identify your template in your wp-admin in the future.

For the Kadence Elements Templates setting, under Placement choose “Replace Footer” then Select Page By > Individually. Then, click select items to find the page you would like to replace the footer on. You can choose multiple pages, or you can choose to only replace the footer for a singular page.

Design your unique footer

For our footer, we’re creating a custom footer for Bodhi’s “pawsome links” page that we created to replace his Linktree with a page on his own site. His own site is using the Yosemite starter template, but he wants one page to be unique. So, he’s using Kadence Elements Templates to create a unique footer just for this site. He’s added his social icons, but he’d like a little animated flair with a Lottie animation for people to contact him.

For the animation, he heads to LottieFiles.com to see what he can find for a “contact us” animation that works with his envisioned design. As dogs do, Bodhi quickly gets distracted and instead chooses an animation that is adorable and fun. Who doesn’t love a corgi friend?

To add this animation to his footer, his human first chooses a Row Layout block with three columns with 25/50/25 percentage breakdown.

In the middle column, we choose the Lottie Animations Block.

We head to LottieFiles and click the animation. This brings up a modal containing some settings for the animation that we can either change or not, but there is also a link to the Lottie file that we can use a remote image. We copy that URL.

When we paste in the URL for the Lottie Animation URL into our Kadence Lottie Block, our post editor shows us the new animation. We also, of course, add an Aria Label so that anyone using alternative screen readers will know what is there. We also add some spacers in the sections to the right and left of the Lottie Block in the two 25% columns.

If we want to add a link to the Lottie animation, we can easily do so in the Section block that surrounds the Lottie Animation block. Use the WordPress block editor List View toggle to select the Section that contains the Lottie, then enter the link for Overlay Link as shown below.

Adding a Lottie Animation to a custom footer is easy

Using Kadence, adding an animation to a custom footer is easy. Kadence Elements Templates opens up complete creative customization control over any page, group of pages, devices, users and so much more. Add the new features available in Kadence Blocks, and your creative possibilities are endless.

While the Lottie Animations Block is available in the free version of Kadence Blocks, Kadence Elements Templates are only available in the Kadence Theme Pro plugin.

All annual bundles are currently on sale with a 25% off discount, but that sale ends today.