If you’d like to use Google Sites in your classroom but aren’t quite sure how to customize some of its features, then you’re in the right place. Because I’m going to show you how to customize Google Sites for a classroom. I’ll show you how to upload:
- Headers
- Logos
- Backgrounds
- Buttons
In full and fair disclosure, I was so nervous to play around in Google Sites when I first started, and I still make new discoveries. One of the keys to successfully customize your classroom website is to allocate time to play around with options until you find what you like.
If, as you go along, you realize you have questions about how to set up Google Sites for a classroom or publish a Google Sites classroom website, then you’re still in luck. Even though those aren’t the focus of this blog post, links to helpful YouTube videos are provided below.
How to customize Google Sites for a classroom
First things first, you’ll want to log in to your Google Sites account to begin customizing your classroom website. Along the right side of your screen, you’ll see Google Sites offers several options to set up your classroom website. Google Sites lets you customize your classroom website with text boxes, images, embedded content, and materials from your Google Drive.
Below those options are Google Sites content blocks. Think of them like mini website templates that make it easy to add images, text, or headings. These content blocks are provided right in the Google Sites page, below the aforementioned text box, image, embed, and drive functions, so there’s no need to go somewhere else to find them.
Below the content blocks are additional resources you can add to your classroom website, including a table of contents, image carousel, buttons, dividers, calendar, forms, charts, and MORE. For any of these options, simply click and drag the item to where you’d like it located on your classroom website. If you find your content is out of order, click and drag the item around the page and place it where you want it. As you design your classroom website, you also have the option to duplicate sections, delete sections, and so much MORE!
If you’d like to delve into this further, then definitely check out How to Create a Google Site for Teachers by Vestal’s 21st Century Classroom on YouTube. She has an excellent tutorial that will walk you through several steps, including setup and publishing!
How to customize the header section of Google Sites for a classroom
Once you have an idea of what you want your classroom to look like, it’s time to customize it to fit your classroom theme, the season, or a specific holiday. I’ll show you customization using my Boho Farmhouse Google Sites Templates from Teachers Pay Teachers, found in my Spirited Learning store. However, you can create your own content or use content you already have.
I like to start with the header area because that’s what visitors will likely see first. It’s helpful to know the header area includes not only the wide image that features across the top of your classroom website but also:
- A logo, if you’d like to include one.
- The navigation bar.
If you purchase classroom website templates, they will often come in PNG file format. This is an image format that works well in Google Sites. Once you’ve purchased or designed your classroom website header, you’ll want to save it somewhere on your computer where you can easily locate it for upload. The same goes for the classroom logo button in the upper left corner of the header. It, too, will likely be a PNG file you’ll want to save in a convenient location on your computer.
Access the header section in Google Sites by dragging your cursor over the header area. An option will populate, allowing you to select a header provided by Google Sites or upload one of your own for a more customized look. When you upload your classroom website header, you’ll have the option to choose the header type.
These include:
- Cover
- Large Banner
- Banner
- Title only
For my designs, I choose Large banner. Every now and then I find Banner works better. This will depend on the header size and design. Keep in mind, you may also notice the Google Site template crops your uploaded header around the edges.
If you’d like to change the header to different PNG file (maybe you created several options or purchased a set with several to choose from), then click Change image —> Upload —> and select a new header. Repeat this process until you find the header that works best for you.
In the same header section, you can also upload a classroom logo. It is the tiny circle button in the upper left corner of your header section. If you wonder how to access the logo section, it isn’t tricky, per se, but it doesn’t readily show itself either. When you work in the header/navigation section, run your cursor over the left side of the screen. You’ll see a gear shift. Click the gear shift icon and a pop-up screen will appear. From there you can upload your logo button and fill in content about your classroom name. Edit both the logo (by uploading a new logo) and the text (by typing over what you have already written) until you have the content the way you want it to look.
Before we round out the header section, let’s go over the navigation bar. You can set the navigation of your website to be at the top of the header (pictured above with a white background). The background color options are black, white, and transparent.
Or you can move it to the side (pictured above with three small horizontal rows on the lefthand side of the website). In the above example, I choose a transparent background. Notice how my logo and name are set directly in front of the header design without a black or white bar at the top. In full and fair disclosure, this section took me a while to figure out! My best advice for any section that gives you trouble is to click around and see what options populate (we’re super technical and organized over here – just start clicking and hope for the best.). If you still get stuck, do a Google search. You will find a wealth of posts and videos from content creators who have faced the same challenges as you.
How to upload a background to a Google Sites classroom website
Below the header, you’ll have options to upload backgrounds to your website. This isn’t absolutely necessary. It’s more of a design element than a required function. I will also say it’s important to think about your end user. Backgrounds are great for breaking up sections of a website, but too many background colors may make a classroom website look busy.
If you don’t like the Google Sites color options available, then look into creating your own backgrounds or purchase templates. At the end of this blog post is a link to a YouTube video full of inspiration and ideas about how to create your own content. It’s also a helpful video if you purchased content, including backgrounds, and want to learn more about how to upload what you have.
Background template tip: Work on the background for each section you create on your classroom website as you go along. Once you’re done setting up your classroom website, do a quick scroll of your site, from top to bottom. Think about what you see from the audience’s perspective. Does your site flow? Do the backgrounds you uploaded help organize the content into easy-to-navigate sections or do they look busy?
How to customize buttons in Google Sites for a classroom website
Once you have your header set up the way you want and you’ve begun to play around with backgrounds, then it’s time to get to work on uploading buttons. The process is similar to uploading a website header, logo, or background. But there are a few other options included for buttons, so let’s walk through them.
If possible, work with one of the content blocks to explore just how buttons work. You can add text below your buttons or delete the option from each button. Again, moving your cursor around the area and clicking on relevant topics will activate several options to customize your Google Sites classroom website buttons even more.
Like headers, logos, and backgrounds, your buttons will likely be PNG files. And like the other three elements, it’s a good idea to save the buttons you want to use on your website in a place you’ll be able to easily find them.
To upload buttons to a new section, hover over the section and click the plus button. When you upload your buttons, you’ll have the option to:
- Crop
- Uncrop
- Add a link
- Remove
- More editing options
In more editing options (3 vertical dots, see above), you’ll be able to:
- Replace image (upload your own or select from a set of Google Sites pre-made templates)
- Add alt text
- Add caption
As you create sections using buttons, you’ll also be able to duplicate or delete what you create. So if, as you create your website, you get into a mess, you can always delete and start over. Or, if you find a style you love, you can duplicate that section. Keep in mind, when you duplicate a section, it will duplicate not only the format but the already-uploaded buttons as well. That’s totally fine. Once you duplicate the section, then upload the buttons specific to that section, include any links, alt text or captions you want, and you’ll be set!
Troubleshooting your classroom website
Even as you start to play around with content options on your classroom website, you may run into some glitches. Below are a few of the more common troubleshooting issues people run into!
- Website header looks stretched or smooshed. This usually means the file size wasn’t big enough for that section. If the website header is one you created, then resize it to larger dimensions and upload it again. If it looks smooshed or oddly cropped, try one of the other header options (cover, large banner, banner). If it still doesn’t look right, the file size could be incorrect or the header design itself isn’t sized correctly that section. Try uploading another header design to see if it looks better.
- Buttons look stretched or pixelated. Make sure you’re working with classroom buttons that are larger in size and not logo buttons, which are often smaller. It is also possible the button size is wrong.
- Button looks oddly cropped. Double check whether you inadvertently cropped the button when you uploaded it. Click uncrop in the button section. If that doesn’t fix the problem, then try dragging the blue circles and lines around the button to size it the way you want. This is trial and error, and can be time consuming.
- There is a white background behind or around the button image. This most often occurs when the button is a shape other than a square. Double-check the button file format. It needs to be a PNG file rather than a PDF or a JPEG. That helps ensure the background is transparent rather than white.
If you design your own Google Sites templates for your classroom website, then you might like Pocketful of Primary’s Google Sites video tutorial, How to Create a Class Website for Teachers | Google Sites Tutorial. At 30 minutes and 25 seconds, it is an insightful half hour of learning!
More classroom tech resources!
Below are additional articles about useful classroom setup topics! Include are tips to print (and scale) classroom decor, print (and scale) teacher rolling cart labels, and how to create a Google Slides template copy so your original stays intact!
Learning how to customize Google Sites for a classroom takes patience, a willingness to dive in, and lots of trial and error! But the more you explore, the closer you’ll get to creating a classroom website you, your students, and their adults will love!
Take care, Spirited learners and teachers. Stay wild and know I’m glad you’re here! ❤️
Leave a Reply