Learning Template Breakdown

Google Sites Templates are made up of parts that each perform particular functions and have a physical location in the template. Think of a layer cake and how its layers build from the bottom moving progressively higher as layers are added. A website template is similar except that each layer can have sections within it that sit beside each other. Beginning with the bottom and working up, the Google Sites website template has the following structure.

  1. Page Background
  2. Wrapper Background and its parts
    1. Header and its parts
      1. horizontal navigation
      2. logo
      3. site name
      4. search box
    2. Content
      1. content gadgets
      2. sidebar and its parts
    3. Footer

All parts do not have to be used for a functioning web site template but are an option.




Learning Template Parts

Select image for larger view.

1 Page Background

This area includes the entire background of the web site from top to bottom and right to left. All other template parts sit on top of it. 

If a background image is used, it can fill the browser window or be a specific width such as that of the website's width. 

How Is This Used?

Background colors and/or images.

2 Page Wrapper

This area is inside the Page area. If a background image is used, it can fill the browser window or be a specific width such as that of the website's width.

How Is This Used?

Wrapper Background images. 

3 Site Header

This area is inside the Wrapper area, at the very top, but before the Content area. This is where a web site title, logo, image and search box are placed.

If a background image is used, it can fill the Header or not and be positioned.

How Is This Used?

Header Background colors and/or images.

4 Horizontal Navigation 

This area is inside the Header area but below the area where the site title, logo, image and search box are placed.

How Is This Used?

Web site horizontal navigation. 

5 Content

This area is inside the Wrapper area but below the Header. This is where website page content is placed.

If a background image is used, it can fill the Header or not and be positioned.

How Is This Used?

Content Background colors and/or images. 

5.1 Content Gadget Header

This area is behind the title text in the Content Gadget. If a background image is used, it can fill the Header or not.

How Is This Used?

Content gadget background colors and/or images.

6 Sidebar

This area is inside the Wrapper area but to the right or left of the Content. 

How Is This Used?

Content such as navigation, count downs, text and so on.

6.1 Sidebar Gadget Header 

This area is behind the title text in the Sidebar Gadget. If a background image is used, it can fill the Header or not. 

How Is This Used?

Side Bar Header background colors and/or images.

7 Footer

This area is inside of the Wrapper area below the Content area. There is no way to access this through the template.

How Is This Used?

Use depends on which Footer is chosen. There are two: one used exclusively by Google for their links and a second that users can accessed to add content such as text and images. See Note.

Notes

Template Background Images: Images can be repeated across a page horizontally from left to right or vertically from top to bottom, positioned horizontally from left, center or right and or positioned vertically from top, middle or bottom.

Wrapper and Footer: For this template, the Wrapper Background image is positioned at the page bottom and centered in the wrapper area to look like a Footer image.