How to create a Website in Google Sites for Free

hi my name is siti and welcome back to the channel where we make educational technology easy for you in today's video I'm going to answer that question can you create a website for free that is easy to create and that I can share out to the world yes it's possible and in today's video we're going to do adjust that so let's dive in with another flipped classroom tutorial in today's video I'm going to walk you through Google Sites and we're going to look at the entire process of creating a website I'm going to look at the headers the pages and all the little details that you need to understand in order for us to create a website together now I highly encourage that you pause the video when needed and together we're going to start creating our websites now before you even get started there's a couple of things you need to consider first of all who is going to be your audience why are you creating this website you need to think of their age the demographics and also how they are going to be accessing this website now Google Sites is amazing and being mobile-friendly but when you're designing your website that's still very important to keep that target audience in mind in addition to this you're going to have to decide what you're using the website for is it going to be for resources class materials or is it more in a blog styled eportfolio format all those things are possible with Google Sites but it is going to require you to commit some time now once you've committed time into creating a website it'll be very important to update the website and since recently you are now going to be able to even notify all the viewers of your website when the website was last updated this is going to give them that sense that the website is alive and new content is added regularly now where do I begin there's a couple of places where you can start you can type in sites.google.com and that will allow you to then create a new Google Sites now Google Sites are files and these files live in your Google Drive now that means you can also use the app launcher go to your Google Drive and create a Google Sites file that way you can right click and add a new Google Sites or simply click on new Google Sites now the first thing with any document is title your document let's give our website the name demo website now we can do this at the top now let's say that you'd like to do it in your Google Drive same as with other files simply right-click on the file and then rename your file now this file name will also appear on your title header and we can change this later but for now let's leave it at demo websites now this file name will also become your website name now these are not the same you we have your file name at the top and our website name is down below now let's go ahead and give our website a name let's call this my website you will now notice your file name is still demo website but your website has the name my website Google Sites is as with any other Google app very good for collaboration and that's what we're going to do now because you'll probably want to collaborate with some of your colleagues to create this amazing website now you can find that in the top corner and you'll see that same plus icon the plus people so what we're going to do is we're going to add some collaborators now go ahead and click on that and then we're going to add someone that is going to get some editing privileges for our website mind you this is not how you share your website with the world this is only for website editors so let's say that you're creating a website for your school you can add all your colleagues to that and then they can add content onto your websites this saves you time and again it helps to keep the website alive now as with any other file in Google you can choose rather you want someone to be an editor or a viewer now this is where you set that up once you've added your collaborators it's time to start giving our website a little bit of design now the biggest design choices you will make are right here and this is in your sidebar where you're going to choose a theme now the theme is going to decide which type of foam so you're going to use and also which overarching color you're going to be using now you can add a custom color but for now let's just stick to the basics and let's choose our first theme now they are limited in choice and the fonts are limited in choice as well hope this will be included in future updates with Google Sites but for now we are limited to these themes and these fonts now we can add our own color and we can use a hex code for that you will now see your website has a different look and overall feel and what we're going to do now is hover over that title and we're going to change this title into welcome because this is our first page and it is a welcome page so go ahead and type welcome at the top and then we're going to look at these different banner styles now hovering over the actual banner will give you an option to change the style now we have four different styles we have a very large banner we have a header a smaller one or text only now these can be different on different pages now we can also add our own images to these banners this is great when you've got some really well-designed images of yourself with a plain background or you'd like to add your own little background to this website it is worth noting that you can also use animated gif or gif files and this will allow you to create a sense of animation at the top I would highly recommend exploring some cinemagraphs they will make your website look alive and it adds a personal touch to that website now if you want to use your own image or gif gif file then you simply hover over your banner you find the change image and then select upload this allows you to upload your own image and it is now part of Google Sites that's the top of our website now let's scroll all the way down and this is where we find the footer now the footer of Google Sites this is the same across all pages this could be used for a copyright notice or a simple link to your social but you can change the footer by simply clicking on that plus add footer and then pasting in your text or typing it manually you can add images to the footer and links now you will notice that this footer creates a new horizontal block this is different from the banner which is also a horizontal block now as we add more content to our Google Sites more horizontal blocks are created these can all be formatted in their own way to do that you hover over one search block and then at the left hand side you can see that you can change the style we have two different emphasis styles that these depend on the theme you've chosen and we can also upload an image here again this can be a Jif or gif animated file think carefully about which emphasis styles to use and also where you place them on your website because as you scroll down these horizontal blocks will become visible as your visitors are on the website and we do not want to distract from the actual content on our websites let's add a logo and favicon now our logo can be added at the top left corner now in the top left corner you'll see that there is an option when you hover there that says as logo but the logo will appear on every page in the top corner of your website this is where you can upload a file this can be your own logo it can be a school logo anything you'd like it to be I would highly recommend that you create your own logo you can use Google drawings for that I'll leave some cards that link to Google drawings tutorials but if you've already got a logo go ahead and upload that now we can also add our own fav icon this is a little icon that appears in your browser tab or whenever you save your website in your bookmarks and we can add that by clicking on the three dots in the top right corner once you've done that you'll see that there's an option that says add favicon simply click on that upload a square-shaped image and you're ready to go now you will not see that favicon just yet because it will only appear once your website is published to the Internet at the moment we're still editing so we can only upload our favicon ready to go but it will not be visible in our preview but the last thing to do is to decide where we want our menu do we want to keep it at the top horizontal or do we want to move it to the side and have it as a vertical aligned menu this is completely up to you and depends on the sort of website you're trying to create now let's move on to adding content and pages to our website now before adding pages I'd like you to really think about how many pages you're adding because too many pages will be distracting better to limit the amount of pages and really think about the content you're trying to share now once you know which pages to add simply go to the sidebar where you have a pages browser and that's where we're going to click on that plus icon to add pages as you're adding pages you will also title these pages a new page will be created in your workspace and you can again set this up change the banner type and start adding some titles now it is worth noting that you can add sub pages that is two ways of doing this now you can either click on the plus icon create a page and then drag and drop it on top of another page you can also go to a page that you would like to keep as a parent page and then click on the three dots next to it and click on add a sub page this will create a page within that page this will be reflected in your navigation bar now let's say that you want to create a page you want to link to that page but you don't want the page in your menu bar simple you can click on the three dots and you can hide this from your navigation you can still link to it from outside sources or from on another page but it will not appear in your menu this is great for resource pages or even private pages that you'd like to share with some people but not everyone now let's say that you've added about four or five pages and you really want to change the order they appear well the same way that we can drag-and-drop sub pages we can also drag and drop our pages to appear in a different order this is very handy when you're trying to rearrange the pages afterwards or when you've created all your pages and now you're going to start putting them into subcategories very useful and very intuitive to simply click drag and drop now let's say that you have a youtube channel or a Twitter and you want to put that into your menu well you can also add external links now again we're going to click on that plus but this time we're not going to click on a new page we're clicking on new link this is an external link it could be any link can be your YouTube channel and then that link will be added to your menu so for example you can have a menu structure where you have your home and then the second one is resources in one of those sub resources is an external link let's say that you no longer need a page what can you do what you can delete that page you can simply click on the three dots and delete the page mind you you can still restore this but once you've moved on there is no way of getting back to that page so I would highly recommend that maybe you have a page hidden from your navigation for a couple of days maybe even weeks and if you still don't need that page back then you can go ahead and delete it now in terms of setting up the actual content on our page Google Sites makes it super easy for us in our side menu there is an insert menu and at the top of that menu you'll see there's a number of layouts now these layouts are templates we can use for our websites so let's go ahead and select the layouts and now we can add content to this layouts you will see there's a number of image placeholders and we can simply click on those to upload new images let's say that you want to design the website from scratch and you want to do everything yourself no problem simply scroll down and you will see all the different insert options so let's go ahead and insert a text box now and let's say that you want to resize any of these elements this could be a text button or image can we do this yes we can we can simply click on it and then any of these corner points we can drag and drop it to enlarge or minimize our elements you can do this with images and you can do this with texts mind you if you do it with images there will be an automatic crop but you can always reset that by simply clicking on the undo crop button now why do we want to resize well because it makes it so much easier to move elements around our page let's say that you've added two images and a whole bunch of text what can you do well you could simply drag and drop any of those elements and you can leave them either above under or next to another elements this is minimum effort and you can always change it later now you will see there's many other options here you've got image carousels now that you can insert you've got a divider that you can use to break up the website but you can also use these horizontal sections to give your website a design or a different feel you can even leave an empty section with some empty text and then give it an emphasis layout to again add a personal touch to your Google Sites now let's say that you have an incredible amount of data or lots of resources and you want to share all these with people now you do not want to create twenty pages and have them all in the menu so what you can do is you can create these twenty pages have them all hidden from your menu and then we're going to insert a table of contents now where do we do that same menu insert menu and then we find table of contents this allows you to have all this information on a websites whilst remaining that clean look of the minimal pages with still access to the resources there are some limitations to Google Sites and these are very obvious when you're trying to change the font sizes or font types or when you're trying to add even more specified content like specifically animated buttons or other effects now in order to still do all those things you can use embed HTML code now I've done an entire video on that that you can watch by clicking on the card and this will take you to another video where we're going to look at the JavaScript HTML and CSS that you can use to embed things that are currently not supported I've also got a video on animated buttons and again this is using a similar resource where you can now use CSS and HTML to animate a button and click on that if you're happy with standard buttons you can find those buttons in the insert menu and again that button will use that theme that you've selected in order to have a color or an effect now I really like using the built in buttons to either a link to a page or link out to another website you can also link to anchors now what is an anchor now an anchor is where you have a long page with lots of different subtitles and you want to link to one of those subtitles but there is a limitation here though if you are using links to these anchors they will open up in a separate tab now if you want to link to an individual anchor from your menu you can do this as well now in order to find these anchors you will have to go into your preview window now once you've created a website and you have your text boxes and your titles all ready to go simply open it up in the preview window now as you scroll down and your hover above one of those subtitles you will see there is now a new icon that appears this is a link icon and when you click on that the anchor link will be copied now when you paste this as a hyperlink or within your menu structure or even within a button this will link to the subheading and it will automatically scroll down the page to find that part of the page that is relevant this is great when you've got long pages with lots of information and you want to link to a specific part of that page now who doesn't like video I love video I've got YouTube videos and I will put my YouTube videos on to my Google Sites now how can I do this well again there's two ways that you can do this now the first way you can do this is by going into your insert side menu finding YouTube and this will open up the insert menu now there's only two options here you can find a video by searching for it or you can use one of your uploaded videos now let's say that you're like me and you have multiple accounts and video is uploaded with one and your website with another well then you will have to go and get that URL from YouTube once you've got that URL you're not going to use the insert menu you're going to double click on your website that's where you're going to paste that URL and Google Sites will automatically recognize it as a YouTube video and embed that video now this is great when you're embedding videos of other people they will still get two views and they remain the author of that video they get proper credits and you can use their content on your websites I'm thinking of websites that are shared with students and parents where you've got lots of little videos two resources maybe even songs and tutorials that are helpful to them now what else can we embed well we can insert a calendar we can insert a Google Maps all these things are very easy to do you can simply click on that side menu and far what you're trying to insert now let's say that you've got a document and this is a brainstorming document and you want to just give access to that document on your website in a centralized area well that too is possible simply go to insert from Drive and then find the document or file that you would like to have on your website you can then resize this so that is very clear for people and that they can read the contents whenever that file is updated it will automatically show the most up-to-date version on your Google Sites now the way Google Sites allows you to embed external content is there's two ways you can either use the URL of that content or you can use an HTML code now if you're not really too sure about HTML code simply try using the URL and Google Sites will try to read it it's only when things get a little bit more complex there we're going to use the HTML code now we're talking about social profiles like your Twitter stream or even some Facebook streams they will actually provide you with an embed HTML code that you can paste into that box we still have to publish our website though because at the moment only collaborators and us can see this website now in order to publish your website you're going to have to go to the top and first of all you're going to want to preview your website so go ahead and click on the I icon and now we can preview our website we can see what it looks like on large displays tablet displays and even smartphone displays now make sure that you check every single page so that you can get a feel of what your website will look like at any tweaks necessary for it to work on all three formats and then you can exit this preview by clicking on the X once everything looks the way you want it to look and you're ready to go live click on that big publish button now you can go ahead and click on publish and then you are able to publish either to the entire world or a few select people now let's say that you've already published your website and you've added some changes well what's important that you keep pressing publish after every change you've made it automatically saved the changes into your file these do not go live until you click publish that means that you see changes collaborate to see changes but the rest of the world only sees these changes once you've hit that publish button let's say that you want to take it offline altogether whether you can always unpublish your website as well and then all we want is a custom domain now in order for you to get a custom domain there's a number of domain providers I would highly recommend looking at domains dot Google because that is a very easy to use domain provider they not only give you a domain but they also automatically add domain privacy to it now if you go to another domain provider I highly recommend that you also purchase the domain privacy because that will keep all your contact information and address hidden from the rest of the world now in order to connect your domain to your website there are two big groups that will have to use a different way of doing it now if you're part of G suite for education or G suite account then I highly recommend that you click on that link in the cards right now because that's a video on how you connect it to AG suite accounts however if you have a private Google account and you've created your Google Sites with a private Google account you too can connect your domain to your Google Sites the only thing is you'll have to use a slightly different technique to do that first thing click on the three dots next to the publish button and click on custom URL this is where you can now type your custom URL now don't think it you're ready yet because you're not finished you still have to do some work in the backend now go ahead and tap anywhere outside of the screen once it says custom URL assigned the next step now is to point your domain to that website now where do I do this with your domain provider let's say that you've used domains don't Google com go there and then find the DNS settings if you've used a different provider same thing if you've used GoDaddy login to GoDaddy and then find your dns settings you're now going to look for a custom resource and you're going to add a custom resource again this will look different depending on which provider you've used but they all use the same terminology that custom resource you're going to add is a www resource you're going to choose the type C name so we have WWC name and then this is going to point to GHS dr. Google hosted comm so we have a www cname pointing to GHS dot Google hosted comm now once you've saved all these settings it can take between let's say half an hour maybe even up to 24 hours for everything to begin working and that's it you now have a custom domain you have your own website and you're ready to share it with the world I hope you found this video helpful dive in to that comment section below and let me know do you enjoy these long-form videos you want to see more in depth trainings like this and what app would you like me to look at next also what are you using Google Sites for are you using it for resources students portfolios maybe even your online resume let me know I would love to start a conversation down below but that was all for this video you will find all the timestamps in the description below so you can go back to a chatter step you're still unsure of and you can share these with others now I hope you found it helpful in the meantime go ahead and watch another video and I will see you in the next one thank you for watching

Channel: Flipped Classroom Tutorials

Views: 984,614

Keywords: Google Sites how to, Google Sites, Google Sites tutorial, how to make a website with the new google sites, google sites training videos, how to create a website with google sites, how to create website in google sites, g suite training google sites, new google sites tutorial 2019, google certified educator training level 1 google sites, how to map your google sites to a custom domain url, g suite for education training, New Google Sites examples, g suite for education, g suite

Id: cjsoX5Md4Y8

Length: 23min 29sec (1409 seconds)

Published: Tue May 28 2019