Websites‎ > ‎

Google Sites How-tos

Google Sites How-tos by Steegle.com

Articles explaining how to do various tasks on Google Sites. If you can't find what you need use the search on the top right or request one-shot support.

Google Sites - FAQ (Frequently Asked Questions)

Please check the Google Sites FAQ first, then my how-tos below.

Further Help

If none of these articles help you there are other resources that may:

Feel free to suggest a how-to from me to write: go to Google Sites How To Suggestions to do so.

If you can't find what you need then use the search below to search for help from Google and user of Google Sites (search results open in a new window or tab):

Google Sites - Themes, Colours, and Fonts

posted 7 Aug 2014, 02:59 by Sam Smullen   [ updated 7 Aug 2014, 03:00 ]

Google Sites - Themes, Colours, and Fonts

Google Sites allows you to change the theme of your website, which can drastically or subtlety alter how it looks and feels. You can also customise the colour and size of your text, background colours/images and more.

Instructions

Note: To apply any of these changes, you must be the Site Owner

Change the Site Theme

When you create a site, you are asked to choose a theme. A theme puts certain proportions onto the layout (e.g. the distance between the horizontal navigation bar and the page content), and it also comes with default styles, like fonts, font colours, and background images.

You can change the theme of your site, and customise fonts, colours, images etc. as long as you are a site owner.

  1. Use the More button (shaped like a cog/wheel) and go to Manage Site, and then choose Themes, Colors, and Fonts (see Fig 1)

  2. Use the Base theme menu to choose your theme (see Fig 2)

  3. Use the Clear all customizations option to revert to the theme’s original state

Colours and Fonts

You can change the default style of your fonts in terms of size, colour and font face. You can change the style for the entire site, or only for certain types of text, like Site Title, Page Text and Headings.

  1. To change a default font style, use the More button (shaped like a cog/wheel) and go to Manage Site, and then choose Themes, Colors, and Fonts (see Fig 3)

  2. Select the area of the site you’d like to affect (e.g. Content area)

  3. Select the type of text you’d like to alter (e.g. Text)

  4. Use the options for Font, Size and Color to customise your text

  5. With Headers, you can specify the style for Headers (default), or you can adjust Headers (H2), Headers (H3), Headers (H4) independently

Note: if you customise Text in the Entire page section, this will override all other text customisations

Note: there is no way to customise the Horizontal navigation Dropdown Text Size except for customising the Entire page - Text option

Background Images and Colours

You can set the backgrounds of various parts of the website, including the entire page, the content area, and the site header, to be a particular image or colour.
  1. To access these settings, use the more button (gear/cog) and choose Manage Site, then go to Themes, Colors and Fonts

  2. To change the background image/colour, go to Entire page and Background. Here you can change the background to an image or a colour by using the various options.

  3. To use an image, use the image button (See Fig 4) and upload an image file. You can then choose its alignment, whether or not the image is repeated (useful for patterns) and more using the Options menu


Feedback

Please let us know if this article helped.




Screenshots

Change the Site Theme

Manage Site

Fig 1

Choose Theme

Fig 2

Colours and Fonts

Themes, Colors and Fonts Menu

Fig 3

Background Images and Colours

The image button, and image options

Fig 4

Google Sites - Allow Site Embedding (in iframes)

posted 6 May 2014, 02:22 by Stephen Hind   [ updated 6 May 2014, 02:33 ]

Google Sites - Allow Site Embedding (in iframes)

Do you want to embed Google Site on another site (in an iframe)? Google Sites now provides a setting to allow site embedding so you can allow your Google Site to appear in another site.

Instructions

  1. Use the More button (it looks like a gear/cog), then Manage Site (or keyboard shortcut g then m)

    Google Sites - Gear/More Button
  2. Scroll to the bottom of the General settings to find the Security section.

  3. To allow embedding of your site enable the
    Allow embedding of your sites in other sites option

  4. Use the red Save button at the top of Manage site

That's it, you're done! 

Feedback


Screenshots

Google Sites - Manage Site - Allow embedding of your sites in other sites


Google Sites - Domain Viewer Comments (not public)

posted 20 Mar 2014, 03:46 by Stephen Hind   [ updated 5 Jun 2014, 08:57 by Sam Smullen ]

Google Sites - Domain Viewer Comments (not public)

Do you want your invited domain viewers to comment on your Google Site? Enable Viewer Comments for Google Apps sites to enable those you invite as viewers, within your domain, to leave comments on the site.

Instructions

  1. Sign in to your Google Apps control panel at https://admin.google.com;

  2. Open the Google Apps option, then Sites and then Sharing settings;

  3. Scroll down to the Viewer commenting section and chose the 
    Users at [company] can enable viewer comments option;

  4. Sign in to the Google Site you wish to enable Viewer Commenting on;

  5. Use the More button and the Manage site (or keyboard shortcut g then m);

  6. On the General page scroll down to the Commenting section and enable the Allow page viewers to comment option.

  7. You may need to go to each page you want comments available for and use the More button and Page settings (or keyboard shortcut u) and enable the Allow comments option.

Domain Viewer Comments not Public 

Be aware that this will not work as public comments. Only invited domain viewers to the site (i.e. people or groups you add by their email address that belong to your Google Apps domain to Sharing and permissions) can comment as they need to sign in to the site to make comments. If you choose to disable the Sign in link in Edit system footer then viewers will find it difficult to sign in to the site to make comments. The viewers cannot comment on the site until they sign in to the site so this will never work on your site's mapped web address.

Feedback

Please let us know if this article helped.


Screenshots

Google Apps - Control Panel - Sites Sharing Settings

Google Apps - Control Panel - Sites Sharing Settings - Enable Viewer Commenting

Google Sites - Manage Site - General - Commenting

Google Sites - Manage Site - General - Commenting

Google Sites - Page Settings - Allow Comments

Google Sites - Page Settings - Allow Comments

Google Sites - Dismissible Site Notice

posted 19 Mar 2014, 14:13 by Stephen Hind   [ updated 6 Jun 2014, 08:45 by Sam Smullen ]

Google Sites - Dismissible Site Notice

Do you need to give a message to your visitors the first time they arrive? Use the Site Notice to provide a dismissible message your site visitors will see the first time they visit arrive at the site (a warning about cookies for example).

Instructions

  1. Sign in to your Google Site as owner;

  2. Use the More button then Manage site;

  3. On the General page enter the message, warning or notice you want your visitors to appear in the Site notice box.

  4. Use the red Save button and your site will refresh and you will see the notice with the OK got it button to dismiss the message.

Example Applications

  • Cookie Warning - European Union law requires European websites to warn visitors that your site uses cookies, as Google Sites do: the law requires the visitor to give consent for the site to store cookies on the visitor's computer. You can use the message to give a suitable warning that the site uses cookies and once the user dismisses the message the visitors will not see the message again.

  • Notice on Intranets - you can add a notice to your intranet so viewers can see a message. Once the viewers dismiss the warning they will not see it again until they clear their cookies or until you change the notice.

Feedback


Screenshots

Google Sites - Manage SIte - General - Site Notice

Google Sites - Manage Site - General - Site Notice

Google Sites - Cookies Warning - Example Site Notice

Google Sites - Cookie Warning - Example Site Notice

Google Sites - File Cabinet

posted 17 Mar 2014, 09:58 by Stephen Hind   [ updated 18 Aug 2014, 01:55 by Sam Smullen ]

Google Sites - File Cabinet

Do you want to share files from your Google Site? Use a File Cabinet page on Google Sites to upload multiple files, organise in folders, sort by name, size date and more. Find out how in our Google Sites File Cabinet Video.

Instructions

Create a File Cabinet page

  1. Sign in to your Google Site

  2. Use the Create page button

  3. Name your page

  4. Choose File cabinet from the Select a template to use

  5. Use the red Create button to create the page

Upload Files

  1. Navigate to your File Cabinet page

  2. Use Add files button

  3. Choose the file or files to upload. If you want to upload multiple files 

    • hold the Ctrl key on the keyboard (Cmd on a Mac) and click on the multiple files you want to upload

      or

    • click the first file and then hold the Shift key and click the last file and you will select all files in between.

  4. Use the Open button and the files will begin to upload

  5. Once the files upload the page refreshes and displays the new files

Sort Files and Collapse Folders by Default

  1. Navigate to your File Cabinet page

  2. Use the More button (looks like a cog/gear) then Page settings

  3. Enable the Collapse folders by default and Show headers options

  4. Once the file cabinet page refreshes you will see all folder collapsed and you need to expand each on individually and the file cabinet displays the headers that allow you to sort the list of files.

    Note: you cannot set the default sort option, any viewer can pick their own.

Feedback

Screenshots

Google Sites - Create a File Cabinet

Google Sites - Create a File Cabinet

Google Sites - File Cabinet - Upload Multiple Files

Google Sites - File Cabinet - Upload Multiple Files

Google Sites - File Cabinet - Page Settings

Google Sites - File Cabinet - Page Settings

Google Sites - Index the right address (Canonical URL)

posted 21 Feb 2014, 07:32 by Stephen Hind   [ updated 5 Jun 2014, 08:52 by Sam Smullen ]

Google Sites - Index the right address (Canonical URL)

Does your site appear in Google Search with the sites.google.com address? Set the canonical URL of the site so Google Search knows which URL you want indexed in search results.

Instructions

Personal Google Sites (sites.google.com/site/...)

  1. Sign in to the site you want to set the canonical URL for;

  2. Use the More button then Manage site (or the keyboard shortcut g then m);

  3. Go to the Web address page and if your Google Sites uses only one web address mapping then Google SItes sets it as your canonical URL by default: you need to do nothing therefore.

    Note: we strongly recommend you follow the steps in Google Sites - Get Found in Google Search - Google Webmaster Tools to ensure Google Search know about your chosen mapped web address.

  4. If your site uses more than one mapped web address then use the Set as canonical link next to the web address you want Google Search to use in the search engine result pages.

Google Apps Sites (sites.google.com/a/...)

  1. Sign in to the site you want to set the canonical URL for;

  2. Use the More button then Manage site (or the keyboard shortcut g then m);

  3. In the General section scroll down to the Canonical URI section and enter the web address you want Google Search to index as the canonical URI.

    Note: you need to enter a mapped web address that the site already uses in your Google Apps control panel: if you wish to use a new address then you first need to map this address correctly in Google Apps

    We strongly recommend you follow the steps in Google Sites - Get Found in Google Search - Google Webmaster Tools to ensure Google Search know about your chosen mapped web address.

  4. If you want to change or clear the canonical URI then enter a different mapped web address or delete the URL in the Canonical URI box.

  5. Use the red Save button to send live the canonical URL.

Feedback


Screenshots

Google Sites - Manage Site - Web Address - Set as Canonical

Google Sites - Set your preferred canonical URL so search engines index the right one.

Google Apps Site - Manage Site - General - Canonical URI

Google Apps Site - Manage Site - General - Canonical URL


Google Sites - Embed a Google+ Post

posted 14 Feb 2014, 02:07 by Stephen Hind   [ updated 5 Mar 2014, 05:08 ]

Google Sites - Embed a Google+ Post

Want to know how to embed a Google+ Post in a Google Site? These instructions show you how to embed a Google+ post in your Google Sites, complete with comments.

Instructions

  1. Find the Google+ post you want to embed in your Google Site; 
    Note: you cannot embed a Google+ event, only a public post

  2. Use the Google+ post's drop-down menu at the top right corner (looks like a downward pointing chevron) and then Link to post

  3. Copy the link of the post (URL) from the Link to this post box;   

  4. Sign in to your Google Site and edit the page where you want the Google+ post to appear; 

  5. Use the Insert menu then Google+  and then Google+ post

  6. Paste the link to the Google+ post in the Link to a Publicly Shared Google+ Post (required) box; 

  7. Choose whether to Include a border around gadget or Display title on gadget

  8. Use the OK button to embed the post and the grey placeholder will appear in the page editor; 

  9. Save your page and once the page refreshes you will see your embedded post.

Feedback

Please let us know if this article helped.


Screenshots

Google+ - Get Link to Post

Google+ - Link to post

Google+ - Link to this post

Google Sites - Insert - Google+ - Post

Google Sites - Insert - Google+ - Post

Google Sites - Embed a Google+ Post

Google Sites - Embed a Google+ Post

Google Sites - Copy Page

posted 31 Jan 2014, 02:20 by Stephen Hind   [ updated 5 Mar 2014, 05:09 ]

Google Sites - Copy Page

Need to make a copy of a page on Google Sites? Google Sites now provides the Copy Page feature, you can make an exact copy of a page to another location on the same site.  

Instructions

  1. Navigate to the page you wish to copy; 

  2. Use the More button then Copy page (or use the keyboard shortcut Shift+c); 

  3. Enter a name for your copied page in the Name your page: box and Select a location for the copied page; 

  4. Use the red Copy button at the towards the top of the page to start the page copy process;  

  5. Once copied Google Sites will take you to the copied page and open the editor so you can make any necessary changes. 

Screenshots

click for a larger image

Google Sites - More - Copy Page

Google Sites - More button - Copy page option

Google Sites - Copy Page - Dialogue Box

Google Sites  - Copy Page - Dialogue box


Google Sites - Edit Site Layout

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

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

Google Sites - Awesome Table - Gadget

posted 3 May 2013, 03:55 by Stephen Hind   [ updated 21 May 2014, 05:36 ]

Awesome Table Gadget
explained by Steegle.com

Display awesome tables in your Google Site with this gadget from Google Apps Script Top Contributor and Google Gadget guru Romain Vialard.




Instructions

  1. Open a Google Sheet (Google Drive Spreadsheet), or make a new one, and on the first row define titles for each column.
  2. On the second row of your Google Sheet add filters you want to display in the table.
  3. Share the Google Sheet with those who need to see it.  If you want to add the table to a public site make sure you share the sheet as either Anyone with the link or Public.  If you do not want the public to see the table just share with the people who you want to see it.
  4. Go to your site and edit the page where you want the gadget to appear
  5. Use the Insert menu, then More Gadgets... and then use the Add by URL link
  6. In the Add gadget by URL box enter this url http://goo.gl/ZmMP7
  7. Add the minimum required information needed for the gadget to work:
    • Spreadsheet key - the long set of numbers and letters Google Drive gives to your specific spreadsheet
    • Spreadsheet name - the name of the sheet in your spreadsheet you want to get the data from
    • Spreadsheet range - the cell range from the spreadsheet where the data lives, including the title and filter rows.
    • Number of items to display - how many rows you initially want to appear on the table, the rest will display on separate pages.
  8. If you want to use this gadget to track file downloads you can do this by:
    • In one of the cells in your spreadsheet add a column to add the HTML to link to the file and track downloads, e.g.

      <a href="URL-to-your-file" onclick="ga('send', 'pageview', 'URL-to-track');">Link Text</a>

      Where URL-to-your-file is the full web address of the file you want your viewers to download (e.g. a file uploaded to your site or in Google Drive) and URL-to-track is the partial URL you want to appear recorded in Google Analytics: for example you want your viewers to download http://www.example.com/files/download.zip so make this 
      URL-to-your-file and make 
      URL-to-track /files/download.zip

      <a href="http://www.example.com/files/download.zip" onclick="ga('send', 'pageview', '/files/download.zip'])">Link Text</a>

    • In the gadget make sure you specify your Google Analytics Tracking ID in the Google Analytics tracking code box.
  9. Choose how you want the table to appear by setting the Width, Height and whether you want a title and border.
  10. Use the OK button to add the gadget to the page and the Save button to save the page and display your page with the table. 

Feedback

Please let us know if this article helped.

Acknowledgements

Many thanks to Romain who is a Google Apps Script Top Contributor and has worked very hard on this gadget.


Screen Shots

(click for larger images)

Google Sites - Insert - More gadgets...

Google Sites - Insert - More Gadgets...

Google Sites - Add Gadget by URL

Google Sites - Add Gadget by URL - Awesome Table

Awesome Table Gadget Properties

Awesome Table Gadget Properties

1-10 of 68