There are two versions of Google Sites – “New Sites” and “Classic Sites”. If you’re using Google Sites for the first time, you should choose “New Sites”, because New Sites makes sites with “responsive design” - that is, that work well with mobile phones, while classic Sites is not mobile-friendly.
Mobile-friendly Sites are crucial because many of our students will use their phones to access some learning materials. (Also, one day Classic Sites will disappear, and it’s better to use the version that will stick around.)
This page explains how to use the Google Site features we think faculty are most likely to need.
Google Sites also has excellent online instructions that tell you more about advanced features, as well as a support forum.
Important: Please be sure to read the “accessibility” sections of this page (highlighted in bold) to make sure your Site is accessible to students who use screen readers!
The following sections teach you what you need to know to get a simple Google Site up and running. Once you’re feeling confident, you can graduate to a few more advanced features.
You can view Google Sites on a computer, phone, or tablet.
When you edit your site, you must use a computer.
You can view your Sites with the two most recent versions of the following browsers:
Chrome
Firefox
Internet Explorer
Microsoft Edge
Safari
You can edit your Site with:
Chrome version 24 or up
The latest version of Firefox or Safari.
Note: Whatever browser you use, make sure cookies and JavaScript are turned on.
In this section, we’ll explain the basic steps of making a new Site. If you’re working with an existing Site, skip to the next section.
Go to your Google homepage and click on the nine dots in a square on the top right next to your photo to open up all your available Google apps.
Look for the Sites icon (a blue box with a smaller white box over it). You may have to scroll through your apps a little before you find it.
Click on the Sites icon to go to your Google Sites homepage.
Important: on the left side of the page, choose “New Google Sites” from the navigation options. Otherwise, you’ll only see your old Google Sites (if you have any).
When you get to the Google Sites homepage, go to the “Start a New Site” area of the homepage (right at the top), and choose “Blank”.
(There are a few templates shown but you’ll probably end up having to do a fair amount of tinkering to make them work for your purposes – it’s likely going to be much easier to just start with a blank slate.)
After a few seconds, your new, blank Site will appear.
Give it a name by going to the top left and replacing “Untitled site” with whatever you want the name of your Site to be.
You can rename your Site at any time by doing the same thing.
If you’re making a site for academic purposes, especially if the site will display student work, it’s important to limit who can view the site.
You might also want to enable someone else besides yourself to edit the site. You can offer editing permission to a team-teaching partner and/or to students so that they can contribute content to the site (unfortunately, in New Sites, it’s not possible to allow others to edit only certain pages).
At the top of your Site, click Share .
A pop-up window will open that is almost identical to the one in Google Docs, Sheets, Slides, etc., and it works the same way.
“Share with people and groups” gives you the option to designate others as editors or to give them access to the published version of the Site once it’s live.
“Links” lets you choose who can open a link to the draft and published versions of your Site. The default is for the draft link to open only for those you specifically designate, and for the published version to be available to anyone at Champlain College.
When you’re finished setting the permissions you want, click “Done”.
You can change the look and style of your site at any time.
Go to the right side of the page and click on “Themes”.
Scroll down and select a theme that you like for your Site.
For each theme, there will be a range of color choices and a “font style” option. Choose the options you like!
It’s nice to start the design process by choosing a theme, color, and font style, but you don’t have to stick with your initial choices – you can change them at any point, even after your Site has been published.
The “header” is the area right at the top of each page of your website – that is, the area that stays the same regardless of which page in the site you’re on.
When you create a site or a page, it will automatically have a header.
Choose the Header Size
In general, it’s a good idea to have a smaller rather than a larger header. The less room your header takes up, the more likely people will see the information on each page of your Site quickly and easily. If your header is too large, people will have to scroll to see your content, and that’s annoying.
Here’s how you choose the size for your header:
Point to the header and you’ll see the option to change the header image and choose the header type.
Click on “Header type” and choose the size of your header. (Usually, it’s best to choose a smaller header or a title only – otherwise, people will have to scroll down each time they open a new page.)
Now you can add a “cover page” to your Google Site: here’s how. Note: usability experts often don’t recommend cover pages, because they are just another click between users and the content they want. They can be cool, though, if you’re doing a portfolio of student work or something similar - that is, in cases in which the aesthetic experience of the site itself, rather than providing content that is “useful”, is the ultimate goal. Bottom line: use cover pages judiciously and always keep the purpose of the site in mind.
Add an Image to Your Header (Optional)
An image can liven up your Site and make it more engaging for your students – but make sure it’s not distracting.
Point to the header and click Change image.
Click Upload or Select image.
Upload or choose an image and click Open or Select. (Note that you can’t resize your header image within Google Sites, so you’ll need to adjust it in another program if that’s something you need to do to make it fit in the header.)
Edit the Words in Your Header
The words in your header will default to the name of the page, but you can edit them by clicking on them and typing in what you want.
Add Your Site Name and/or Logo to Your Header
At the top left of the header you will see the option to type in the name of your site. Unlike the large words in your header, which change for each page, the site name will be consistent for all the pages on your site. If you change it from any page on the site, the change will appear on every page.
If you move your mouse over the “Add Your Site Name” area, you’ll also see the option to add a logo. If you choose “Add logo”, you’ll be taken to your personal files to choose the image you want as your logo.
Don’t forget to add “alt text” describing the logo for those using screen readers.
Click the X in the top right of the “Add logo” popup window to close it and save your changes.
Remove or Re-Add a Header
If you’re going for a really Spartan look, you can remove the header altogether (and this may be a good idea if you have students on really low-bandwidth connections). Here’s how:
Point to the header.
You’ll see a “trash can” icon appear to the left of the header. Click it to delete the header.
If you want to re-add a header, simply point to the area at the top of your Site where your site name is. You’ll see “Add header” appear as an option. If you click on it, a new header will appear. Any changes you made to the previous header, however, won’t come back - you’ll start your header design over from scratch.
This video shows you how header work in Google Sites and explains some of their limitations.
You don’t have to have a footer, but a footer can be a good place to indicate who has the copyright to the Site.
Point to the bottom of the page and click Add footer or Edit footer.
Enter your text or make other edits.
To change the background, point at the highlighted box. At the left, click the little palette icon and choose a color (you’ll only have a couple of options) or an image.
When done, click anywhere else on the page to close the footer and save your changes.
To hide a footer on a page of your site, point to the footer, and at the bottom left click the little eye icon.
To show the footer, point to the bottom of the page and click on the little eye icon with a strikethrough.
At the right, click Pages.
Click the round + icon.
In the pop-up window, name your page.
Ignore “Custom page path” – that’s an advanced feature that is unlikely to be needed in a college class.
Click “Done” to close the pop-up window.
Having the same layout for the different pages of your Site can be very valuable for usability - it reduces your students’ cognitive load. Duplicating pages and then just editing the content is a quick and easy way to maintain consistency across your Site.
At the right, click Pages.
In the list of pages that appears, point to the page you want to duplicate, and click the three dots to the right of it.
Choose Duplicate.
At the right, click Pages.
In the list of pages that appears, point to the page you want to delete, and click the three dots to the right of it.
Choose Delete.
If you delete a page by mistake, use the “undo” arrow (the left-pointing arrow in the row of icons at the top of the page) to restore it.
You can move a page under another page to create a subpage.
At the right, click Pages.
In the list of pages that appears, point to the page you want to turn into a subpage, and drag it so that it fully covers the page of which you want it to be a subpage.
At the right, click Pages.
In the list of pages that appears, point to the page for which you want to make a subpage, click the three dots, then choose “Add subpage”.
Note: You can create up to 5 levels of subpages.
Your Site will be created with a default homepage, but you can turn a different page into the homepage at any time. If you do that, your original homepage will become a subpage of the new homepage (you might need to rename the now-subpage appropriately if you originally called it “Home”).
At the right, click Pages.
In the list of pages that appears, point to the page you want to be the homepage, click the three dots to the right of it, and choose “Make homepage”.
On the right, choose “Insert”.
You’ll see four icons that let you insert the most important types of content.
If you click the “Text box” icon, you’ll see a text box appear in your Site and you can simply start typing.
Note: If you cut and paste from a pre-prepared document, it can be helpful to paste your text without any outside formatting by right-clicking in the text box, then selecting “Paste as plain text”. This will ensure that your text will conform seamlessly to the Site theme settings.
Highlight or click the text you want to format.
In the navigation menu that appears, choose how you want to format your text.
Note that the options for numbered or bulleted lists will only appear if your text is designated “normal text”.
Here’s a video that shows how to format your text on a Google Site.
Here’s a video that shows how to create columns of text on a Google Site.
Headings and subheadings make your webpages much easier to follow by breaking up the page visually. Learn more about how to design websites and documents for effective screen reading. [Link to post about this.]
Often, people simply use formatting commands (bold, italics) to designate titles, headings, subheadings, etc. While this works for people who are able to read screens normally, it doesn’t work for visually impaired students. Their screen readers won’t know how to parse the page.
Therefore, it is essential to formally designate your headings and subheadings as such so that screen readers read them correctly.
Highlight the words you want to designate as a heading.
You will see a navigation menu above the words. From the dropdown menu, choose whether the text is a “title”, “heading”, “subheading”, “normal text”, or “small text”. Normal text is for the body text of a page; small text can be used for footnotes and the like.
You can also remove formatting from this navigation menu (that’s the icon with the T struck through). Don’t use this for anything other than removing formatting from outside text you’ve cut and pasted in.
Highlight the text you want to make into a link.
Click the little “link” option in the navigation menu that appears above the text.
Type or paste in the link, or choose from the menu of pages if you want to link to another page on your Site.
Click “Apply”.
On the right, click “Insert”.
Choose the “Image” icon. You’ll have the option to either “Select” the image from your own files, or to “Upload” one by cutting and pasting a URL, searching for one on the web, or taking an image from your Google Photos or Google Drive. (Note that sometimes images cannot be uploaded or inserted because the files are protected in some way.)
Choose the image you want and click “Open” or “Insert”, as appropriate.
You can resize your image by clicking on it so that a frame with dots appears. Drag on the dots to make the image the size you want.
Once you’ve added the image, click on it so that you see a little icon menu above it. You can select from this menu to crop or “uncrop” the image, turn it into a link, or delete it.
If you click on the three dots in the icon menu, you will have the additional options to replace the image with another, caption it, and provide “alt text” for it.
Whenever you add an image to your Site, be sure to provide “alt text” for it! This is the text that a screen reader will read to describe the image to someone who cannot see it.
After you insert an image, select it, click on the three dots on the icons menu that appears, and choose “Add alt text”.
Type in a clear description of what the image is for those using screen readers.
If the image is “decorative”, choose that option instead so that screen readers know to skip the image.
Click “Apply” to close the pop-up window.
Here’s a video that shows how to adjust an image and add “alt text” in Google Sites.
There are three ways to do this! Choose whichever is easiest for you.
On the right, choose “Insert”.
Scroll down until you see the option to select whichever type of Google file you want to insert. You’ll see your recent files pop up in a selection window.
Choose the file you want and click “Insert”.
This is handy if you want to insert a file you haven’t edited recently.
On the right, click “Insert” and then choose the Drive icon to select any file from your Drive.
Select the file you want and then click “Insert” on the bottom right.
You’ll see a preview pane of the file on the Sites page.
Select the preview of the file on the page and you’ll see an icon menu pop up on the left.
Choose the arrow icon to make the file open in a new tab. This is a good idea, especially if the file is lengthy.
You can click the “Preview” icon on the top of the page (it looks like a little box with another, smaller box inside it) to see what your file will look like when your Site is published.
As you can see in “Preview”, your Google file will appear in a separate viewing pane within the page. You can scroll inside the pane to move around in the file. If you’ve selected “Open in new tab”, you will see an arrow icon on the right side of the file viewing pane and if you click it, your file will open in a new tab.
If you want to get fancy, you can embed HTML code into the page to insert a file that isn’t part of G-Suite.
The most common use case for this feature on an academic Site would be to link to an external video (Vimeo, for example).
Open the file you want and click the “Share” button.
Check that the sharing permissions are what you want.
Copy the link to share the file.
Go back to Sites.
Choose “Insert” and click the “Embed” icon.
Choose “By URL” and paste the link into the box. Click “Insert”.
However, when we tested this feature, it was very buggy. A plain old link will do the job just as well and save you a lot of annoyance. If you want a visual, you can probably find a still from the video somewhere and post it as an image and make the image a link. Same basic effect, and much easier.
Move your mouse to the left side of the section of the page you want to move.
You will see ten gray dots appear.
Wait for your mouse arrow to become a four-way arrow.
Drop and drag the section you want to move to wherever you want it to go.
The navigation of your site will be based on however you’ve structured the site under “Pages”. To change the order of pages in the navigation, change the order of the pages under “Pages” as described above.
In Google Site, you can only have top navigation or side navigation – not both.
Unless you have only a couple of links on your Site, it’s usually better to use side navigation - too many top navigation links can get compressed and behave confusingly in some browsers.
Also, don’t have too many navigation links in general - they will become difficult to scroll through and people will miss important information. If you need to have a lot of navigation, make sure you nest your pages (i.e. make some pages sub-pages of other pages - see above for how to do this). This will make the navigation more user-friendly by giving visitors a better overview of it.
You must have more than one page to change the menu location.
In the top right corner, click Settings .
In the "Settings" window, go to Navigation Mode.
Choose Top or Side.
Note that in “editing” mode, side navigation often doesn’t appear – but you will be able to see it if you preview the Site.
In the top right corner, click Settings .
In the "Settings" window, go to Navigation Color.
Choose Transparent, White, or Black. (Yes, these are the only choices you have.)
As you move through the steps of creating and editing your Site, you can preview your work to see how it will look.
Click the “Preview” icon on the top of the page (it looks like a little box within a larger box).
You can preview your Site as it will appear on a smartphone, tablet, or desktop/laptop by choosing the appropriate icon from the options in the little oval navigation menu on the bottom right of the preview screen.
Exit Preview mode by clicking the X in the little oval navigation menu on the bottom right.
When your Site is ready for others to see, you can publish it by clicking the large “Publish” button on the top right. Once your Site is published, you can unpublish it and republish it as you wish.
Click “Publish”.
You’ll see a pop-up box with three action items.
The first action item calls for you to choose the address under which your site will appear.
Choose a name that makes sense and isn’t too long or elaborate. It’s generally fine to use the suggested name.
The second action item asks you to decide who can view your Site. The default is “Anyone”, but for academic purposes, it’s a good idea to limit this to the members of your course section or, at most, to members of the Champlain community.
To choose who can view your site, click “Manage”.
When you’re finished choosing who can view the site, click “Done” to return to the first pop-up box.
The third action item offers you the opportunity to request that search engines not list your Site. Check the box as appropriate. (Note that the word “request” is carefully chosen here. This is not a binding prohibition for search engines – you’re merely asking them to ignore your Site. However, checking the box at least cuts down on the chances that your Site will be publicly available, so it doesn’t hurt to do it.)
We strongly recommend limiting who can view your site and asking for it not to appear in search listings unless you and your class intend for the Site to be public and you’ve got written permission from your students to display their work publicly.
Your Site doesn’t need this stuff to function well, but it’s fun to have if you are feeling creative!
You can combine text and image on a section of a page by using a layout template. These are simple, but look really slick.
On the right, click Insert.
Under "Layouts," click the layout you want or drag the layout you want to your page.
Add text, images, docs, or videos as you wish.
You can add a collapsible text box to save space on your Google Site.
On the right, click Insert Collapsible text.
To add heading and body text, click the text boxes.
To publish your changes, at the top right, click Publish.
Click on the heading. This will expand the collapsible text.
To edit, click on the heading or body text box.
To select the text box group, point to the top of the collapsible text box and click the blue outline.
Click Delete group .
You can turn collapsible text into regular header and body text.Click the collapsible text to expand it.
To select the text box group, point to the top of the collapsible text box and click the blue outline.
Turn off "Collapsible."
To turn a header and body text boxes back into collapsible text
To select the text box group, point to the top of the header text box and click the blue outline.
Turn on "Collapsible."
Note: We double-checked to see if collapsible text is ADA compliant, and received the green light from the Accessibility Office that it’s okay to use. Screen readers see collapsible as long as the text has been opened so that it’s visible on the screen. (Thanks Erin Ferrara for your help testing this!)
You can add a button on your site to take people to another URL or page.
On the right, click “Insert” and select “Button”.
Enter a name. This will appear on the button.
Paste a URL the button should point to, or choose a page on your site.
Click Insert.
Click the button you want to edit or delete.
To change the style: Click the down arrow and choose “filled”, “outlined”, or “text”.
To change the name of the button or the URL to which it links, click “Edit” (the little pencil icon).
To delete the button, click “Delete” (the little trash can icon).
An announcement banner highlights important information in a clear and customizable way. It will appear above the header, right where your students will see it.
At the top right, click Settings (the little gear icon), then choose “Announcement banner”.
Turn on “Show banner”.
Click Settings, then choose “Announcement banner”.
Scroll to the bottom of the menu, and choose “Home page only” or “All pages”.
In the field under “Message,” enter your desired banner text.
Click the X at the top right of the popup window to exit and save your changes.
You don’t have to have a button in your banner, but it might be fun.
Click Settings, then choose “Announcement banner”.
Type text into the “Button label” field.
Type or paste a URL into the “Link” field.
Choose whether you want your link to open in a new tab or not by checking the box as appropriate.
Click the X at the top right of the popup window to exit and save your changes.
If you don’t want to have a button in your banner, simply leave both “Button label” and “Link” blank.
Next to "Banner color" select the dropdown arrow.
Select a color or add a custom color by clicking on the plus sign.
Click the X at the top right of the popup window to exit and save your changes.
Choose “Insert” and then scroll down and select “Divider”.
Voila! Your divider will appear.
There are no settings to change on a divider – what you see is what you get.
Note: Use image carousels only for decorative images, not for essential content, as they may not be universally accessible for all students using assistive tech.
This isn’t an animation – it’s more like the kind of “slideshow” you get when you fall for one of those clickbait links.
To add an image carousel to your Site, choose “Insert” and then scroll down and choose “Image carousel”.
Choose the images for your carousel (when we tested this, we found it a bit buggy – in some cases, we couldn’t upload images).
Click “insert” when you’re done.
You can add, remove, or reorder the images in the carousel by selecting it and clicking the “Settings” icon in the navigation menu that appears.
Drag and drop images to put them in the order you want.
Click “Update” to save your changes.