Google Sites Glossary
Google Sites Glossary
There are many elements within Google Sites that allow users to create a full-fledged site. Learn all about the different keywords, terms and parts of Sites.
🔥Get Awesome Google Sites Templates!
There are many elements within Google Sites that allow users to create a full-fledged site. Learn all about the different keywords, terms and parts of Sites.
The button element can be inserted into the page. It consists of a name and a link. The link can be either to an internal page or external URL. External URLs will open in a new tab.
Buttons can be designed by filled, outlined, text. The fill color, or background color, can be dictated in custom themes via the components tab. Similarly, the outlined border color can be set. Alignment can be set to left, center, right or justified. Justified means it will be max width of the column.
Other settings like margins, padding, border radius, etc. aren't available. As an alternative, users can embed buttons as HTML and CSS, but all links from those must open in a new tab regardless of location.
Site editors can insert Google Calendars into the page. When embedding, the user can select from My calendars and Other calendars (calendars shared with that user). Multiple calendars can be selected at once.
Calendar settings for this widget include:
Show Titlte
Show Date
Navigation Buttons
Show Timezone
Use Viewer's Timezone
View Selection
View Mode: Agenda, Week, Month
This is an interactive widget for viewers, so calendars and events can be added to the viewer's app. The app is responsive according to the space it occupies within the site by the editor's adjusting of dimensions.
A collapsible group can be formed from 2 or more stacked text boxes or images in any combination. A collapsible group is a kind of accordion menu which allows for showing and hiding content by interaction. If an image is the top most element, a semi-transparent down arrow icon is placed on the bottom center, which indicates there is more information below in the expanded menu.
This feature is typically used for wiki and FAQ sections. For custom themes, styles 1 and 2 are intended for light color backgrounds, whereas section 3 is for darker colors. Therefore, the divider line and dropdown arrow may suffer in visibility is not following this standard.
A divider can be inserted into the page between content sections. It is a straight line roughly the max width of the site grid. The divider line break color can be set with custom themes by thickness and color. Maximum line weight is 19. It's style is dictated by the section style right above it.
Cover
Large banner
Banner
Title only
Image
Top and side navigation options available. Dimensions are set and styling is limited, however it is responsive and therefore the preferred method for a navigation menu.
Upload images and captions into a slideshow. Options include automatic progressing through images and adding dots or captions.
Adds space between elements or sections.
Automatically displays all headings on the page as anchor links
Social media icons with formatting options and several styling settings
A sample element block which can be used for page template set up
Embed a YouTube video via a URL or there is a search function
Embed Google Maps and My Maps. Zoom in or out during widget set up to determine the view embedded.
Embed Google Docs into the page (not editable in this mode) (view only)
Embed Google Slides into the page (not editable in this mode) (view only)
Embed Google Sheets into the page (not editable in this mode) (view only)
Embed Google Forms which can be completed and submitted
Insert a chart from one of your Google Sheets and it will sync and automatically update with new data upon page refresh.
When you use the embed function to add a URL (web address) in your site you will typically have two options for displaying it: whole page iframe or a link. Not all websites will allow you to iframe their website due to security concerns. The link option is like a little text box that includes a thumbnail, title and snippet description.
Users can embed code into Google Sites but they operate as iframes in the widget's dimensions and do influence the site code. In fact you can't reference the website or open links in the same tab from embedded code.
The embed code frame can be resized manually, but typically has difficulty with responsiveness when the browser width is reduced to tablet and smartphone standards. This frequently necessitates more leeway in the widget's height. A common work around for this includes listeners in the code to adapt to different width breakpoints.
Users can add HTML, CSS and Javascript using the following tags:
<html>, this is default
<style>
<script>
Applications that can be embedded from Google include:
Deployed web apps from Apps Script
Apps Sheet
Google Groups
Google Plus, Google Currents and Google Communities were all discontinued as the products were deprecated.
Accessed from hovering over the bottom right + button, menu sections can be added to the site navigation to facilitate access to nested subpages. Menu sections do have a URL slug which creates a site directory, but it can only be changed by adjusting the menu title since there is no specific URL property.
Menu sections can be added to the dropdown for even more subdirectories. The navigation item is not hyperlinked, which makes it different from a regular page.
Colors
Styles
Fonts
Text
Formatting
Images
Logo
Favicon
Header Background Image (Readability and Anchoring)
Navigation (Side, Top) (Background, Selected Page)
Components
Spacing (Density, Site Width, Site Frame)
Title
Heading
Subheading
Normal
Small
Simply the file name that appears in Google Drive. This does not appear in the published site code for viewers.
The site title appears in meta data as the site title content:
<meta property="og:title" content="{{Site Title}}"><meta property="og:type" content="website">
View and use the button to copy the published site link to your clipboard. Includes the full link when you are on specific site pages. Not functional if the owner has not published the site or has unpublished it.
Add people, groups and calendar events to share with. People with access are either viewers, editors, owners. General access settings allow restricted, domain only for Workspace users and public for the draft and published site.
If anyone with a link has access to the draft, then even anonymous users (viewers) can access and edit content. However, the site owner can create settings permitting or denying editors the ability to publish, change permissions and add new people.
Review changes
View published
Unpublish
Search Settings: Add noindex tag to block indexing from search engines and from appearing in search results.
Web Address
Publishing a Google Site pushes the draft version into production. Published doesn't equate to publicly accessible, since that is determined by the site sharing settings. Publishing works as a site wide function, so that content revisions on multiple pages since the last publish event will go live.
Site version
Page version
Named version
Info icon
Anchor Links
The site owner can add a Google Analytics stream ID to Google Sites for tracking traffic, engagement and other metrics from Google Analytics.
The Google Sites footer is a universal element that is displayed on all pages at the bottom of the page if added. A footer is not provided by default on newly created sites, but editors can add one by hovered toward the last page section of the page. Since it doesn't need to be edited per page, the footer is ideal for secondary navigation and reference information. All elements are able to be added to a footer, including embed code.
Footers can be displayed on a one-off basis for "Full Page Embed" pages, but published site viewers can manually show the footer if selected.
Emoji
Numbered lists, bulleted lists
Indent
Highlight
Code Font
Remove formatting
Text for screen readers and accessibility requirements
Upload images from your computer or select them from Google Drive. Images may be automatically adjusted for brightness and contrast for readability. You can disable this or change image anchor points (shifting the focal point).
As with other Google Workspace applications, there is support for multiple editors to work on Google Sites simultaneously.
Here is a detailed briefing document summarizing the main themes and most important ideas from the provided source, with relevant quotes included:
Briefing Document: Google Sites Training - Key Takeaways
Date: March 3, 2025
Presenter: Kyle (Google Sites Product Specialist)
Audience: Library Staff/Content Managers
Subject: Introduction to Google Sites within Google Workspace
This training session provides an overview of using Google Sites as a no-code website builder within the Google Workspace environment. The session highlights the accessibility and ease of use of Google Sites, its integration with Google Drive, and key features for editing, managing, and publishing library websites. Important concepts covered include site structure, page editing, utilizing various elements, and accessibility features. The training emphasizes using the provided themes and maintaining consistency for optimal user experience.
Google Sites as a No-Code Site Builder:
Google Sites is presented as a user-friendly tool for creating websites quickly without requiring coding knowledge.
The goal is to enable users with a Google account to easily build, edit, and maintain their sites.
Quote: "you know in a nutshell Google Sites is a a no code site builder so it allowed us to build websites uh pretty quickly and it allow you to be able to access your site with a Google account and to edit and maintain it yourself so that's the goal"
Google Drive is the central location for managing all Google Workspace documents, including Google Sites.
Library sites are typically stored in shared drives with specific folders for each library.
Access to the site is granted by sharing the Google Drive folder with a Google account (Gmail or other).
Quote: "we're starting off here within Google Drive google Drive is the heart of Google Workspace document management so all your docs that you make or sheets or sites they're going to be in in here"
Quote: "you also will need to already have set up a Google work a Google uh account a Google account of any kind it can be a free Gmail account... so that we can share access to these folders with you"
Sites can be accessed via Google Drive (drive.google.com) by navigating to the site file.
Alternatively, users can access sites directly through the Google Sites launcher (sites.google.com), which provides a cleaner view of only Google Sites.
The interface includes the site icon (to return to the launcher), the site document name (internal file name, not publicly visible), and an autosave indicator.
The "All changes saved in Drive" notification is important to monitor during editing to ensure work is being saved.
Undo and redo options are available.
Preview mode allows users to view the site as a visitor would, providing a public perspective.
It enables viewing the site on different screen sizes (desktop, tablet, phone) to check responsiveness.
Previewing is recommended before publishing.
Quote: "when you go into preview mode you are essentially viewing the site as a visitor... it gives you the perspective of you know what the site is really looking like to to the public"
The "Share with others" button allows adding editors to the site.
Editors have access to all pages and content; there is no granular page-level editing access.
Keeping the editor group small and trusted is advised as they can publish updates to the public.
Published sites should generally be set to "Public."
Quote: "If you have editor access you have access to the whole site so keep that in mind you really want this uh editor group these content managers to be a pretty small group"
Navigation: Pre-set to the top of the screen as part of the theme design.
Brand Images: Logo and favicon are pre-set.
Viewer Tools: Minor technical settings, generally don't need adjustment.
Analytics: Can be enabled to track website traffic.
Announcement Banner: A customizable banner that appears at the very top of all pages for important announcements (e.g., library closures). * Quote: "the announcement bar banner sorry announcement banner appears at the very top of the page"
Google Sites automatically saves versions of the site with each autosave and publish action.
Users can view past versions and roll back to a previous state of the entire site or individual pages.
This is a crucial feature for recovering from errors or unwanted changes.
Quote: "you can always do like a roll back uh to a previous version of your Google site"
Creating a copy of the site allows users to have a "sandbox" for experimenting with changes without affecting the live site.
Copies can also serve as backups or be shared for training purposes.
The three-dot menu provides access to Google's Help Center and basic training materials for Google Sites.
The "Publish" button pushes all changes made on the site to the live public version.
Users should remember to publish after making edits for changes to be visible.
Publish settings allow viewing the Google Sites URL.
This panel contains the main tools for building and managing the site.
Insert: Contains various elements to add to a page. * Basic elements: Text boxes, embed code, images, files from Google Drive. * Advanced elements: * Collapsible Group: Hides and shows text content, useful for FAQs or detailed information without cluttering the page. * Table of Contents: Automatically generates a list of headings and subheadings on a page, providing anchors for easy navigation on long pages. * Image Carousel: A slideshow of images. Limitation: Slides cannot be clickable or linked. * Buttons: Simple clickable links to internal pages or external URLs. * Dividers and Spacers: Used to add white space and improve visual organization. * Social Links: Icons linking to social media profiles. * YouTube: Easily embed YouTube videos using a search or URL. * Calendars: Embed Google Calendars in agenda or monthly view. Multiple calendars can be superimposed. * Maps: Embed Google Maps views by typing in an address. * Google Files: Embed various Google Drive file types (Docs, Sheets, Slides, etc.). * Code elements (less common for content managers): Embed code allows inserting HTML/CSS/JavaScript snippets (e.g., for external feeds, search catalogs).
Pages: Manages the site's structure and navigation. * Ordering and nesting pages affects the top navigation bar and creates drop-down menus. * Pages can be added (new page, link, menu section). * Page properties allow viewing/editing the page name and URL path. * Pages can be duplicated (useful for creating templates). * Pages can be hidden from navigation (allowing work on pages before making them public). * Pages can be deleted.
Themes: Controls the visual design (fonts, colors). The theme is pre-set and generally should not be changed to maintain consistency. Users can adjust colors within the chosen theme.
Google Sites is a drag-and-drop, "what you see is what you get" editor.
Text editing within text boxes is similar to Google Docs, with options for formatting (bold, italics), alignment (left-aligned recommended within the theme), bullet points, and creating links.
Clear Formatting: Crucial step when copying text from external sources (PDFs, documents, other websites) to ensure it conforms to the site's theme.
Text can be assigned as titles, headings, subheadings, or normal text for hierarchical structure and usability.
Images can be added and linked to external URLs or internal pages.
Sections can have background colors (pre-set options or custom) or background images to visually break up content.
Header images can be added and adjusted for readability.
Google Sites automatically adjusts content for different device sizes.
The site reads content from top to bottom and left to right when scaling for smaller screens (e.g., a two-column layout becomes stacked vertically on mobile).
The editor utilizes a 12-column grid system for arranging elements. Users become familiar with this as they work with different section layouts and columns.
Adding "alt text" (alternative text) to images is important for accessibility.
Alt text is read by screen readers for visually impaired users, describing the image content.
Quote: "alt text is accessed by screen readers for people who might have trouble seeing your content"
Alt text should be added to both decorative and non-decorative images, and even section backgrounds.
The footer is a universal element that appears on all pages.
Changes made to the footer apply site-wide.
Google Drive folders can be used as a repository for website images.
A "Documents" folder can house files like board minutes or policies.
Links to these documents can be shared publicly (ensure sharing settings are set to "Anyone with the link").
Quote: "this can be your document management solution for the website as well working within Google Drive and these folders"
The presenter encourages users to explore and experiment with Google Sites by starting their own site at sites.google.com.
Many questions are resolved through hands-on experience.
Familiarize yourself with the Google Sites interface, particularly the Insert, Pages, and Themes tabs.
Practice adding and arranging different elements using the drag-and-drop functionality.
Utilize the preview mode frequently to check how changes appear on different devices.
When copying text from external sources, always use the "Clear formatting" option.
Begin practicing adding alt text to images for improved accessibility.
Explore the Google Drive folder shared with your library's site and its potential for managing documents and images.
Don't hesitate to experiment in a copied version of the site before making changes to the live version.