Getting Started with Google Sites

This page explains how to use the Google Site features we think faculty are most likely to need. To make this page quick and easy to use, we’ve provided a full Table of Contents so that you can jump right to the information you need, or you can start here.

Google Sites also has excellent online instructions that tell you more about advanced features, as well as a support forum. We also provide guidance on leveraging Sites for projects and collaboration.

Technical and Policy Requirements

Hardware and Software

Google Sites can be viewed on a computer, phone, or tablet. However, to edit your site, you must use a computer.

Sites works with a variety of browsers. Most recent browsers (Chrome, Firefox, Microsoft Edge, Safari, and Internet Explorer) can be used to view sites. If you have trouble viewing a Google Site that has been published to the web, update your browser. To edit with Google Sites, you will need Chrome version 24 or up, or the latest version of Firefox or Safari. Chrome is recommended.

Note: Whatever browser you use, make sure cookies and JavaScript are turned on.

Classic vs “New” Sites

In 2020, Google Sites rolled out a new version, which makes sites with “responsive design” — that is, that work well with mobile phones. On September 1, 2021, Classic Sites will be archived and made inaccessible. If you have an older site created with Classic Sites, you will need to convert it. See Google’s instructions on converting from Classic Sites. This article assumes you are using “new” Sites, which is now the default.

FERPA

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. Students’ academic work and evidence of their presence in your class should not be publicly available without their express permission.

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, 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.”

ADA and Accessibility

The Americans with Disabilities Act and other laws about disability accommodations in education have special impact on websites. Your site must be accessible if:

• you have a student or other user who requires relevant accommodations
• the site is publicly available on the web (see the above FERPA considerations if you are planning to do this)

Common accessibility concerns include captioning or transcription (respectively) for video and audio media, use of accessibility best practices for text-based content, and providing alternative text for images. Learn more about these common issues in our article on accessible documents, which applies to websites.

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!

Make a New Site

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.

To get started, visit sites.google.com, where you will be able to see all the Google Sites you have access to and create a new one. You can also access this area by going to your Google homepage, clicking the nine dots at the top right, and selecting the Sites icon.

Create and Name a Google Site

• 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 templates available, but you will probably have to tinker with them significantly.)
• After a few seconds, your new, blank Site will appear.
• You can give your site a name (or rename it anytime) by going to the top left and replacing “Untitled site” with whatever you want the name of your Site to be.

Change How Your Site Looks

You can change the look and style of your site at any time.

Choose a Theme for Your Site

• 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!

This video shows you some of the different themes in Google Sites and how to change fonts, colors, etc. within themes.

Edit the Header

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 to avoid excessive scrolling.)

Now you can add a “cover page” to your Google Site. Note: usability experts often don’t recommend cover pages, because they are just another click between users and the content they want. However, they can enhance a site in which the aesthetic experience is more important than fast navigation–for example, a student portfolio or virtual gallery. Use cover pages judiciously and always keep the purpose of the site in mind.

Add an Image to Your Header

An image can liven up your Site and make it more engaging — 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 will need to resize and adjust your image in another program if necessary.)

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, unless the image is purely decorative. 
• 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

For a very simple look, you can remove the header altogether (and this may be a good idea if you have students on 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 headers work in Google Sites and explains some of their limitations.

Add, Edit, or Hide a Footer

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.

Add or Edit a Footer

• 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.

Hide a Footer

• Point to the footer and click the eye icon at the bottom left.
• To show the footer, point to the bottom of the page and click on the eye icon with a strikethrough.

Add, Delete, and Organize Pages

Add a Page to Your Site

• 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.
• Click “Done” to close the pop-up window.

Duplicate a Page

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 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.

Delete a Page

• 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.

Move a Page

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.

Create a New 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.

Choose a Different Homepage

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.”

Edit Content on a Page

Add Text to a Page

• 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.

Format Your Text

• 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 are two video tutorials showing you how to format your text on a Google Site and how to create columns of text on a Google Site.

Accessibility Reminder — Add Headings to Your Text

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 reading.

Often, people with typical visual ability simply use formatting (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 users and others who use screen reading software. Their screen readers will not distinguish headings from any other text. They will be read as confusing fragments and will not serve their visual purpose of helping the user navigate the text. Learn more in our article on accessible text-based documents.

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.

Conversely, do not use headings to emphasize normal body text or pull quotes.

Insert a Link to Another Page or Another Website

• 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.”

Add an Image to a Page

• 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.

Adjust an Image After Inserting It

• 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.

Accessibility Reminder — Add “Alt-Text” to Images

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. Learn more about writing good alternative text.

• 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.

Add Google Drive Items, Calendars, Maps, Forms, and YouTube Videos

Insert a Google File by Selecting a File You’ve Edited Recently

• 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.”

Insert a File Using the Drive Icon

• On the right, click “Insert” and then choose the Drive icon to select any file from your Drive (Docs, Sheets, Slides, Forms, etc).
• 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.

Navigation

Changing the Order of Navigation Links

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.

Choose a Navigation Menu Style

In Google Sites, you can only have top navigation or side navigation – not both. You may find that side navigation is more flexible, and it is certainly the best option if you have many links.

Minimize the number of links by featuring the most important ones. 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.

• 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. You can also change the navigation menu color in the same settings menu.

Previewing and Publishing Your Site

Preview Your Site

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.

Publish Your Site

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 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.

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.