How to Add Sections and Layouts to Your Google Sites Website

Quick and easy-to-follow guide for Google Sites users

What are sections and layouts: basics of Google Sites editing

You arrange elements on your site using sections and columns.

What are sections

Sections contain elements, but they are invisible to site visitors – they are only here to help you, the site builder, arrange the content on your site.
A single section can take up from one to twelve columns in which you can fit in content. Getting an element to take up twelve columns means it will take up the entire width of the page.
Each section can only get as big as the content in it, but you can rearrange and, in some cases, even resize the content.

This image shows a section with a text box in it. The text box is stretched over four out of twelve columns. You can make it take only one or all twelve if you wish.

How to add and manage sections in a Google Sites website

Step 1

To add a section, open your site in editing mode by double-clicking it in Google Drive at https://drive.google.com or Google Sites at https://sites.google.com/new.

Then on the right, under Insert, click any option to add an element to the site.

By adding a new element, you also add a section that contains it.

For this example, let’s click Text box to add a field that enables you to type text.

Step 2

A section with a text box appears.

The text box is the smaller rectangle out of the two at the bottom, saying click to edit text.

The section containing the text box is the larger rectangle at the bottom.

Step 3

When you hover over a section with your cursor, four options appear on its left.

First is the Section background icon on the left of the section, which lets you change the section’s background. You can select from two colors, depending on your theme, or you can add an image.

The duplicate section icon makes an exact copy of the section.

The Delete section icon deletes a section.

Be careful when deleting things. The only restore option is to Undo your action.

The last option is just inside the left border of the section, and it looks like a bunch of points.

You can left-click and hold down the mouse button there, then drag the section across the screen to place it in another position – below or above other sections.

What are layouts

You may also add pre-built structures of sections, where empty slots for elements are already positioned conveniently, and you just have to add your content – these are called Layouts.

How to add layouts to your Google Sites website

Step 1

They are accessible via Layouts, under Insert on the right. Click any of the layouts to add them to your site.

Step 2

In the layout above, the left side of the section contains a placeholder for an element. You can click the + icon to add something.

Step 3

Clicking the + icon lets you select an image, add something from Drive, YouTube, add a Calendar or a Map.

Step 4

You can experiment with layouts to find the ones that fit your content best.

You can drag element placeholders somewhere else within the section.

You can also resize them to take up more or fewer columns.

You can see both actions in this image.

That's all! You reached the end of the article. Continue to:

If you find this useful, share and help others!

Fundamentals of Creating Google Sites: Sections & Layouts

Structure your pages as you like with sections and layouts.

Undo or Redo Actions While Editing

Go back in time and revert an action, or redo one.

Add a Header to a Page

Update your header – this is usually the uppermost section on a page.

Add Dividers to a Page

Add a divider to your site.

Add a Table Of Contents to a Site Page

Make navigating through your website easier with a table of contents.

Hide Something From a Page’s Table of Contents

Remove a page or hide something else from your table of contents.

Add Text to a Page

Add text to your site.

Change Your Site’s Theme, Colors, and Font Style

Change your site’s theme, colors and font style.

Add Images to a Page

Add an image to your site.

Add Buttons to a Page

Add a button to your site.

Add Google Drive Files to a Page

Add a Google Drive file to a page on your site.

Add YouTube Videos to a Page

Add a YouTube video to a page on your site.

Add a Site Favicon

The favicon is a small icon displayed next to your site’s name on the browser tab.

Add Google Calendars to a Page

Add a Google Calendar directly to a page on your site.

Add Google Maps to a Page

Add a Google Maps location to a page on your site.

Add Google Docs to a Page

Add a Google Docs file to a page on your site.

Add a Site Logo

Give your site some personality by adding a unique logo.

Add Google Forms to a Page

Add a Google Forms file to a page on your site.

Add Google Sheets to a Page

Add a Google Sheets file to a page on your site.

Add Google Slides to a Page

Add a Google Slides file to a page on your site.

Insert Code or Embed Content From a URL to a Site Page

Add content to your site by embedding it from a web address (URL) or inserting HTML, CSS, or JavaScript code.

Manage Your Site’s Navigation Menu

Change the way your site navigation menu functions.

Show a Site’s Last Updated Info at the Bottom of Pages

Let visitors know when a page has been updated for the last time.

Improve Google Workspace

Get the best out of Google Workspace

Add essential functionality such as backup and increased security, get new awesome features, and optimize your work with these additional services for Google Workspace.

See recommendations

Website Tools and Resources

Resources for website creators

Awesome tools and services for easy and effective site building, content creation, SEO, email marketing, and more.

See recommendations

Protect And Secure Google Workspace

Protect your data and maximize security

Data protection and security tools are crucial, especially if you store any sensitive data in your accounts.

See recommendations

Email Marketing Tools

Better Gmail and email marketing

If you work with Gmail or do email marketing, you will appreciate what these services can do for you.

See recommendations

Collab And Optimization Tools

Process optimization and collaboration

You can use these services to make tedious processes a whole lot easier, improve teamwork, save time, and get better results.

See recommendations