How-To

GWebWizard has no affiliation with GoogleTM search.

WebSite Editing Basics

Upper-Right Menus
  • [Pencil Icon] - To Edit the page you are viewing
  • [Page+ Icon] - To Add a New page at the page level you are viewing
  • [More Icon] - To access all other web site configuration details
  • [More  : Manage Site] - The central location for configuring site layout
Site Preferences
  • Here you can change the Site Name text which appears at to top of your page
  • You can also change the first page viewed (landing page)
  • You can also add your Google AnalyticsTM web analytics service ID for tracking page views
  • You can also change the site language and set the site access
  • Click 'Save' when done
  • Click on your Site Name (upper-left, top of left navigation bar) to return to your main page
Site-Wide Theme
  • [More : Manage Site] - The central location for configuring site layout
  • Click on [Themes Colors Fonts] (left-side options list)
  • Select a new Theme and click [Save]
Add New Page
  • To add a Sub-Page -- Navigate to the page where you want the new page as a Sub-Page
  • To add a Top-Level page -- You can do this from any page
  • Click the 'New Page' button (2nd button upper right with a 'page' icon and a '+' sign) at the top-right of the site
  • Name the page, select the type (Web Page) and select the location
  • Click 'Create' to add this new page to your site
  • Add some text .....
  • Save
Edit Mode
  • Click on the 'Pencil' button (upper-right of page, first of 4 buttons) to enter the site Edit Mode
  • The 'page title', text is what will appear as the text title in the navigation bar
  • Click on the initial default 'page title' - simply edit the text
  • Type in your page text in the space below the page title.
  • What You See is What You Get
  • You remain in Edit Mode until you 'Save', 'Cancel' or navigate away from the page
  • Remember to click 'Save' so you won't lose your work
Add Photo
  • Find the page where you want to add a photo and click on [Edit] at the top
  • Place the editing cursor where you want the photo and click on [Insert] a the top
  • Select a photo you have already uploaded or click [Browse] to upload a new photo
  • When the photo shows as available, click [Ok] to insert the image in your page

Content Page Title Font
  • More : Manage Site : Colors and Fonts : Content : Headers Font
Configure 'Home' Page
  • More : Manage Site : General : (Name, Description, Landing page, etc.)
Configure a Page
  • More : Page Settings : ([X]Show Title, Links, Allow Attachments, Comments, [X]Show in Sidebar, URL)
Delete a Page
  • Navigate the the page you want to delete
  • Click [More : Delete Page] : Ok -- Just make sure you really want to delete it!
  • Note: You are not allowed to delete your 'Home' page
Un-Delete a Deleted Page
  • More : Manage Site : Deleted Items : (select deleted page) : Recover
Move a Page
  • Moving a page changes the location of where the page is saved. Eg: /home/topic/page to /home/new/page
  • Moving a page does NOT change where it is listed in the navigation bar on the left
  • To move a page, navigate to that page and click [More : Move Page]
  • Select a new location (or type one) and click [Move]
Previous Page Version
  • To get a list of page revisions, add 'system/app/pages/admin/pagelisting' to the end of your site URL
    • eg.  https://sites.google.comTM/site/<your_site_name>/system/app/pages/admin/pagelisting
    • Click on the highlighted revision number on the right side of the offending page in the listing
    • Select a previous version and accept the change
  • This is especially useful if you are not able to invoke the Edit Mode to un-do a bad page content change
Change Site Colors
  • More : Manage Site : Themes, Colors and Fonts : (select colors as desired) : Save
SideBar Changes
  • Click [More : Edit Site Layout ] then mouse-over the SideBar and click to select
  • Make changes as needed; all changes are immediate and auto-saved
SideBar Width
  • More : Manage Site : Site Layout : [X] Sidebar : Width [ XXX ] Pixels
Add/Edit Sidebar Links
  • Edit Sidebar : Add a sidebar item : Navigation : Add : Ok
  • Navigation : edit : Add page : click on page name
Sidebar SubPages
  • Do this to auto-show sub-pages at different indent levels in the list of page links
  • Edit sidebar : Navigation : edit : [X}Auto organize navigation / Set to 'All' levels
  • Include link to [X] Sitemap -- but ONLY for the Home page level
  • Ok : Save
Site Activity and Site History Access
  • More : Manage Site : General Access Settings
  • Users Who can Access Site Activity:
    • Choose between [Collaborators only] and [Anyone who can view the site]
    • Typically you don't want the general public to see a list of all your edit activity so select [Collaborators]
  • Users Who can Access Revision History:
    • Choose between [Collaborators only] and [Anyone who can view the site]
    • Typically you don't want the general public to see a list of all the changes you make so select [Collaborators]
Site Permissions (3 choices: Public, Shared-Link, Private)
  • Public: Anyone can view your site - no, they cannot edit your site
  • Shared-Link: Site still visible (if you know the URL) but generally found only if you send the link)
  • Private: Only visible to those (g-mail addresses) you give permissions to - optional edit capability per user
Page-Level Permissions
  • Access via:  More : Sharing and Permissions : Enable Page-Level Permissions (upper-right button)
  • Allows making specific pages with the site privately accessible to specific users
Web Site Tools
  • Gx x has a page for web masters to help manage their sites for higher level functions
  • Login to your account and go here:  www.google.com/webmasters/tools/TM
Change Preferred Domain URL
  • If you have linked more than one of your own domain names to your site, you can specify the preferred URL
    • Assuming you have Verified your domain URL with Google.comTM
    • Login to your account and go to the site tools for web masters (shown above)
    • Look for both the 'www.' and 'NON-www.' forms of your domain name URL
      • If the 'NON-www.' URL form is not listed, click 'Add A Site' at the top and add your domain URL w/o the 'www.'
      • This should verify your ownership of that domain name in the
    • Select the site URL of your site you wish to manage from the list
    • Click on the [GEAR] in the upper right of the page and select [Site Settings]
    • Select the domain name URL preference of your choice and Save
Change Primary Site Domain
  • This assumes you decided to change the linked domain name for your site AFTER the site was built with another domain name
  • You can't ...... However, .....
    • You can change the URL for a link to your primary landing page in the Sidebar (in an added text field)
      • More Actions : Edit Site Layout : Highlight top of sidebar and click (+) to add new text field
      • After text added : set the URL of the text as a link to the new domain name linked to your site
    • You can also add the new domain's URL address to the list of allowed addresses
      • More Actions : Manage Site : Web Addresses : Add : [enter URL] : Save
Mobile Phone Formatting

Web pages are not automatically compatible with mobile devices like smart phones. Automated "conversion" can be enabled. If this feature is enabled, conversion is automatic for mobile devices. There is no change for PCs, laptops, netbooks, etc.
  • More : Manage Site : General : [X] Automatically adjust site to mobile phones
  • This feature provides automatic re-format for iOS and Android 2.2+ mobile phone browsers
To view a simulation of how your page might look on a mobile device, do the following:
  • More : Preview Page as Viewer, then select "Mobile" up at the top to show a mobile phone view
Site Width
  • More : Manage Site : Site Layout : Site Width : [ XXXX ] pixels - or - [ XX ] %
Site Image Header
  • Use a graphics application to make a Header Image file ( for example, 1000pix by 100pix )
  • The Header Image Width will generally determine the Site Width
  • The Site Content Width (where you place your info) results from the Image and SideBar widths
  • Site Content Width = Site Width - SideBar Width - 5pix side indents - 5pix SideBar/Content separator
    • For example, using a 1000pix wide Header Image and a 150pix wide SideBar
    • Site Content Width = 1000pix - 150pix - (2 x 5pix) - (5pix) = 835 pix
  • Use a graphics application to make an image file
    • For Example: these instructions assume a 1000pix by 100pix image
  • Now, configure your site to use this new Header Image
    • Manage Site : General : Site Name : [  ] (uncheck) Show site name at top of pages
    • Manage Site : Site layout :
      • Change Site Layout :
        • Site width : [X] [ 950px ] ( <1000 pixel width )
        • [X] Header :
          • Height : [X] [ 950px ] ( same pixel width as above )
          • Alignment : Vertical [Top], Horizontal [Center]
    • Manage Site : Colors and Fonts : Site header :
      • Site title color : [X] None
      • Site header background color : [X] None
      • Site header background image : Browse : (select header image file from local disk) : [X] Custom
      • Repeat : [ none ]
      • Horizontal Position : [ center ]
      • Vertical position : [ top ]
Attach a File for Download
  • More : Page Settings : [X] Allow Attachments : Save
  • (at bottom of page) Add File : Browse local disk : Open (file will be added to bottom of page)
  • Note: text files will be viewable but .exe files and such MUST be 'zipped' before they can be added
  • Note: User click of the file link will 'open' the file in a new browser window. Use right-side download button to save.
Insert a Link to an Uploaded Site File
  • This is for viewing uploaded files like PDFs, DOCs, etc.
  • Add a page of type 'File Cabinet' -- this page need not be added to your list of site pages
  • Click UpLoad and add your file to the cabinet - wait for upload to complete
  • Click View (below the file name) to view the file via Google DocsTM display application
  • Highlight the URL and Right-Click copy the URL to the clipboard
  • Find the site page where you want to add the file link - then click Edit mode for that page
  • Locate the cursor to where you want the link to appear
  • Click on the 'Link Icon' above - which will open the add-link dialog box
  • Click to select Web Address listed on the left side - this opens a Text and URL entry fields
  • Right-Click Paste the URL from the clipboard into the 'Link to this URL' field - the Text field will also show the URL
  • Replace the Text field (containing a copy of the URL) with the text you want to show on the page
  • Click [X] Open in a New Window - unless you do not want that option
  • Save the page
PDF Viewer
  • PDF files need a view and this means you need to insert a Google GadgetsTM software element in your page.
  • Documents be hosted elsewhere on the web; at another URL or in your Google DocsTM program account
  • Go to page where you want to ad the pdf
  • Move cursor the the sop on the page
  • Click Insert : GadgetsTM : ... More GadgetsTM : ... a window will pop up
  • Select Public : enter 'pdf viewer' into the search box and click the button
  • Select the Google DocsTM Viewer
  • Select the features
  • Set the document location and click Ok
PDF Viewer - Embed in Page
  • Locate the page on you site where you want to display the PDF file and enter the Edit Mode
  • Open a new browser tab to show the Google DocsTM PDF document you want to embed in one of your pages
  • Highlight the PDF file URL and copy that URL
  • Back in the site page, click Insert : More GadgetsTM : Include gadget (iFrame) : Select
  • Paste the copied PDF URL into the URL-to-content text field
  • [X] Include a scrollbar, [X] Display title [Enter Title in Text field]
  • Ok, and Save Page
Add a PayPalTM Shopping Cart
  • Find the page where you want to add the Buy button and enter Edit mode
  • Click on Insert : ...More Gadgets : Featured : PayPal Simple Storefront
  • Select either "Buy Now" or "Add TO Cart" button and follow the instructions to edit the features
  • You'll need to provide your EMail address associated with your PayPal account
  • For the Item Option list, use the "pipe symbol" ('|') as a separator
  • Provide the image size in pixels
  • Click Save and view the button to see that it matches what you want
Add a PayPalTM Donate Button
  • Login to your PayPalTMaccount and select the Merchant Services tab at the top
  • Click on the "Create Payment Buttons" option and select the button type
    • For donations, you must qualify as a non-profit according to PayPal'sTM terms and conditions
  • Fill-in the form, click "Create Button" and copy the generated URL (copy-and-paste)
  • Logout of your PayPalTM account and login to your Google SitesTM account
  • Go to the page where you want to add the PayPalTM button and click the edit icon
  • Click Insert : Image : Address URL and paste the PayPalTM URL you copied and click Add Image
  • Click the image, click on the "Link" and edit that link and select "Open in a New Window"
  • Save the page edits.
Remove yourself as collaborator on someone else's Google SitesTM web site
  • IF you were added as a collaborator on someone else's site, that site will be listed in your list of sites
  • IF you did not want to be a collaborator -or- just want to remove their site from the list of your own sites
    • Click on that site to visit their site pages
    • Look for the links in fine print at the bottom of their page (these are Google SitesTM links)
    • Click on the Remove Access link
    • Click the Red Remove Access button (Note: This action cannot be un-done by you.)
  • Verify that their site has disappeared from your list of sites

HTML

  • Select page to edit
  • Enter page edit mode ( pencil icon at top of page )
  • Click on <html>
  • You will see the HTML (Hyper-Text Markup Language)
  • Anything you add or change will be automatically filtered so some changes may not be accepted
  • You cannot add code for iframes
  • Any added JavaScript code must not create any script, image or link tags
  • You cannot add <onload> and <onready> functions
  • Any JavaScript code should be at the end of code that needs to load after the document loads
Add External Link to Web Page URL
  • Select page to edit
  • Enter page edit mode ( pencil icon at top of page )
  • Click [Insert] icon at top of page and select the Link option (link of chain icon)
  • Select Web Address then cut-n-paste the URL of the site you want to link
  • Click Ok and Save the page edit

Add Anchor Links to Text Within a Page (Requires HTML)
  • What Anchor Links do:
    • If your Source page shows:  "...and you can read more about Text-Msg later on..."
    • And, your Destination page shows:  "How to Text-Msg using the VeryBerry2000X. FIrst switch on..."
    • And you want the Source page Link to bring up the related text details on the Destination page
    • Then, you need to add an Anchor Link -- So, follow the following directions:
  • First, edit the target page containing the target text you want to link -- then Click on the <html> option
  • Locate the text you wish to link
    • Immediately before that text, type in:   <a name="anchor_name">
    • Immediately after the text to link type:  </a>
    • Example:    <a name="Link-1">How to Text-Msg</a>    [What you would add is shown in blue]
  • Click Update and then Save the page
  • Next, edit the page which will contain the actual Anchor Link to the target text you just tagged with 'Link-1'
  • Highlight the text you want to become the Anchor Link and Click on Link option ("chain-link"Icon)
  • Your site pages will be listed, so select the desired Destination page on your site and Click Ok
  • While still editing the Destination page, Click on the <html> option
  • Locate the target text for the AnchorLink text
    • For example, look for:   href="/site/your_site_name/destination_page_name">Text-Msg</a>
    • Immediately after the 'destination_page_name' type a # sign followed by the AnchorLink name
    • Example:  href="/site/your_site_name/destination_page_name#Link-1">Text-Msg</a>   [You add what is in blue]
  • Again, what you should have is:
    • Source page:
      • ...more about href="/site/your_site_name/destination_page_name#Link-1">Text-Msg</a> later ...
    • Destination page:
      • <a name="Link-1">How to Text-Msg</a>
  • Click Update and then Save the page
For Google SitesTM Help


Questions? EMail G-WebWizard