Do you want to make your Google sites faster, more interactive and easier to navigate? In this video I'm sharing with you seven tips that will save you hours of frustration and make your website so much better. Let's get started with tip number one, and that's starting with a brand new site.
Now of course, you don't have to start with a blank site. You can start with something that you've already used in the past or choose from a template, but don't forget you've got so much more than just the four or five templates that are available to you here.
If we come up and expand the template gallery, we've got so much more to choose from. Now, Google tries to make it helpful by putting these into different categories. We've got personal work, small business, and education, but don't let these headers fool you.
I've used many of these education sites for business purposes and I've used many of these work and small business templates for educational purposes. So before you get started with that new site, take a look around so you can get there that much faster.
Now the second tip, which is going to really make your website stand out, is taking a look at your navigation.
Now by default, your menu is going to appear here in the top right hand corner. It may vary a little bit by the theme that you've chosen, but this isn't the only layout or the only color scheme which you can choose from.
If we come up here and hit the gear icon, navigation is the very first setting, and we can move that top navigation to a side navigation if we want. Now this is a great choice if you want to put all the attention and more focus on what you have here in the header and what's going on above the fold. You'll see that it becomes a collapsible menu here in the left hand side.
So we still have all the same pages, we have all the same menu options that we saw before, but it's going to be hidden in the left hand side. This is a fantastic choice if you are creating a portfolio or something else where you really want people to focus here on the main screen or your homepage, but remember, this is not the only option available to you.
Now, in my case, I'm going to go back to that top view because I do want people to see this, but also don't forget that you can change the color of your navigation menu by default. Most themes will have this set to transparent, meaning that you can see the text directly over the background image I have here, but maybe I want to change it to white. This makes it stand out that much more, especially when I have this darker image here.
You also have the choice to choose black if you like. In this particular example, I don't think it stands out quite as much, so I might go back to that white option here that really I think makes my menu stand out, something that might make it easier for my visitors to find exactly what they're looking for.
Now, staying here within settings for tip number three, we also want to take a moment to click on our brand images, and don't forget that you can upload your own logo and favicon.
Let's start with the logo by selecting upload. Here I can choose any image on my computer. Let's say that maybe this check mark is my logo, so you'll see that that will now appear here in the top left hand corner. And if you do have a logo that perhaps has your full name included, don't forget that. You can also edit and remove the text here for the name of your site.
If this logo, for example, had my full company name and was perhaps a little more horizontal and it would stretch out here, I would probably just remove my site name altogether and let the logo do the work.
In my example here, maybe I'll just call this checkbox marketing. Maybe that's the name of my business. So I am going to add my name here as well, but there's a couple of other things that we want to pay attention to here.
Once you've uploaded your logo, there's another feature here that you may not have seen before. You can use one or more of the colors within your logo for the rest of your theme. Here you can see that I've got sort of this orangey color from my page, but if this is the color of my logo, why don't I use the exact same green?
Now I am pulling the green directly from my logo and everything else, even when I've got a few different shades, will be brought directly into my website. So already it's making it that much easier and that much faster for me to create or edit my existing site.
Lastly, still under brand images, we want to come down to our Fon. Now what exactly is a fon? Well, when you're browsing the web, you'll notice that there is almost always an image here to the left of each of the websites that you're on here.
You can see that since I'm in Google sites, I've got this mini Google Sites logo and I've got my live site here on the right hand side, which because I don't have a favicon, is also showing the Google Sites logo.
Well, that's a no-no, you don't want someone coming to your website and seeing this Google Site's logo. Let's go ahead and hit upload. I'm going to come back down here and select that checkbox again. And don't forget, you will have to hit publish for this to be applied to your website with my Google site now published. You can see that now I have that favi con listed here right beside my website.
And as always remember, you don't have to have the same logo that you use here within your menu. These can be completely different. They can be a different shade or a different color, but I would say uploading a favicon is a must have to make your website look professional.
Now, the next tip on our list has to do with adding information on any webpage, but only show it when someone wants to see it. And that involves adding a collapsible group. Here you can see under the insert menu, it actually happens to be the very first option under our content blocks, but I find that not enough people use this or make good use of it within their website.
I'm going to go ahead and select it. Here is going to be my collapsible block, and as always, if I want to move it up, maybe I want to have it here below my speakers here, I can add it here as well.
Now, there's two components to a collapsible group. The first one is to give it a title or a section heading. This is always going to be visible and you're going to want to make sure that you give it such a title that people will want to expand it or realize that there's more information underneath.
So an FAQ section is a great option here. Maybe I'm going to punch this up by making it bold and I'm also going to make it centered here as well. You'll see then down below we have a click to edit text section, and this is where we can add our questions and our answers. Another really good use of this space is maybe you want to include a person's bio.
I don't know how many times I've been on a page and they've just dumped the entire speaker's bio or the founder's bio when maybe it's better if that information is optional. I don't want to see or read your entire backstory unless I want to click on something. But let's stay with our FAQ example here.
So I'm going to quickly copy and paste some information here into this section and then click outside of the box and you'll notice that all we see is the header. Let's go ahead and select publish and see what this is going to look like on the live page. Here we are on the live page and you'll see here is the FAQ section.
Now there is a down arrow here on the right hand side, but they actually don't have to click that. They can click anything within this space and it will expand. They can click again and it will collapse. So again, this is a great way to maximize your real estate on any webpage. If you don't feel that you need to share that information to everyone, only want to display it when people want to learn more, you can include a collapsible group just like this.
Next up, let's take a look at another feature that I don't think gets used either often enough or at least the right way. And that is an image carousel in particular. You can do a lot more than just add images. This can be a great tool for adding testimonials and quotes as well. So let's make sure you know how to use it right.
By selecting image carousel, we're first going to be prompted with which images do we want to add. And yes, in order for it to be a carousel, you must have at least two images. So I'm going to go ahead here and select images.
You can either upload them directly from your machine or you can select an image. In my case, I'm going to go straight to Google Images, and this is an event, so I'm going to search for audiences here, and I'm going to go and click on a few different ones. Maybe this one, this one, and I kind of like the way that this one looks as well.
So I've got four images. I'm going to go ahead and select insert. And of course, keep in mind you can always rearrange these images by just simply dragging them. Maybe I want this to be in the third position, so I'm going to go ahead and drag this over here. Now, first I'm going to go ahead and select insert, just so you can see what this looks like, but we're going to come back and adjust some of those settings.
Now, when you first insert an image carousel, it's probably not going to look great, just like the example here, it's much too large and it's also on the left hand side of the screen.
So all you need to do is drag your blue dots, which you may be familiar with in other parts of Google sites as well. And I do want this to span the entire length of my page, so I'm going to go ahead and do that as well.
But there's a couple of other options that we have available to us. If you want to add captions, you can do so, and that will appear here in this white section down below. But you'll also notice by default, it's added these dots here at the bottom indicating the total number of images in my carousel. Well, I don't want either of these things, so let's go ahead and click on the carousel and then we'll click on settings. And then we want to come up here and click on the gear icon.
So number one, I'm going to turn off showing those dots. I don't want to show any captions. I haven't added any captions yet, but even if I did, I can turn that off here. I do want it to autostart, meaning I want it to move through those images when someone lands on that page.
And then we can also adjust the transition speed. Now I find that even medium is much too fast for my liking, so I'm going to slow that down a bit to slow, and I'm going to hit update already.
Even before we go to look at the live site, I think this looks a lot better. We don't have that caption space and we don't have those dots. I'm going to go ahead and hit publish and let's see what this looks like on the live site.
Now, when someone visits my website, you can come down below here and here is my image carousel, which is transitioning through naturally between the four images which I've selected. Now, if the user does choose to hover over the images, you will notice that we have the forward and back buttons available to us. So they will have the option to go back or to go forward, and as soon as they do, so that will pause the carousel.
This can be a great technique if you want to include testimonials or quotes or things that you want people to maybe read, and then they can go through either at their own pace or you can set up that automatic transition for when they first land on the website.
So don't ignore the power of an image carousel. It can bring a lot of great interactivity and excitement to your webpages.
Now, number six on our list, we are going to bring in the power of another Google application - And bring it directly into our website. And that is taking advantage of using Google forms. There's a very good chance that you want to create a contact page, or in this case, maybe I want to collect information from those who are thinking about attending my event. So for this, I'm going to come down to almost the very bottom of the insert tab, and I'm going to select forms.
By opening up this tab, you have access to all of your Google forms, whether it's something you're currently using somewhere else or something that you've just created in the past. So in this example, I'm going to go ahead and select this. How can I help you form?
And all I need to do is come down to the bottom after I've selected the appropriate form and select insert. And what it's going to do is bring that form directly into my website. And just like other sections, we could drag this to other parts, but I want this at the bottom of my homepage.
Now, as we've seen before, we can still manipulate our form. So for example, if I do want to center it on the screen, which I think makes the most sense, I'm going to drag it over here. And now I have this form directly integrated with my website.
Now, the one bonus tip to keep in mind when embedding Google Forms into your Google site is to go ahead and stretch out that form to the bottom of the screen. Let me show you what I mean. If I was to leave it in this case, you can actually see that this isn't the end of the form, and therefore when someone comes to this page, they're going to see an additional scroll bar here, so they can access that form.
But by clicking on the form itself, we can take that blue.at the bottom, drag it down so we can see the next or the submit or whatever it is at the end of the form, and that will reduce the chances of any additional scroll bar appearing on the right hand side.
Now, my last and final tip may be the most helpful of them all, especially if you've taken the time to customize logos and layouts and colors and everything else on a particular page. When we come over to the themes tab here, you know that you can quickly transition between a number of different themes, but did you know you can create your own custom theme so you can use this again and again and build those new websites even faster?
Here under custom, we're going to select that plus button here, and I'm going to call this my event theme. Maybe every time that I create a new event, I want to use this theme. And here we can make some other selections here as well. So for example, maybe I'm always going to use that particular logo, so I'm going to upload it.
Now, maybe there's a particular banner image that you want to place here when you are starting with a new page or with a new website. I'm going to leave this off in my example, but you can choose to add one yourself. I'm going to select next, and we can either go from a selection of preset colors or we can choose custom colors.
So you probably already have two or three custom colors related to your logo or related to your brand. Here is where you can come in here and choose and copy and paste your hex code directly into these fields. I'm going to go ahead and select next.
And then the last choice we have here is selecting our custom fonts, and we have a difference between our titles and our headings and also our body text. So I'm going to select maybe Georgia in this case.
And now not only has it been applied to my existing website, but I can continue to make custom adjustments here, whether that be the colors that we looked at, maybe there are particular images, navigations, all of these things are now adjustable, and I can save and repurpose this theme in the future.
Now, I'd love to hear from you next. What is your favorite tip when it comes to creating websites with Google sites? Be sure to let me know in the comments down below.
Thank you so much for watching, and remember, being productive does not need to be difficult. In fact, it's very simple.
