When you want to create a simple, free website, finding the right builder can be difficult. Some just let you have one page, while others make you dig into menus to figure out how to use them. What if you just want to drag and drop text and images into a decent looking layout?
As usual, Google has your answer: Google Sites.
Reading: How to use google to create a website
What is Google Sites?
Google Sites is Google’s website builder. If you compare Google Sites to WordPress or any other advanced website builder, it doesn’t really stack up – it has far fewer features. But it still has everything you need to create a blog, portfolio, business site, or corporate intranet. It’s easy enough for non-business users to create websites for their families, friends, and classrooms.
In fact, Google Sites can give you quite a boost. Site Builder Report shows some professional looking Google Sites examples, like the site for Dr. Xu Chu:
Is Google Sites free?
Yes! You can create a Google site for free. Plus, since there’s no tiered pricing, you get all features for free.
How to use Google Sites
Go to sites.google.com and select one of the options above to Launch a new website: Use a template or start from scratch. You can switch to the Google Sites classic editor at the bottom left of this page, but this guide explains how to use the new editor.
Since my cats need to improve their online presence, I’m going to do this create a website for them as an example. When building your site, use the preview option in the top right menu to see how your site will look on different devices.
Create a Header
Every new Google Sites page starts with a ready-made header. At the top left of this header is a box that says Enter Site Name. The name you enter here will appear on your site, but you can give your site a private name on the main Google Sites page, where you edit your sites.
Hover your mouse Hovering over the site name gives you the option to add a logo that will appear to the left of the name. It will appear small, so use a simple and clear image.
Go to the lower-left side of the header section to edit your header. Choose an image to use as the background, then choose from four header types: cover, large banner, banner, or title only. The first three options present your background image in different sizes, while the last one uses header text only.
The lower-right corner of the section has options to adjust the image for better header readability, and lets you choose where to anchor (center) your image. There is no set header size for Google Sites. Instead, it takes your image and scales it to different resolutions depending on where you anchor it. I suggest using the highest possible resolution and then using the preview option to check how your header looks on different devices.
Once you’ve decided on the banner size and background image, edit the header text. Click on it to edit style, size, font and alignment. Drag the dots at the top of the text box to move the box left or right (but not up or down). Or delete it if you don’t want any text.
Want to add an image above your header image? Double-click anywhere on the banner, then use the radial menu to add from a URL, your Google Drive, or your computer. You can also use the middle button of the menu to add additional text fields.
Choose a theme
Click on the Themes tab at the top of the menu right to change the design of your website. Each theme has some preset color schemes and fonts.
Looking for more control? Click the + icon under the Custom category to create your own theme that Google Sites will save for later. You can change fonts and colors to your heart’s content.
Add text and media
Time to familiarize yourself with Google Sites’ website building elements. Click the Insert tab in the right rail to add the following elements to your site:
-
Basic elements: The top one In the Insert section of the menu, you can insert a text field or images, embed HTML code, or add Google Drive files. You can also access these options from the radial menu by double-clicking anywhere on your editing site.
-
See also: Django Tutorial Part 5: Creating our home page
Content Blocks: These pre-built blocks of text and images save you time adding and arranging individual elements.
-
Collapsible Group: A collapsible group consists of a header with collapsible lines of text below. You can turn any header/body combination into a collapsible group by clicking the Collapsible button that appears when you click the text boxes.
-
Table of contents: Google Sites tables of contents automatically generate links that jump to different sections of your site, using text from each section. You can remove items but not add them.
-
Image Carousels: Add two or more images to an image carousel that you can navigate through using the dots below, or let it cycle through automatically Images.
-
Buttons: Create a link button that inherits the font and colors from your design.
-
Separators: Google Sites will create simple separators with a theme based on your chosen theme.
-
Placeholders: A The placeholder section contains space for an image, YouTube video, Google Calendar, or Google Map.
Just like the header text, each text field you enter has add items via these, change format and size via options. Click the three dots at the right end of the formula bar to edit line spacing, add indentation, or create code-style formatting. The keyboard shortcuts you use to edit text in Google Docs also work in Google Sites.
Integrate Google elements
It wouldn’t be Google if it wasn’t good in Apps can integrate with other Google products, and of course Google Sites lets you add content from other Google tools via the Insert menu. Each Google-related option takes you to a menu to find the file or interactive element you want to share. Choose from these options:
-
YouTube: Embed a playable YouTube video on your website.
-
Calendar: Split your calendar into week, month and agenda views.
-
Card: Add an interactive Google map of the address you have chosen.
-
Documents, presentations, tables and charts: Add a Google Add file in View mode.
-
Forms: Display a Google form for visitors to fill out on your site.
Insert a Google Sites contact form
Google Sites does not have a native contact form option. Instead, you have two options for inserting one from an external source:
-
Google Forms: Create a contact form in Google Forms and then use Google Sites. Insert or circle the menu to add it.
-
Embed code from a third-party app: Make sure your preferred booking app or form app has an option to embed code. Then use the Embed option from the Insert or radial menu.
Arrange Columns and Sections
Reorder your items at any time by clicking and dragging the dots at the top of each item. New items appear at the bottom of the page, and you can drag them next to existing items to create columns.
See also: How Much Does a Website Cost in 2023? (Full Breakdown)
Tip: To keep your images in their original aspect ratio, drag one Corner to resize, and then press Shift to resize in the same proportion.
You can move individual elements left or right, but you can change their vertical position within a section do not change. For example, I can’t align these headings with the center of each image:
Click and drag the dots on the left side of the section to move it. There you will also find options to change the background color, duplicate or delete. Change the background colors of your sections to add accents and break up visual elements.
Add and manage pages
Have you finished your first page? Add more from the Pages tab in the right menu. Go to the + icon at the bottom of the menu to add a new page. You can also use this button to add an external link or menu category to your header menu.
Move page names in the Pages menu to change their order in your website’s menu. Drag a page under another page or menu category to make it a subpage. In your site menu, a subpage appears as a dropdown menu item below its parent page or category.
Click the three dots next to a page name to make it your home page, duplicate, paste Add a subpage and hide it from the menu or delete it.
Tip: If you want to copy something from one page to another, select that part of your site and press Command + C or Ctrl + C, then paste it into the new page.
Publish and collaborate
Now it’s time to share your hard work to share. Click the Publish button at the top right of the screen. During publishing, you can set the end of your custom URL. You can also hide your website from Google results if you want to keep it private.
Once published, you can visit your website at sites.google.com/view/yourwebaddress, as you can see below Web address bar in the image above.
In the future, when you make changes to your website and are ready to share them publicly, click Publish. Whenever you republish a site, Google Sites shows you the differences between your new changes and the currently published site.
In classic Google fashion, you can also share your site with others and designate them as editors or Viewers. Click the people icon in the top right menu to add people and set their permissions.
If several people are working on your website, you can check the version history by clicking the three dots in the top right menu and going to Version History. This option works similarly to the Google Docs version history feature, which allows you to review old versions and roll back your site.
Congratulations on creating a site! This is how mine turned out.
Frequently Asked Questions
Can I have a custom domain in Google Sites?
Yes. You can set up a custom URL for Google Sites using the Settings > Custom Domains option. This feature allows you to connect a domain through Google Domains or a third party.
If you plan to use your Google site for business purposes, a custom domain will give it that extra sparkle. Plus, it’s pretty cheap to get one – around $15 a year.
Does Google Sites have widgets?
Google Sites doesn’t have widgets outside of its Google Apps options, but you do can add any external option with an embed code. Look for an Embed or option for the widget. The Embed feature in Google Sites can only use HTML code.
Not included? Try another free website builder
If Google Sites is the first free website builder you’ve tried, give others a chance to see which features you prefer. Zapier’s picks for the best free website builders include some nice feature-packed options if the simplicity of Google Sites isn’t what you’re looking for.
This article was originally published in March 2018 published by Matthew Guay.
See also: How to Create a Photo Editing App: Onix Experts Tips
.
