How to Create an Animated Background for your Podia Website

Podia is an all-in-one solution for online businesses -- it's what my site and business are built on, and what I most often recommend to my clients.

One of my favorite things about Podia is how easy they make it to build and customize your own website with the option of keeping all the core parts of your website within one platform: sales, consulting, email, workflows, blogging, online communities + more.

The entire backend of Podia is extremely user friendly, and while you can opt to build a really beautiful site using Podia's built-in features, you can also get a little creative and take your site design to the next level.

I like using a bit of animation to help site's stand out. My client, Steve, is a physiotherapist based in the UK. He provides continuing education and online support to other physios through the Grow Physio Academy. When updating his website, we added a background animation to the hero section at the top of his homepage just to add some subtle movement and interest:

While animation isn't the right fit for every client, it can be a fun way to grab a users attention, demonstrate what the site is about, or even just to showcase your personality a bit. Here's the top of my own website:

Interested in creating an animated background to use on your site? Follow the steps in my video tutorial, or typed out step-by-step below:

In Canva

To create the animation, I recommend using a graphic design platform. Canva is a free online design tool and is what I'll be using in this tutorial.

Create Your Animation

1. From your home screen on Canva, click "+" in the top left to create a new design.

2. Choose "custom size" from the menu on the left.

3. Make sure "px" (pixels) is selected from the "Units" drop-down menu.

4. Create a canvas with a width of 2000 pixels and height of 900 pixels. This will work for most standard-size site sections on Podia, but if you know your exact needs you can customize this size.

5. Add your video file to the Canvas by either uploading your MP4 file to the "uploads" tab or sourcing it from the "elements" tab.

6. Adjust the position of the video so that important elements are where you want them. Keep in mind any text elements of boxes that will be on top of the video, as well as how it will display on mobile.

7. Crop the video if needed (ideally 3-5 seconds max) by clicking the "trimming" ✂️ icon in the top left and dragging the sliders to the desired stop/start position (if not visible, click on the video layer to ensure it's selected).

8. Adjust transparency, speed, or apply filters and effects if desired.

9. Export the video file by going to share (top right) > download > adjust File Type to "MP4 Video" > Download. The "quality" slider should be on "50% (original)" by default and doesn't need to be adjusted.

Note: You can download a GIF file directly from Canva. However, I have never gotten that to produce a file size small enough for Podia, even with reducing the size and quality + using a GIF compressor. This MP4 to GIF process is what has worked best for me.

Convert MP4 to GIF

1. We now need to use a free online tool to convert your MP4 file to a GIF file. This should also significantly reduce the file size, making it the right file type and size to upload to Podia.

2. First you'll open: https://ezgif.com/video-to-gif

3. Click "choose file" and locate the MP4 file you just downloaded.

4. Click the blue "upload video" button.

5. Under "size" make sure "Original up to 800px" is selected.

6. Click the blue "convert to GIF" button.

7. This should just take a second. You can then scroll down and preview the GIF in the next section. Below the preview it should say "file size". You want this to be below 5 MB.

8. If it is, you can click the "Save" 💾 button to save a copy to your computer. All done!

9. If it isn't, you can try making the following adjustments in EZ Gif to further reduce the size:

   1. Adjust the start/end time. Even taking off just .5-1 second can make a big difference.

   2. Reduce the "Frame Rate (FRS)" by 1-2 points (ex, from 10 to 8) to see if that reduces the file size enough.

In Podia

1. Log into your Podia Dashboard and click on "Website" to edit your site.

2. Navigate to the page and site section where you want to add the animated background.

3. Click on the "Design" tab.

4. Click on "Background image Add>" at the bottom.

5. Choose to upload from computer, locate the file, and upload.

6. By default, the video will typically be set to grayscale with limited opacity (transparency) and adjusted contrast. Adjust these until the video looks the way you want (ex. Put opacity to 100% if you want it to be "solid". Put grayscale to 0% if you want the original colors). Blur can also be a nice effect to slightly obscure the details of a video.

7. If you want it to have a "color", you can adjust the background color of the site section back on the design tab.

8. Clicking back to the "Content" tab, you can delete or edit the text or other info in that site section. You can also adjust the Top/Bottom padding so that more of the video displays.

9. Click back to the Content tab, where you can adjust the copy and add a button.

10. You may also want to adjust the Top and Bottom Padding on the Design tab to add more height to your canvas.

The animation will not play in Podia's site editor, so you'll need to publish your site and refresh the URL to see what it officially looks like. Keep in mind that it will display differently on mobile -- test it by reducing the size of your desktop browser window or opening your site on your phone.

Want to talk with me about your Podia Website? I offer packages for full site design, single-page design, website audits and hourly packages that can help support you in building, launching, or optimizing your Podia Site. Schedule a free 20-minute call here.

Additional tutorials that might be helpful:
How to Add a Google Calendar to your Podia Site
This is How an Online Business Works

📌 Pin this post by clicking the image below: