Header Website Name Header Image Logo Image Header Image Examples


"Creating a unique Header for your website can be done using any or all of the 4 Header components keeping in mind their sizes and positioning."



What do you need to know about using Headers in Google Sites?

To take full advantage of a Header's functionality, you need to know what it is, its components, how it works, limitations and capabilities.


What is a Header?

The Header is the top most portion of your website template. It is just one part of your website template. There are others such as the navigation, content or footer and each hold related website content. The Header can contain the site's website name, search box or images (logo and/or Header image).


What are the Header's components?

The Header has 4 components that may be used at the same time or select items can be used alone or together to create a website Header unique to your website.

  • Header image
  • Logo image
  • Site Name
  • Search box

How does the Header work?

It is a matter of math, how much space do you have in your template's Header Your Header's dimensions might be 930 x 300 px or 80% x 300 px, for example. Its dimensions determine how much space you have to work with. You can keep them or change them but your images (logo and Header) and font sizes must be sized to fit.

For example, if your Header image (not a logo image) is 600 x 300 px then your Header's dimensions should be at least as tall and the image will need to be positioned: left, center or right.

It is also a matter of sharing that limited space. The 4 template parts share that space, some with others and one by itself.

Finally, it is a matter of positioning the components used within that limited space. Three of them can be aligned (positioned).

Key to mastering the Header is knowing the component locations and behaviors. Only then will you be able to arrange them, within their limitations, to create a unique Header.

The following information list those sharing and positioning capabilities for each component in that order.

  • Header image
    • this images sits at the back (or bottom) of the other 3 parts
    • the other 3 parts can be arranged to display on top of this image
  • Logo image
    • this image sits by default at the top, Left corner and cannot be positioned
    • it shares space with the search box and site name
    • the bigger this image is, the more space it takes from the search box and site name and can push them out of its way making it hard to position them
  • Site Name and Search Box
    • these sit wherever you put them which is determine by the Header's alignment settings
      • share the Header's width equally, both having 1/2 the Header's width
        • standard horizontal setting
        • vertical settings are top, middle, bottom
      • each spans the Header's entire width but the search box will be beneath the site name
        • centered horizontal setting
    • note that both move together when the site name is moved (aligned)
    • both or each may be disabled
      • when the search box is disable while in standard horizontal alignment, its space is empty but still occupys 1/2 the Header's width
    • both can sit on top of the Header image, if used

What are the Header's capabilities?

  • change the Header's height, background color, title font, title font size and title font
  • align horizontally and vertically
  • repeat images
  • create attractive Headers

What are the Header's limitations?

  • only 4 things can be added
  • no dynamic content can be added

Other Header Facts

What a Header is not.

The Header is not the logo or a banner. The Header is a specific part of the website template where Header related content lives. A logo is an image that can be placed in the Header. A banner is an image advertisement that can be placed in the Header but is usually placed in a page or pages. See banner definition here.


Why is a Header important?

Your website's Header instantly tells your viewer what website they are on, what it is about, displays the website name, can display contact information and logos, supports a website theme, shows your personality and helps visitors recognize your website from others.


Why change a Header image?

There are many reasons. Here are a few to think about.

  • it is easy
  • it is an easy way to refresh a website,reflect the seasons or current political or social trends
  • it sets the site's theme
  • it can hold information like contact, addresses, logos and so on

How to change or add Header Images.

Changing a Header image simple. It is only a few steps.

  • find, create or have a new Header image to use
  • open the Colors and Fonts page of Google Sites
  • upload to the "Site Heading" section to the "site header background image"
  • before uploading, be sure to note the current Header image settings: repeat and position.

What is the difference between uploading a Logo and Header Image file?

  • both upload to different places in the Header
    • the Header Image is placed behind the Logo Image
  • both have different options
    • Header Image: positioning and repeating settings are available
    • Logo Image: no positioning or repeating settings are available and sits in the Left, top corner by default

Does it matter how an image is uploaded, as a Logo or Header?

YES. Both have different capabilities because they both do different jobs.

Uploading an image as a Logo offers no positioning or repeating and pushes other Header items out of the way. It takes up measurable space from the Header's space. Whatever the image's dimensions are, say 100 x 100px, that much space will be used in the Header.

Uploading an image as a Header offers positioning and repeating settings, sits behind the other Header components and does not conflict with them.