Digital Portfolios

STRUCTURE AND SET UP YOUR DIGITAL PORTFOLIO

In this module, the learning outcomes are:

to introduce you to Google Sites as a digital portfolio creation tool.
to guide you through the setup of your digital portfolio.

TABLE of CONTENTS

ADDING PAGES AND SUBPAGES

ADDING A FOOTER

PREVIEW

PUBLISH

MEET GOOGLE SITES

Google Sites is Google's free and easy-to-use digital portfolio building tool. Google Sites are integrated with other Google Workspace tools like Docs, Sheets, and Slides.

So you can drop in projects from your Google Drive into your digital portfolio that you're building. And like those services, Google Sites can be built, shared, and copied between editors.

Hover over the interactive buttons to learn about the landing page once you create a new Sites page. This page is the home page.

SETTING UP YOUR SITE

In your Google Drive, create your digital portfolio folder.
Right-click on the folder and select Share.
Set the folder sharing rights to Anyone can view them. This sharing right will default to all the documents in this folder.
Double-click on the folder. Click on New in the top left-hand corner and select Sites.
Once you have created you Site, right click on the name within the folder and select Add to Starred. You can navigate to the Starred tab on the left hand side menu to quickly find your digital portfolio.

🍏 A best practice to follow whenever you set up any new resource, is to start with the "nuts and bolts" of the resource. Use your Dualless to split your screen and follow along with the steps.

NAMING YOUR SITE

Start by naming your Site. In the top insert box named Untitled Site write the Site's name. The site name on the page header will also be completed.

SETTINGS

Next click on the Add logo beneath the site name or the Gear icon button next to the site name.

A settings box will appear. (You can also access these settings when you select the gear icon on the top right hand corner).

Setting 1: Navigation

Navigation sets where your tabs will be located and the colour of the tab banner.

If you choose your navigation menu to top with a black banner, it will look like this:

If you choose your navigation menu on the side with a white banner, it will look like this:

Setting 2: Brand images

Brand images. Your logo will appear below the site name. Perhaps this could be your school logo. A favicon is an image that shows on the site's tab. Your site needs to be live (published site) to show a favicon.

Add you school logo

Add a favicon for each recognition when tabs are open. Choose a bright image.

Setting 3: Viewer Tools

The next setting is viewer tools. By default these features are activated and you can choose whether to keep the activiated by moving the slider.

The info icon will show when last the page was updated and contact information. This is useful to make sure you keep your site updated. Your community will also know whether your site has the latest news.

Anchor links are useful when you have a long page with lots of information. It makes it easy to jump to certain section on the page by using a button. The same can be achieved by inserting a Table of Content. Make sure you have styled your headings correctly. In the settings you can choose whether your viewers can see these anchor links or not.

If you want to learn more about anchor links, watch this video:

You will find the anchor links in the published version of your Site.

Setting 4: Analytics

The next section is Analytics. In this section you can enable Google Analytics. By default Google Analytics is disabled. With Google Analytics, you can get data on the engagement and activity on your site.

If you are interested in exploring Google analytics, watch this video.

Setting 5: Announcements

Did you notice the yellow banner when you opened the course website? That is an announcement banner. An announcement banner is a great way to highlight announcements. This setting sets up your banner.

On/off slider.
Choose the colour of the banner.
Write your banner message (max 150 characters).
You can add a button. Give the button a label.
You can add a link.
If you want the link to open in a new tab, select the tickbox.
Do you want the banner only the first page or all the pages? Make your choice.

CHOOSE A THEME

The theme sets the tone for your look and feel of the Site. You can define the colour and the font.

Watch this video to show you the various themes and how they change your digital portfolio look and feel.

YOUR HOME PAGE

The first page that opened when you created the Site is your home page and your first tab under the Pages tab on the main menu in the right-hand sidebar.

This page sets the tone for the rest of your page, and remember the saying "first impressions count!"

Click on the Your page title.

Click on the Your page title. This is your header. Enter a heading title. When you click to enter the title, a shortcut bar appears. This shortcut bar allows you to change the text features and add a link.
Now that you have added your header text, you can also change the header's background and the header's layout.

You can upload an image from your computers or select from the Gallery / by URL / Search / Your albums / Google Drive.

You can change the layout of your header by choosing one of these layouts.

You will also see two icons at the bottom right-hand corner of the Header. The star is the "adjusting to readability" icon, which darkens the page header for readability purposes. The readability adjustment tool automatically adjusts the text colour in your header so that it can be read easily regardless of the image you choose for your header.

ADDING PAGES AND SUBPAGES

During Module 1, you planned the structure of your website. Now it is time to execute the plan.

Select the Pages tab in the right-hand side bar. This opens up the menu for your digital portfolio structure. From the Pages tab, you can create new pages for your navigation.

Hover over the Home title and three vertical dots (breadcrumbs) will appear.

You have three options:

If you select Duplicate Page, you copy the existing page.
Properties allows you to change the name of the menu shortcut and add a link.
You can Add subpage which is a page filed underneath the main page.

Remember the menu navigation title does not name your Page.

You will also notice a plus sign which will allow you to add pages. You can also make a menu item a hyperlink. If you look at the example the menu item help has a link icon next to it. When your user clicks on the menu item, they will taken to where the hyperlink directs them.

You can drag and drop pages to rearrange them in the order you want them to be in, and select a page to be set as your homepage.

Once you have added your menu items, you will see new options.

As mentioned, you can make an added page the home page.
You can duplicate a page, which is helpful so you do not have to recreate your design or fonts used.
Properties are the name of the item and adding of a link.
You can add a sub page.
You can hide any page from navigation, which means you can complete a page and then unhide it on a certain date.
Delete a page.

ADDING 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 Background .
When done, click anywhere else on the page.
To publish your changes, at the top right, click Publish.

To hide a footer, point to the footer, and at the bottom left click Hide .

An example of a footer.

A footer is just like a footer in Docs. It will appear on every page of the digital portfolio.

PREVIEW

On the top toolbar the computer icon allows you to preview the page your were working on. You can also preview for desktop, tablet and cellphone.

🍏 TIP: Most of the users of your digital portfolio will access it via their cellphones, so preview the look and feel using the cellphone preview.

PUBLISH

🍏Best practice tip: Test your website in Incognito mode. You can access Incognito mode via the three breadcrumbs in the top right hand corner of your web browser.

When you publish your site for the first time, add a site name to complete the site URL. You can only use letters, numbers, and dashes in the site name. You can continue to edit your site after you publish it. However, you need to republish the site to see any new changes.

Publish your site:

Click Publish.
Add a name to the end of the URL. Certain terms, such as support and admin, can’t be used. You’ll see a check mark at the end of the URL if it’s available.
Under Who can view my site, click Manage.
In the Share with others window, choose an option:
- Draft—To allow people in your domain or specific people to edit the draft version of your site, click Change.
- Published—To allow people in your domain or specific people to view your published site, click Change.
Click Done.
Click Publish. Visit your site's URL to confirm that your site published correctly.

Note: After you publish a site, you can share the published site by clicking Copy link and then paste the link to someone in a chat or email message.

You are well on your way to creating your digital portfolio. The structure is in place. Ready for your Module Task? Hustle on over!

Page updated

Report abuse