How To use Google Sites Complete Overview

today's video will be a deep dive into google sites and we're going to look at everything you as a teacher need to be aware of and how you can use google sites in the classroom so let's jump into it with another flipped classroom tutorial now as this is going to be a deep dive i highly recommend that you check out the timestamps down below now at any time during this video you can pause the video and try it out by yourself now we're going to jump into google sites and i'm going to show you how google sites can be a fast and easy to use way to not only have student portfolios but also have a place where you can share resources with your students and it's all part of the google workspace ecosystem so let's get started now before we create our website there's a few things that are important to mention and the first one being there are multiple ways of creating google sites now google sites is one file type that lives inside our google drive and so we can always create a new google sites file from inside drive now in order to create that google sites file you're going to navigate to the folder where you want your website to be now here you can right click and then find google sites under more you can also click on the new button and then select google sites this will generate that google site and you can immediately get started so let's go ahead and title our google site title website one now that i've titled my website you will find that that file has also been given this name here in google drive now there is another way of creating google sites and that is by using the sites.google.com url now why would you use the url over creating a file in google drive all you'll get access to a number of different templates so let's go ahead and have a look at that we're going to navigate to sites.google.com here it opens up the home page and at the top you will see i get those templates i can always open up the template gallery and this template gallery presents me with even more templates you can see we have a student portfolio club class any of these templates can be used to really save time and get started in addition to that because you are part of a google workspace environment you can upload your own templates that are available within the domain so here on the left hand side you'll see eduflip.net that is my training domain and so there are no templates available at the moment but if i wanted to upload a template i could do that right here now i've already created a website and i'm not going to use a template so let's go back to that file i'm going to close this home page and here we have our file okay we are now inside our google sites and what you see in front of you right now is the layout this is the overview of everything that you will have access to when working in google sites now the first thing we'll do is look at the top here on the left hand side when we click on that we will navigate to that home page this is the same page that you have when you go to sites.google.com next to that we will have our site title now we can change this title it will automatically change up here however this area is not part of the title this is our page header and we can give a completely different title here so let's just add magical forest as our title this title is part of the header now this header image will be visible on our website and so we can also tweak this there's a number of different header types and by clicking on the header type icon we can either select a cover large banner banner or title only header now these are page specific so in other words you can have a different header type for different pages i'm going to stick to the large banner and because i don't like this gray background i'm going to add an image to this so here you will see that instead of header type i can also click on change image now there's a number of images already built into google site so when you click on select image you can choose these images here you can also use an url search for images pull them in from your albums or your google drive however i have a file prepared so i'm going to click on change image and upload now this brings me to my file selector let's upload this image it automatically adjusts the image for readability you can see here i have magical forest and that image if you want to turn off the readability adjustments you can click on the icon here and it will turn it off we're going to leave it on for now now the next thing we can do with our website is we can add a number of different pages so on the right hand side you will see we have insert pages and themes let's select pages we have our home page and when we click on those three dots we can choose to add a sub page to our home page so let's go ahead and do that i'm going to add a subpage titled resources this page is under home we can also add another top level page so let's add another top level page and call this about as you can see here on the right hand side in the page selector home is on the same level as about resources however is slightly indented and that's because it is a sub page you can see that here in our navigation resources is under home about is a top level page now let's say that you want to restructure the order of your navigation you can always drag and drop your pages so let's say that i want this resources page to be a top level page i can drag and drop it right there and now it is a third top page now you can nest pages within pages so let's put resources back underneath home and let's create a subpage within resources we're going to click on the three dots and select add sub page we will have teacher resources as well as student resources so let's add another sub page student resources now we have the structure where we have home about and then within home we have resources and within resources we have teacher resources and student resources again you can click drag and drop rearrange everything now as you can see my navigation is at the top of my website and when i go to the preview at the top here i can preview this website this is what it will look like on a computer a tablet or a mobile device now again the navigation is at the top let's say that i want to move that navigation well i can always go to the navigation here and find that cog wheel on the left hand side when i click on that i get a number of additional options and one is the mode of navigation i can move that to the side i can also change the color i'm going to leave it to transparent but if you chose white then obviously that would now be highlighted white let's leave it to transparent this is also where you can add your brand images so if you see brand images here we can upload a logo a fave icon let's do that now we're going to upload our logo that logo will automatically appear in the top left corner of your website and we can also upload a fave icon now the fav icon is the icon that appears when you save a bookmark or when you open it in a browser so here at the top this is the fav icon for google drive this is the one for google sites if and when you upload your own fave icon this will automatically be changed as soon as you publish your website so i'm going to upload this one we have a number of viewer tools that we can activate this means that we can have an info icon anchor links i'll talk more about that later you can always find it in the timestamps below we also have some analytics where we can integrate with google analytics and an announcement banner now the announcement banner is a lot of fun and it's really useful whenever you're creating a new website to activate that announcement banner and let people know that your website is under construction so let's go ahead and create an announcement banner we can choose the color i'm going to choose a red banner and i'm going to announce that the website is under construction now in addition to a message in the banner i could also choose to add a button and a link so for example you could link out to your old website or maybe you link out to a resource that you want your students and parents and teachers to have access to or you can use the announcement banner to link out now to demonstrate this i will link out to my twitter handle and that way you will see what this looks like in action so let's go ahead and type in find me on twitter and then i will add a link to my twitter so this will be the following address and we're going to open this in a new tab next you have to select the visibility of this announcement banner do you want it on every page or just the home page i'm going to leave it on home page only okay all good and well we can close these settings now these are automatically saved so let's close the settings and let's navigate to that preview this is the preview this is my student page as you can see my navigation is on the left hand side because we've changed that and there is no banner at the top because i only activated this on the home page now let's open up the home page on the home page you see that red banner it says website under construction and then there is a button that will automatically open up the twitter feed now this can be any website that you would like to link to as soon as you're ready to turn this banner off you can just jump back into those settings click on the cogwheel and turn off the website banner i'm going to remove the site navigation and bring it back to the top now let's say that you want to add a little bit of design to your website well there's a number of things that you can do within google sites that will enable you to do that now the biggest one is to add a theme now the theme will be an overarching theme for all your pages and here within the site browser we have themes and we can select simple or any of these other themes i'm going to select level you can see it automatically adjusts the fonts it adds some color the navigation looks different and we can also select different colors down here so we can go with this green yellow or any of these fill colors i'm going to stick to yellow you can also select the font style but then again these font styles can always be tweaked later on so for example when i go to magical i can select magical and i can change the font here say that i want to use montserrat instead i can do that by highlighting it and then tweaking that font so you have a lot more freedom when it comes to fonts within google sites when you're actually selecting the text that you would like to see changed and then change the font change the font style change the size now we've already had a look at the announcement banner now let's add a copyright footer now a footer is what appears at the bottom of the page and again we can have this across all pages on our website so let's go ahead and navigate down to where it says add footer we're going to click on that and i'm going to add some copyright information i'm going to say copyright and then my website now this is just an example of how you can use a footer but this footer will automatically be applied to every page so when we go back to that preview you will see at the bottom we have that copyright notice when i go to the about page that copyright notice is still there you could put your social media links there maybe the school website maybe a link to where your students can find some additional resources this is a great place to highlight those links now as mentioned when you are adding websites to the footer you can also link out so whenever you're editing your footer you will notice that there is an icon here that allows you to insert a link this way you can get your school's website into the footer of every page on every single website now before we can start adding in content onto our google sites we need to understand about sections now sections are horizontal blocks of information and google sites uses these sections to visually break up all the information shared on a website now we've already talked about headers that is one type of section we had our footer which is another section now in between the header and the footer you can place as many sections as you want and you can decorate these style these according to your own interests so let's go ahead and add our first section now here this will become a section now we can add in content by either going to the insert page on the right hand side or by double clicking and then selecting either a image some embed code a drive file or upload a file we can also add text by selecting the icon in the middle now if this is the very first time that you're creating a website or a portfolio with google sites i highly recommend you use the insert menu because google sites provides us with a number of template sections this will really speed up the way we can create websites so here on the right hand side you will see it says layouts now these layouts these are examples of sections that we can add into our google sites so here we have an example of an image on the left text on the right two images each with text three images with text or three images and no text let's go ahead and select this first example and click you can see it automatically adds in that section now if you click on another section it will add it below that and below that this way you can very quickly build up a website and as you can see we have separate sections this is one section this is a second this is a third now let's say that i want to change the order of these sections you can always do that by selecting this area clicking on that and then simply dragging that section up or down to place it in a different position now in addition to moving sections around you can color your sections so here on the left hand side you'll see this little section background icon this allows you to select emphasis emphasis 2 and these are pulled directly from the theme you've selected or you can also insert an image select an image or upload an image so if i choose to upload an image i can select that file i had and then i can upload that image and this becomes the background of my section now i'm not going to use an image so i'm going to just go back to section background and select standard now because we've used the insert layouts option and these are templates we can now very quickly edit this text now let's delete this section we're going to delete this section and let's work with this section right here i would like to have a video on the left hand side and then some text on the right hand side now because i've used the layout i don't have to go to insert video i can simply click on that plus icon this now gives me the various options of what i would like to insert i can upload an image or file i can select the image choose from drive or select youtube i'm going to select youtube and this opens up the youtube browser now you can pop a url of a youtube video in here or you can find your own uploaded videos i'm going to go back to a pre-selected video i already have this ready to go and let's go ahead and pop that url in there we're going to search for this video and then we can select it when i click on select it's automatically pulled in on the left hand side you see a little bit of information on this video and we can now add a text the title will be deer migration and then we can add some more text find out all about deer migration in this video from national geographic there we go now if you wanted to manually do this well you could do that as well so let's go ahead and do this manually we're going to go to a blank section i'm going to select insert scroll down to where it says youtube video and paste that url we're going to find that video and add it in as you can see because i'm not using a template i will have to resize this myself let's resize this there we go let's add in the title i'm going to say deer migration we are going to style this title so let's select title and then add in some more text find out about deer migration so you can see that using these predefined layouts saves you a lot of time on building websites now there are many more things you can insert into a google sites so let's go ahead and have a look at the insert menu and let's discuss each of the items available the first you'll see is a collapsible group now collapsible group is great when you're sharing a lot of information so for example here i'm going to type in more info and then here i'm going to paste a paragraph of text all about deer now as you can see there's a lot of information here i don't want my students to see everything and cluttering up this page and that's why i'm using a collapsible so here we have more info and when the student clicks on that they now see all that information so this collapsible will make it much easier for teachers and students to represent lots of information yet not clutter up the page the next element we can insert into our google sites is a table of contents now when you click on table of contents it's automatically going to pull in all the things that are visible on this website and then when you click on the little eye icon you can hide this from the navigation another element we can insert is an image carousel so here when you select image carousel you will have to upload a number of images and there is at least two images required to have a carousel so let's go ahead and do that we're going to select our images we're going to select and we're going to search for some deer images google images let's select this one we're going to select this image this one as well as that image so now we have four images selected it has used google images to find these images and let's click on insert now as soon as i insert these images it is double checking making sure that i want to use all these images if you don't you can always remove them here or you can add a text and when ready simply click on insert this will insert the carousel onto your google sites you can resize it to whatever size you feel is appropriate for your website and because it is a carousel it will automatically flip through the images so when i have a look at the preview i can scroll down and now i see my image carousel this image carousel has a navigation at the bottom as well as the arrows on the left and right which allows me to go from image to image to image another very useful feature is inserting a button now these buttons can link out to various websites or even pages on your own website so let's go ahead and insert a button i'm going to click on button i'm going to say resources so this will be a button linking out to my resources page and we're going to link it out to the page now because i didn't type in a url i get an overview of all the pages on my website so let's select resources and insert you can see i have my button here i can always click on the pen to edit this button but when i go to my preview whenever someone clicks on that button they will automatically go to the resources page now why might you use this if you already have pages and your navigation at the top well sometimes you want to hide pages from your navigation now how do we do that well we can go to the pages tab and i can click on the three dots next to the name of this page here i'm going to select hide from navigation this way when i go to my preview at the top in the navigation they only see home and about however scrolling down when they find that button when they click on the button they can still access resources this is a great way of not cluttering up your navigation at the top or side of your website we can also insert a divider for the website which will really clean things up and a placeholder now the placeholder is similar to what you saw up here where you can add in placeholders for various elements such as videos or images now if you're going to be creating your own templates that you then upload to your domain these could be for teachers to use or for your students placeholders will enable you to really highlight where you would like your students to insert an image or where you want them to upload their pictures or their photos or their videos this is how you can do that scrolling down we have that familiar youtube insert and we can also insert a calendar now when we click on calendar it is going to connect to our google calendar that means it pulls in the calendars from your google classroom as well as your own calendars from google calendar now i don't have any calendar set up so i'm going to just take a demo so i'm just going to take a demo calendar from one of my demo google classrooms design thinking 102 and let's insert this calendar now this way you can have a calendar with special activities special days special events anything that you would like to share with students or teachers in addition to that we can also insert a map this ties in with google maps a document slides sheets forms or charts now i'm going to highlight how to insert a google slides but the same principle works when you're inserting a google docs or even a google sheets now let's go ahead and click on slides this will open up all the google slides that it finds on my drive and i'm just going to add in a demo slideshow let's go ahead and add this in we can close that side window and we now have our slideshow now as with everything else that we insert onto our google sites we can resize this and we can preview what this will look like on the final site so scrolling down you will see we have all these elements that we've inserted and here we have our google slides now we can navigate through this google slide we can see all the different slides there we go let's close the preview now if you have any other websites that you are using and you would like to bring them into your google sites that too can be done so if you have the embed code available you can bring it into your google sites now i'm going to use mentimeter as an example but this could be any website maybe it is a flip grid maybe it is something else that you're using with your students as long as you have access to an embed code you can insert this onto your google sites so let's go ahead and open up a different application now here i am on mentimeter and i'm going to embed the presentation so i'm going to select embed and then go to google sites now here on google sites i double click and this time i'm going to select the embed icon that opens up an additional menu i can embed a url go ahead and try if the website allows you to embed it using the url automatically google sites will render it into a viewable image if you have the embed code you go to embed code and then you can paste that code right there now many external websites and other websites they will provide you with embed code let's go ahead and click on next we will get a preview of what this will look like and then we click on insert this way you can embed any format or any other program so here you can see this is from mentimeter mentimeter is automatically embedded into my google sites but this could be anything i want it to be many websites provide you with embed code and that brings us to the next section google sites is a file on google drive it is part of google workspace therefore collaboration is at the heart of everything you can do with google sites at the top you will see we can add collaborators so when i click on share with others i can now share this with say teacher one so i'm going to find my demo teacher one account and i'm going to make this account an editor now in addition to making them an editor you can always click on that cog wheel and you can also tick or untick this box now if you do this you will basically turn off editing copying changing permissions for the person you're sharing with i'm going to leave it as it is share it with teacher one and then click on send that now means that teacher one has the same editing rights as i do and we can both collaborate we can work together and develop this website this is amazing when you're talking about group projects maybe your students are working together and they're building up a portfolio or they're building up a website for their group project while they can collaborate on this and they don't have to be in the same location now next to the share button we again have that cog wheel this brings us to these settings where you have your announcement banners your brand images and other tools now the one that we haven't discussed yet is the viewer tools now the viewer tools enable you to communicate more effectively with the people visiting your website so for example i can show when the page was last updated i can also show a contact form and i can use anchor links now anchor links is where you link out to subheadings on a single page so for example i can link to the middle of the resources page using those anchor links now how do these work well let's have a look at it i'm going to turn everything on i'm going to leave the last updated time turn on that contact form turn on the anchor links now when i go to my preview the first thing our user will see is that at the bottom left they have a little eye icon when they hover over that eye icon they can click on it and this shows them when the page was last updated in addition to that they can click on contact now contact will enable them to contact the webmaster or the owner of this website here it says that it's not available in preview mode but once your website is published contact will automatically enable visitors to contact the owner of the website this is what those fewer tools look like and that brings us to the three dot menu next to the settings now under the three dot menu you will find there is a version history so when i open up the version history i can see the changes that were made to the website and also when they were made and who made those changes we're going to close the version history because under that three dot menu we also have the option to duplicate our website now this will duplicate the entire website every page every image every link will be duplicated we can also report a problem this is where you can leave feedback now the team over at google will read this feedback so if there's any features that you would like to see added to google sites use the report a problem button to let them know give your feedback they read this and then they will action the most requested features okay we are finished building our website so let's go ahead and publish it so other people can access the website we're going to click on publish and here we now have to title our website i am going to just call this a demo dear website now underneath that we have a number of additional features here you can see that at the moment anyone on my domain can see this website so you can have published websites that are live for every user on your domain but nobody outside of your domain can access this website if i click on manage i can change this when i click on links i can now change how the website is published so my draft is restricted and the published site i can change this to public or i can set it back to just my domain now at the moment i'm going to leave it at just my domain there's no need for me to make this public for others to be able to access this as it is just a demo website let's go ahead and click on done okay i want to publish it as a demo dear website and i'm going to click on publish all good the website has been published we can click on view to preview and see this website now this is also the url that other users can use to access my website so let's go ahead and test this we're going to copy this url and opening up a different user on the same domain i can now paste that link and access this website because of those viewer tools i can go to the bottom left corner i can see when it was updated and now that it is published i can click on contact and contact the owner of this website can leave a subject leave a message this will automatically be sent to them let's cancel this now let's say that you no longer want your website or your portfolio to be public or you no longer need it published you can always go to the top drop down arrow and then here you can unpublish your website you can also review changes and republish the website or you can change the publish settings and change that url now let's say that i've made some changes let's go ahead and change the about page in about me and let's now publish these changes we're going to click on publish and before it is published you will be asked to review your changes on the left hand side it shows you what has been changed and how it will look on the right hand side you see what it looks like right now so this is what everyone else sees this is what they will see once you agree to these changes let's go ahead and click on publish and now automatically everybody will see the updates that you have added to your website so time to create your own google sites i hope you found this helpful if you did make sure to subscribe to the channel scroll down leave a comment let me know what are your favorite tips and tricks in google sites what are some of the features you'd like to see added and what do you feel is missing from google sites now once you've done that go ahead and scroll up and click on that subscribe button now next to that subscribe button you'll also see a join button that is where you can get some special member perks when you become a flipped classroom tutorial member now we also have a private discord group and as soon as you become a member you'll automatically be invited to that group i hope you found this helpful in the meantime thank you for watching and i will see you in the next one

Channel: Flipped Classroom Tutorials

Views: 67,133

Keywords: Teaching with Tech, Educational Technology, Google Sites, How to use Google Sites, Google Sites tutorial, Google sites for teachers, How teachers use Google Sites, How to use Google sites with students, How to use google sites in school, Google Sites tips and tricks, Create a website, Creating websites with students, Teacher websites, Websites for teachers, Google Website, Google Sites training, Google Workspace Training teachers, Google Workspace teachers, Google Workspace

Id: UB95qRTp_R0

Length: 32min 43sec (1963 seconds)

Published: Mon Sep 06 2021