Create a Classroom Website Using Google Sites

hello, teacher friends. I wanted to show you how you can use Google Sites to create a classroom website that can house all of the things families and students need, and it would all be in one place. Google Sites is super user-friendly, and you are able to link things straight from your drive. This tutorial will walk you through setting up and publishing your classroom website, and I threw in a couple of super fun extras so you can make your own color palette and use your super cute fonts in Google Slides. So here we go.

You're going to go to your Google Drive, new, and then more, and Google Sites. It takes just a second for it to load, and then you will see your website come up. You'll see your page title; you'll see um that you could have templates if you wanted. Um, this is your banner. Over on the right, you'll see that you can insert all different kinds of things. It has templates there as well for your page. This is where all of your pages that you can navigate to will be housed, and there are also some themes on Google Sites with fonts and colors, but it's very, very minimal that you get choices in, which is why I like to make my own banners, and I use PowerPoint for that, of course, because PowerPoint is like my jam. And so, um, I'm going to show you how you can do some things in PowerPoint and then pull them over into Google for your website.

So here we are in PowerPoint, and I have a new presentation. I'm just going to go to the design tab to set the page size. So design, slide size, page, and then you'll do width 5 inches and the height would be 2 inches. This should be perfect for your banner or your header that will be at the top of your website. So I just took a background from um an Instagramer who puts the wallpapers up for free, and then the inside, you want to make sure you kind of stay inside that little square for your text so that everything fits. Then take a screen grab using command-shift-4, and you are ready to add the first thing to your website.

So you will hover over your page, over where it says your page title, and it says change image, and you're going to upload the one that you just took the screen grab of. Notice the sparkly stars in the bottom here; it's adjusting for readability. Google does that, but you can click it once it stops and brighten back up your header. Then it has this page title here, and you can just delete that because we don't need it because we made our own. It has different size banners; you could choose a cover large. I like just the banner size on mine. Next, we want to give it a title, so I'm just going to call mine Miss Richardson's Classroom, and then also you'll see that it automatically puts it into the site.

Right below, you can change that if you want to, or you can leave it. This will be like your home button whenever you are navigating around on your website. You can preview it here just so you can see if everything looks like you want it to look. You can view it in mobile and tablet, and then just x out of that to go back to editing. Next, we need buttons; that is what you see here—the Meet the Teacher, Check-in, Classroom—um, that I have on my home page. And these buttons will all do something; they'll all be active links, and they'll go to something. And all of those super fun bright colors is your first super fun extra. So adding color palettes to my PowerPoints to get my colors from was a game changer, and so I'm going to show you, as a little extra, just how to get the color palettes that you want to use in your PowerPoints for your letters, for your boxes, for your shapes, for anything on your PowerPoint that you're going to use them for.

So in Google, if you will just Google color palette, you could do summer, spring, bright, warm, neutral—any kind of whatever, whatever color you're feeling—just put that in as the color palette, and on images you'll see a bunch come up like paint chips when you go to paint a house. Um, it's similar to that, but it'll give you like just a rainbow of colors. You could choose just pink, just green, or I just like to choose bright and summer are normally the ones that I go for. So then you just see these images, choose the color palette that you like. So this one looks bright and fun, and I'm just going to drag it over to my PowerPoint so that I'll have it there. You can see the example there on that one slide where I'd already been, have been playing with those colors. So I like to just minimize it down, stick it over to the side. Um, that area, you'll see if you ever see one of my PowerPoints, I have tons of stuff just around the edges of the actual paper, just holding things there. Um, and so you have your palette now.

Another super fun website you can go to to get your colors um is here; I don't know how you say it, Coolors, I don't know, but it's super fun. So you just hit the space bar until you find a color palette that you love: spacebar, spacebar, spacebar. You may see a color that you love, and you can lock it. See how I just locked that one in, and then you can keep pushing spacebar until you find more colors that you like. And so once you find the colors that you like, you can lock them in, and then it'll only change the ones you have left. You can also insert more colors you can so that you can have more colors to choose from if you need them. You can also export this once you have it like you want it, and you can export it. I use, I like to do it as the label, so the colors are there. You can use the hex numbers, but those are a little bit more difficult to use for me, so I like to just do the label. It downloads it just like a picture, and then you can just take that and throw it into your PowerPoint, and again, I just always shrink it down, stick it over to the side.

Now the magic happens. So we are going to create our buttons that will go on our website for our links. You can see some of the little choices I did here, a little more simple than the ones I did, but you can definitely go all out, however extra you want to be. And so just choose a shape to do one of these. I just did circles or hexagons, whatever shape you want. We'll just go with the hexagon. Notice that I put in some lines too, so you could do a border, or you could put the line on the inside, whatever you want. I found that the best size is usually around 3x3 for these images once we make them; that was a good size for them. So if you'll just go to shape format, you can see the size there, make it whatever size you want, make it—it doesn't have to be exactly square or anything—just about around three by three was a good size, and then you will want to go to make sure you're on shape format and go to shape fill, the drop-down, more colors, and then the dropper here. And so if you click on that dropper and then hover over your color palette that you've gotten, you'll see that the color changes. So whatever color you land on and stay on and click, you click OK, and it changes to that, that perfect color that you wanted. Isn't that awesome? Um, and so they can do an outline if you wanted to change the weight of that if you want to. So this is where you are free to roam, so you're going to make your buttons look like whatever you want them to look like. Um, I just copy and paste to make some more, and then I can just change, so it'll be the same size, and then I can change those colors. If you want to do an outline, you just copy and paste that one and just do no fill and an outline, and then you just kind of shrink it down a little bit so that he can fit inside like this. And so there you have, so you can have an outline on the outside, or like I said before, you could have one on the inside, and then you can add images, you could add text box, anything that you want to put on there.

Now is when your creativity comes out. So, of course, I'm going to use a calculator, a little text box, and this is why using PowerPoint is so much better for creating all of your things because you can use your own fonts, and then I will show you how to sneak them into Google so that you can keep your fonts. So you can layer as many things, have as many boxes, shapes, text boxes, whatever you want; you can have as many things as you want. You're just going to want to make sure that once you get ready to take this button to your website that everything, you get everything together on it. So you can see this blue button here; it has a like three different pieces to it, so it's got the shape, the clip art, and the text, and you just want to make sure you grab everything so you can drag and highlight everything that's there like that, or you can hold shift down and click each piece that is there, and then go to arrange, and you'll just want to group these together. Then you're going to want to right-click and save as picture, name it whatever you want. Um, I just usually save it to the desktop so it's easy to find, and then you are ready. I am a huge screen grabber, so you can also just screen grab that too and save it. It'll automatically save it wherever your screen grabs go; either way, I think they both are about the same clarity. Um, so and then just do the same for all of your other buttons.

Now you are ready to insert your butt buttons here. So and you're on your home page, if you go to insert, you can either do images um just separately, or there's these layouts that you can use. I know that I'm going to have three going across, and so I'm just going to use that layout just so that it's perfectly spaced and will and will just be perfect. And so then you'll just click that plus button and upload some, the pictures, your buttons that you have saved from PowerPoint. So I'm going to choose that. Notice it just puts it right in that square, so I'm going to go ahead, and then you see it says click to edit text. If you wanted to say like Meet the Teacher right there, you could; I didn't think it's necessary because I'd already put it on my button, so you can just delete that. Then just continue adding the plus button and uploading your other images. If you want more than three, you can just add another section underneath that with another three template to whatever you decide to use. Don't forget to delete those text boxes if you do not want to use them. And one thing I want to show you is if you notice the blue squares go around the box, if you click the whole thing then and you hit delete, then it would delete that whole, everything would delete your picture as well. So when you're deleting, just make sure you've got just what you want to delete highlighted in that blue.

For the Meet the Teacher button, I have a Google Slides that I want it to link to on another page, and so I will go over to my pages, and I'm going to add a page because all I have right now is just my homepage. So I'm going to add a page, and I'm going to call it Meet the Teacher. You just click that plus button at the bottom, and then notice it just sticks it right there, so you have your home page and then you have a second page. It automatically uses the banner that you have on your home page; you can change that if you want to, but you don't have to. It also puts the title of that page at the top in the navigation, and it also puts it as a title on the banner, and you can just delete that if you do not want all the navigation at the top. You can go over to that page and then Meet the Teacher page and on the three dots, hide from navigation, and then that goes away. And so then you just use your site name as the home page. Now I need to link this button to that page. So go back to my button, click the little link, and then you can put a website link here, or it have all your pages there that you can link to. So I'm just going to link it to that page.

So again, if you go to insert on any page, these are all the things that you can put on that page. I usually do a lot of things from the Google Drive, so I'm going to go there. This is my Meet the Teacher page, and I'm going to go to recent because it's something I just had open. Okay, and so you see my Meet the Teacher slides, and you just click on them and then click the insert, and it automatically just throws it over there for you, and then you can just do some adjusting. Notice how there's black space around it; you can shrink that in, you can make it bigger, you can center it. Notice all those guidelines that it gives you; that's one thing I do love about Google, or all the guidelines that it gives. I'm just gonna play around with this until I get it like I want it, and then once your website's published, people can look at this slideshow straight from your website. So you want to make sure that when you insert something from your drive you've checked your share settings; you don't want to get a bunch of requests for access emails. So just from the get-go, make sure that it is shared so that anyone with the link can view it. And then don't forget about your preview button so that you can make sure that everything looks the way that you wanted it to look, so that you can see my slides, and like I said, you could pop that out, or you can use the controls that are already there. You can also click within the Google Slide, and it works as well, so it works just like it is a Google Slide, but they don't have to go out.

Okay, halfway point, and that deserves a super fun extra, and the best super fun that I can give you is all the fonts in Google, all the fonts you want to use, all your extra super cute fonts and Google Slides, Google Documents, anything that you want to do. So here's how you do that. I'm going to show you how to do it on a Meet the Teacher, like we just put into our website so that you can do that if you want. So start with a new Slides, Meet the Teacher. Um, I always like to take out the title slides up; I like to take all that out and just make it be a fresh, clean um page for me. Click out of the themes because I know how to do my own thing. So I change the size of it unless I have just a whole lot I want to put on a page; I like it just be the standard size. So I have used PowerPoint to create a page with all the colors, all the fonts, all the fun, and I'm just going to screen grab that and go back to my Google Slides, and I'm going to put it in as a background. So choose the image; you can drag and drop it, or you can browse and find your screen grab there and open it up, and notice that you can click around and nothing happens, so nothing can be changed there when you, our kids, click around in your slides because it's in the background. So I'm going to add a fun video; I just took a Boomerang and then used the website unscreen.com to remove the background um so that I could use that in this slide, just a little—I like to be extra—so that's just a little bit more extra. So then I have all these buttons that I want to use that are going to take me to other pages in the slide, other slides, so I need to be able to link those off of those circles. So I'm going to add my page, and then this first circle is to click here to learn about me. So I am just going to get a circle. So if you will go to the shapes and grab a circle and then just make the circle fit the same, be the same size as the circle you already have there, and then you want to make it transparent. So if you'll go to the fill color and do transparent, and then also if you wanted to, you could do the outline as transparent too, and then you just want to put a link there, so it's actually a circle on top of your picture, and you can make a link there that goes to this slide that you want it to, or it can even go to a link if that's something that you want to do. So let's add another page for you, um, and this is the About Me; this is the page that we linked to. So I went ahead and made in my PowerPoint, made it like I wanted it to look, and I also, and I'm just gonna take a screen grab, and I also made a little home button that you can see um so that whatever slide you're on, you could click that home button and go back to the um first page where everything is. So I'm going to do the same thing; I'm going to insert that as a background so that it will be not be able to be moved once it's there. Okay, and then once it's there, I need to do the same thing that I did with my circles. Um, I can do a square, going to whatever shape you want to put on top of that, just so that once you hover and click, it'll turn into a link for them to see that they can click that. So again, make it transparent, and then I'm going to put a link on it, and I want that link to be the first slide. So then whenever they put that, whenever they're on this page, then they can click that home button, and it'll take them back to the first page where all the information is. Then you can add pictures; you could put a text box; you could put whatever you wanted to here, and then just repeat the process until you have all of your pages and all of your links and all of your slides linked to where they need to go.

And back to our website. So I want to show you how to put some links on these buttons that we've created. So this is the Google Classroom; it has a page. If you wanted to put like your class codes there in a document or something, you could. Um, for me, I'm just going to make it be a link to my Google Classroom just to keep it easy so that everything's all in one place. So I go to my Google Classroom; I copy that link, and then I'm going to go back, and then you can put a page here, but you can also put an actual website link there, so that's what I'm going to do, and I'm going to apply that. And so then when someone clicks there, you can see that that would take them to my Google Classroom. Next, I want to show you how to embed something on a page so that they're not having to go outside of your website for everything that you want them to look at. So a good example of this would be Remind, so they could go to your website and would be able to see the reminder messages there instead of having to look on their phone on the app, so that again, everything's all in one place. So if you'll go to the Remind um that's just one of the things I want to do, and that link there is going to go to the page, so I'm going to go to my Remind page, link to the page, and then once I, and I'm going to click on that page, and that's where I'm going to be working right now, so you'll know you're working on that page because it'll be highlighted blue. So I'm going to go to my actual Remind account, and then you'll click on your name and account set um settings, and then you'll want to go to the widgets, and then you're going to be advanced, and you're going to share your advanced settings, show the advanced settings, and

It has a Google Site there, but I found that it didn't work as well as just doing Wix. Did so then you'll see it gives you some code at the bottom, and you just have to copy that code. That is what we're going to use over back in our website. So we're on our page, and we're going to insert, and we're going to embed. So click, you'll embed, and then you're going to do the code; you're going to embed code. And so just paste that code that you just copied straight there, click next, and then it's going to give you kind of a preview of what you'll see. So I don't have any messages on there right now, so I'm going to click next, and that's what it'll be. And then you could center it; you could put it to one side if you wanted to put something else on the other side of it. But either way, when someone goes to your website and they go to the Remind page, then it's going to automatically populate any messages that you have right there. So again, everything's all in one place.

Let's look at the navigation. You can see that all the pages are across—if you don't hide them—all the pages that you have are across the top. So if you go to the little wheel in the settings, you could also make your navigation be on the side, um, instead of on the top. And that way, it would give you a little drop-down menu, and that's what it would look like in the mobile, um, as well. So if you go to preview, you can see that all of your pages would be on the side there. So the way I had you set it up was just to have the icons there, the buttons there without any of the pages showing up, but that is your choice of how you want to do that. Also, you can look at the banner, and it can be black, it can be white, or it could be transparent, which would just make it be the color of your header. You also see the "More" there. So since we have more pages that will fit at the top, that has a—it automatically populates a little drop-down with "More." So you could make these be sub-pages of it. So if you didn't want all of them across, but you still wanted to have a drop-down menu, then you just make all of your pages be sub-pages of the home. When—so if you look at that, you see they're just indented. And then if you look at the top at the navigation bar, you'll see that the home button has a drop-down, and so then all of your pages are underneath as a sub-page of the home.

So then when people are browsing around on your website, you'll notice it says "Sites Tutorial" up in the top left and "Home" where I'm dropping down here. So once I go to any page that I go to—so let's just go to the social media page—and then so I'm here, and I am looking around this page, and then I want to go home; I can either click the home button, which will be a drop-down, or I could have clicked on that "Sites" button, and that would have taken me back home as well. So that's why you don't have to have all those pages; you can hide all those pages if you wanted to because you still have your title of your site that will take you home always. So then you just want to check and make sure that everything has a link; everything is looking like you want to look; preview it one more time. And I'm looking, and I see everything looks pretty good; it's like I want it. Now you can always make changes even after you publish; you can always make changes, but we are going to publish. So you need a title for your website, so then click the blue "Publish" button. It's going to automatically populate that title that you had, but you can try different things, um, and see what is available that would be a little more personal to your website. Once you find something that is available, you will click on the blue "Publish" button one more time, and you'll see that it's publishing, and now your site is live, and you have your very own classroom website. And to view it, you go to the drop-down where it says "Publish" and "View Publish Site," and that's also where you can get a link to share your new fabulous website.

If you make any changes to your website, those changes are saved, but they don't go to your live website until you publish again. So you just hit "Publish," it'll show you your draft; it'll show you all the changes that you made and what's currently looks like. And so if you like everything, you just hit "Publish" again, and then it updates everything on your live site. And then I always preview just to make sure things look good and as expected. Thanks for hanging in there with me to the end. I am going to leave a whole bunch of links for you down below, and if you need me, please reach out; I am so happy to help you. And then just please use this tutorial and rewind me, pause me until you get your Google Sites just like you want it. I hope this was helpful, and I can't wait to see all of your classroom websites.