How to Create Custom Banner and Buttons for Google Sites

hey teachers whether you are teaching remotely or in a physical classroom a google site is a great way to share information and assignments with your students in a previous video here on my youtube channel i shared the ins and outs of google slides how to change the layout how to change your theme how to add different components to a google site and since i uploaded that video i've been receiving questions from teachers about how can they customize their google site and make it a little more fun and a little bit more of their personality so in this video i'm going to show you how to do just that i'm going to show you how to add a custom banner and buttons to your google site now i actually love the idea of customizing a google site because if you think about it every school year we spend so much time decorating our classrooms and creating an environment that both we and our students enjoy being in on a regular basis and especially if you're teaching remotely i think it's great to customize because that's a place that students are going to be spending a lot of time so it should be a place that is aesthetically pleasing and that your students enjoy so we're going to get ready to hop on my computer and i'm going to show you how to use canva to create a custom banner and buttons for your google site now before we do that there's a couple of things that i want to let you know first of all this video is going to be all about customization if you want to learn the ins and outs of a google site and all the different features that you can add and layouts i suggest that you go back to my first google sites video first because that's where i break all of that down and then here i'm going to show you how to take it a step further and customize it so i strongly recommend you watch my first google sites video first now the other thing i want to tell you before we jump on here is i'm going to show you how to use canva to create these custom features for your google site now canva is kind of like the best way i guess i can think to explain it is it's kind of like photo editing for amateurs um it allows you to add text and customization to images or create images even if you don't have a lot of experience or skills with photo editing so you're just going to want to go on to canva.com and set up a free account it is going to send all kinds of pop-ups and messages your way trying to get you to sign up for a paid account i really don't think that you need one though just stick with the free account so i think that's all that i need you to know before we jump on my computer so let's go ahead we're going to jump on right now all right so we're going to start here in google sites because there's something that i want to show you before we get into creating so i have created a new google site here and i'm just going to name it mrs vestal's class and the thing that i want to show you is this is your banner up here so this is what we're going to be customizing in canva in just a second and i also have that other video that shows you the ins and outs of google sites that will explain everything over here and more about the banner but what i want to show you is that when we preview this so anytime you click here you can preview it when you use what the banner that google sites gives you it will automatically optimize it for whatever type of device so you can see how the text adjusts if i'm on a phone versus a laptop versus a tablet now the only problem with customizing your banner is that google sites is not going to know to optimize your text so it is possible that some text can get cut off and i just wanted to share this with you because if the majority of your students are working from a phone you may not want to create a custom banner because it's very likely that it will cut off so let's exit out of the preview and now i want to go on over into canva so that we can actually start creating our banner and buttons so here is the dashboard in canva and you have the search bar here at the top and what you're going to do is just start typing in google and then it will give you templates now this says google classroom header but this actually works for google sites as well so go ahead and click on that and we're just going to click a blank one for the time being now the reason why i love working in canva when creating these custom banners and hat and uh buttons is because compared to other platforms or powerpoint that you could work in canva gives you all these templates you could choose from you can upload photos it gives you photos that you can add it gives you shapes and images that you can add it gives you backgrounds that you can choose from so you can create something that's very professional quickly and easily so let me show you a couple different options one thing that i could do is i could go into backgrounds and i could find one that i like and one thing that i want you to notice is whenever you hover over one it will either say free in the bottom right hand corner or let's see if we can find one okay so this one here does not say free and if you click on it you'll see the watermark appears that's because you have to have a pro account which you have to pay for to be able to use these without the watermark but i really think that there's a lot of great options that you can choose from that are free so let's find a free one i actually like this one here so i can use this is my background let's say i'm teaching a science class this one would be really fun to use and then i could put some text over it we could just change it um let's see let's say welcome to this is vestal's class all right and so i could just do something very simple like this if i wanted to change any of the text i could just highlight it and then come up here and i could change the text to different things i kind of like that's what is already here i can change the size color i can add effects to it um i'm going to be honest i don't love the effects just because i think the effects can make it really hard to read and one thing that's really important when you're designing your banner is that you make sure it's easy to read and that it's accessible for all students especially if you have dyslexic students in your class you want fonts that are very very easy to read and while the effects are really cool i think it makes it a little hard for some of our students particularly those dyslexic students to be able to read and we want to make sure it's as accessible as possible the other thing that i want to point out to you is notice how i'm keeping all of my text right here in the middle and that is because like i already showed you how when you change to mobile in google sites it will cut some of it off the more you keep everything in the center the less likely it is to cut off when you move it into mobile and i'll show you a little more what that looks like in a minute now another thing you can do when you're creating a banner is you can use these really fun templates so i'll show you how to do this as well um this is one that i used i'm just going to replace the current page this is one i've used before that i really like um and i want to change everything into my colors i have certain colors that i use with a lot of different things so let's start with the background if i click on the background you'll see this color box up here now i can either go in and pick a different color that they have or i can type in what's called a hex code so if you have certain colors that you use and you know your hex code you can go ahead and type those in right here and get your custom colors pulled up for you now i want my background to be that turquoise color that i use in all of my logos and everything so i'm going to type that hex code in pull this up now this color here doesn't really go so i'm going to use another custom color that i use in my logos um that's an orange color so i'm going to type its hex code in all right now remember it's important to keep everything as centered as possible to make sure that it doesn't get cut off because i can already tell you if i leave all of this over here off to the side it's gonna get cut off when viewing it on a tablet or a phone so to move all of it at the same time i'm just gonna click and highlight everything and now i can move it over and canva's really nice because it will pull up these lines so that you can see when everything is centered so now i have this centered so that it's more likely that it will all show up when viewing it on a tablet or on a phone but when we're viewing it on a computer they're gonna see the whole entire banner and it's a little bear over here so what i could do is maybe add this little design to the other corner so i'm just going to click it and click ctrl c to copy and then ctrl v to paste and i'm going to add this one over here just so that way it's not so bare on this side i think that looks pretty good now i've also noticed we've got this little design here under welcome and those colors don't really match what i've got going on since i've changed everything so let's go ahead and change that to my orange and anytime you type in a hex code you'll see that the colors that i use have appeared here so that way i don't have to keep typing things in again i'm also going to change the circle to orange as well just to keep everything nice and consistent all right so you can see how quick and easy this is to do the next thing i like that it says welcome because i'm going to use this on my home page but this font is super hard to read and remember i talked about it's important to make sure that our sites are accessible so using fonts that are easy for students to read so let's look at some different ones that one's not too bad let's try out a few different ones and just see that one is i think i'm actually gonna go with this one just because it's so easy to read and i know if i have um some dyslexic students in my class i think that will be really easy for them to see and read okay and then we need to change this to me so we're going to change this to mrs vestal's class and the reason why i put these on different lines was once again just to try to keep everything as centered as possible so that things don't get cut off too badly when viewing it on mobile i might make this a little bit bigger just to make it a little bit easier for students to read that's not too bad i think most of that will still stay pretty centered when students view it different ways okay this is almost ready the last thing i need to do is obviously i don't want some random person's picture here so we've got a couple different options you could either go into photos and just pick out like a random stock image to add and you can also upload photos so since i'm going to be teaching my students virtually and they're not going to see me all the time i want them to get a feel for what i look like so if i go to uploads i can click upload an image or video and just click on device and you'll be able to bring something up directly from your computer that you're working on i've already uploaded some pictures so i'm gonna pick one that i already have saved here this is a good one um okay so now to replace the image that's there you're just going to drag the photo over top of where that image is at and you'll see that circle is kind of highlighted when i let go you're going to see that my image is there the only thing is it's not centered so i'm just going to double click it and it will allow me to crop the photo so i'm just gonna drag my picture to the center i can also make it a little bigger if i want all right so i'm gonna do it just like that and click away and now you can see my image is nice and centered okay well i am really happy with this banner so i'm gonna go ahead download this to my computer and then add it into my google site so when you are happy with what your banner looks like you're just going to click on download and you can either download it as a png or a jpeg either one of those will work and then it is going to pull up the file now as i've mentioned before it is going to constantly send you pop-ups in canva to try to get you to sign up for the pro version you do not need this they have so much free stuff in here you really don't need a pro account all right so i am just going to pull up my image here and i'm going to save it okay and i'm just going to type banner image to save all right this is now saved to my computer and the next thing i want to do is i'm going to go back to my google site and now we're going to replace what is here so we just click on change image upload and then we're going to find that image that i just saved here it is and there we go now the only thing we're going to do is let's go ahead and delete the text that google sites added so if you just click it and then click the trash can that will go away now the other thing is whenever you have like a background color on your banner google is either going to put this white overlay or this gray overlay on it for some reason it thinks that makes it easier to read i completely disagree so to remove that overlay if you just click these little stars over here it will take that away so now it looks exactly like what i created now when you're working with your banner you can also change it i like to use it's automatically going to be in banner mode and i like to just keep it just like that i think that looks great but you can experiment with it a little bit as well but i think banner mode is probably what's going to work the best for the most people now let's go ahead and preview it so i can show you what i mean by it can cut off now you can see here i tried to keep everything as centered as possible so that way the cutoff was not too bad but welcome did get cut off just a little bit when we look at it on a mobile device but because i kept everything centered it does look good on a tablet and it does look good on a laptop so just be aware that if your students are viewing it on a phone this is probably going to happen if you are creating a custom banner i think most of the custom banners that i've seen teachers create do cut off on a phone so let's exit out of preview mode now we've got this beautiful custom banner made and the next thing we want to do is create custom buttons so we're going to head back over to canva and start creating those buttons okay i'm going to go back to my home page in canva and a lot of times what you can do is you can type something in and it will give you a pre-made template i want to create circle circular buttons and actually there are no templates for buttons at all no matter what shape you want to make so just click on custom dimensions and i recommend typing in 300 by 300 and create click new design and this will give you a square that you can work in to create your buttons now if you click on elements and then click on see all next to shapes it will give you all kinds of shapes that you can pick from to create your buttons um so you can decide if you want circles squares hearts any type of shape you want you can use i think i'm going to use this fun circle with this kind of shadow effect in the background and what i recommend that you do is go ahead and make it almost as big as the entire square and then make sure it's centered so if you click on the shape and see these pink lines come up you know that it's centered now the one thing that i want you to keep in mind when you are creating buttons and you're using the shapes this image is still going to save as a square so it's important that the background color behind the button that you're creating is the same color as your site so if we go back and look at my site i'm just going to leave my page white down here to keep it simple so keeping this background white will be fine students won't be able to tell that that's even there now i'm going to go ahead and make my button the same colors that i used in the banner so i'm just going to click on the light gray and i'm going to have to type in my hex codes again to keep everything the same and then for the shadow i'm going to use that orange color from my logo so i'm just going to click on the darker gray and type in that hex code again okay so now the colors of this button match what i have in my banner now i'm going to have each of the buttons on my home page go to a different page within the site where students can access assignments and resources so i'm going to have a math page an ela page and a science page so i want to put something on this button to help students know that it's math so i'm going to click on elements and what i'm going to do is i'm just going to type math up here and see what comes up okay this is a free because like i said you just have to look some are pro and some are free so i'm going to use this and i'm just going to make it a little bit bigger and center it so that's clearly a math button now to keep everything consistent what i'm going to do is i'm just going to duplicate this so if i click on duplicate it will create another one for me and then i don't have to worry about trying to resize my circle exactly the same way so this is going to be an ela button so i'm going to get rid of the math sign and for this button i want to reverse the colors i want orange to be in the front and turquoise in the back so i'm just going to reverse these so they're opposite now and this is going to be ela so let me see if i can find something that has to do with reading let's see what do i like i think this one of the book will work fine so i'm going to add this one here for ela make it a little bigger and then i want to center it okay and then i just need to make a button for science so i'm going to duplicate again i'm going to get rid of the book and i'm going to reverse these again so just go ahead and click on the colors and i can reverse them and this time i want some kind of science image oh great this one's free because this one is perfect make it bigger and then i just kind of move it to those pink lines come up and i know that everything is centered so now i've got three custom buttons for my site so i'm going to go ahead and download these just click download again and when you have more than one image if you go to select pages you can decide whether you want all the pages which i do or i could just pick certain ones that i want to download but i want all of them so i'm going to click done and download and i'm going to just copy each of these okay i have saved those three buttons so now i'm going to go back to my google site and before i can actually add the buttons to the page i have to make sure that there's pages within my site that they can actually link to so to do that i'm going to click on pages and you can see my home page is already there now i want to add a page for math ela and science so i'm just going to click the plus sign i'm going to type math and you can see it will actually appear here at the top of the page as well and then do ela and science and if i wanted these to be in a different order i could actually drag and drop them to wherever i want them to go so those can be in a different any order that you want now we're going to go back to the home page and oh before i show you how to add the buttons one thing i do want to let you know is first of all let's get rid of this text that it added just click the text in the trash can if i wanted to add a different custom banner for each of the pages you can totally do that or you can just keep it the same for everything since i've already showed you how to do this i'm just going to keep it the same but you could go into canva and you can modify this so maybe it says math at the top and just click on change image on each of the pages and you can have a different banner for each page if you want but you don't have to i am going to go through though and just delete out the text that it adds so that way i have a consistent banner across all of my pages and then i'm going to go back to home to add my buttons now to add your buttons what you're going to do is click on insert and i like to use the layout that it provides here i've got three buttons so i'm going to click on this layout that has the three images and then i'm just going to add my buttons to these spaces so i'm going to click the plus sign upload i'm going to start with math i'm going to click the next plus sign upload i'll do ela next and then the last plus sign upload and i'll do science last now these buttons are here but they're not actually linked to the pages yet so to do that you're just going to click on the image okay click on it and then click insert link and then just click the page that you want it to link to and click apply i'm going to do that for each of these and then this one is going to link to science and apply okay so those are all linked and then the last thing i want to do is edit the text under each one so in case students can't figure it out by looking at the images they'll know where each button goes so i'm going to put math ela and science and then i don't need this subtext underneath so i'm just going to delete each of these but now each of these buttons are linked to a page on my site so if i go to preview mode you will see that i can actually click on each of these and it's taking me to the math page if i click on home and click on the ela button i'm now on the ela page i'm going to go back to home and test my science button and this one is taking me to the science page so that is how you create a custom banner and buttons for your google site all right so there you have it that is how you create beautiful custom banners and buttons for your google site and i love that when i look at my custom google site that i just done it looks so professional and i think when students and parents get on to see this they're really going to like what they see and enjoy interacting with the different components now before we wrap up one thing that i do want to clarify because i have a feeling this question will come up and that is why use canva because there's some tutorials out there that will tell you to use powerpoint to create your banners and your buttons and the reason i like to work in canva versus powerpoint specifically for this well there's actually a couple reasons the biggest reason is i find that when i create in powerpoint i don't know why but when i move things into the google site the images sometimes come out blurry and i want everything to look very crisp and be very easy to read for my students and so i feel like i get a higher quality image when i'm creating in canva so that's the biggest reason why i use canva but i also like canva because it has all of those templates and backgrounds in there already and different fonts and things that i can use so it just makes things really easy and really fun so that's why i recommend using canva over something like powerpoint but i would love to hear from you are you using a google site this year and if you are are you creating custom banners and buttons and are you using canva i want to hear all about what you're doing with your google site for this year and i'm sure people watching this video would love to get inspired from you as well so go ahead and leave a comment below and then make sure to subscribe to my channel because i upload new videos every single week and i don't want you to miss out on any of those so until next time happy teaching

Channel: Vestal's 21st Century Classroom

Views: 126,236

Keywords: Google Sites, Google Sites for Teachers, Google Sites Tutorial, Google Sites Tips and Tricks, Google Sites Tutorial for Teachers, Google Sites for Elementary Teachers, Custom Google Sites Banner, Custom Google Sites Header, Custom Google Sites, Google Sites Custom Buttons, Online Learning, Virtual Classroom, Remote Learning, new google sites, google tutorials, google tutorials for teachers, meghan vestal, vestals 21st century classroom, custom google site

Id: 6T5eOCtfPUM

Length: 27min 2sec (1622 seconds)

Published: Sun Sep 06 2020