Podia How-To: Animated Homepage Sections (canva gifs for the win)

Do you ever get that urge to just randomly update your website for no apparent reason? Oh... just me? 🤣

I was adding to my Podia Pro Website Design page and adding the addition of my new ADHD Focus Community (leveraging Podia's community feature 🎉) and I thought my homepage could use a little refresh.

One of my most requested tutorials for podia design clients is how I create animated images and backgrounds so I thought I'd give you a little sneak peak while I'm working away on it.

To see the animations in action - you can go to: https://www.emptydesksolutions.ca

The top banner is comprised of two part to make it work the way it does.

1. an animated background (gif), and

2. an animated image for the content container (gif)

Because podia doesn't at this time support video backgrounds the gif is our work around - sneaky I know! You can't have your animation too long or complex, otherwise the file will be too big to upload to the website editor, but trial and error will allow you to get it just right.

In cava I start with my canvas size 1920px but whatever height I want. In this case the image is quite tall for the background because I want the purple to blend in from my top navigation, then I want the subtle sparkle stars to animate, and I also wanted the background to fade to white so it looks ike it blends seamlessly to the next row underneath for the "Hi, I'm Brittany" section.

If you're happy with just a static image on top of a moving background for your row, then your work here is done.

Or if you wanna be a little "extra" (and let's be honest, I am... so stay with me hah!), then you can also create an animated image for your content container as well.

I love the fun style with the arrows and fun facts about you (great for about pages too!) so I created another image in canva with me in the centre, the arrows and words around, and then I selected all of the text boxes and used canvas "shift" animation (like this):

When you download it, make sure you download as a gif to preserve the animations, and select "transparent background" if you are overlapping it on something else that's animated like I have done.

Then voila my friend, you've got yourself a really fun website "hero" section at the top of your page. Now just make sure your first few sentences are the ones that you want people to see the most, and you have clear call-to-action buttons (the action you want them to take next).

That's it. That's the recipe to your best homepage top hero section. The end ;)

I'd love to see what you've created for your homepage top sections - show me in the comments!

-Brittany Hardy | Podia Pro Website Designer and Agency Owner at EmptyDeskSolutions.ca
Book your free coffee chat at https://www.emptydesksolutions.ca/workwithme
My Podia Pro design services and packages: https://www.emptydesksolutions.ca/podia