Hello,

Sign up to join our community!

Welcome Back,

Please sign in to your account!

Forgot Password,

Lost your password? Please enter your email address. You will receive a link and will create a new password via email.

Sorry, you do not have permission to ask a question, You must login to ask a question.

Please briefly explain why you feel this question should be reported.

Please briefly explain why you feel this answer should be reported.

Please briefly explain why you feel this user should be reported.

Home Latest Topics

  • 17k
  • 17k
Kevin Stratvert

How to use Google Sites to Create Website with Domain

video
play-rounded-fill
22:33

Hi everyone, Kevin here. Today I have a fun tutorial for all of you. I want to show you how you can create your very own website, and also get a domain name, so you can get a .com .net, .org. Whatever top level domain name you want, you can get. At the Kevin Cookie Company, we surprisingly don’t have a website yet, so today I’m going to use this tutorial to build a website for us, and then I’ll show you step-by-step how I do it. It’s extremely easy to do. You don’t have to know any coding. It’s all drag and drop. It’s super simple, and it’s only going to cost $12.00. That’s the cost of the domain. The hosting, the website creation, all of that is free. All right let’s jump on the PC and let’s get started. This tutorial is broken up into two separate parts. First, I want to show you how you can buy a domain name, and then second, we’ll build a website for the domain that we purchase using Google Sites. If you don’t want to buy a domain name, don’t feel like you have to. You can also just skip to the second portion of this video where we build the website. To buy a domain name, there’s a search field right here in the center of the page where you can type in your domain name. Today I want to buy the domain KevinCookieCompany.com. It’ll probably take you more time to brainstorm a good domain name than to actually buy it. Now let’s see if this domain name is available by clicking on get it. Phew, it looks like my domain name is available. This green check mark indicates that this domain is available. Down below, I can see a bunch of other top-level domains that I could purchase, like .net, .org, .info, but I really think .com is probably the best one to get. Once I’m ready to purchase, let’s add it to the cart. I can now see that I have one domain in my cart. Let’s go up to my cart and I’ll go ahead and check out. Here on the checkout page, I can see that privacy protection is turned on. I want that turned on by default. That basically means when someone looks up your domain, they won’t be able to see your name or your address. I like having that on by default. There’s also the setting to turn on auto-renew. I want to make sure I don’t let my domain name lapse, so I’ll leave auto-renew turned on. Down below, Google also gives you the option for Google Workspace. This was also previously known as G-Suite. If you want to be able to send e-mail from your new domain, you have to get Google Workspace to be able to do that. I don’t need to do that for now, so I’m not going to check that, and I’ll simply purchase the domain. Let’s click on check out. Right here on the landing page, once I purchase my domain, there’s a call out here for create a website. Let’s click on build website. When I click on build website, I have two different options. I can build a new website, and in a moment, we’ll go through this process to see how this works. Over on the right-hand side, I can also forward to an existing web page. This is something that I recently did with the domain name KevinStratvert.com. Here for example, if I type in KevinStratvert.com and hit enter, I’ve set this up to forward to my YouTube account. Today we want to build a new website, so let’s click on the text that says build website. Next, this drops me on another site where I can choose how I want to build my website, and there are a few different options. You can use a service called Wix and they have very professional looking websites. However, you’ll have to pay Wix to be able to use this service. There are also other services like Shopify if you want to set-up a shopping cart and maybe you have a business. You could also set-up WordPress and this is hosted by Bluehost so that carries a cost. Then you have two free options in the bottom left-hand corner. You can set-up a blog for your new domain that’s powered by Google’s Blogger service or you could set-up a simple site powered by Google Sites and today we are going to set-up a simple site. Now it says simple site here, but you can create some pretty good-looking websites and we’ll walk through how to do that. This opens up some of the benefits of using Google sites and I’m convinced. This looks like a pretty good option to try out. Next let’s click on start new site. We now have a blank canvas and we’re going to create an amazing website today. I see the file name up here is KevinCookieCompany.com. You can change this to whatever you want. This is more to help you navigate back to your site project. Down here is the header of our page and let’s start filling this out. Up here it asks me to enter a site name, so I’ll type in the Kevin Cookie Company. As I hover over, I see that there’s text here that says add logo. Let me add the Kevin Cookie Company logo by clicking on this. This opens up the settings dialog and right here I see that I can upload a logo. Let’s click on this. This opens up the Windows file picker and I have the Kevin Cookie Company small logo here. I’ll select this and then click on open. Check that out. That’s a pretty nice-looking logo. Now down below, there’s something called alt text. Alt text is if someone uses a screen reader and maybe they’re unable to see this logo, it’ll use the alt text in place of it. Also, if you hover over it, that’ll also show the alt text. Now one of the cool things is down below my logo, Google looks at the logo and it picks out the primary colors used in the logo, and I could choose one of these colors as my theme. I’ll go with this blue color and that’ll apply it to the theme that I use when I build out my website. Down at the very bottom there’s also something called a fav icon. A fav icon is this icon that appears alongside a tab in your browser, and here too, we can also upload an image for this. I’ll click on upload again. This opens up the file picker and I’m going to use the same small logo as the fav icon and then click on open. Here now you see the icon that will be displayed in a browser tab. Before we leave the settings dialog, I want to click over on announcement banner. At the Kevin Cookie Company, the holidays are coming up and this is one of the most important times of the year for our business. With a banner, we can show some type of text across the top of our website. I’m going to toggle on show banner and here I can choose a banner color. I could go with one of these predefined colors or I could even customize the color. Now, I’ve always found that when a website has a red banner, that really grabs my attention, so I’ll click on this red color. Next, I can type in a message, and this is going to be a message promoting our holiday deal. Order your cookies today for the holidays and use promo code hungry for a $1.00 discount. One thing you’d be amazed about is how much more people order when you give a $1.00 discount. I can also add a button, and this is basically a call to action or something a visitor can click on, and I could define a link for that. Let me type something in. I typed in order now, and I’ve also included the website, KevinStratvert.com. Later on, I can replace this with an order page. I could define whether it opens in a new tab or not, I’ll set it to open up in a new tab, so people stay on the KevinCookieCompany homepage. Here for the visibility, I could set it to all pages or the homepage only. I’ll just set it to the homepage. I’m now all done in settings, so let’s click on X. Here now you can see my banner on the top of the page and that red really does grab your attention. I think this is going to drive a lot of sales. My web page is starting to come together. I have the top header all in place. Next, I have this big header section and Google makes it extremely easy to edit what this looks like. When I hover over, I see here that I can modify the header type. When I click on this, I can make it smaller. I can insert a banner, which I had before, a large banner, or I could even insert a color. So once again, all you have to do is click, drag and drop, and you could customize what your website looks like. I’m OK with the banner, so I’ll leave that as is. Instead of showing text here, I’d prefer to show an image here. I’ll click on this text and here I’ll click on remove. That removes the text, and it leaves the background image. Next, over on the right-hand side, I can click on the insert tab, and I see all sorts of different types of things that I can insert and in a moment we’ll start going through what some of these things are, but before we do that, I want to insert my logo into this header space. Let’s insert an image, so I’ll click on images. Next, I’ll click on upload. This once again opens up the Windows file picker, and for this one I’ll select the Kevin Cookie Company logo and click on open. I’ve now inserted my logo, but it’s not in my header. Luckily, all I need to do is click on it and I see this drag icon appear. I can take my logo and I can drag and drop it wherever I want to put it on my page. I’ll drag it up into the top header and center it and then release and here you see my logo. The logo right now is a little small compared to the size of the header. I can click on the logo, and I see these circles appear in the corners. I can adjust the size of my logo, so let me adjust it so it’s a lot bigger and it fills up the header. I’ll try to keep the same aspect ratio and here now you see the logo is a lot larger. Once again, I’ll position it, so my logo appears right in the center of the top. Whenever I click on different objects that I’ve inserted on the page, I see these different controls that appear. I can crop the image, un-crop, I could even insert a link and I have a few additional options, but last tweak I want to make in the header is I want to change this image. Over here, I can hover over the header and then I see an option to change the image. When I click on this, I can upload like I did with the logo, or I could select an image. Let me click on select image. This opens up a select images prompt and I could select images that Google provides right here. I could also pull in images from a URL. I could search on Google, or I could even use my own images that I have stored in Google Drive. You can get images from many different places. Now I’m looking through the gallery here and I kind of like this brown background. I’ll select that and then click on the select button. This now I inserted my background image and one of the neat things is because I have an image or if I had text on top of this, you’ll see down in the bottom right-hand corner, Google automatically adjusts it for readability. So here I have light colored text on top of this background, so it automatically dimmed the background for me. So, Google sites is really smart, and helps me make my website look good. My header is now looking pretty good, but I need to start adding some content to the website itself. Over on the right-hand side, once again within the insert tab, you’ll see all the different types of content that I can insert on the page. I could insert text, images, items from Drive, I could even embed items. Down below and what makes my life a little bit easier, Google has some of these pre-created layouts that combine multiple items, so here this first layout will pull in an image, and also text and a header. Let me click on this first layout and I’ll insert this onto my page. This now inserts another section into my page and when I hover over this section, over on the left-hand side, I have a few different controls. I can change the section background, and in a moment, we’ll do this. I can also duplicate a section or delete a section if I didn’t want. Now over here I see a placeholder. Let me click on the placeholder and we’ll see all the different types of content that I can insert here. This is the official Kevin Cookie Company homepage. Let me insert our commercial from YouTube by clicking on YouTube. This opens up a prompt where I can search on YouTube. I’ll look for the Kevin Cookie Company commercial. Here I see that Kevin Cookie Company official commercial. I’ll select that and then click the select button. This now inserts my YouTube video on my homepage. How slick is that? Over on the right-hand side, I can customize the text to go alongside my commercial. Let me type in our slogan. I’ve typed in our slogan and when I have the item selected, here too you see that I can adjust the size of this text box. I can also click up here if I want to change the style. Here I could change it to a heading, or I could change it back to a title. I could also go through bold, italicize, and you have all of your typical editing tools. Underneath my title, I want to insert some text, and I’m going to just type up some text about the level of quality that goes into each cookie at the Kevin Cookie Company. I’ve now finished the first section of the website and I want to add another section. Here too, I’m going to click on this layout. I like using the layouts because it combines a number of elements together. I don’t want another image. I want a little bit of variation, so I want to show how you can move things around. I want this placeholder to appear on the right-hand side and I want all of the text on the left-hand side. I can simply click on this item, and I could drag it to wherever I want it. So, I’ve now placed this on the right and I have my text over on the left. I also want to have a little bit of kind of a zebra effect or alternating colors going. This is white here, so I want this to have a nice grayish color. Here I’ll click on this section background over on the left-hand side, and I’ll apply a little bit of emphasis to this section here. Now, I think would be a nice touch on the homepage to include an image carousel that shows some of the fine details of our delicious cookies. Let’s insert an image carousel. This opens up a prompt to insert my images. I’ll click on the plus icon. I have the option to upload or select, I’ll select some images. I’m sure I could find some amazing pictures online and pass them off as Kevin Cookie Company cookies. Within select images, I’m going to use the Google image search and I’ll simply type in cookies and let’s see what comes back. One of the really nice things is by default it only shows images that can be used commercially, so I could use these freely on my website. These look really good, and I’ll go through and select a few cookies that I think look delicious. I’ve now gone through and selected all of my images. Next I’ll click on insert. This looks good. Let’s click on insert again and this will create my image carousel. Here too, right now the dimensions are pretty large for an image carousel, so just like with all of the other items on this page, I can adjust the dimensions using these blue circles and I’ll pull this in and tighten it up a little bit. For my image carousel down below, I don’t want it just sitting by itself, so I’ll insert some text right here to insert a text box. I’m going to type in cookie gallery with photos. Let me highlight this and I could set a style. I’ll also set this to a title style and here I can center align my text. Now just like with all of the different items on this page, I can click and drag it above my gallery, so now I have a nice header for this image gallery. My page is really starting to come together, and the homepage of the Kevin Cookie Company really looks fantastic. I want to add some additional pages though. I can’t just have a one-page website. Over on the right-hand pane again, there’s a tab for pages. Let’s click on this. Down below, I can add new pages, or it could even link to a page. Let’s click on new page. For the new page, I want to call this recipes, and then I’ll click on done. This mow adds a new page and I see a page for recipes, and this shows me the recipes page. If I click back on home, up above, this will bring me back to the homepage, and here you’ll see that I have this navigation link on the top of the page. Over on the left-hand side, when I hover over this new navigation structure, there’s a settings gear. Let’s click on this. This opens up settings again and I have different options for how I show the different navigation links. Right now, it’s set to show on the top. Let’s see what it looks like if I select the side. When I click the side, it disappears from over here and now I get a hamburger menu and when I click on this, this shows my in page navigation. I personally prefer to leave it on top. I think it’s a little bit more discoverable. Let me click on the settings gear again and I’ll add it to top. I also have a few different color options. I can make it white. I can make it black, or I could simply make it transparent. I think transparent looks the best, so I’ll stick with that. Next, let’s go in and build out the recipe page. I’ve now built out the recipe page and I built this the same way we did on the home page where I added a section, I added an image, and some text. For the first recipe, we’re going to show the recipe for chocolate chip cookies. Now you might be wondering why am I giving away the recipe for this, isn’t that a trade secret? It’s true, but we’ve recently started selling chocolate chips, and this recipe uses a lot of them, so I think we could really drive some sales of that. Now I want yet another page where we can list out the chocolate chip cookie recipe, so once again I’ll go to the bottom right-hand corner, and I’ll add one more page. I’m going to call this page chocolate chip and then click on done. This now adds another page in the navigation on my page. One of the things you’ll see is across the top navigation, it added another tab for chocolate chip. I don’t want this to be a top-level item in the navigation. I want this to be a sub-page of recipes. Can I make it a sub-page? Yes, so over on the right-hand pane, let’s click on chocolate chip and I can click and drag it into recipes. This turns it into a sub-page. So now you see that chocolate chip is no longer on the top-level navigation. When I hover over recipes, you see chocolate chip now as one of the options. I can go there, and this drops me on the chocolate chip page. Over on the right-hand side, if I want to navigate throughout my expanding website, I can simply click on the item and that will bring me to the associated page. On the recipe page, I want to link chocolate chip to the chocolate chip cookie recipe. How do we do that? Well, up on the top tabs, let’s click on insert and let’s scroll down the list of all the different items that we can insert. Here I want to insert a button. Let’s click on button. Here I could type in a name for the button, and I’ll simply say see recipe. Down below, I can select where I want to link this button. When I click on link, it shows me all of the different pages in my site. I want to link it to the chocolate chip page, so I’ll click on this. Next, let’s click on insert. This now places a button in a new section. I want it to appear in this section and just like before, we can simply click on this button, and we can drag it into this section up above. So here now I see the chocolate chip cookie with the button included and as I go through, I can include other recipes in here as well. Now that I’ve inserted a button, there’s nothing currently on the chocolate chip sub-page. Let’s click over on the right-hand side on pages, and now click on chocolate chip. This drops us in the chocolate chip page, and I can now include the recipe. Let’s go up to insert and here I want to insert one of these two column structures. Let’s click on this. I’ve now created my chocolate chip recipe page and here you can see all of the ingredients and the baking instructions. I think this layout works really well. Now that I’m all done with this, let me click over on the right-hand side and let’s see what we can do with themes. When I click on themes, I can very quickly experiment with different themes and see how it impacts my page. Here I could jump between all these different theme types and here immediately you see how it’s changing. I’m going to go back to simple and here too you can choose what color you want. Now previously, Google selected this color from my logo, so I’m going to stick with this for now. I could also choose what type of font weight I want to use throughout my experience, so once again, it’s super easy to customize what your page looks like. Before we publish our page, I want to show a few other things that you can do with Google Sites. Up on the top bar, you have these ellipses. When you click on this, we can look at version history for the page. So let’s say that maybe in a month or two, I’ll go back and make more changes, but maybe I didn’t like them. I can always go back to a previous version. Another neat feature is over here once again on the top bar, I can preview what my site looks like. Here I can click on home, and I can see what the homepage looks like. This is all looking pretty good. Down below, right now I’m previewing it on a large screen display. I could also click into tablet to see what my site looks like on a tablet, and I could even adjust it down to a phone to see how it looks. So it looks great regardless of what type of device you’re on. Lastly, you don’t have to work on a site in isolation. I have lots of recipes. I need to add a lot more content to this website and it’s going to be a lot of work for me to do. Up on the top bar, I can click on this share with others link and I can invite other people to work on this site with me. I’ve now finished building out my site and I’m just about ready to publish it. Let’s click on one more thing before we publish it. Up on the top bar, let’s click on settings, and then go over to custom URLs. Here I see that my custom URL KevinCookieCompany.com is associated with this Google site. That’s exactly what I want, so I’ll leave that as is. If let’s say you build a Google site, and later on you want to associate it with a domain, you can come through here to tie your Google Site to your domain. Let’s click on X and I’m ready to get this out to the world. Let’s drive in some sales and really spread the word about the Kevin Cookie Company. Let’s now click on publish. This now allows me to publish to the web and here it lets me type in a web address and this is a web address under sites.google.com. Now this site doesn’t really matter that much because I’m going to be using a custom URL, and now it does say that I have to wait up to 48 hours for the site to be viewable here, but I’m OK waiting. By the time this video comes out, this website will be live. Now let’s click on publish. Now that I’ve published the site, I could go through, I can make additional edits, and once I’m satisfied with all of those edits, I could publish the site again, and then whatever changes I make will go live to the world. I’ve now navigated to the KevinCookieCompany.com and this site is live. Look at this. It is a beautiful website. I can navigate through. Here I’m going to click into recipes, and I could jump into my chocolate chip cookie recipe, so I have multiple pages on this website, but that’s really how easy it is to pull together your own domain and your own website. It’s extremely easy, you don’t have to know any coding at all. All right, that was a quick look at how you can build your very own website. If you now have your own domain and website, please give this video a thumbs up. To see more videos like this in the future, hit that subscribe button. If you want to see me cover any other topics, leave a comment down below. All right, that’s all I had for you today. I hope you enjoyed, and I hope to see you next time. Bye.

Related Topics

You must login to add an answer.

Hide picture