Google Sites Resources

Copying sections or entire pages in Google Sites helps you duplicate content without recreating everything from scratch. 

1. Locate the Section You Want to Copy

• Open your Google Site.

• Navigate to the page where the section is located.

• Hover over the section you want to duplicate.

2. Click the Copy Icon

• Look for the copy icon (📄) on the left side of the section.

• Click the icon, and an exact duplicate of the section will appear below the original.

3. Move the Copied Section (If Needed)

• To move the duplicated section, click and drag it to a new location on the page.

4. Edit the Duplicated Section

• Modify the text, images, or links in the copied section if necessary.

5. Publish the Changes

• Click Publish to apply the changes to your live site.

Note:  To copy a section and add it to on different page, click the section you want to copy and you will see a blue border.  Use the keyboard shortcuts to copy the section (CTRL+C to copy) and paste it on any other page (CTRL+V to paste). 

Copying sections or entire pages in Google Sites helps you duplicate content without recreating everything from scratch. 

If you want to create a duplicate of a full page:

1. Open the Pages Panel

• Click the Pages tab on the right sidebar.

2. Duplicate the Page

• Find the page you want to copy.

• Click the three-dot menu (⁝) next to the page name.

• Select Duplicate page.

3. Rename the Copied Page

• A new page will appear with the same content but named "Copy of [Original Page Name]".

• Click on the new page’s name to rename it.

4. Publish the Changes

• Click Publish to apply the copied content to your live site.

1. Open Your Google Site

• Go to Google Sites.

• Select the site you want to edit.

2. Select or Add a Text Box

• Click on an existing text box to edit its content, OR

• Click "Insert" → "Text box" from the right-hand menu to add a new text box.

3. Edit the Text

• Click inside the text box and start typing, OR

• Click inside an existing text box to change or replace text.

4. Change Text Formatting Using the Toolbar

Once you have selected text, use the formatting toolbar that appears above the text box:

Basic Text Formatting

• Bold → Click the B button to make text bold.

• Italic → Click the I button to italicize text.

• Underline → Click the U button to underline text.

Changing Text Size and Style

• • Click the dropdown menu (usually set to "Normal text").

  • Select from the following options:

    • • Title – Largest text size (best for main headings).

      • Heading – Slightly smaller than the title (good for section headings).

      • Subheading – Medium-sized text (for subsections).

      • Normal text – Default size for body text.

      • Small text – The smallest text option.

Changing Text Color and Background Highlighting

• Click the A (Text color) icon to open the color picker.

• Choose a new font color for your text.

• Click the Highlight color icon (next to the text color option) to add a background color behind the text.

Aligning Text

• Click the Alignment button (three horizontal lines) and choose:

  • Left align (default)

  • Center align

  • Right align

  • Justify (stretches text to fill the width of the text box).

Creating Lists

• Click the Bullet list (•) button to create an unordered list.

• Click the Numbered list (1.) button to create a numbered list.

Adding Links

• • Highlight the text you want to turn into a link.

  • Click the Insert link (🔗) button in the toolbar.

  • Enter a website URL or select a page from your site.

  • Click Apply to save the link.

5. Save and Publish Your Changes

• Changes save automatically, but you must click Publish (top-right corner) for the changes to appear on the live site.

Tips for Effective Formatting:

✅ Use headings and subheadings to structure content clearly.
✅ Choose text colors that are easy to read on your site’s background.
✅ Use bullet points or numbered lists to make information easier to scan.

1. Open Your Google Site

• Go to Google Sites.

• Select the site you want to edit.

2. Add an Image to Your Page

Option 1: Using the Insert Menu

• Click on the page where you want to add an image.

• On the right-hand panel, click "Insert" → "Images".

• Choose one of the following options:

  • Upload: Select an image from your computer.

  • Select Image: Choose from Google Drive, Google Photos, or search for free images.

Option 2: Drag and Drop

• Drag an image directly from your computer and drop it onto your Google Site.

3. Resize an Image

• Click on the inserted image.

• Small blue circles (handles) will appear around the edges.

• Click and drag a corner handle to resize while keeping the image’s proportions.

• Click and drag a side handle to stretch or compress the image.

4. Adjust Image

• Click and drag the image to move it to a new location.

• Use the alignment options (left, center, right) in the toolbar to adjust positioning.

• Click the image, then select the crop icon (✂️) to trim the image.

• Click the uncrop icon [ ] for it to automatically adjust to its borders.

5. Replace an Image

• Click "Replace image" if you want to swap it with a different one.

6. Add Image Settings 

• Click the image to access additional options:

  • Add a link (to make the image clickable).

  • Set as background image (for a section).

7. ADD Alt Text for Accessibility

Alt text (alternative text) helps visually impaired users understand the content of an image.

• Click on the image.

• Click the three-dot menu (⁝) in the floating toolbar.

• Select "Add alt text".

• Type a brief but descriptive explanation of the image. (Example: "Library bookshelf with colorful books.")

• Click Apply.

8. Publish Your Changes

• Click Publish to save the updates to your live site.

Tips for Using Images Effectively

✅ Use high-quality images to keep your site looking professional.
✅ Keep image file sizes small to avoid slowing down your site.
✅ Always preview your site to check how images appear on different devices.

You can upload PDFs/DOCs to Google Sites so visitors can view or download them easily. Follow these steps to add a PDF to your site.

1. Upload the PDF/DOC to Google Drive

Open Google Drive:

• Go to drive.google.com on your computer.

Upload the PDF/DOC to your Drive.

Select the PDF/DOC you want to share:

• Locate the PDF file you want to share.

• You can either right-click on the file or select it and then click the "Share" button (it looks like a person with a + symbol).

Change General Access:

• In the "Share" dialog box, look for "General access."

• Click the dropdown arrow next to the current access setting (it might say "Restricted").

• Select "Anyone with the link" and next to it make sure it says "Viewer" and not editor if it is public.

Copy the Link:

• Click "Copy link."

• Click "Done."

2. Hyperlink the PDF in Google Sites

Option 1: Link Text to the PDF

1. Open Google Sites and go to the page where you want to add the link.

2. Highlight the text and click the Insert link (🔗) button in the toolbar.

3. Paste the Google Drive link you just copied.

4. Click Apply.

✅ Tip: Use clear link text like “Download the Event Guide (PDF)” instead of just “Click here.”

Option 2: Insert a Button for the PDF

1. Click Insert → Button in the right panel.

2. Name the button (e.g., “View PDF” or “Download PDF”).

3. Paste the Google Drive link as the button’s URL.

4. Click Insert and move the button where you want it.

✅ Why Use a Button? Buttons stand out and make it easier for visitors to find important PDFs.

Option 3: Embed the PDF for Direct Viewing

Instead of just linking, you can embed a preview of the PDF:

1. Click Insert → Drive in the right panel.

2. Select the PDF file from Google Drive.

3. Click Insert to add it to the page.

4. Resize the embedded PDF as needed.

📌 Note: Users can scroll through the PDF directly on your site without downloading it!

3. Publish and Test the PDF Link

• Click Publish to save your changes.

• Click the link or embedded PDF to ensure it opens correctly.

Notes on Accessibility

All PDFs added to your public website should be accessible to ensure everyone can read them. To improve accessibility:

✅ Use text-based PDFs instead of scanned images.
✅ Ensure the document has a clear heading structure before converting it to a PDF.
✅ Add alternative text (alt text) for any images within the PDF.
✅ Use tagged PDFs for screen reader compatibility.
✅ Check your PDF with an accessibility checker before uploading.

For more details on creating accessible PDFs, view information under Accessibility Resources.

1. Open Your Google Site

• Go to Google Sites.

• Select the site where you want to add a button.

2. Insert a Button

• Click on the page where you want the button.

• In the right-hand panel, click "Insert" → "Button".

• A pop-up will appear where you can:

  • Enter the button label (e.g., "Learn More" or "Contact Us").

  • Paste a URL (for an external link) OR

  • Select a page from your Google Site (for internal navigation).

• Click Insert to add the button.

3. Resize and Move the Button

• Click and drag the button to move it around the page.

• Use the blue resizing handles to adjust the width of the button.

4. Style the Button

After inserting the button, use the toolbar to customize its appearance:

Button Style Options

• Filled – A solid color button (default).

• Outlined – A button with just a border.

• Text – A simple text-only button without a border.

Aligning the Button

• Click the button and use the alignment toolbar to position it:

  • Left

  • Center

  • Right

Stacking Multiple Buttons

• Add multiple buttons and align them in a row or stack them vertically to create a clean layout.

5. Publish and Test the Button

• Click Publish to save your changes.

• Preview the site and click the button to ensure it directs users to the correct link.

Best Practices for Buttons in Google Sites

✅ Use clear, action-driven labels (e.g., “Sign Up,” “Get Started,” “Explore More”).
✅ Ensure enough contrast between the button color and background for readability.
✅ Test buttons on mobile and desktop to confirm they are easy to click.

1. Open Your Google Site

• Go to Google Sites.

• Select the site where you want to add a hyperlink.

2. Select the Text to Hyperlink

• Click on the text box where you want to add the hyperlink.

• Highlight the specific word(s) or phrase you want to turn into a link.

3. Insert the Hyperlink

• Click the Insert link (🔗) button in the toolbar (or press Ctrl + K / Cmd + K).

• In the pop-up box:

  • For an external website: Enter or paste the full URL (e.g., https://www.example.com).

  • For an internal page: Click Pages, then select a page from your site.

  • For a Google Drive file: Paste the shared link of the document.

• Click Apply to save the link.

4. Test the Link

• Click Preview (👁️) at the top to see how the hyperlink works before publishing.

• Click the link to ensure it redirects to the correct page.

5. Publish the Changes

• Click Publish to make the hyperlink live on your site.

Step 1: Add Headings to Your Page

1. Click where you want a section to be linked.

2. Select the text and change it to a heading:

   • Click the Text box tool (if needed).

   • Highlight the text you want as an anchor.

   • In the toolbar, change the text style to Heading or Subheading.

Step 2: Insert the Table of Contents Widget

1. Click Insert in the right-hand panel.

2. Select Table of Contents under the Components section.

3. The Table of Contents will automatically detect all headings on the page and create links to them.

Step 3: Adjust the Table of Contents (Optional)

• Click the Table of Contents box to adjust the formatting.

• Use the settings gear to choose whether to show/hide certain heading levels.

Step 4: Publish and Test

1. Click Publish in the upper-right corner.

2. Open the live site (not just the preview).

3. Click any link in the Table of Contents—it will now jump to the corresponding section.

1. Open Your Google Site

• Go to Google Sites.

• Select the site you want to edit.

2. Access the Navigation Settings

• In the top-right corner, click "Settings" (gear icon).

3. Adding Pages to the Navigation Menu

Add a New Page

• • • In the left-hand Pages panel, click the "Add page" button.

    • Name the page and click "Done".

    • The new page will automatically appear in your navigation menu, based on the layout you chose.

Add an External Link

• Click the "Add link" button in the Pages panel.

• Enter the URL of the external site and give it a name.

• Click "Done" to add the link to your navigation menu.

4. Organizing the Menu Items

Drag-and-Drop for Reordering

• To change the order of the pages in the navigation menu, click and drag the page title to your preferred position.

Create Subpages (Dropdown Menu)

• To create a subpage under a parent page, simply drag the page you want to appear as a subpage underneath the main page title.

• The subpage will appear as a dropdown menu item in the navigation.

5. Edit or Remove Menu Items

Edit a Page Name or Link

• In the Pages panel, click the three-dot menu next to the page you want to edit.

• Select "Rename" to change the page title or "Edit" for more options.

Remove a Page or Link

• Click the three-dot menu next to the page or link you want to remove.

• Select "Delete". This will remove the page from the navigation menu and from your site.

6. Save and Publish Your Changes

• Once you've organized the navigation menu, click Publish to make the changes live on your site.

Tips for Organizing Your Navigation Menu:

✅ Keep it Simple: Limit the number of top-level pages to avoid overwhelming visitors.
✅ Use Clear Labels: Make sure page names are concise and descriptive.
✅ Group Related Pages: Use subpages to keep related content grouped together.
✅ Test the Menu: Preview your site to ensure the navigation menu works well on both desktop and mobile devices.

1. Open Your Google Site

• Go to your Google Site.

• Select the site where you want to add an announcement banner.

2. Enable the Announcement Banner

• Click the Settings (⚙️) icon in the top-right corner.

• Select Announcement banner from the dropdown menu.

• Toggle Show banner to the on position.

3. Customize the Banner

• Message: Type the text you want to display.

• Button/Link (Optional): Add a clickable URL for more information (e.g., a news page or event details).

• Banner Color: Choose a background color that stands out.

• Placement: Decide if the banner should appear on all pages or only the homepage.

4. Save and Publish

• Click Close to save changes.

• Click Publish to apply the banner to the live site.

1. Open Your Google Site

1. • Go to Google Sites.

   • Select the site you want to edit.

2. Access Version History

1. • In the top-right corner, click on the three-dot menu (⁝).

   • Select Version History from the dropdown menu.

3. View Previous Versions

1. • A panel will open on the right, showing a list of saved versions with timestamps.

   • Click on a version to preview what your site looked like at that time.

4. Restore a Version

1. • Once you find the version you want, click the Restore this version button at the top.

   • Confirm your choice if prompted.

5. Publish the Restored Version (If Needed)

1. • If your site is already published, restoring a version won’t automatically update the live version.

   • Click Publish in the top-right to make the restored version public.

Things to Keep in Mind:

• Restoring a version replaces the current version, but you can always go back to other versions if needed.

• If you only need specific content from an older version, you can copy and paste instead of restoring the whole site.