Animated Headers in Google Sites

How to add an animated header to your Google Sites website

Using animated headers in Google Sites

Styling and CSS are a bit ,limited in Google Sites so if you want to add a bit of zing to your website, why not use animation? Adding animation is quite straightforward, and in this example I'll explain how to do it with a .gif graphic file, but you could just as easily use an .mp4 video file (or any supported format).

There's just a few simple steps to follow:

For a really unique effect you should create your own animation as a video file. Bear in mind that larger sized files take longer to load and can effect the user experience (not to mention your indexing in search engines), so if at all possible try and create the animation as a .gif file.

You can always find good examples on the web if you just want something to try it out as a sandbox example. For example, have a look at dribbble for some great examples of animated gif files. (The example I used is by Pixflow). Find one and download it. You can also find really good video files on sites like Pexels and Unsplash.

2. Create the header on your page

Basic stuff, just create a new page on your Google Site and create a header. (Instructions here if you're unsure).

You'll need to create a header as a Cover, Banner or Large Banner. By hovering over the new header you'll see the option to Change image.

3. Upload the animation to your header

When you select the Change image option you're prompted to select a file, upload the animation and it'll appear as a background to the header. All you need to do now is add any text you want to the header, and use the Readability adjustment setting to enhance the appearance if required.

Et voila - that's it. Hope you found this useful! Send feedback if you have suggestions.

More examples of animations

Here's a few more animations to spark a bit of creativity. All on the excellent dribbble website. (Tip - you can often hire folks to create something unique if that's what you need).

Hope you found this useful! Send feedback if you have suggestions, or follow me on Twitter for updates.