Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
When it comes to creating a Google site, even though we're using a page template, we have a lot of control over the look and the feel of the actual website itself. Before we start adding a ton of content, I want to go ahead and layout how the site itself should look. Each individual page can also be styled, and we'll take a look at doing that in a later video. To help us start styling the site, I've actually added a little bit of content to each one of our pages. This content is found in chapter six of the exercise files, in a word document called Website_Page_Contents.docx. All I've done is I've edited each page and copied and pasted the appropritate text.
To edit a page from your site, you simply select it, and then click on the Edit button in the upper right hand corner. Let's go ahead and talk about how we can make changes, though, to the overall look of the site. Any time we'd like to make site wide changes, we need to do this by using the Site Management menu. To access this, we're going to click on the More button with the drop down arrow. Under the drop down, we're going to go ahead and choose to Edit the Site Layout. So at this point, we have the ability to make changes that are going to impact the entire site. What that means, is whatever I change here, even though I'm currently viewing the home page, those pages will stay consistent, no matter what page of the site I'm viewing.
For example, let's go ahead and edit the sidebar. On the left hand side, I can see that the sidebar has an Edit button, as well as a Plus button. The Plus button will allow me to add additional elements to the sidebar. The Edit button will allow me to change the format of the sidebar. I'm going to go and click the Edit button. At this point, we have a chance to choose whether or not the sidebar is going to display on the left or the right of the screen and what its overall width is. By default, it's at 150 pixels for this particular theme. I'm going to go ahead and make this a little bit wider, to, let's say, 250 pixels, so that it takes up a little bit more of the screen space.
And as we start adding more pages, as well as more drop downs to those pages, all the text will fit without wrapping. I'm going to go and click OK. You can now see that the sidebar has been widened by an additional 100 pixels. In addition to that, let's go ahead and add something else into our sidebar by clicking the Plus button. One thing that we can do with collaborative sites, especially if we're working on a project, is we can add a countdown to when the project begins. So I'm going to go ahead and add a countdown until the date that we expect our garden to be complete. To edit this, I'm simply going to click on it.
Let's just say that our garden is one year away from completion. I'm going to go ahead and give this event a title, which is Garden Opening. And I'm going to choose a date that's exactly one year from today. So I will go to October 11, 2014. I will click OK. And I can now see on the left-hand side, I have a countdown showing that there's 365 days left until we expect our garden to open. The next thing I'd like to edit is actually the header of our particular sidebar. To do that, I want to make sure that the header's turned on. The buttons in the top corner act as toggle buttons.
Clicking the header button actually turns it off. Clicking it again, turns it back on. In addition to having the header there, I'd also like to add some horizontal navigation. This is some navigation that's going to go across the top of our website, and for this navigation, currently there's only a Home button available. To edit the navigation, I'll put my cursor anywhere above it, and I'll go ahead and click. At this point, I'm going to go ahead and add a couple pages to the navigation. I'll select Funding Page, and I will click OK. And then I will add another page, and I will select Planning Page and click OK.
So at this point, we should have three different items across the top of it. I can also choose whether or not they're be boxes, tabs, or links. I'm going to go and leave them as boxes and then click OK. So now we have some top level navigation. We have some sidebar navigation. We have the title of our site, and then the main content area. The last thing we need to do is take a look at some of these colors. By default, a lot of these fonts are coming through with kind of a red color. However, our school colors are blue. So let's go ahead and edit the colors of these particular fonts. To do that, we need to exit the Site Layout and go into Managing the Site.
I'm going to go ahead and click Close to save those changes. I'm going to go back to More > Manage Site. Under Managing Site on the left-hand side, I'm going to select Themes, Colors, and Fonts. Here I have the ability to change how different parts of the site look. For the entire page, I can choose to change the colors of the background, how images display, as well as wrapper images. I can also click on Text, and I can choose to change how the text looks. Now, by default that pulls all this information from the theme that we have selected.
However, I can choose to overwrite any of these theme options by selecting the radio button to the right of it and then making whatever changes I want. So, for example, if I want to change the font of the text, I can use this drop-down menu, I can come down here and I can choose the font that I want, click it, and you'll see that the fonts automatically change in the preview screen below. Now even though I can see the change in the preview screen, this change has not taken effect yet. None of the changes I make will take effect until I click the Save button. But the preview screen allows me to see how the font colors, sizes, and everything fit together before making those changes.
The next thing I'm going to change is the link color. As of right now, the theme has kind of this reddish color for all links. I'm going to go ahead and change this, and I'm going to choose something more appropriate to my school colors, such as this blue color. You can now see down in the preview, that all of the links have switched to a blue color. At this point, I like the way the site's starting to come together. I'm going to go ahead and click the Save button, and then I'll click on the site title on the left hand side to to back to the main site home page. So here you can see some of the site-wide changes already taking effect. We've made the sidebar a little different, we've changed some of the fonts, and we've even changed the link colors.
Get unlimited access to all courses for just $25/month.Become a member
82 Video lessons · 91124 Viewers
80 Video lessons · 138162 Viewers
59 Video lessons · 56978 Viewers
52 Video lessons · 70615 Viewers
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.