Skip to Main Content Libraries

DLS Tutorials

Google Sites

Willamette uses Google Workspace, which includes Google Drive (storage), Docs (word processing), Slides (presentations), Sheets (spreadsheets), Calendar, your email, Forms (creating forms to collect information), and Google Sites. 

You can create basic sites for classes, projects, blogs, portfolios, or just for fun using Google Sites. 

Start creating by going to sites.google.com.


 

Getting Started

Go to sites.google.com 

Under "start a new site" click on "blank site" if you would like to start from scratch. However, you are able to pick other templates if you would like to, as shown in the screenshot below. 

Creating a new site

*Note: If you choose a standard theme, you have restricted editing options. For example, changing the button color requires changing the theme color, which may have an impact on other color settings. Within the standard themes you can't modify the button size; everything is predefined. 

Now we can edit the blank site we have created! There are a range of options you can pick and choose, and shortly after you start you can even preview how the site will look!

Header

Our first edit can be our header: the header is our menu banner at the top of websites. This is the area where you will see companies' logos, names, and navigation options: About, Contact Us, etc. 

Setting a page title

To edit the header, click on site name, and then where it mentions “your page title,” edit it to add your preferred choice. You can change your preferences for the font on the right side.

You can add a site name by clicking on "Enter site name" in the upper left corner of the header.

Naming your site

If your header type supports images, select Image → upload to add a background image. Then, click select the picture from your computer. The editor will also automatically modify your header image to improve readability. 

Google sites can automatically adjust the color and shade of a header image to make text visible.

Alt text: As you can see, the banner has been created, the image has been uploaded and automatically modified to make sure it can be visibly easy to read. The header is "Digital Learning Studio" and the site name is "DLS" in the top left corner.

Design Theme

If you would like to change the design theme, click “Theme” on the right-hand side of the page. You can create and upload themes or you can use the pre-loaded themes on the website.

As you can see in the screenshot below, I have selected “Aristotle”, and it has been reflected on the site. 

Choosing a site theme

If you don’t like the color, there are pre-made colors for selection, or you can use the paint bucket on the right to select new colors. You can create new themes from scratch using the custom themes option (discussed in the next tab).

Custom themes

You can create and customize a completely new theme for your site. At the top of the "Themes" tab menu under "Custom," click the "+" button.

Creating a custom Google Sites theme

Give your custom theme a name, then click the "Next" button. Make your choices about color and text for your custom theme, but don't worry, you can change these later.

Naming your custom theme

Now when you click on the themes tab, your custom theme will appear at the top of the menu. You can switch between themes as many times as you want if you change your mind about look at feel. 

You can further customize your theme by clicking on the three dots that appear in the upper right corner and selecting "Edit" from the menu that appears. 

Custom theme appearing in the Themes tab

Customization categories

The customization categories include colors, text, images, navigation, components, and spacing. 

Theme customization menu

The colors menu allows you to create 3 colorways within your style. You can give each style a different default background color, text color for titles and headings, and text color for body text.

Colors customization menu

The text customization menu allows you to set a default font, size, format, alignment, line spacing, and paragraph spacing for normal text, titles, headings, subheadings, and small text.

Text customization menu

The images menu allows you to set a background for your header, a logo for your site, and a favicon (the icon that appears in the browser tab beside the name of your site).

Images customization menu

The navigation menu gives you the option of listing your pages along the top of your site, or along the side of your site. There are a lot of different options dealing with how you show your site visitor where in the site you are. Try different variations to see what you like best.

Navigation customization menu

The components menu allows you to customize the way buttons, dividers, links, and the image carousel appear in each of the 3 styles of your custom theme.

Components customization menu

The spacing menu deals with site density and width. From Google's documentation regarding spacing

  • Default: Recommended for sites that have less content and will appear spread out
  • Full: Recommended for sites that have more content and will appear densely packed
  • Wide: Recommended for sites that fall between default and full

Spacing customization menu

Check out Google Support's How to use Google Sites and Redesign your Google sites articles for more information.

Adding Content

Now we move on to adding content, first, click “insert” on the right column (this site was made with a template that automatically created these image and text boxes).

Adding types of content to Google Sites

Go down to content blocks and pick what kind of content layout you would like.

Now you can edit and add information of your choice and similarly you can edit the text, font and size.

Uploading an image

Each content choice has an image option; you can upload images, videos and calendar information; in this example below, I have chosen to add pictures.

Sample website

Alt Text

Once you add a picture, consider adding alt text for it. Alt text allows viewers using a screen reader to get a sense of images that appear on a page. If your image provides important information, you should add alt text.

To add alt text, click on the image to bring up the image menu. Click on the three dots to see more options and select "Alt text."

Locating the alt text editor for an image

Add your alt text to the Description box and click "Apply." If your image is purely decorative and does not add information, check the box that says "This is a decorative image." 

Entering and applying alt text for an image

Changing the background of a section

You can change the background of an individual section to a different color, or set a background image. Click on the section, then click on the artist palette icon (the top icon that appears). Select a color within your theme by clicking on one of the style options. To set an image as the background, click "image," then "upload" or "select."

Changing the background of a section to a color or image

Once you have set an image as your background, Google Sites will create the overlay for readability. You can remove this overlay or adjust it by clicking on the section to view the options. Here is an example of a website section with a photo in the background.

NOTE: the space covered by text, photos, or other elements dictates how much of the background image is visible. You can increase the amount of background image visible by adding spacer elements to your block. A spacer will increase the margin above, below, or on the sides of elements or collections of elements.

Sample section with a background image

Adding Sub-Pages

Right-click on the Home Page, and select “add subpage” - this is to create other pages for the user to go to for a variety of information.

Adding a subpage

After this, you can build a hyperlink to specific parts of the home page. To do this, click on the link button, which is shown below.

Adding a link

Then you will have an option to link to the page as shown below. You have the option to link text or an image to a specific page that you have already built in the site!

Linking to a page within the site

You can rearrange your pages and subpages by opening the Pages tab and dragging and dropping them into your desired order.

Tips and Tricks

Willamette University

Willamette University Libraries

Mark O. Hatfield Library
900 State Street.
Salem Oregon 97301
Pacific Northwest College of Art Library
511 NW Broadway.
Portland Oregon 97209