Google Sites Tutorial for Beginners: How to Use Google Sites in 2024

Google Sites is among the popular website builder tools and is known for its user-friendly interface. However, many people still find it challenging to build a website using this builder.

If you are a beginner or someone who wants a website and you have little knowledge about this site builder, don’t worry! I’ll take you through the process of using Google Sites to create a functional website.

In this ultimate Google Sites tutorial for beginners, you’ll learn how to create a new site from scratch or a template, customize its appearance and layout, and add pages, text, images, and other content. 

Additionally, you’ll discover how to share your site with others, manage their permissions, and publish your site online or to a custom domain.

Before we dive into the tutorial on Google Sites, let’s briefly talk about what Google Sites is, its features, and the types of websites you can build with it. Also, at the end of the guide, I’ll explain some of its pros and cons.

What is Google Sites?

Google Sites is a free tool made by Google that lets you create and put up websites without needing to know how to code. It gives you templates and an easy drag-and-drop way to make web pages and organize your site.

You can design your website, use your web address, and make it look the way you want by adding text, pictures, fonts, headers, footers, and menus.

Google Sites is handy for making websites for different things like teams, projects, events, portfolios, and internal sites for organizations. It works well with other Google products like Docs, Drive, and Calendar.

You can check out websites made with Google Sites on a tablet, smartphone, or computer. It’s designed to look good on different screen sizes.

Google Sites Features

Here are key features of Google Sites you need to know.

1. Templates

The platform has 6 themes and over 15 templates. It also has an option for experts who want to build a website from scratch and know how to code. 

Its themes are grouped into 4 main categories: Personal, Work, Small Business, and Education. You can go to the category you need and look at the available examples to customize.

Additionally, you can add templates to Google Sites from third parties and make a unique-looking website.

2. Ease to Use

Google Sites has a simple text editor and an easy-to-understand interface. It only takes a few minutes to get used to it and find the main parts. If you already have a Google account, you don’t need to sign up again. Just go to your account’s services and choose Google Sites. Pick a template and start customizing it with the easy web editing tools.

You’ll see your document and three sections of options on the right in tabs. Managing web pages is like editing a document with text and media.

Everything is on one page, and you access things not shown through pop-up windows without moving to different pages. You can add, edit, and remove some media elements or widgets, but most of the page content can’t be changed.

All elements are automatically placed on a grid, and sizes and spaces are easy to adjust, which is great for beginners. The whole website design happens on one screen.

3. Intranet Capabilities

Many people use Google Sites to make private websites for their work. It helps you create sites for your company, department, or team and share them with the right people. You can ask others to work together on your site, which is good for team projects or educational stuff. Google Sites lets you decide who can see and change your site, giving you control.

4. Security and Ownership

Google has safeguards in place to protect your website from attacks like Distributed Denial of Service (DDoS). This means your site stays available even if there’s an attempt to overload it.

Additionally, Google uses SSL (Secure Sockets Layer) encryption to keep the information sent between your browser and the Google Sites server safe. This encryption ensures that sensitive details like your login information are securely transmitted.

When you publish content on Google Sites, you still own it. Google’s terms of service make it clear that you have the rights to what you create and share on the platform.

5. Integration with Google Workspace

If you’re using Google tools like Drive, Docs, Sheets, and Calendar, Google Sites works really well with them. You can easily put Drive files on your site, share Docs or Sheets, and connect your calendar events to your website. This makes it easier to work together and get things done.

6. Search Engine Optimization Capabilities 

Even though Google Sites doesn’t have these advanced features, the websites you make with it are still easy for search engines to find and load quickly. They use the secure HTTPS protocol and are optimized to rank well in search results.

If you want more help with SEO, you can use Hubspot with Google Sites. It offers tools for things like figuring out good keywords, building links, and using keywords well on your site. This helps you create a strong strategy for making your website show up more in search engines. Learn more in our ultimate guide to Google Sites SEO.

5. Mobile Optimizations

Websites made with Google Sites work smoothly on your phone. All the parts of the site adjust by themselves to fit different screen sizes, so you don’t have to fix anything manually.

If you put outside stuff on your site using HTML code, it will show up in separate parts. If something doesn’t fit the screen right, it will get cut off automatically.

To see which parts need fixing for different phones or tablets, you can use the preview feature. It lets you switch between PCs, phones, and tablets to check how everything looks.

What Kinds of Websites Can You Build Using Google Sites?

Even though Google Sites might have a few templates, remember that you can make a site from scratch using a blank page.

Here are some types of sites you can create with these templates:

• Small Business: Use these templates for small businesses or startups that need a basic online presence. Include info about your business, contact details, and relevant content.
• Intranet Sites: You can build simple intranet sites for internal communication within a company. Share important documents, announcements, and resources.
• Personal Websites: Make blogs, portfolios, or resume websites to show off your work, achievements, and personal info. 
• Event: For weddings, conferences, or meetups, you can use Google Sites to create a site with event details and schedules. Add an event calendar widget to show events with info on your site.
• Knowledge Base Sites: Design a knowledge base or wiki-style website where info is organized and easy to find. This is handy for documentation and working together.
• Project Websites: Google Sites is great for making websites about specific projects. Collaborate with your team, share documents, and give updates in one central place.
• Educational Websites: Teachers can create websites for their classes to share resources, assignments, and announcements.

Want to inspire what you can build using Google Sites? Check these Google Sites examples.

Step-by-Step Google Sites Tutorial on How to Use Google Sites for Beginners

In this section, I’ll give you an in-depth guide on how to use Google Sites to build a website.

a) Creating a Website

Open your web browser and visit https://sites.google.com. If you’re already signed in to your Google account, you’ll go straight to Google Sites.

If you’re not signed in, it will ask you to log in. If you don’t have a Google account yet, you can make one easily.

1. Select a Template or Start from Scratch. 

At the top of the page, under Start a new site, you can choose to make a Blank site or pick from different templates. To see more templates, click on the Template Gallery.

When you find a template you want, click on it. This sets up the basic design for your new website and lets you start editing. You can change any template by moving things, adding or deleting pictures, adjusting colors, and putting in your text.

2. Design the Header

The header is the top part of many web pages, where you usually find a company’s logo and navigation tabs like Services, About, and Contact Us.

If you made a blank site, you can adjust the header in the editor. Change the site name, add a page title, and customize how the header looks. With premade templates, you can usually only edit the text fields and add a logo.

Type your site name in the “Enter site name” field. If you’re using a premade template, it might already have a name like Project Name, but you can change it. This name will show up on your website.

You can choose your Header type by clicking on it and pick how you want your header to look: Cover, Large banner, Banner, or Title only. The first three options show your background image in different sizes, while the last one only displays the header text.

If your header type needs an image, click on Image to add a background image. Since there’s no specific size needed for the header image, you can upload any file size. After that, click on the Anchor image icon (it looks like an anchor) to move the image around.

The editor will automatically adjust your header image to make it easier to read. I suggest letting the editor do its job, but if you want to go back to the original image, click on the Remove readability adjustment icon (it looks like a series of stars).

To include a logo, hover over your site name and choose Add logo. It’s best to use a straightforward and clear image because it will appear quite small on your actual website.

Click on the header text to type your header title and adjust its style, size, font, and alignment. If you don’t want any text, you can delete the box.

To move the text box, hover over any corner of the text box until a four-way arrow shows up. Then, drag and drop the box to the position you prefer.

How to add a hero section to Google Sites

You might want to use a hero section with a slider and CTA (Call to action) buttons. How would you accomplish it?

Use the widget builder below and create your hero section: Choose a template, click on the “Continue with this template” button, edit content, click on the “Add to website” button, and follow the next steps to get embed code.

Now, you can embed it on your Google Sites using the HTML Embed Code element. (more on using it later on this Google Sites guide)

3. Choose Your Preferred Theme. 

When you first start a new Google Sites web page, it comes with a basic theme. But you can make it more interesting or match your brand by changing the theme.

Themes control the colors and fonts on your website. Click on the Themes tab in the top-right corner of the editing space, and then pick one of the built-in themes. You can make each theme your own by choosing a font style and color.

If you want to pick your color, click on the paint bucket icon beside the example colors and then choose a color from the palette. In case the five ready-made themes aren’t what you want, click on the Create theme icon—it looks like a plus sign (+)—to create your theme. Google Sites will also save these designs for you to use later.

With this builder, you can bring in a theme from another Google site you made. Just choose the Import theme to do that.

4. Share Editing Roles with Your Members (optional). 

If you’d like to work together on your Google Site with someone else who uses Google, you can share the site. Click on the icon with a person and a plus sign at the top of the editor, then enter the name or email of your collaborator.

It allows you to choose an editor if you want them to edit and add content or a Published Viewer if you only want them to see drafts. Click Send to invite them.

5. Click the Preview Icon 

Look for an icon at the top of the page that resembles a laptop overlapping with a cell phone. Whenever you make a big change, like altering colors or adding a text box, you can check how your website will look before publishing it.

While previewing your site, you can click on various screen sizes at the bottom to see how it appears on a phone, tablet, or computer screen. If you want to go back to editing, just click the X to exit the preview.

b) Add Pages and Navigation

1. Add Pages

Go to the Pages tab, which you’ll find on the right side of the window. Depending on your template, you might already have some pages listed.

To add a new page, move your mouse over the + at the bottom of the right panel and then click New page. Type a name for your page on the “New page” window, and then click Done.

If you want a page that looks like an existing one, you can copy it. Click the three-dot menu next to the page’s name, choose Duplicate page, give the new page a name, and then click Done.

2. Customize the Navigation Bar. 

Every Google Sites template has a navigation bar to help your visitors navigate your site easily. The navigation bar might be at the top of the page or on the left side, depending on the template. To modify your navigation bar:

• Click the gear icon at the top of the editor.
• Go to the Navigation tab.
• In the Mode section, choose either Top or Side.

• You can also go to the Color option and choose Transparent. Underneath it, you’ll find the choice of either White or Black.

• To insert a logo, visit the Brand Images tab and then click Upload to choose your logo file.

• You can add Icon info and Anchor Links under the Viewers tools menu.

• Additionally, you can create an Announcement banner to showcase a message on top of your website. Customize it by adding color and a label to match your website’s brand. 

• Navigate to the Analytics Menu to link your site to a Google Analytics account, allowing you to receive insights and metrics on usage.

3. Customize Pages On the Navigation Bar. 

The names you give your pages determine how they will appear on the navigation bar. If your website has many pages, you can make subpages to make the navigation area manageable. Adding a subpage creates a drop-down menu under the parent page on the navigation bar.

To change a page’s name, double-click its current name in the Pages panel, edit the name, and then press Enter.

To add a subpage, click the three dots next to a page’s name, choose Add subpage, type a name, and then press Enter. Alternatively, you can drag an existing page under another page to create a subpage.

If you wish to hide a page from the navigation bar, click the three vertical dots next to the page name and select Hide from navigation.

To delete a page, click the three-dot menu and select Delete. Remember to click the Preview icon to see how your updated navigation bar will appear.

c) Adding & Editing Content

1. Add or Edit text. 

Go to the Pages tab on the right side. You’ll find a list of all the pages you added to your Google site. Click on the page you want to edit, and it will open up for editing. 

Note: Changes you make to one page won’t affect other pages.

If you use a template, you’ll already see some sample text you can change. You can also add a new text box anywhere on the page to put in your own text.

To insert a text box, click on the Insert tab on the right, and then choose Text box. Type in some text. Or, if you want to change existing text, click on the text to put the cursor there and make your edits.

Use your mouse to highlight the text. In the first drop-down menu above the text, choose Title to make it the page’s title, Heading or Subheading for section headers, Normal text for regular content, or Small text for captions and notes.

Pick a font and size from the corresponding menus. You can also make the text bold, underline it, change its color, or adjust its alignment and indentation.

2. Add HTML, CSS, or JavaScript Code. 

Click on Insert, and choose Embed. Then, select Embed code. Input your code (JavaScript code needs to be within <script> tags) or (CSS code within <style> tags), and click Next.

You can embed anything into Google Sites, including third-party widgets on Google Sites, tracking scripts, etc.

Click on Insert. To make your changes live, go to the top right and click on Publish.

3. Add a Section Layout. 

If you begin with a template, your page will already have sections. Even if you used a blank template and added text, you’ll have at least one section. Additionally, you can include Content Blocks, which are pre-designed layouts for easily adding your text and images.

Go to the Insert tab. Under Content Blocks, you’ll find six layout options.

Click on a content block to add that layout to your page. Afterward, you can click on a text box or photo placeholder in a section to replace it with your content.

4. Move and Edit Sections. 

When you glide your mouse over the sections of your page containing images, text, or a combination (including Content Blocks), you’ll notice a few icons on the left side of the editor and a handle with 10 dots. Each of these sections can be edited and moved as one with these tools.

To relocate a section, simply drag it from the 10-dot handle on its left side, placing it anywhere up or down the page.

Click the palette icon to modify the section’s background color. If you prefer using an image as the section’s background, click Image to upload one from your computer, select a stock image, or choose a picture you added to Google Drive or Google Photos.

You can rearrange text, images, and other elements within or outside of sections by dragging them. To remove any part of a section, such as an image or text block, click the object, then click the trash can above it.

5. Add an Image. 

You can add either pre-made stock images or your custom images to any part of your website. Just click on Images in the Insert tab. Choose Upload to add an image from your computer, or Select to pick one from Google Drive, Google Photos, or the web.

After you’ve included the image, you can move it wherever you like, such as into a specific section. Adjust the image size by dragging the blue dots around it in any direction or crop the image by clicking on the Crop icon, the first one on the image toolbar.

To link an image to another page on your website, click the link icon, then choose the page you want to link to.

If you want to replace an existing image, click on the image, click the three-dot menu on its right side, then select Replace.

To create an image carousel, click on Image carousel in the Insert tab, then select your images.

What if you want to add an image gallery to your website with features like Lightbox and CTA links?

Use the widget builder below to create your widget:

6. Add Spaces and Dividers. 

To create hidden space between sections, insert a spacer element. If you prefer a visible horizontal line dividing two sections, you can insert a divider.

Navigate to the Insert tab. Choose Spacer to add space, and adjust the size by dragging it from one of the large circles on its edges. Select Divider to add a horizontal rule between sections. You can drag a divider or spacer into or out of any section.

7. Add Buttons.

You can make a link button by navigating to the Insert option and selecting Buttons. The button font and colors are automatically taken from your design theme by default.

If you want more flexibility, such as adding secondary text and icons, I recommend using one of these HTML/CSS button generators.

8. Add Social Links. 

Just like button links, these enable you to include links to your social media pages. For example, if you add your Instagram profile, Google Sites will automatically use the Instagram logo as your button link. If you prefer a different design, click the Add image icon next to the Link field.

Related: Tools similar to AddThis for social media link widgets

9. Add Google Apps

Google Sites seamlessly integrates with other Google apps. With your Insert side menu still open, scroll down to find these interactive elements:

• Calendar: Share your calendar in weekly, monthly, and agenda views.
• Map: Insert an interactive Google Map of the address you choose.
• YouTube: Embed a playable YouTube video into your website. If you want to embed your channel, playlist, or gallery of videos, I recommend using one of these YouTube widgets for websites.
• Docs, Slides, Sheets, and Charts: Add a Google file to your page.
• Forms: Display a Google Form that visitors can fill out on your site, a useful option for adding a contact form.

d) Publishing Your Website.

Ensure all your pages have titles. Navigate to the Pages tab and go through each page on your website, ensuring that each has a title displayed at the top. This is crucial for Google Sites search engine optimization and helps your visitors stay oriented.

1. Add a favicon

A favicon is a small image representing your website when viewed in web browsers. It appears in the browser tab on computers and various locations in mobile browsers.

You can create your favicon using computer software, download a free one from sites like Icons8, or use a favicon generator like Favicon.io.

Favicons also show up next to your website in Google search results. To add yours, click the gear icon at the top of the Google Sites editor, visit the Brand images tab,  then go to Favicon and click Upload.

2. Click Publish. 

Go ahead and click on the Publish button you’ll see at the top-right corner of the editor.

3. Enter your custom web address. 

If you don’t have your domain name, your website address will be https://sites.google.com/view/<yourpreferredname>. Choose a name that reflects your website, such as your business name, your full name, or any appropriate identifier (provided it’s available).

Your site name can include lowercase letters, numbers, and dashes (hyphens) but no other characters or spaces.

If you own a domain name, click MANAGE to find out how to connect it to your Google website.

4. Permit Who Can View Your Website. 

By default, your website will be visible to anybody who comes across it. If you’d rather it only be visible to certain people, you can restrict access.

• Click MANAGE under “Who can view my site?”.

Under “Published site,” choose Public to make the site public or Restricted to choose specific people.

If you’re restricting your site, enter the names of contacts (or email addresses) who should be able to view the site. Click Done when you’re finished.

5. Click Publish to Publish your website. 

Your website is up and running! To see it live, click the menu next to Publish and choose View published site. Whenever you make updates to your website, remember to click Publish again to make those changes go live on the internet.

How to Use Google Sites

Now that you know how to create a website using Google Sites, check out the following details on related matters:

For Affiliate Marketing

The first question you might have is, can you use Google Sites for affiliate marketing?

The answer is yes.

But, you may find since Google Sites is limited in features such as blogging, you are somewhat limited in what you can do with Google Sites. For example, you can definitely use Google Sites website builder as a tool to create landing pages such as lead capture and bridge pages.

However, for that, you might want to use a third-party lead capture widget builder such as OptiMonk and ConvertBox.

And product comparison table creators such as Affiliatable (read our review) and Lasso to present affiliate offers’ USPs (Unique Selling Proposions) and features.

Read our complete guide to Google Sites Affiliate Marketing to learn more about strategies you can implement to promote affiliate offers.

For Selling Digital Products & Services

One of the best ways to use Google Sites is to sell your services and digital products that you might already have or can purchase from MRR marketplaces or PLR websites.

For that, you have to use third-party services to:

• Create a product checkout widget and process payments as well as deliver goods.
• Collect email addresses and manage customer communication.
• Create pricing tables.
• Boost conversions.

You can use ThriveCart to design checkout pages, process payments, and deliver products. However, Sellix supports cryptocurrencies and CashApp for payments, which might be useful in some circumstances.

Since Google Sites does not provide a pricing table creator, countdown clock widget, social proof tools, or customer testimonials slider, you have to use third-party tools. Here’s a video tutorial on setting up a sales page on Google Sites. It uses the Elfsight platform to create most widgets.

In fact, we have already shown how to sell on Google Sites!

How to Make Google Sites Look Good

Here are a few tips to make your website look professional:

• Use a custom domain name — Since Google Sites is a free website builder, you only need to pay for a domain name at first to make it look good. If you don’t use a custom domain, the domain will look like sites.google.com/sitename.

• Use high-quality visuals — Browse through royalty-free stock photo sites such as Unsplash and Pexels or purchase from ones like Shutterstock and GettyImages and use quality visuals when designing your site. Visuals take users’ attention, and those really make your Google Sites attractive.

• Retain color usage consistency — You don’t have to use every color on your site! Pick a few colors (presumably along with your brand colors) and stick to them. Decide if the background should be light or dark or even if you want to use background images.
• Utilize website building components — Google Sites website builder has several elements and content blocks. Be creative and make design your website with your web design ideas. Does Google Sites not offer what you want? You can always use website widget providers such as Elfsight, CommonNinja, and Fouita to create embeddable website components such as background music widgets, social media aggregators, HTML tables, and file embed widgets.

Pros of Using Google Sites to Create a Website

• Latest Features: Google frequently updates its tools, and Google Sites is no exception. This means you automatically get the newest features and design trends, keeping your website modern and secure.
• Time Saver: Google Sites templates are pre-designed, saving you time. You can choose a template that suits your needs, avoiding the need to start from scratch. This is especially handy if you’re not a web design expert or if you have a busy schedule.
• Seamless Integration: Google Sites works smoothly with other Google services like Google Drive, Calendar, and Maps. Templates often come with built-in integrations, making it easy to add content from these services.
• Collaboration: Google Sites is part of Google Workspace, allowing multiple users to collaborate on a site simultaneously. Templates provide a structured starting point, facilitating collaborative efforts.
• Easy-to-Use: Pre-made templates simplify the process of creating a professional website, even for those without design skills. The user-friendly drag-and-drop editor and well-crafted templates give your website a solid foundation.
• Mobile-Friendly: Google Sites templates ensure your website looks great on any device – whether it’s a phone, tablet, or desktop. This adaptability improves user experience, which is crucial for the increasing number of mobile users.
• Budget-Friendly: Using Google Sites is free, making it a cost-effective option for individuals and small businesses. This eliminates the need for spending on web designers or expensive website platforms.

Cons of Using Google Sites

• Limited Marketing tools: Google Sites lacks several marketing features like social sharing buttons, comments, categories, tags, RSS feeds, and detailed analytics. To incorporate these features, you’ll often need to turn to other Google tools or third-party integrations.
• Third-Party Integration Limitations: While Google Sites integrates seamlessly with other Google products, it has limited support for third-party integrations. This can make it challenging to add certain features or functionalities not offered by Google or its partners.
• SEO Challenges: Google Sites isn’t highly SEO-friendly since it restricts your ability to optimize the site for search engines. Editing crucial elements like the title tag and meta description is not allowed. Additionally, using a custom domain name requires a Google Workspace subscription, potentially impacting your site’s search engine ranking.
• Ecommerce Absence: Google Sites isn’t geared towards ecommerce, lacking essential features and integrations for online stores. Selling products, accepting payments, and managing orders are not supported. For an online store, users typically opt for other platforms or tools.
• Limited support: Google Sites does not offer dedicated customer support, such as phone, email, or chat. You can only use the Google Sites Help Center, the Google Sites Community, or the Google Workspace Support to find answers or solutions to your site issue.

Frequently Asked Questions

Conclusion on Google Sites Tutorial

I hope you’ve learned how to use Google Sites to create a website for free. You’ve seen how to choose a template, add layouts, text, and images, customize your theme and domain, and publish your site. 

Whether you want to showcase your portfolio, share your ideas, or promote your business, Google Sites can help you achieve your goals. If you are looking for feature-rich solutions, check out these alternatives to Google Sites – It features a few different platforms such as Wix, Brizy, and Weebly and compare differences.