How to Design the Perfect Header and Footer for Your Google Sites - Tips and Tricks

December 28, 2022
Google Sites Layout

All websites have three major sections. The header, body, and footer. The header and footer are equally important as the body, and making them stand out will create an everlasting impression. In this article, I’ll show you how to make it stand on Header and Footer in Google Sites.

Google Sites Navigation & Header

It’s no secret that your website’s header can make or break your business’s success. A great header will draw in visitors, encourage them to explore your site, and make a lasting impression.


Navigation is always the first thing that appears on Google Sites. You will notice the gear icon when you move your cursor to the top area of the Google Sites. When you click on the 'Gear' icon, you'll see the option to show the navigation bar on the 'Top' or 'Side'. Whenever you view your Google Sites on a mobile device, your navigation bar always appears as a sidebar.

Google Sites Navigation Settings

In Navigation settings, you can do the following.

  • View mode: Top/Side (Mobile always shows Side due to screen size)

  • Brand images: You can upload a logo and a favicon here. Your favicon and logo can also be uploaded in 'Themes'.

  • Viewer tools: The Info icon and Anchor links can be turned on or off.

  • Analytics: You can enable analytics and connect your Google Analytics account

  • Announcement banner: Display the banner along with the announcement bar's message, label, and link at the top of your website.

The logo height is incorporated into the top navigation bar height, so it may be disappointingly small. If this is the case, we recommend uploading the logo in the header area.


Mouse hover over the header area (just below the top navigation bar) and you will notice a small bar with three options: 'Change Image', 'Reset', and 'Header Type' as well as two symbols representing 'Remove readability adjustment' and 'Anchor image'.

  • Change Image: You can change the header's main background image. In addition to the sample photo galleries on Google Sites, you can upload images from your computer, Dropbox, Google Drive, or add them by URL.

  • Reset: If you want to return to the original state, you can always reset.

  • Header type: You can choose either a large cover background or a small banner background, depending on your needs. You can choose 'Title only' if you do not need a background image for your header

Google Sites Header options
Google Sites Header Background Colors

* Tip: If you want a solid color as your header background, you don't need to make an image. You can search for images on Google and choose from them.

  • Remove readability adjustment: You can adjust background image color for better readability of text.

  • Anchor image: By choosing the position of the arrow, you can highlight a specific area in your background image.

In order to embed an image on the header, double-click the mouse button or go to Insert > Images on the right sidebar to upload an image such as your logo on top of the header background. When you double click the mouse button and choose an image, you can't upload an image from your computer. In this case, go to the right side bar and choose ‘Images’ to upload your image from your computer.

Google Sites Header Design Example

Google Sites Footer

Website footers are often overlooked, but they are an essential part of any website design. Footers are the last thing visitors see on a page and can be used to draw attention to key information, such as contact information, copyright notices, legal disclaimers, social icons and more. They also provide a way to link visitors to other pages within your site. When designed correctly, a footer can be an effective way to boost engagement and make your website more user-friendly.

Google Sites Footer Design

To create a strong footer, you can add a text box with bullet points to organize your menu links. Plus, displaying a logo and social media icons will draw attention. Lastly, you can include a section in the footer for subscribers or promotional banners.

It is possible to replicate a section and then pick a palette to switch the background color or add an image. Ultimately, you can create something similar to this.

Duplicate section in Google Sites
Google Sites Footer Example


Your website header is the first thing visitors see when they arrive, so it’s important to make a good first impression. A great header will reflect your brand and make it easy for people to navigate your site. Your footer is the last thing that your visitor will check so you would need to put key resources that should be easily accessible. Update your Google Sites with a more enhanced header and footer.

Need help?

For professional pages on Google Sites or for any other issues, you can contact us directly or post your question on our Facebook page.

Do you like our article? Would you like to donate so we can provide more informative content?
Any amount is welcome. Click
here to donate.