Google offers a powerful and no code website builder called Google sites which is completely free for all Google users anyone can easily create a standard website or a full feature e-commerce store for selling products online and today I'm excited to walk you through from start to finish a complete Google sites tutorial for beginners in this tutorial I'm going to share how you can use Google sites to create any kind of responsive website that you can think of so that you can capture leads appointments sell coaching or physical and digital products and more using a combination of Google sites and other free tools essentially after watching this tutorial you'll be able to create a stunning and full feature website using Google sites for your small business and the great thing is it's completely free okay so just quickly before we go ahead and launch into Google sites consider subscribing if you haven't done so already or if you're new to this Channel and that way you'll stay updated with actionable videos and tutorials designed to equip you with the skills knowledge and tools to help your small business Thrive online and with that happy note out the way let's go ahead and build a standout website for your small business using Google sites okay so to get started simply head over to your browser and type in sites.google.com and that's going to take you here or feel free to click the link in the description below this video now once you arrive here you might be asked to sign in with your Google account if you're currently not signed in so what you want to do is make sure that you sign in with the correct Google account the Google account that you want to use to build a website you can also navigate up to the top right hand corner and make sure that you're using the correct account then if we navigate over here we have the option to create a website from scratch or we can choose a pre-made template if we navigate over to template Gallery this is where we have access to dozens of pre-made website templates that we can choose from and now we can start building from we can customize these templates the way that we like you can see we have small business templates like a dog walker website holiday party website photo portfolio website restaurant and sellon and then we have other templates down here now for the purpose of today's tutorial what we're going to do is create a Google sit's website completely from scratch to do that simply navigate up to blank site and that's going to take us to a blank website canvas and the first thing that we want to do is name our site go ahead and add the name of your website it the name of your business and for the purpose of today's tutorial I'm going to create a website for a business called juicy s and this is going to be a full feature e-commerce website however if you just want to create a standard Google sites website you can still follow along with this tutorial I'm going to show you everything you need to know to create a responsive and functional Google site next what we're going to do is navigate over to settings and we want to make sure that our website is set up correctly if we navigate down here you can see we have navigation selected and then we have the mode over here at the moment we have top selected if we select here we can also select side essentially this is going to put your primary menu either at the top of your website page or on the side of your website for an optimal user experience I recommend selecting top then come down to the color of your primary navigation for now we're going to keep transparent selected however you can always come back to settings at any time to make changes then navigate over to Brand images here you have the option to upload a logo and that logo is going to appear up in the top left hand corner in your primary menu and then if we navigate down to favicon this is where you can add an image which will appear in your browser okay so I'm going to quickly upload a logo and here's my logo here then add an ALT text describing this image and this is important for SEO search engine optimization which essentially helps your website get discovered on Google Search and other search engines you can also navigate down and select a color from your logo to use for your website theme again come down and upload a favicon I'm going to use this image here and click on open and as you can see if we navigate up to the top leftand corner of our site we have our logo in here and when our website is live and someone opens up our website our favicon image will also display in the browser like this okay now because I want my site to be minimalistic what I'm going to do is actually go ahead and delete this logo in my primary menu I just want the text of my business name then if we navigate down to viewer tools here we're going to leave these settings as they are then navigate down to custom domains this is where you can connect a custom domain if you have one like I mentioned it's completely free to create and launch a website using Google sites you get free hosting and you get a free Google sites domain however if you want to add your own custom domain you will need to purchase a domain and connect that with Google sites if you want to learn more about connecting a custom domain to your Google site what I'll do is add the appropriate tutorial up above and down below in the description for you to check out later next what we're going to do is navigate down to analytics and this is where you can connect Google analytics so you can understand the performance of your website again this is not vital right away however if you want to learn how to connect Google analytics with your website then what I'll do is add the tutorial up above and down below in the description which will guide you through this process and then we also have an announcement banner and this allows you to show a b B you can customize the color of the banner add a message and a button label as well as a link to where that Banner goes if someone clicks on that Banner you can also choose to add that Banner on the homepage only or all pages on your website now I recommend not adding a banner right away you can always come back to settings at any time and add a banner if you have a special announcement typically you want to add an announcement Banner if you have a sale special event or something important that you want to share on your website this is a great way to add a specific call to action okay so now that you understand settings what we're going to do is navigate up here close settings and then navigate over to themes and this is where we can choose the overall look and style of our website and these are the different themes that we have access to so what you want to do is take the time to choose the theme that works best for your business again you can come back to themes and change your theme at any time if you don't like the look of your current theme now for me because I want to create a sleek and minimalist website I'm going to keep Simple selected then I'm going to select this color here however you can pick your own brand color if you like then I'm going to come down to font style and I want to make sure that I have light selected and this website theme is going to make my website look sharp and professional next what we're going to do is navigate over to Pages here we want to add all our website Pages as you can see we currently have the homepage what we're going to do is navigate down to add and then click on on new page this is going to be the about us page and then click on done add another page and I'm going to add a contact page and again you want to repeat this process with all your pages I'm going to add shop online and then done and again I want to add store locations and those are my main five pages now what we can do is Click on each page and we can drag and drop that page to a different location on our menu as you can see this is what our menu looks like we have home about store locations shop online and contact I'm going to come down and move shop online above store locations okay so I'm happy with the arrangement of my primary Pages now what I want to do is add sub Pages by simply clicking new page and adding the sub page our story and then done and with this page what I'm going to do is click on the page and drag that up to about and add that under the about page and as you can see we now have a sub item if I navigate over to about you can see we have our story under about this is a sub page okay so I'm going to navigate through that same process of adding additional sub pages to this website okay so just like that I've taken the time to add my primary items to my menu as well as my pages you can see if I navigate over to pages and click expand I have an about page and then within the about page as sub items I have these sub pages and you can see those over here under about now if I navigate down to shop online and click here you can see that this is not a page this is a menu section so what I did is I went down here and added a new menu section rather than a new page you can see that these are sub Pages within this section menu if I navigate up to this section menu and click here you can see that nothing happens because this is not a page however if I click on any of these sub items sub Pages that's going to take me to that specific page page if I click on product one you can see that takes me to the product one page and again I did the same down here I added a menu section and if I click on this menu section that's going to show me these four sub pages and these are four locations to our physical store and then below this we have the contact page so again if I navigate back up to the top you can see that this is a page however I could change this to a menu section if I wanted to this purely depends on how you want to set up your website pages and your primary navigation now if I navigate down to the bottom and click here and rather than adding a page subpage or menu section you can add a link into your primary menu maybe you want to link to a YouTube channel or an external website you can do that by adding a link you can also add a full page embed this could be if you want to embed a form an online store or something else from a different platform okay so I'm happy with my pages what we're going to do now is navigate over to insert and these are the different items or blocks that we can use to build out our website pages okay so let's go ahead and start customizing the home page come down and add your business name in here and up here we want to keep title selected here we can change the font if we like I'm going to come down to theme and you can see we have letto selected we can change the style of this font or we can select a different font if we like next to that we can change the size and then we have access to these other formatting options like bold italic underline and text color we can also add a link to this text and we have the option to add an emoji change the text alignment copy this text block delete or if we click here and other formatting options down here now if we navigate over to the right hand side if you add a text box you'll have access to all of these formatting options okay so I'm going to click out of here I'm happy with this title then what I'm going to do is navigate down to hitter type and I'm going to select large banner and these are different hter types that you can choose from I like large Banner B so I'm going to keep that selected for each of my pages now let's go ahead and add a header image go ahead and upload an image I'm going to use this image here now all of the images that I've created and used in this tutorial I created with canva and you can use canva completely for free to create your images now for each of your page hiters I recommend downloading your images as a JPEG 1280x 720 pixel and with canva you want the file size to be medium and 70% I find that this sizing works best for this type of header on Google sites okay so back here what I'm going to do is add a text box and I want to add a subheader I'm going to add the Mind drink and I'm going to make this Center aligned and make the font larger and then make the font lighter I'm going to come down and click on light and then make the font lighter by coming down to theme and then selecting light then what I'm going to do is Click out of here navigate up to this text text box and then drag this text box and place it below the header up here and then what I want to do is navigate up to images click here and then upload image and I'm going to navigate down and select a button that I created using canva and then click on open and then what I'm going to do is Click out of here drag this button and place that under here now to make the button larger what I can do is click here and drag the section out and that's going to make the button larger I can also play around with the text here and the spacing if I like I'm going to come down to 60 and drag that into the middle now what we can also do is navigate over to spacer and then add this spacer below shop now to make the header even larger so for example if I click on the spacer here I can drag the spacer out if I like and you can see that's going to change the dimensions of that image and the placement of my elements so I'm happy with that and now you can see the header text the subheading and the shop now button is above the drinks in this image so I'm happy with that so spaces allow you to essentially adjust the different elements on each of your sections so again everyone will have a different layout and website style so what you want to do is play around with the divider the divider is great for playing around and changing the way that your elements appear in your sections now once youve made any changes what you can do is navigate up to preview and you can preview your website pages on desktop as well as tablet and mobile and you want to make sure that your website pages are responsive across devices okay so I'm going to close the preview and that's going to take us back here now let's continue to build out our homepage first what I'm going to do is click on this image here and then click on link and I want to link this image button to all products this is the all products page and then click on apply and if a website visitor clicks on shop now that's going to take them to the all products page okay so now that we've created The Hitter what we're going to do is navigate down and add more sections to our homepage what I'm going to do is navigate across to content blocks and I'm going to click on this content block here and then add highlights about our business I'm going to go ahead and click here and upload an image I'm going to add this image here and I'm going to do the same with this element here and I'm going to use this image here again these are images that I created and downloaded from canva here we want to add a title Fruit Juicy then I want to make sure that this is a heading I'm going to make this slightly larger I'm going to select 24 and then come down to font and change this to normal then what I can do is go ahead and duplicate this element then drag the element and place that here I'm going to click here delete this and that's going to add the same header here now I'm going to quickly change this veg juicy now let's go ahead and add body text and as you can see I've quickly added the body text I've also made some quick formatting then I'm going to go ahead and duplicate the section and then move that over to this section here and then delete this element because I don't need it and as as you can see what I would do in this section is ADD information about two of our most popular fresh juices that you can purchase on our website I could also add quick key benefits okay so as you can see we now have two sections on our homepage what I'm going to do is navigate down to spacer and click here and then drag the spacer up above and in between these two sections and that's going to allow me to add nice spacing between each of these sections that's going to make my website page look less crowded and that's where these spacers come in handy again I can click on the spacer and I can drag it out and add the size that I want again we can preview what this looks like on our desktop and mobile for example on mobile if I come down here it looks like this if I come down and click on desktop you can see that there is a bit of space between each of these different sections okay so let's close the preview and then navigate down and I'm actually going to navigate up here and click on duplicate and that's going to copy that section then I'm going to drag this section and add it below the section I just created now let's add a new section below this spacer okay so to do that what I'm going to do is navigate up to the top and click on text box and then add sharpen your mind I'm going to make this a heading and then change the sizing to 24 I'm also going to make this Center aligned and I'm happy with that then I'm going to click on text box again and here we want to add information about our brand okay so I've added this text here talk about the brand and its benefits you can also share why your business stands out from other similar Brands so here essentially what we want to do on our homepage is share why our brand is special I'm going to navigate up here and change the sizing to 14 now we can also drag the sides if we like and then reposition that text box I'm happy with that next what I'm going to do is add a button and add learn more then come down to link and then click on about and then insert I'm going to drag this button and place that in the middle here and now if a website visitor clicks on this button that's going to take them to the about us page okay so let's navigate back down to this section what I'm going to do is drag this text box here and place that directly below this header text and I'm also going to do the same with this button and as you can see each of these three elements are now one section now your button might look strange like this what we want to do is click on the button and then navigate over to fi and we can choose the style here I'm going to click outlined and then navigate over to alignment and then click on centered I'm also going to change this again make it smaller and then what we need to do is rearrange this entire section just like that now with each of your section so as you can see this is a full section here we have another section here this is a section another section and this is our header section what we can do with each of these sections is we can change the color for example we have style one if I click on style two that's going to change it to style two if I click on style three that's going to change the section to style three and we can also upload an image and that's what I want to do with this section I'm going to navigate across to upload and then upload this image here and again this is an image that I created with canva with the same dimensions that I mentioned with the heading image up here now what we want to do is make this section larger to do that simply come down and locate the spacer again click here and what we're going to do is drag this spacer and add that above and then we're going to go ahead and click on the spacer again duplicate and then click and drag the spacer and place it below our button now what we can do with each of these spaces is we can click on the spacer and we can drag it to make the section larger I'm going to do the same up here and I like the look of that section again you can play around with it just click on the spacer and drag out the sides and I'm happy with that now we can come down and we can remove the readability adjustment if you like or you can choose to enable it this just depends on how your image appears on your website pages and it contrasts with the other elements like text and buttons I'm going to go ahead and adjust for readability and I like the look of that now the text is quite hard to read so what I'm going to do is highlight this text and then go ahead and bold that text I'm happy with this now we can also come down and click on anchor image if we like and you can choose the placement where you want to Anchor that image for example the image is currently anchored in the middle but I can click any of these options when you make those changes then simply navigate up to preview to make sure that those changes that you have made are responsive on your different devices I'm going to go ahead and click on preview and then navigate down to the section that we just created okay so perfect I like the look of that I'm going to go ahead and click on mobile and see what that section looks like on mobile again I'm happy with that for now so I'm going to exit out of this and then navigate back to the bottom of our homepage next what I'm going to do is add an image and then click on upload and click on this image here and click on open and this is an image I created with canva which is going to work as a divider I'm going to click on this image drag out the sides and then double click to change the placement I'm happy with that and again I'm going to come down and add a spacer and add the spacer above this image and I'm happy with that next I'm going to come down and I want to add three images that talk about the primary benefits of our products to do that I'm going to navigate up to content blocks and click on this three section block and then I'm going to Simply come down and I'm going to delete this and this text block here as well as these four here and that's going to leave me with these three image placements so I'm going to go ahead and upload three images this one here product benefit one then two more images and these are three text images that I created inside canva now in order to create images like this that are transparent that have a transparent background you will need to upgrade to canva Pro however you can access canva Pro for 30 days completely for free and that's going to allow you to create images like this or to download images with a transparent background now if you do not have the time to be particular and to create a responsive and stunning website whether it's a e-commerce website or a standard service-based website then what I'll do is add my templates down below that you can purchase that will give you access to these templates you will also have access to my canva templates which will allow you to Simply replace the content that I've already created with all the correct Dimensions you'll also have access to video tutorials that will show you how to use each of those TP templates so again if this sounds like you feel free to check out my Google sites templates down below next what I'm going to do is come down and add this content block here and then come down and add an image and I'm going to use this image here and I can just drag out the sides until the image fits well into this section I'm going to add a title and then text down here and then change the size and I'm happy with that I can change the alignment I'm going to highlight this navigate up to alignment and and click on left align and I'm going to do the same with this text down here left align and this is information about our products in terms of what we use to produce our products okay so what I'm going to do is navigate down and add a spacer and this spacer is going to go above these two sections and I'm going to drag this out and I like the look of that then I'm going to come down to the section and copy the section and then rearrange these elements and again change the alignment of this text and in with this text down here and then I'm just going to quickly go ahead and change the image and the content here and as you can see I've quickly gone ahead and changed the content next I'm going to come down and then click on spacer and then this time what I'm going to do is change the spacer background and add an image and I'm going to add this image here now what I'm going to do is click on the spacer and drag this out so that that image fits into this section and I'm happy with that again I can change if I want to remove the readability I think that looks a lot nicer the colors are a lot more prominent I don't have text to Overlay so there's not going to be a contrasting issue now let's preview our homepage I'm going to go ahead and click on desktop and this is what our current homepage looks like you can see it looks sleek attractive and minimalistic okay so let's go ahead and exit out of the preview and then navigate back down to the bottom of our homepage and the next section that I want to add is the frequently asked questions section to do that simply navigate up to collapsible group click here and go ahead and add your FAQ for the purpose of this example I'm just going to add faq1 and then add some basic text in here and as you can see I've quickly added an answer to our first FAQ if I click on this drop down that's going to generate the answer to the first if AQ okay next what I'm going to do is quickly just go ahead and duplicate this group and then duplicate again and all you would do is go ahead and make changes to each of these f a q's I'm just going to change this to three okay so next what I want to do is navigate up to the text block again and then come down and move this above my FAQ and add a title for this section and as you can see I've quickly gone ahead and added a title as well as a brief description about this fa AQ okay now I feel like I need to add space up here so again I'm going to navigate down add a spacer and I'm going to add the spacer below this image and above the FAQ again I can change the size of the spacing if I like okay so I'm happy with that now what we want to do is create a footer and the footer is going to be the same on every page once you create your footer here it will appear on every footer of your website similar to how your primary menu displays on every page of your website ideally you want to add your logo address email and phone number so what I'm going to do is navigate up to this section here this content block and click here and then come down and add my logo I'm going to use this logo and click open then I'm going to delete each of these images so I'm going to delete this image then this image here and remember I just want to delete the image not the entire element then I'm going to add address email and phone number then I just want to add the appropriate information below each of these elements and I'm happy with each of those four elements within my footer now you can play around with the formatting of your footer if you like now you want to make sure that your email and phone number are clickable for example if we click on our email what you want to do is navigate up to insert link and you want to add the link mail to colon and then your email over here and then click on apply and when someone clicks on your email down here that's going to automatically compose a new email for them to send to your email address you also want to do the same with phone number for example if you highlight your number is click on link and then within the link what you want to do is add tell T L then callon and then your phone number and then hit apply and when someone is on your website on their mobile device what they can do is click on this number and that's going to automatically allow them to call through to that number this is going to make your website footer a lot more responsive okay so I'm going to navigate over to this logo and make it smaller and I'm happy with that I'm also going to do the same with each of these boxes and I'm happy with that I'm also going to delete this little text box down here next what we want to do is come up here and drag this text box below here and we want to add important information like your business name copyright terms and conditions and privacy policy and as you can see I've bolded that text now we can also navigate over to Social Links and we can add our business's social media channels to our website footer for example I'm going to quickly go ahead and add three social media links and you can add more down here if you like and you can also upload images for each of your social media links if you don't it will be generated by default based on the link that you added so as you can see I've added Facebook LinkedIn and my Instagram channel for this business I'm going to go ahead and click on insert and that's going to add those social media links in here I'm going to drag this and place that here you can also click on the social media links and you can change the style like the size the type if it's solid and the color as well as the alignment okay so I'm happy with this and to make my footer look a lot more attractive what I'm going to do is actually add a background image so to do that I'm just going to go ahead and click on spacer and that's going to add a spacer here then I'm going to click here and add an image and let's find my footer image again this is an image that I found on canva then like I've showed you in the past I'm going to use this divider and drag it out until it fits nicely in this section now what I can do is navigate over to anchor image and I'm going to come down and click on bottom and that's going to bring that image up so I'm happy with that and as you can see we've gone ahead and we've completed our homepage let's go ahead and see what it looks like by navigating over to preview and then navigating through our homepage I like the look of that you can see it's very professional it's sleek and it's very minimalistic and I love the look of our footer okay so I'm going to close the preview and navigate back down the page and I'm happy with the footer next what we're going to do is navigate up the page and head over to our contact page again let's quickly add a image to our header I'm going to add this image here and click on open and then again I want to click on header type and click on large Banner I can change this text if I like but I'm happy with that for now then I'm going to come down and click on text box and then add get in touch with us today I'm going to click here and then click on heading and then change the size to 24 and then the alignment and then I'm going to add paragraph text below this send us a message we would love to hear from you have a question we're just an email away then what I want to do is add a form and this is a contact form that a website visitor can use to get get in touch with us what I'm going to do is navigate down our navigation bar on the right hand side and look for forms and you can see this is a form that I created earlier inside Google forms go ahead and click on the form and then click on insert and what I'm going to do is drag this form out so that it fits the entire page I'm happy with that and as you can see I now have a form on my contact form now you have complete freedom to customize the form the way that you like all you need to do is head over to your Google forms within your Google account then design the form with your theme colors and add your field options as well as set your settings now if you want to learn more about adding a Google form or a different type of form into your Google site what I'll do is add a tutorial up above and down below in the description which will guide you through the process of adding different types of forms to your website this could be a contact form a booking form a paid form and this is using Google forms and calendly so go ahead and check out that tutorial if you're interested in diving deeper into creating forms for your Google sites website and for example if you're a service-based business you could add a booking form to a booking page on your Google site now if we navigate down the page what we can do if we like is we can also add a map to our contact form and other information if we like if we have a physical location okay next what we're going to do is navigate up to our menu and what we want to do is add products to our our online store this is if you run an online store in e-commerce business I'm going to go ahead and click on all products and then I'm going to navigate over to image and then click on upload and use this image over here and click on open and again I'm going to change the header type to large Banner then what I'm going to do is navigate over to the right hand side and then click on this content block here and then navigate down to image Carousel and then I want to add some product images and I'm going to add these three images here now we can rearrange these images if we like and then we can click on insert I'm going to make this image smaller and then navigate up here and just like that I have my Carousel now what I'm going to do is navigate up here click on this image and then click on delete and then grab our Carousel and add that up here then I'm going to add information about this product okay so as you can see I've added the title product one then what you want to do in the product description is talk about the specific product here for example what is it how does it work what is the cost how long does it take and what is required then what I'm going to do is come down and add a button here we want to add by now and then under link what we want to do is link to a payment page where that customer can purchase this product now you can do this completely for free using a payment platform called stripe and what stripe allows you to do is list your different products and all the information about those products then you can create a payment link this is essentially a payment page that that is Standalone that is specifically for that product and you can customize this payment page how you like so that it represents your brand and that customer when they click on buy now it's going to take them to this stripe payment page where they can pay for that product and that is how you can set up an e-commerce store and add your products to your Google site using stripe okay so back here what I'm going to do is quickly add a spacer and I'm going to add this spacer above this product and below the hiter I'm going to make make this slightly larger and now let's preview this product page shop online if we navigate down here we have our first product and you can see that this is a Carousel and that customer can simply go ahead and click on buy now and that's going to take them to the stripe buy now page okay so let's close this preview now you can also use a tool called equid which allows you to actually embed your products directly inside your online store so you can actually embed singular products and into your product pages rather than creating elements like this or you can embed the entire store from equid into your Google site and the benefit of using this free tool is that you can embed your products directly inside Google sites meaning that everything is done within your Google site they can add products to their cart they can navigate through to the payment page and purchase that product and all you need to do as a website owner is to head over to equid to manage those orders now for those that are building an e-commerce website and online store using Google sites then what I'll do is add a beginners tutorial up above and down below in the description that will dive deeper into leveraging stripe and equid to add an online store so that you can add products to your Google site so go ahead and check that out if you want to build an online store okay next what you want to do is continue building out your website Pages now I've showed you how to customize your website Pages now it's on to you to navigate through all your different pages that you've added and then to customize and add the content to those pages similar to the process that I've just showed you you now know exactly how to customize each of your website pages okay so what I'm going to do is navigate back to home and once youve finished creating your website page what we can do is navigate up to publish and down here what you want to do is add your business name and your free Google sites URL your domain will look like this again like I mentioned you can create a custom domain and connect that to your Google site if you want to learn how to do this again I'll add the tutorial Down Below in the description then when you're ready to publish your new website online for your potential customers to discover your website simply come down and click on publish and just like that your site has been published successfully you can come down and view your website or you can simply navigate up to this drop down and then click on view published site and that's going to take you to your new Google site okay so let's return back to the Google sites editor then you can go ahead and make changes to your website and then before you publish your website you can click on this drop down and click on review changes and publish and that's going to allow you to see all the changes you've made before you publish those changes live on your website you can also unpublish your website at any time and that's going to take your website offline now if we click on share here you can come down and add people that you want to collaborate with on your website at the moment you can see our website is public online however only you have access to actually edit your website you can then come down and copy your published site link and you can start promoting your published website across your different channels social media channels your email and through your other marketing platforms and materials okay so I'm going to click done again like I mentioned I have a full e-commerce Google sites template that I created that you can take advantage of if you do not have the time to create it yourself as well as access to my canva image templ templates that you can then customize the way that you like for your own website if you're interested in my website templates what I'll do is add a 10% discount Down Below in the description which will give you a nice discount on my premium website templates however that is everything that I wanted to cover in this updated and Ultimate Guide to building a website with Google sites and there we have it guys that is it for this Google sites tutorial for beginners now if you have any questions about Google sites or the resources and tools that we mentioned today make sure to pop them down below and with that said thank you so much for watching this tutorial all the way through to the end if you got value make sure you leave a like and a comment and I will see you in the next video take care everyone