Teacher Tech blog with Alice Keeler

Paperless Is Not a Pedagogy

Alice Keeler

Google Sites Header Image Template

Google Sites Header Template

Google Sites Header Image Template

Google Sites Header Template

Create a Header Image in Google Sites

Previously I had posted a template for creating a header image in Google Classroom. Several people asked if I had one for Google Sites. Sites is a bit tricky because it is responsive. The crop of the banner image depends on the way it is being displayed by the user (obviously something we have no control over).


Google Sites Banner Template

Google Sites seems to capture the MIDDLE of your image. The Google Drawing template has a blue section in the middle for you to create your banner. Anything in the white areas is likely NOT to be displayed.

Change the Color

Click on the blue box in the middle and use the paint can icon in the toolbar to change the color.
Change the color

Drag a Bitmoji

Because it is Google Drawing you can drag images right onto the drawing canvas. This includes dragging Bitmoji’s from the Bitmoji Chrome extension.
Drag a bitmoji onto template

Download Image

Use the File menu and choose “Download as” and choose “PNG image.” In the Google Sites banner, click on “Change image” and choose “Upload.” This will allow you to upload the image you created.

Upload to Google Sites

Students Prepare to Present

Help Your Students Prepare to Present

Maximize student success in presentations with ‘Speaker Notes by AliceKeeler,’ the ideal Google Slides add-on. Enhance how students prepare to present with easy transfer of speaker notes to Google Docs, promoting effective communication skills. Dive into the world of engaging, technology-aided presentations and empower students to shine in their academic endeavors. Discover the key to transforming student presentations into interactive, skill-building experiences.

Read More »

Infographic 7 Basic Steps for a Google Form

New to using Google Forms? This tool is essential for teachers to not only save time but to be adaptive to student needs. Use Forms to survey students, play games, personalize instruction, and assessment. This infographic on the 7 basic steps for a Google Form will help you get started.

Read More »

Online Workshop: Get Your Add-on Published

How can you make Google Workspace (Docs/Sheets/Slides) even better? You can create custom Add-ons with Google Apps Script. Wondering How to Get Your Google Workspace Add-on Published? Join Alice Keeler, Google Developer Expert, to learn the steps to get your Add-on officially published.

Read More »

7 thoughts on “Google Sites Header Image Template

  1. Thank you so much for this Alice,
    Finding ways to customize Google Sites has been really fun as more functionality keeps being added. Really like that there is that option to add a logo to top left corner.

  2. Did anyone else have the problem of the image being “greyed out” when uploaded? I made a vibrant image and it is definitely greyed out on the site…advice welcome!

  3. Thank you so much …this was the simple explanation that I didn’t have to look far for. It worked beautifully with my site…THANKS!!!

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.