Getting Started in Google Sites
In this video we’ll be going over how to build a digital portfolio using Google Sites
and get a detailed look at the example portfolio we will be creating.
We’ll begin to explore the features of the menu bar on Google Sites.
And go over how to create a site, change your theme, and add a navigation bar.
This is what our completed portfolio for our sample student will look like, to give you
an idea of what you can achieve after watching this series.
To begin the process of creating a digital portfolio, open Google Sites and log in with
your google account.
Chances are you already have one of these, whether it be an account with Gmail, YouTube,
or google docs.
You’ll immediately be presented with options to start a new site from the template gallery.
Feel free to explore all the potential options or create a new site from scratch.
For the purposes of this series, we will be using the “portfolio” template.
Clicking this will open a new site with a blank template for a digital portfolio.
The first thing we’re going to do is change our theme.
Click on the word “Themes” in the menu on the right side of the screen, a list will
appear with six choices of pre-made themes, and one option to create a custom theme.
If you decide to create a custom theme, click custom.
You’ll be prompted to name your theme.
You can also add a logo or banner image at this time.
Click next to choose a colour palette for your portfolio.
These are the colours that will be used throughout your site.
There are 16 pre-made options, or you can customize your colours completely using hex
numbers, RGB values, or a colour selector.
Click next when you’re ready to choose fonts.
You’ll choose one font for titles and headings and one font for the body text.
When you're happy with all your choices, click create theme.
Now in your side menu bar, you will see an overview of your custom theme.
Here you can alter specific details of your theme, like text size and spacing, font and
colour allocation, various style options for buttons, navigation and more.
When you click on a pre-made theme, you can choose the accent colour and font style.
For this project we’ll be using “Impression” with red accents and the font style “capital”.
Remember, your theme can be changed and customized at any time, so don’t worry if you can’t
decide right away.
The theme will establish the look and formatting of your portfolio so feel free to play around
with different themes and styles until you find one you are happy with.
Next, you’ll want to click the “Pages” button, right beside “Themes”.
This will take you to a list of all the pages on your site.
Any changes you make here will be displayed on the navigation bar at the top of your site.
The three pages that are included in the portfolio template are: “Home”, “About” and
“Project Page”.
We’ll be keeping these templates and adding a few new pages of our own.
At the bottom of this menu bar, there is a plus sign.
Click this, three options will appear: “new menu section”, “new link”, and “new
page”.
Click “new page” and type the name of your new page in the box that appears.
To get an idea of the content to include in your Google Site and how to create an outline,
take a look at our series called “Digital Portfolios”.
Our first new page will be called “Education & Experience”.
Repeat this process until you have all the pages you’d like included.
We’ve also added a page called “Testimonials” and one called “Contact”.
To change the name of your pages at any time, just double click the tile.
We’re changing “Project page” to “Projects”.
You can rearrange the order of all your pages by simply dragging and dropping them into
the right spot in this list.
There are six actions you can take once you’ve created a page.
To access these options, click on a page in this menu, then click the three dots that
appear to the right of your page title.
A dropdown menu appears with: “Make homepage”, “Duplicate page”, “Properties”, “Add
Subpage”, “Hide from navigation”, and “Delete”.
“Make homepage” is self-explanatory, a homepage is the first page someone will see
when they visit your site.
Click on a page that you want to be the homepage, then select make homepage.
The page titled “home” on our site has already been pre-selected as the homepage,
you can see that based off the small house icon to the right of the title.
Our sample student has three projects she would like to showcase on separate pages,
but she doesn’t want them to all be in the navigation bar.
This is where “add subpage” comes in.
Click this, then add a project title.
This creates a blank page that will appear from a dropdown menu under the title “projects”
in the navigation bar.
Another way to do this is to click “duplicate page” and rename it to the title of one
of your projects, then drag the newly created page title onto the title of the page you’d
like to be its parent.
Doing it this way is convenient if you have multiple pages that you’d like to be the
same style, without having to manually recreate them each time.
“Hide from navigation” will take any of your pages off the navigation bar completely.
This could be useful if you want to remove a page, but don’t want to delete it entirely.
Or if you want a page to only be accessible through a link or button.
For example, a page that you created for a specific job application or one that you just
want to link internally from a clickable object.
Now if you look at your page, your navigation bar should be set up.
Change the text on the left corner to your own name, or logo.
You can click on the gear icon that appears on the left when you hover over the navigation
to further customize your navigation bar.
Here you can change the colour, position, images, and more.
The last tab in the menu bar is “Insert”.
We will quickly go over the features in this section now, then explore them more in depth
in the rest of the series.
The insert section is where you will go to add any content to your portfolio.
The first four options are “text box”, “images”, “embed”, and “drive”.
Text box is self-explanatory.
Clicking this will add an empty text box under whichever section of your page you have currently
selected.
If you have nothing selected, it will be added to the very bottom of your page.
Next is images.
Clicking this will prompt you to either upload an image from your computer or select an image.
If you click select an image, a window will pop up where you can access content from your
google drive, by URL, from google image search or from your google sites photo library.
Clicking “embed” will open a pop-up window to which you can either include a URL or html
embed code.
Clicking “drive” will open up a menu bar with all your google drive content.
Under these first four options there is a section called “layouts”.
These provide quick options for laying out your pages with text and images.
Clicking any of these will add blank text boxes and placeholder boxes to which you can
add any media.
Under this is “collapsible groups” which can condense any large blocks of text or images,
“table of contents” which organizes your content in an easy way for visitors to navigate
your page, “image carousel” to showcase multiple images, “button” to create a
button, “divider” which creates a physical line on your page to visually separate content,
“placeholder” which temporarily takes the place of any media to make it easier to
format your page, “YouTube” for embedding a YouTube video directly into your site.
Then some more specific options for inserting google, and google drive content: “calendar”,
“map”, “docs”, “slides”, “sheets”, “forms”, and “charts”.
Here is a preview of what your navigation bar should look like when it’s completed.
To see yours, click the preview button in the top menu bar.
In the next video we will begin the process of adding content to your site.
Beginning with the About and Skills Page.