Adding object “tiles” to a website
One of the easiest-to-use features of Google Sites is the ability to add in “tiles” of information to the website, and to be able to rearrange those however you see fit. The tiles can be text boxes, images, links to live Drive files, or even embeds to Google products (YouTube, Calendar, or Maps).
Table of Contents:
- Adding text to a website
- Adding images to a website
- Adding Drive files to a website
- Adding divider to website
- Adding Google Embeds to a website
Adding text to a website
To add an object in a tile to a website, double-click on edit area and a window will pop up:
Click on the center of it to add a tile of text to your website.
You can adjust the size of your text tile by dragging on the blue circles on either side. Gridlines will appear which will set the limits to where you can place the edges of the text box:
By adjusting the text box to one side of the screen, you can actually double-click in the “open” area (or drag an existing tile) and add another text box next to it and create pseudo-columns:
You can go through formatting options on the text:
You can also click on the three dots on the right to bring up more options:
You can easily duplicate or delete your tile of text by holding your mouse over the text section and using the icons that appear on the left side of the screen:
If you click on the palette icon, you can change the tile background:
If you click on “Image”, you can add an image to your background tile of text, and you can choose to either upload an image or select from their own gallery:
Here is a tile of text with a background added to it:
Adding images to a website
To add images to your site, double-click in an open area and select the top part to insert an image tile:
This can be somewhat confusing. Click on “Image” if you want to select an image from your own Google Drive or search online images. If you already have a downloaded image and want to upload it, click on the right part to upload your own image.
When the image uploads, you have options with the image. You can crop or un-crop the image with the buttons, or you can drag the blue circles on the corner to resize/crop the image (it will not distort the image).
Adding Drive Files to a Website
You can insert/embed files from Google Drive into your site as well in a tile (Docs, Slides, Sheets, Forms, or Charts). Double-click on an open area of the page and the familiar circle pops up:
Click on “From Drive” and a new window will open up on the right side. The folders are displayed first with individual files beneath them. You can select multiple files to insert at the same time, too.
When the Drive file inserts, you can resize the file, delete it, or open the file in a new tab.
You can also put two Drive files side-by-side by rearranging the tiles to fit:
You can insert almost any kind of Drive file into Google Sites by clicking on the options to the right and selecting a type of Drive file:
If you input a Google Slides, you can change the settings to allow auto playback when the webpage is loaded:
Inserting a Google Sheet will give you the option to display which tab in the sheet is displayed by default:
A Google Form can be added to Sites, though there are no additional options available:
You can also insert a chart from Google Sheets into your Google Sites by clicking on the “Charts” icon:
It will then pop up a list of your spreadsheets. Select one that has a chart in it (it won’t insert anything if it has no charts) and select the chart you want. It can now be resized and moved like any other tile:
Adding Divider to Website
To add a horizontal divider to a website, click on the right side where it says “Components” and select “Divider”:
It will now add a horizontal line to the page that you can drag around as you wish. Here you can see the horizontal lines on your side of the website:
Here is what it will look like on the published website:
If you want to move or delete either of the horizontal dividers, hover your mouse over the divider and drag it up/down to where you want it. You can also delete it by hitting the trashcan button that appears only when you hover your mouse over the horizontal line.
Adding Google embeds to a website
You can embed a YouTube video into a Google Site by clicking on the “Google Embeds” on the right side of the screen
When you put a YouTube video into the site, you can either use your own URL or search for an existing one:
When you add in the YouTube tile, you can resize it with the blue edges or hit the gear icon to adjust the YouTube settings:
You can insert a Calendar by hitting the “Calendar” embed on the right. A window will pop up on the right and allow you to select a calendar:
Click on the calendar and hit “Insert” at the bottom. You can resize it with the blue circles or click on the gear icon to bring up more options
Multiple options for displaying are available for Calendars:
You can also insert a Google Map by selecting “Map” on the right side. When you do, a window will pop up:
You can type in the “Enter a location” box or you can zoom in to a specific place and put a placemark (see the image I pasted in the upper right-corner) on the map. Zoom in by holding down the “Ctrl” button on your keyboard while scrolling up/down with your mouse:
Click on the screen to drop a placemark. You can move the placemark by selecting it and dragging it to wherever you want it. The bottom of the placemark will have an “X” to show that it is being moved:
You can resize, move, or delete the tile by dragging the edge circles or clicking on the buttons at the top:
You can also tile all of these different Google Embeds the same way you would any other entry on your Google Site:
