Tutorial for the
New Google Sites
Updated 9/2020
If you need to convert your “Classic” Site to New Sites
Convert your classic Sites to new Sites
Important: If you use a Google Account through school or work, learn more about changes in the transition timeline article.
Site creation will no longer be available in classic Sites and will only be available in new Sites as of November 1, 2020. Start to convert your classic Sites to new Sites.
Timeline for Sites migration
How to get there:
There are several ways to access the new sites:
Where to start?
First, give your site a name at the top left where it says Untitled Site; this name is what you’ll look for later on to re-open and edit your site.
Now, click in the top section of your site, this is called: The Banner. You’ll notice if you hover in the bottom left corner of your banner you get some options. Here you can change the banner image/color or banner type. �There are 3 types of banner options:
To change the image or color click on Change Image and choose to either upload an image (something you have saved to your machine) or Select an Image (this gives you options to search your drive or find an image in Google search).
* Note: with banner images, Google will do it’s best to try and fit the image appropriately into that section, not all images will fit the way the original image looks. You will also see this icon in the bottom right corner: This is a readability feature which you can toggle on or off. Google attempts to adjust the color of the text or the background so everything is readable. It’s actually very helpful!
Inside the banner is a text box, click in there and give your site an official title for visitors to see.
Insert
This is where all your content will come from. You can Insert items like:
Other items can be added like:
Content
Everything on your site is separated into sections. Google will try to fit objects into the sections but you have some room to move items around the page according to your liking. You can also re-order your sections by clicking in them on the left side and moving them.
In each section you should see these options to your left:
You can join images to text boxes in order to link them together. All text boxes and images can be resized.
As of August 2018, The insert tab now features a LAYOUT manager to help you setup your website in a more organized fashion
Content Continued
In a text box, you are limited to format changing. This is so your content is readable on all devices by all people. You will have these options:
You are able to change the font a little by clicking on the first drop down, You’ll see 4 options: Normal Text, Heading, Subheading and Title. These will change how the text appears. (you’ll learn more in the themes slide)
Besides what you see above(bold, Italic, alignment, numbers, bullets, link and delete) if you click on the 3 dots you will get more options to clear format, strikethrough, and code font.
Note: there is no underline because on the web an underline denotes something is linked.
To link text or an image, highlight the text or click on the image and then click on the 3rd to last icon that looks like a chain link and type or paste your url in. Once you hit ok the item will be linked to that url.
Content Continued
If you are embedding or linking to something in your Google Drive CHECK THE SHARE SETTINGS. If you don’t share the document first in your Drive, no one but you will see that document.
* A good tip: when you are done working on your site, copy your url, logout of google and then visit your site. If you can see everything, then you did it correctly. If something says you don’t have permission, go back and check your share settings.
Pages
You will see these options by click on the 3 dots next to your page name:
*You can click and drag the pages in your navigation to reorder
The pages tab shows all the pages you’ve created and the organization of your navigation. To add a new page, click on the plus symbol in the bottom right. You can also add a link in your navigation to external links instead of creating a page to house the link.
Navigations
Once you have more than one page, you now have a NAVIGATION.
In the top right of your site you’ll see the page names appear as links. If you run out of space a “more” button will appear with the rest of your pages linked.
If you don’t like the navigation spanning across the top of your site, click to the far left of the navigation where you see a gear icon, and choose Side Navigation. Your navigation will now drop down from a box like this:
Themes
This is how your site will look. The theme stays consistent throughout your entire site. You can change it as many times as you’d like but it will change it for the entire site. Each theme comes with a variety of font styles and colors or you can choose your own color by hitting the paint bucket.
Settings Options
Change where and what your navigation looks like
Logo & Favicon
Shows viewers last edit date and contact form
This banner is displayed above your site content
Connect your site to a Google Analytics account to get insights and metrics on usage.
Sharing VS Publishing
I wanted to share some info with you. In order for the public to view your website, you must PUBLISH it and choose the option that says Anyone with the link. If you leave it “Anyone at Yorktown” (or whatever your domain is), only those members can see it.
You do not need to SHARE your website with anyone unless you want someone collaborating with you on it or someone you want to EDIT your site. I've seen this happen where people SHARE instead of PUBLISH and that results in everyone being able to EDIT your site instead of VIEW.
Please double check your settings by going to the PUBLISH button and looking at PUBLISH SETTINGS: make sure it it shared with ANYONE ON THE WEB, then click on the SHARE icon and make sure it does not say ANYONE WITH THE LINK CAN EDIT(unless you want that option).
The next two slides will show you the difference between these options.
Sharing
You will click the share icon if you want to invite people to collaborate/work on your site with you.
This works just like when you share a Google Doc except the only two options you get are to Make someone an Owner or an Editor.
This is also where you go if you want to share the site within your domain or publicly. You will change the Published Site Link. Tip: only editors should need draft view.
Publishing
You will click on Publish when you are ready to go live with your site for others to VIEW.
When you click on Publish for the first time you will see this screen. You will give a location to your URL (this is the link you will share with others) and you will see the option to keep your site private within your domain, or public to Anyone on the web. You may also exclude your site from appearing in search engines.
After you initially publish your site, you will want to hit the PUBLISH button each time you make changes to your website so the public can see them. If you don’t hit PUBLISH those changes will be saved, but for your view only.
New Publishing View
Draft vs Published
What’s this do?
These icons let you undo and redo actions. These will only work while you have the site open. If you close the site and reopen it, there will be nothing to undo/redo.
This is a view icon. When you click on it, it will give you 3 different views of your site that you can toggle between: large screen, tablet, and mobile device. It’s a great feature of the New Google Sites. No more pinching and dragging on different devices to see the content on the screen. Everything fits nicely and you get to preview it all within this button.
These options can be found within this MORE icon:
Here’s a Tip:
Double click inside your site and you’ll get these options to quickly add items to your site
To see past edits click on “Version History.” Or, you can click on “All changes saved in Drive” at the top of the site: using version history and restoring the earlier version of a site.
That’s it!
Now you have all the information you need to build your New Google Site. Check back with Google frequently, because they are alway making updates to their products. This is a link to their HELP section as well.
If you need further assistance, please don’t hesitate to reach out to me: