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).

Template

alicekeeler.com/sitesbanner

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

Digiprove sealCopyright secured by Digiprove © 2017