How to Build a Google Sites Website
Thinking of building a new website?
Google Sites lets you quickly build and customize websites with an accessible and easy-to-use platform. Collaboratively build an engaging, high-quality website for your business or project. The website looks great on every screen from desktop to smartphone. All without learning design or programming.
Go to google.com and sign in to your Google account. If this is a new site you are building you will need to register with Google to get a Gmail or Google account.
Visit Google Sites to start building your new website.
https://sites.google.com/
Click the "+" in the lower corner to get started.
A page that looks like the screenshot below will open in a new tab as Untitled Site. This website will become
First, name the website using your chapter name. This will not be your URL but will be used in search engines on the Internet. Let's review the toolbar at the top of the website. The little arrows are the Undo and Redo buttons. Next to it is an eye sign. That's the preview button that lets you preview your website before you create or publish it. The + person icon next to it is where you can add other administrators to edit the website. The next screenshot shows you what's under three dots in a row, and then there's the Publish button. Don't publish your website until you are ready for it to go live!
Three Points in a Row offers a tour of the site to get you familiar with how everything works, and how you can connect your website to Google Analytics.
Let's explore the toolbar on the right. First, let's look at the Themes tab. This is where you can change the look of your website. We are using vision theme with green color but you are welcome to use any theme or color. A theme will pre-set the fonts and colors of your website. The color is #007a3d.
Now let's review the Pages tab. This is where you will create all your pages and it will also house your navigation bar. To create a new page, click the icon that looks like a piece of paper with a + next to it.
Type the name of your page and click Done. Keep adding pages. You can choose to add all of your pages first, then go back and fill them with content, or do them one at a time.
Once you've added your pages, you can do a few things in this tab. Clicking on the three dots in a line next to a page title gives you several options. One option that is used a lot is the Create a sub-page option. It allows you to nest pages one under the other, creating drop-downs under categories in your navigation bar.
Google will place your navigation bar at the top of your website by default, but you can change it to be on the side by clicking the gear icon on the left.
The only problem with the side menu option is that it's hidden all the time unless you click it to go to your site and pop out from the left. You will see in the example below that when the menu is gone, the webpage goes dark. The user must X out of the menu to return to the webpage. Because of this, we recommend using the horizontal navigation bar instead.
Let's change the main image of your website. To do this, hover over the image and you will have two options. Change image and header types. First, let's convert the image. You can click Upload to find an image on your computer or select Image which will let you choose a picture from your Google Drive folder.
When you click on Select Image a window like below will pop up. You will click on Google Drive.
Next, select the image from your Google Drive folder and click Select.
Image changed. Now, clicking on Header Type will resize your header image. See next screenshot.
You only have a choice between a large banner, banner or title. We recommend having a banner (shown here) or no title at all. Large banners should be reserved only for the homepage or not at all—the image is really big!
There's also a small icon in the bottom right of the header image that will adjust based on whether you have text on the image. If you don't want to darken it, deselect it and the image will brighten again. See screenshot below. It's dark.
And this is when you deselect and it lightens up.
Let's review how to replace the text. Click on any text box and a blue box will appear as well as a toolbar, giving you options to edit that text box. There's a trash can icon to remove the box, a chain link where you can add links to text, and options to align text to the right, left, or center.
There's also a title drop-down where you can select the size of your text. Play with the people you like to find out. These options are determined by the theme you choose in the Theme area of the toolbar.
Let's review the Insert tab which is your main toolbar for the website. Starting at the top:
Clicking on the text box icon will add an empty text box to the page. Don't worry where it lands, you can move it around once you're on the page.
Clicking the image icon will allow you to drop an image from your drive or from your computer.
The Embed URL icon will allow you to drop in a link to another website.
The Upload icon allows you to insert a document or photo directly from your computer and not from a disc.
The divider icon is a horizontal rule that you can use to help divide text or sections.
The Google Drive icon allows you to search Drive for photos and documents and then insert them into your website.
The YouTube icon allows you to insert a video from YouTube.
The Calendar icon allows you to insert a Google Calendar on your website. You need to make the calendar separate from Google Sites.
The Maps icon allows you to insert a Google Map on your website.
The Google Docs section is a list of the various options that Google gives you for creating forms, charts, slideshows, and more.
Let's review how to insert an image on the page. For this example, we'll pretend that you've already uploaded your image to the Website Photos folder in your Drive. If not, you will either have to do so or click on the upload button to grab it directly from your computer.
Click the Images icon and select the Google Drive title
Find your image and click Select.
The image will be placed on the page. You can click on it and drag it anywhere on the page. You can also click on the blue dots and resize it by dragging the dots in or out. Similarly, there is a toolbar for each image. The Trash Can icon is for deleting it, Chain Link is for adding a URL link to the image, and the first two images are for cropping or uncropping the image. The three dots on the right allow you to add a caption to the image, replace it, or add alternative text (it's a descriptive name to help users who are visually impaired to know what's on the page).
Now our page looks like this.
Now, let's review the text box. Clicking on the text box icon will add an empty box to your website. Like the image box, you can drag it around and resize it by clicking and dragging the blue box. Each text box is given a toolbar that is set up like any other on the website.
Type your text and edit as you see fit.
Continue adding text boxes.
At this point, there is one more feature that comes with every text box. To the left of each text box are a series of symbols. One is the trash can for deleting a text box, the other is two squares on top of each other. This will duplicate the text box. And the Paint Palette allows you to change the background of the box. Your options are white, grey, black or a background image.
Here's another way to add an image or document. If you uploaded your images and documents to your Drive before you started editing, you can also insert an image by clicking the icon from Drive.
Click the icon, then click your website photos or documents folder, and then find your photo, click it, and choose Insert. Once again, after putting the image or document on the page, you can move it around.
Let's say you want to add a video from YouTube. To do this, first, go to YouTube and copy the URL of the video you want to insert. Then click on the YouTube icon and paste the URL in the search field and click on the search button.
After clicking on the search you will see the video show below. Click on Video and then click on Select. This will embed the video in your webpage.
Note that the video is now on the page.
Once you have created your calendar, click on the calendar icon and you should see it in the panel that comes up. Click on your calendar and it will also be placed on the page you want it to run on.
To add a map to show you how to find your chapter, click the map icon and add your street address. After that click on Select. The map will also appear on the page you want to play it on.
The main page of this website when published will look like this.
