Google Sites is a free tool to make your own website without the help of a developer.
Google Sites are basic but customizable. You can upload images, add links, text, and basic HTML if you know how to code (or how to copy the code from somewhere else).
Once you've created a Google Site, editing is intuitive. If you've worked on Google Docs or used Google Slides, its interface should be familiar to you.
In This Article
This is a pretty long read, so here's a table of content to give you a clue of what's waiting ahead and give you a shortcut to something that's interesting to you:
Add New Blocks To The Page
Once you have your first self-made Google website, you want to fill it with content. For that, you'll need to go to the "Insert" tab on your right. There, you'll discover a few primary blocks to use: text, image, file from Drive, and code injection.
In addition, in this tab, you can add other content blocks, like YouTube videos, maps, forms, charts, placeholders. You can add on-page navigation as a table of content. Or you can add interactive items — buttons, image carousels, collapsible groups.
Google Sites give you several Layout templates to give you an idea of how your blocks can be organized and complement each other.
If you want to enrich the page content, visit this place. Here's a list of all available elements:
Text box. A box for text. You can switch from standard text to headings or subheadings here. Pick the font style and size, choose text style — underlined, strikethrough, bold or italic; choose the text color, alignment. Links can be created here. Spacing and indent/flatten settings are also here.
Image. Images don't have many settings. You can crop and uncrop, add a link, alt text, and caption. Enough to make them friendly for humans and robots.
Embed. This is a tool to embed a code or a link. With it, you can add a widget of 3rd-party service, like an embeddable shopping cart or a subscription box.
Drive. To embed any type of Google Docs from your Google Drive.
Collapsible group. They are also known as expandable blocks. It's a heading that expands with additional text when you click on it—often used for the FAQ section to keep it compact and convenient to navigate.
Table of content. This element automatically collects all the headings on the page into a table, respecting the hierarchy (H1, H2, H3, etc.). You can hide unnecessary headings from the table. This on-page navigation can serve as a shortcut to specific headings (paragraphs).
Image carousel. Although it's a carousel, it behaves as a gallery. If you want to place several images in a single spot, this element will help you.
Button. It is what it is — a button. It has style settings and can be: filled, outlined, or text. You can choose the button to lead to another page on your website, open a document on your Google Drive, or give it a custom link. The text on the button is editable.
Divider. It's a simple line of your color theme tone. They are used for the visual division of two parts of the page. If needed.
Placeholder. This element holds the place on the page for further utilization. If you place it, you can set up the content type, which is allowed to be added by other editors. It is useful when you have co-editors on your team — designers, analytics, etc. Google Sites support co-working just like any different Google Docs from the Workspace suite.
YouTube. This element helps you add any YouTube video to your Google Sites page. You can embed the videos from your YouTube channel (if you're using the same email for YouTube studio and Google Sites) or search for any other video on YouTube. When added, you can set up the video controls behavior, progress bar color, and fullscreen access.
Calendar. Add a Calendar if you want to share your schedule with others. It will show your Google Calendar events compactly with convenient navigation. This block has several display settings to make sure you show enough.
Map. You can share your office location or favorite places with this element. Your visitors will be able to see your pins, switch between them, and explore the area just as a regular Google Map.
Docs. Embed any Google Docs from your Google Drive. The Doc will be readable, scrollable, but not editable. However, if you make it publicly accessible, anyone will be able to click it and enter the doc in a regular mode.
Slides. You can add any slide from your Drive to the website. It will have all the navigation controls as Slides in presentation mode.
Sheets. As you may guess from the name, you can add Sheets to your Google website page. The settings allow you to choose the List to demonstrate. A website visitor will be able to see the Sheet but won't be able to edit it.
Forms. If you have questions for your visitors, you can give them a Google Form to learn the answers. It works precisely as Google Forms when they are not embedded. However, you have to create it first to add the form (just like other docs). Don't forget to check the form settings to make sure it's public and does not require Google Mail to submit the answers. Otherwise, your visitors may face difficulties.
Charts. You can add charts from your Google Sheets. They will look and feel exactly the same.
Add New Pages
You will definitely want to add pages to your Google site. The tab "Pages" serves for that. There, you can design your navigation structure and create as many pages as you need to showcase whatever you want.
The pages have settings, which is fantastic. For example, you can make any of them a Homepage, hide pages from the main menu, if needed (for instance, ads campaign landing pages), duplicate or delete them.
In the pages properties, you can change their names (how they display on the menu) and paths to make their URLs SEO-friendly.
You can create up to four levels in your subpage structure (or subfolder structure). Each subfolder can contain unlimited pages.
Change The Style In One Click
When you create a new Google site or open an existing one, you'll see that it has a pre-set color palette, fonts, and heading style. If you don't like it and want to add some personality, you should visit the "Themes" tab.
There, with just one click, you can change the style of the entire website. It will include color scheme, typography, and title styling. Each theme has several preset colors and three pre-set typography sets. If that's not enough, you can pick any color of your desire. As for the font style, it doesn't have global settings, and you'll have to change fonts for each and every block individually.
Global Settings: Navigation
Navigation is the first thing every website visitor interacts with when they come to your landing page. So it's essential to keep it clear and accessible.
Google Sites doesn't give you much control over the website's main navigation. You can place it on the top or on the left side. And you can choose the color: black, white or transparent.
That's it!
To access global settings, click the wheel in your top right corner near the sharing settings.
Global Settings: Brand Images
By Brand Images, Google Sites mean your Logo and Favicon. The images have recommended requirements which you'll find in the settings (link to help center), but the system doesn't block you if the requirements are not met. Instead, it will automatically process any image and adjust it to match.
When you upload the logo, it will be added to your website automatically, and you have no control over it. The logo will work as a link to the home page. Using a logo is not mandatory, and you can skip it. However, you can use it instead of the website name (the one near the logo), which, unlike the logo, can be erased from that corner.
To access global settings, click the wheel in your top right corner near the sharing settings.
Global Settings: Viewer Tools
Google is all about user experience. They've been fighting for simplicity, clearances, and transparency of the Internet for several years. So these tools have the same values in the core too.
In particular, Google Sites offers you to add an Info icon to your website and activate Anchor links for your headings.
Info icon. You can add a tiny widget to your website lower-left corner that will show when the change was made to the website the last time and give the ability to Report Abuse.
Anchor links. This feature activates the mechanism that turns all your headings into anchors. That means you can share links that will lead to exact headings. Just hover over the heading and click the appeared icon. If you send this link to your friend and he clicks it, he will navigate to the heading (the page will scroll down automatically). Fantastic feature, but works only with published websites, so don't get frustrated in the preview mode.
To access global settings, click the wheel in your top right corner near the sharing settings.
Global Settings: Custom Domain
Google Site is free-to-use and provides each website with a free domain like https://sites.google.com/view/website-name. But you can connect your own domain. To do that, you have to purchase one. You can buy a domain from Google Domains or any other domain provider. We recommend using Google Domains for your Google websites because the ownership verification will be easier. However, it isn't available globally, so you have to check the availability for your country first.
To connect your own domain to the Google website, start the setup process and follow wizard instructions.
To access global settings, click the wheel in your top right corner near the sharing settings.
Global Settings: Analytics
To measure your website traffic and effectiveness, you need an analytics tool. Google Sites allow you to connect only one tool — Google Analytics. To use it, just like any other Google product, you need only a Google Mail account.
To connect Google Analytics, you need to copy a tracking ID (or tag) from GA and paste it to Google Sites.
To access global settings, click the wheel in your top right corner near the sharing settings.
Global Settings: Announcement Banner
Announcement banner is a convenient tool recently added to Google Sites that allows you to display an engaging message with an action button.
You can use the announcement banner to take visitors straight to the place of interest — new arrival, new blog post, important information, sale section, etc.
Announcement banner has several convenient settings. You can quickly switch it on/off with a toggle, change the banner color and text. The button text and link also can be changed. Unfortunately, unlike style. And you can set the bar to show on the main or all pages and open or not the link (when clicked) in a new window.
To access global settings, click the wheel in your top right corner near the sharing settings.
Design: Site Name
Moving on to design options, we remember that there's a "Themes'' tab where you can change the style of all elements with one click. But there are other minor design settings you can use to customize the Google website.
The first one is the Site name. This is a short text in the upper left corner of the website.
It lives in the top menu and is displayed on every page. The Site name is a link by default and connects every page with the home page.
To change the site name, just click on it and type in anything.
Design: Cover Style
The next thing (a big thing) you can use to customize your Google Sites website is cover style. Covers in Google Sites are smart and give lots of options. Besides, it has a mechanism that tries to adjust your background image to make the heading text more comfortable to read by increasing contrast. It's an automation that can be switched on/off.
Style. You can change the size of the cover to engage visitors with a large image or a catchy heading. Available sizes are: title only, banner, large banner, cover. The last one will cover the entire screen and add a scroll-down chevron at the bottom of the screen.
Background image. You can upload any image and use it as a cover background. Or, you can select one from a free library provided by Google.
Readability adjustment. As noted above, this tool works on autopilot and is on by default. However, you can switch it off if you hover over the cover in the editor and click the "stars" icon on your right (right on the cover).
Anchor image. If your image is too large or has non-standard proportions, Google Sites will try to frame it into the cover (or any other image box) by anchoring it to some corner or the middle. It won't crop the image physically, but the part of the image may not be displayed. Plus, it can look different on different devices. That's how Google tries to help you. You can control this manually by setting the correct anchor corner or center. Thus you'll be able to test how it looks and make sure the image is displayed the way you want.
Design: Section Colors
Like Cover, each section's background can be modified. To highlight important information or a block with CTA, you can change the background of this block to an image or a color.
If you choose to change an image, you'll have two options: upload your own or select one from the Google library.
As for the colored background, you'll be limited to two colors — grey and the color of your theme. You can control your theme color in the Themes tab on your right.
Edit the Footer
After you create a homepage, main navigation, secondary pages and fill everything with content, you can move on to finalizing the website with a footer.
Usually, footers are used to showcase clear navigation with important pages, short company info, and social media icons. Also, a footer is an excellent place for internal backlinks as it applies to the entire website and links to an important page from all pages. This is a simple yet effective trick to boost the ranking of important pages.
Google Sites Custom Themes
Recently, Google Sites added Custom Themes editor to their tools clip. It lets you create your own theme and distribute it to other Google websites using import.
Closing
So! Google Site isn't the most advanced website builder when it comes to customization options. However, it has enough to make you stick to it for several hours and forget to have lunch. Do you know why? Because it's simple.
And that's the beauty of Google Sites — simplicity.
The customization process and the interface are straightforward and intuitive — you'll never get lost. And the result is always attractive. Google Sites rely on automation and best practices, which sometimes don't let users get what they want. But if you take limitations as advice from Google to change your mind and try something else (another image size, for example), things get less irritating.
The last important thing to add is wherever your customization journey takes you, Google Sites will make your website mobile-friendly automatically. Without additional work, you'll get desktop and mobile versions.
If you need a beautiful template to try your customization skills or need a ready-to-use Google Sites design, feel free to visit a template store.
