How to start a new website
Are you ready to build your first website with Google Sites? Or perhaps you just need a refresher of all of the features and options.
Well, in this video, I'm gonna give you everything you need to know to get started with Google Sites. Hello everyone, Scott Friesen here, at Simpletivity, helping you to get more done and enjoy less stress.
First off, if you don't know where to go to access Google Sites, all you need to do is go to your browser's address bar and type in sites.google.com and you'll come to a screen which looks very similar to what you see here. At the very top, we can start a new site by clicking this plus button, or we can choose one of the templates available here.
But down below is where you're going to see all of the sites that you have created, or perhaps websites that others have shared with you. For example, if they've given you editing rights.
So in this case, I have one existing website, but we wanna get started with a new website. I can either hit this plus button and start with a completely blank page, but in some cases I wanna get started a little bit faster.
So I'm gonna choose this template. Either way, you're going to be brought to that website.
You're gonna be brought to a brand new web page. Now, the great thing about starting with a template is that you have many of the features, many of the images and themes and text, things that are ready to go as you start to build out your site.
Using the Insert tab on Google Sites
But let's get familiar with the different menu options and choices available to us. Here on the right-hand side of the screen, we have a tab format with things such as insert, pages, and themes.
Now the insert tab is where you're probably going to be spending most of your time, why? Because this is where we get to add content, where we get to drag and drop different types of content onto our various web pages.
So for example, let's say under this learn more button, I would like to add in this sort of carousel style of these three images with some text down below. All I need to do is click on this and drag it over onto my webpage.
You can see that there's going to be a blue line, which hovers wherever I drag my cursor. That's telling me that that's where this will be inserted when I release my cursor.
So I'm gonna release it right here and here you can see now I've got a few boxes where I can start to add images or possibly a video, and I can edit my text down below. On the right-hand side here, we've got a variety of different things in which we can add to our websites.
Everything from collapsible text, all the way to other Google-related functions, such as maps, Google calendar, YouTube, slides, docs, and a variety of other things, which you will find in Google Drive. So this insert tab is obviously a very important part of the Google Sites menu.
Managing Pages on Google Sites
Next up, we have our pages tab, which is gonna show all of the pages that are included on our website. We started here in the home screen, but if I want to go to my projects pages, all I need to do is click that here.
Now you can see I've got a different page that I can edit and start to manipulate.
Using Themes with Google Sites
And if I want to click the three dots to the right of any of these pages, I can change their functions such as making this the homepage, I can duplicate this page and I can also change its properties such as changing the title or the name of that page as well.
Lastly, we have our themes and here you can see, we can change the theme that we're looking at right now. Currently, we're using this impression theme, but what if I prefer this diplomat theme?
I'm gonna click on it and I'm immediately going to get a preview of that theme. As you can see, not only does it change the title or the header of my websites, but it's also going to change the font and the text and sometimes the layout of other things as well.
If I don't like that color, which it chooses, I can choose another color if I wish or I can actually insert my own hex code if I have something that is particular, let's say to my branding. It'll also give you some choices as to what type of text or what type of font that you would like for this particular theme.
You can change these themes at any time when you are editing your website. However, when first starting off, you might want to actually start by looking at the themes before you get too heavily involved with editing the other components of your website.
We're gonna come back to this insert area in just a moment so that we get comfortable with moving things around, within our respective webpages. But before we do so, let's jump up here and see some of the other options we have available to us.
How to Preview and Share your Site
We do have the ability to undo and redo. Another important area here is the preview button.
Why don't I go back to our homepage just since there's a lot more to look at here. I'm gonna click on the home screen and I'm gonna select this preview icon.
What it's going to do, is it's going to basically show us what this website will look and feel like to people who are actually visiting our website. So here you can see I've got the menu on the left-hand side of the screen.
I can see how things are going to look and feel, and I can even test out and click on the buttons or any active links that I have. Now in the lower right-hand corner, we also have the option to preview our website.
Not only just on a large screen, such as a desktop or perhaps a laptop computer, but also on a phone. This can be very important because your images, in particular, will be laid out and displayed in perhaps a different format than what you're used to when viewing it on your desktop.
You can also preview this in tablet mode, which can be helpful because a tablet is not quite the same as a phone and presented in more of a square format. So you can toggle between these three to make sure that your website looks and feels the way that you want to.
Lastly, we just need to hit this X to exit the preview, and we are returned back to our editing window.
Next up, we have the ability to share a link or copy the link to our website. However, in this case, we can't because we have yet to publish it.
More on that in just a moment. Here we have the option to share this website with others.
Meaning if we want to add collaborators or people who would like to give permission so they can edit this website, we can do so here. If you've shared documents on Google Drive, you'll be very familiar with this window.
It acts and behaves just like you have experienced within Drive. Next up, we have our settings icon, which is gonna give us some important things to consider.
Number one, we can adjust our navigation. For example, in this case, I have what's called a side navigation where I have this collapsible menu on the left-hand side.
But I can change this to top navigation, which might actually be easier for my users where they can actually see the names of all my pages here in the top right-hand corner. So you can toggle that based on your preferences.
You can also adjust the color of that title area. If you want to upload some brand images, such as your own logo, you can do so and/or a favicon.
A favicon is the tiny icon that appears within the address bar. Lastly, we have these three dots where we have a few further options to take a look at including a version history of all of the changes which have been made on your website and you can quickly and easily duplicate that site.
How to Publish your Google Site
Now the most prominent button on the top part of the menu is our publish button. Remember, none of the changes that we make here on any of our web pages will take effect until we actually hit the publish button.
So you can confidently experiment with things. You can use the preview option here, and when you're happy with how everything looks and feels, we can select the publish button here.
Because I haven't published this particular website yet, I'll need to give it a web address. So in this case, let's call this an awesome website for cool people, something like that.
So this is going to be the name of this particular website. As you can see, because I haven't registered a custom domain, I'm going to have this sites.google.com/view in front of that website name.
This is going to be fine when you're first starting out and first putting your website together. But later on, you will most likely want to add a custom domain.
I can hit publish and in this case, now this website is live and if I want to share this link, I can copy this link and share it with whoever I would like to. Let's return back to our insert area here,
How to Add and Edit web page content
because really when it comes to creating a website, it's all about the content on the pages themselves. Below the header area here, you can see that things are divvied up between different sections and they're identified by these little dotted lines, these little gray, horizontal dotted lines.
Now these are not gonna be visible to viewers, this is just for your needs so you can see the spacing and the distinction between these different areas. Now, if you'd like to move any of these sections, so for example, if I want this learn more button to come first, all I need to do is come to the left-hand side, click and drag and now I can move this to a different section of that website.
You can do that with any of the sections here. Google Sites also makes it very easy for us to move and add things around.
So let's say I would like to add a second image to this section here. Over on the right-hand side, all I need to do is select images and I'm gonna say select in this case.
It's going to immediately go to my Google Drive, where I may have an image that I would like to upload here, or I can do so by URL or a Google image search. Of course, I can upload my own images as well.
In this case, I'm gonna grab this image here. I'm going to double click on it and it's going to bring it in at the bottom of this web page.
All I need to do is click and drag it if I want to bring it into this section of the webpage here. Now, if you need to resize any component, all you need to do is select that component so you can see these blue dots, which will surround it.
Now I can click and drag and make this image larger. Although it looks as though it's going to overlap the image on the left, when I release it, what's going to happen is it's going to automatically resize the image beside it.
Each content type will also have further options when you click on them themselves. So here, for example, when I click on this image, I have the choice if I want to crop this image, if I want to uncrop it, if I want to add a link so that when someone clicks this image, it goes somewhere else. Or I can remove this image as well.
The same goes for anything that is text-based. So here you can see on the left-hand side, I've got a description area for this photo.
If I click on it, I can change the text type. I can change the font and size and do other formatting as you see here.
So make sure that you click on an image, click on any type of content to see the other options that are available to you.
Adding and Organizing Pages
Of course, as you continue to build out your website, you're going to want to add new pages and perhaps not all of them need to be listed here within the menu. So let's get comfortable with adding pages, subpages and changing our navigation options.
Here you can see at the very bottom, we have a plus symbol, so we can add a new page. Now by hovering over it, we have the choice to either add a new page or a new link.
Remember, sometimes you may want an option here within the menu, but you're going to link them to an external page or maybe another website altogether. That's where you would use the new link option.
But in most cases, you're gonna want to select a new page. I'm gonna click this button and give this one a name, and I'm just gonna call it new page, for this example.
I'm going to hit done and now you can see, I have this new page within my pages view, but it also appears here within the menu option. Now, if I come over and select the three dots, I can choose to hide it from my navigation.
Meaning if I select this option, now new page is hidden from the menu. You can also see that there's a little line through it, letting me know that it is no longer in the navigation.
But if I want to change that back, I can go here and say, show in navigation. Now, one of the options available to us here is to make something a subpage or to add a subpage.
But in this case, let's say, I want to make this new page, a subpage of my contact page. All I need to do is select it and drag it and hover it over top of any of the other pages that I would like to have it nested under.
So in this case, I'm going to release it and now you can see that it is indented underneath the contact page. Now, what has changed is that if I hover over a contact, you can see that I can go directly to that new page.
But maybe I think this style of menu option is a little messy, and I don't want them to see this new page option here. Well, just as we did before, we can come here and say, hide from navigation.
Now you can see that I no longer have the new page option when I hover over a contact. So depending on your needs, depending on how you want your visitors to access your menu, you can choose this option below.
If I want to, I can also click and drag this and put it in a different section of my website. So in this case, if I hover over the entire page, it's going to be nested or create a subpage there.
However, if I want it as its separate page, I just need to find a line, in between one of my other sites. I'm gonna go ahead and say, show this in navigation.
So it's back in that third position and that's how we can easily and quickly manage all of our pages right here within Google Sites. Now, if you have any further questions about how to use Google Sites, be sure to let me know in the comments down below.
Thank you so much for watching today's video and remember, being productive does not need to be difficult. In fact, it's very simple.
