Google Sites Tutorial [Examples + Tips]

People sometimes want to build a simple and free website with drag-and-drop tools but it can be tricky to find the right builder. For just some text and images in a decent-looking layout, digging around menus to figure out how to use them can be challenging. There are many drag-and-drop website builders available online such as Wix, Weebly, Hostinger and Google Sites. In this case, you can use Google Sites as a free website builder.

What is Google Sites?

Google Sites is a website builder developed by Google. Although there are tens of other website builder alternatives, Google Sites offers what you need to create a blog, portfolio, business site, or company intranet. It is also simple enough for especially DIY people and non-business users to create websites.

Is Google Sites Free?

Google Sites is a free website builder since it doesn't have pricing tiers, so you get all of its features at zero cost.

How to Use Google Sites?

Go to sites.google.com and choose one of the templates to start a new site. You can start from scratch or choose one of the templates.

In this case, we chose a pre-made template named "Family Update" and the system redirected us to a drag-and-drop website editor including the tools and settings we use to structure the site.

Create the header

Start with editing the header section of the site. You can either add a logo or text on the header as the brand name or a site name as well as edit the navigation menu.

• Every new Google Sites page starts with a premade header.

• The name you enter on the top-left of the header will appear on your website.

• When you hover over the site name, an option to add a logo to the left of the name appears. You can also add or change the site logo from the "Brand images" tab under the settings.

• You can add a favicon to your site. This favicon will appear on search engine results and browser tabs.

It is also possible to change the direction of the navigation menu from settings.

To edit your header, go to the lower-left of the header section. You can choose an image to use as your header background and select from four different types of headers: cover, large banner, banner, or title only. The first three options will allow you to display your background image in different sizes, while the last option only uses header text.

In the lower-right corner of the section, you will find various options that allow you to adjust the image to enhance the readability of your header. You can also choose the position to anchor your image, which is usually at the center. There is no fixed header size for Google Sites, and the platform adjusts the image to different resolutions based on where it is anchored. I would recommend using the highest resolution possible and previewing your header on various devices to ensure it looks great everywhere.

Once you have chosen the size of your banner and a suitable background image, focus on the header text. You can click on it to customize its style, size, font, and alignment. If you need to move the text box left or right, you can simply drag the dots located at the top of the box. However, keep in mind that you cannot move the box up or down. If you don't require any text, just delete it.

To add an image on top of your header image, simply double-click anywhere on the banner. This will bring up a circle menu that allows you to add an image from a URL, your Google Drive, or your computer. Additionally, you can use the middle button on the menu to add extra text boxes.

Choose a theme

Modify your site's design by clicking the Themes tab on the right. Each theme offers preset color schemes and fonts.

You can create your own theme or import it from Google Drive that was saved to use for later.

With theme settings, you can easily manage the navigation, components, spacing, images, texts, fonts and colors.

Add text and media

Let's explore the website-building elements of Google Sites. You can add elements to your site by clicking on the Insert tab in the right bar.

Basic elements: The Insert menu contains a section at the top to lets you insert a text box or images, embed HTML code, or add Google Drive files. You can also access these options through the circle menu mentioned in the "create the header" section.

Content blocks: These premade blocks of text and images save you time in adding individual elements and arranging them.

Collapsible group: It consists of a header with collapsible text lines underneath.

Table of contents: Tables of contents automatically generate links for different sections of your website.

Image carousels: Add two or more images to an image carousel that you can navigate using the dots below it, or have it automatically cycle through the pictures.

Buttons: A clickable text that links your content to another source or page on site.

Dividers: It can split a section from another based on your site theme.

Placeholders: A placeholder section holds required space for an element such as image, YouTube video, Google Calendar, or Google Map.

Any text box added has the same formatting and size options as the header text. To edit line spacing, indent, or code-style formatting, click the three dots at the right of the editing bar. The keyboard shortcuts used to edit text in Google Docs are also used in Google Sites.

Integrate with Google apps

Google Sites allows you to add content from other Google apps through the Insert menu. The menu will take you to one of the Google-related options that you want to use such as YouTube, Calendar, Map, Docs, Slides, Sheets, Charts, and Forms.

Insert forms

There are two options to insert a form into the Google Sites: one is inserting Google Forms and the other one is embedding third-party forms from an outside source.

• Google Forms: Click on the "Insert" menu and then select which Google Form to insert.

• Embed code from a third-party app: If you are using a booking app or a form app that has an option to embed it, use the "Insert" menu or Embed option from the circle menu.

Arrange the layout

It is possible to rearrange the elements on pages by clicking and dragging the dots at the top of them.

You can also resize elements by clicking and dragging the dots. In addition to this, you can drag an element and place it next to another one to create columns.

Tip: If you want to keep the ratio of an image while resizing it, drag it from its corner dot then press the Shift key.

You can adjust the horizontal position of elements, but not their vertical position within a section. For instance, you cannot center headings with images.

To move a section, click and drag the dots found on the left side of it. There, you'll also find options to change the background color, make a duplicate, or delete it. Changing the background colors of your sections can help you emphasize important information and make your visuals more interesting.

Manage pages

If you finished designing your first page, add more from the Pages tab. Click on the + icon to add a link or a menu category to the site header.

You can reorder menu items by dragging a page under another one or making a category in the site menu.

From the three dots next to each page name, pages can be deleted, duplicated, hidden and converted to a subpage.

Publish the site

Now, it is time to publish your site to the public. Click on the "Publish" button at the top right of the editor. You can customize the site URL. It is possible to hide your site from Google so no one can reach it.

You can also connect a custom domain to Google Sites.

Some additional info you may wonder about.

• Collaboration and site history are some of the features of Google Sites.

• Restriction to the pages through a link is possible.

Google Sites Examples

Google Sites is a website creation tool that allows users to build simple and collaborative websites. Here are 10 examples of Google Sites:

• Classroom Website: A site created for a school or classroom to share important information, resources, and announcements with students and parents.

• Project Portfolio: A portfolio site showcasing various projects, accomplishments, and skills of an individual or a team.

• Event Website: A site dedicated to an upcoming event, such as a conference, wedding, or party, providing details like schedule, venue information, and RSVP options.

• Company Intranet: An internal website for a company to share documents, policies, and announcements with employees in a centralized location.

• Personal Blog: A blog created by an individual to share personal thoughts, experiences, and interests with a wider audience.

• Resume/CV Site: A professional portfolio site serving as an online resume or curriculum vitae, showcasing skills, work experience, and achievements.

• Nonprofit Organization: A website for a nonprofit organization, providing information about their mission, projects, and ways for people to get involved or donate.

• Product Showcase: A site dedicated to showcasing and describing a company's products or services, with images, videos, and customer testimonials.

• Knowledge Base: A site serving as a knowledge base or FAQ section for a product or service, helping users find answers to common questions.

• Hobby or Fan Site: A website created by enthusiasts to share information, news, and updates about a particular hobby, interest, or fandom.

These examples illustrate the versatility of Google Sites in creating various types of websites for different purposes.

Google Sites Tips

Here are 10 tips to help you make the most of Google Sites:

• Organize with Pages and Subpages: Use the page and subpage feature to organize your content hierarchically. This helps visitors navigate your site more efficiently.

• Customize the Layout: Experiment with different layouts to find the one that best suits your content. Google Sites allows you to choose from various predefined layouts or create custom layouts for each page.

• Embed Multimedia: Enhance your site by embedding multimedia content like YouTube videos, Google Maps, and Google Drive files directly onto your pages.

• Collaborate in Real-Time: Leverage Google Sites' collaboration features by working on your site in real-time with others. Multiple collaborators can edit and update the site simultaneously.

• Utilize Google Drive Integration: Take advantage of the seamless integration with Google Drive. You can embed files, documents, and folders directly from Google Drive into your site.

• Optimize for Mobile Devices: Ensure that your site looks good on various devices by optimizing it for mobile viewing. Google Sites automatically adjusts content for different screen sizes, but it's a good idea to preview and make adjustments as needed.

• Add Custom Branding: Personalize your site by adding custom branding elements such as logos, colors, and fonts. This helps create a cohesive and professional look.

• Implement Access Permissions: Manage access to your site by adjusting sharing settings. You can set the visibility to public, private, or restricted to specific people or groups.

• Use Version History: Google Sites automatically tracks changes, allowing you to view and restore previous versions of your site. This is useful in case you need to undo changes or revert to an earlier state.

• Integrate with Google Analytics: If you want to track your site's performance, consider integrating Google Analytics. This provides valuable insights into visitor behavior, helping you understand how people interact with your site.

These tips should help you create a more effective and visually appealing Google Site tailored to your specific needs.

Google Sites Alternatives

There are several alternatives to Google Sites, each offering unique features and capabilities for building and hosting websites. Here are some popular alternatives:

• Wix: Wix is a user-friendly website builder with a drag-and-drop interface. It offers a wide range of templates, customization options, and app integrations.

• WordPress: WordPress is a powerful and highly customizable content management system (CMS). It's widely used for blogs, websites, and even e-commerce sites. There are both self-hosted (WordPress.org) and hosted (WordPress.com) options.

• Weebly: Weebly is a website builder that is known for its simplicity. It provides an intuitive drag-and-drop interface and is suitable for both beginners and those looking for more advanced features.

• Squarespace: Squarespace is a popular platform for creating visually appealing websites. It offers beautiful templates, e-commerce functionality, and built-in tools for various purposes.

• Webflow: Webflow is a design-centric platform that allows users to create responsive websites with a focus on design freedom. It's suitable for designers and developers looking for more control over their site's layout and interactions.

• Blogger: Blogger is a straightforward blogging platform owned by Google. It's easy to use and integrates seamlessly with other Google services.

• Jimdo: Jimdo is a website builder that uses AI to create personalized websites. It's user-friendly and offers features like e-commerce integration.

Google Sites FAQ

Here are 15 frequently asked questions (FAQ) related to Google Sites:

What is Google Sites?

Google Sites is a website creation tool offered by Google that allows users to build and publish simple websites. It's a part of the Google Workspace suite.

Is Google Sites free to use?

Yes, Google Sites is free to use. It's available for all Google account holders, and there's no additional cost for creating and hosting websites.

Can I use a custom domain with Google Sites?

Yes, you can use a custom domain with Google Sites. This feature is available for users who want a more personalized web address for their site.

How do I collaborate with others on a Google Site?

Google Sites supports real-time collaboration. You can invite others to edit your site by sharing it with their Google accounts. Multiple users can work on the site simultaneously.

Can I add my own CSS or JavaScript to customize the site further?

Google Sites does not provide direct support for adding custom CSS or JavaScript. Customization options are limited to the tools available within the Google Sites editor.

Is it possible to track website analytics on Google Sites?

Yes, you can integrate Google Analytics with Google Sites to track website analytics and gain insights into visitor behavior.

How do I embed a Google Calendar or Google Map on my site?

You can easily embed a Google Calendar or Google Map by using the "Embed" option in the Google Sites editor. This allows you to display dynamic and interactive content on your site.

Can I password-protect my Google Site?

Google Sites doesn't have a built-in feature for password protection. However, you can control access by adjusting sharing settings and limiting visibility to specific people or groups.

What is the maximum file size for uploads on Google Sites?

As of my last knowledge update, the maximum file size for individual uploads to Google Sites is 100 MB.

Is Google Sites suitable for e-commerce or online stores?

Google Sites is more suitable for informational and collaborative purposes. It lacks advanced e-commerce features, and other platforms may be better suited for online stores.

How do I delete a page on Google Sites?

To delete a page, navigate to the Pages tab in the Google Sites editor, right-click on the page you want to delete, and select "Delete."

Can I export my Google Site to another platform?

Google Sites doesn't provide a direct export feature. However, you can manually copy the content and recreate the site on another platform if needed.

Is there a limit to the number of pages I can create on Google Sites?

As of my last knowledge update, there is no specific limit on the number of pages you can create on Google Sites.

Can I create a blog on Google Sites?

While Google Sites is not primarily designed for blogging, you can create a simple blog-like structure by organizing content in a chronological order on your pages.

Are there templates available for Google Sites?

Yes, Google Sites offers a variety of templates to help you get started with different types of websites, such as portfolios, project sites, and more.