Google Sites Help
Steegle

Edit Site Layout - classic Google Sites

Instructions on how to edit your Header, Horizontal Navigation, Sidebar and Custom Footer in Google Sites.

Instructions

Accessing Edit Site Layout

  1. Use the More button (looks like a gear/cog) then Edit site layout (or the keyboard shortcut Shift+L)
  2. The previous editor, SIte Layout in Manage Site, no longer exists
  3. The four large buttons at the top of the site layout editor (Header, Horizontal Navigation, Sidebar and Custom Footer) allow you to enable or disable (display or hide) that part of the site: clicking these buttons will make that part of the site appear or disappear, clicking those buttons will not open the editor for those site sections: you need to click on the area of the site layout you wish to edit - see instructions below.
  4. When you finish making any site layout edits use the blue Close button to return to your site.

Edit Site Width

  1. Next to the four large buttons (Header, Horizontal Navigation, Sidebar and Custom Footer) you will find Site width
  2. Choose either the Theme default or Custom
  3. If you choose Custom enter a value in the custom box of pixels or a percentage and follow the number with either px or % and use the Enter key on your keyboard to apply the new width. A percentage width will make your site dynamically expand or contract to the viewers browser width, filling the browser window, whereas a pixel width will make the site the same size on all browsers.

Edit Site Header

  1. Use the More button then Edit site layout (or the keyboard shortcut Shift+L)
  2. Hover your mouse over your header and the header should become highlighted a light blue colour and a black tag that says Edit site header will appear.
  3. Click anywhere on the highlighted header area and the Configure site header dialogue box will appear.
  4. In Configure site header you can choose to alter:
    • Height - use theme default value, use logo size or set your own height in pixels;
    • Alignment
      • Vertical either theme default, top middle or bottom;
      • Horizontal standard (either left if you use a left-to-right language or right if you use a right-to-left language) or centre;
    • Select logo - No logo, Domain Default (if you use Google Apps) or you can upload a Custom Logo in the Attach file section.
  5. When you finish editing your site header use the OK button to return to the site layout editor and your changes will appear immediately.

Edit Horizontal Navigation

  1. Use the More button then Edit site layout (or the keyboard shortcut Shift+L)
  2. Hover your mouse over your horizontal navigation and the horizontal navigation should become highlighted a light blue colour and a black tag that says Edit horizontal navigation will appear.
  3. Click anywhere on the highlighted horizontal navigation area and the Configure navigation dialogue box will appear.
  4. For detailed instructions on how to edit your horizontal navigation and drop-down menus see Google Sites - Horizontal Navigation with drop-down Menus
  5. When you finish editing your horizontal navigation use the OK button to return to the site layout editor and your changes will appear immediately.

Edit Sidebar width and position

  1. Use the More button then Edit site layout (or the keyboard shortcut Shift+L)
  2. Above your sidebar a black box will appear with Sidebar written in and a Edit button (looks like a pencil) and an Add button (looks like a plus symbol).
  3. Use the Edit (pencil) button to open the Edit sidebar dialogue box.
  4. In Edit sidebar you can choose to alter:
    • Display - place your sidebar either on the left or on the right
    • Width - enter a value in pixels (just the number no "px")
  5. When you finish editing your sidebar use the OK button to return to the site layout editor and your changes will appear immediately.

Edit Sidebar Items: Vertical Navigation; +1 button; Text boxes; Countdowns; or AdSense

  1. Use the More button then Edit site layout (or the keyboard shortcut Shift+L)
  2. Hover your mouse over the sidebar item and it should become highlighted a light blue colour and a black tag that says Edit sidebar item will appear
  3. Click on the sidebar item you wish to edit and its dialogue box will appear.
  4. When you finish editing your sidebar item use the OK button to return to the site layout editor and your changes will appear immediately.

Edit your Custom Footer

  1. Use the More button then Edit site layout (or the keyboard shortcut Shift+L)
  2. Hover your mouse over your custom footer and the custom footer should become highlighted a light blue colour and a black tag that says Edit custom footer.
  3. Click anywhere on the highlighted custom footer area and the Edit site footer dialogue box will appear.
  4. When you finish editing your custom footer use the OK button to return to the site layout editor and your changes will appear immediately.

Feedback

Please let us know if this article helped.

Screenshots

More - Edit site layout

Edit Site Layout - Enable/Disable Buttons and Site Width

Edit Site Header

Configure Site Header

Configure Navigation

Edit Sidebar Width and Position

Edit Sidebar Item

Edit Custom Footer