Websites‎ > ‎Google Sites How-tos‎ > ‎

Google Sites - Edit Site Layout

posted 11 May 2013, 05:28 by Stephen Hind   [ updated 6 May 2014, 07:35 by Unknown user ]

How to use the Google Sites
Edit site layout tool by Steegle.com

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)
    Google Sites - Gear/More Button

    The previous editor, SIte Layout in Manage Site, no longer exists
  2. 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.
  3. 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

(click for larger images)

More - Edit site layout

Google Sites - More button - Edit Site Layout

Edit Site Layout - Enable/Disable Buttons and Site Width

Google Sites - Edit Site Layout - Enable/Disable Buttons and Site Width

Edit Site Header

Google Sites - Edit Site Layout - Edit site header

Configure Site Header

Google Sites - Edit Site Layout - Configure Site Header

Configure Navigation

Google Sites - Edit Site Layout - Configure Navigation

Edit Sidebar Width and Position

Google Sites - Edit Site Layout - Edit Sidebar

Edit Sidebar Item

Google Sites - Edit Site Layout - Edit Sidebar Item

Edit Custom Footer

Google Sites - Edit Site Layout - Edit Custom Footer