Hello everyone,
When think about create a website by yourself, many of you think that it will be difficult and complicated,
but now there are many tools to build websites that are very easy.
Considering the criteria: easy to use, completely free and stable
, Google Sites is the first choice for people of any level of technology
If your need is to create simple websites such as:
personal profile introduction,
summary page for class materials,
registration information for an event
to introduce an activity, project
or promote a team, agency, or small company…
Not only is it easy and free,
but Google Sites is also quickly integrated
with other applications in the extremely rich ecosystem of Google
With the stable and powerful Google servers, you will also be completely assured that
your website will not have problems such as overload or errors
In this video will show you how to build a specific website
how to decorate your website, create web page layouts
embedding videos, files
or some Add-ons such as clocks, music players, weather feeds to your website
Please see the time table in the video description for quick access to the content you are interested in
Only with a gmail account then you can already use Google Sites
by accessing the following link
or at the interface of Google Drive
click on the 6 circle sign, select Google Sites
The homepage interface of Google Sites is very simple and user-friendly
websites you've created will appear in the area below, or blank if you have never create anything yet
If don't have any idea, you might look at the Template Gallery
for some template sites were designated by Google sites for reference or to use
Or click the plus sign to build and design a new website by yourself
This is your editing and design interface
For example, I want to create a website to present a study project of our team
Firsly, give the site a name
An here is the name for file storage of this Google Sites
When you hover your mouse over the website name you will see a command button to add logo icon
ie brand image elements of the website
You can choose an existing image or upload a logo or avatar image
it will appear next to the site name and in the top navigation bar
What about the Favicon site icon?
It can be understood as a form of the logo, which
is a small icon located at the top of every tab on a web browser like this.
Now we will choose the Themes for Page
Google already have some themes for you to choose
for each themes, it will have more different color choices
you can also change the font
addition to customized based on the templates you can create your own theme
set Theme name, add logo, cover image
Select suggested color scheme or create your own color scheme
Choose font for titles and font for body text
Done, and click Create Theme
Theme set up by yourself then you will be customized in great detail
from the text format to each specific element in each group of elements of the website.
Each theme style also has a default background image for the header cover
You click here to change the cover
from photos uploaded from your device, or from Google's
library, your personal Google Drive image library,
from image links or the search engine
The trick is that you can find and use gif animations
to make your cover design more vivid and interesting, such as these.
If you want to change the display of the image in the cover frame, click here to adjust
Google will also automatically adjust the color to ensure the contrast between the background and the text for you.
Now you write the title of the Page
There will be 4 types of title display
: display only the text title with no background
banner, large banner or large cover
After designing the header, now scroll down to the bottom,
select Add Footer
Page Footer section is usually used to write copyright notices
or include contact information, phone numbers, addresses or other social media links
The Footer section of a Google Site will remain constant in all pages if the site contains multiple pages
At any time you can click the Preview of the website
Google will showing you how the website look like when people view it on different devices:
whether it's a computer, tablet or phone,
Google automatically optimizes so that your interface is balanced and best suited to a variety of screen sizes
As you see now this is the home page of the web,
you can click this plus sign to have the options to create more pages are:
create a new page, create a page link or create a menu of pages
I will explain what's the different between these options
for example, if you choose to create a new page,
name the page
you'll see the new pages created are displayed in list management page
as well as on the navigation bar at the top
Thus when people open website
viewers will know that your website have many separate pages of information.
If you choose to insert a web link
, you will put its display name on the navigation bar and
then insert the link that you want people will be redirected to when clicking on it
The link can be a page created with this Google Site
or any other website like Youtube video or company website, school, for example...
As you can see the icon before each pages, each website has only 1 homepage,
but can have many subpages.
In each subpage, you can also click on the 3 dots icon, to create subpages
Inside the subpage, continue to create branch pages.
Managing pages is like managing folders, folders and files on your computer.
You can drag to move, split and merge pages
to change the content structure of the page
Only the link page can not create subpages.
What about the Menu type here?
With Menu, you still can create a system of sub-pages inside it
but the difference is that it only appears as navigation buttons to move to other sites,
so you don't not need to create content for it
at the 3 dots icon of each page
you can convert subpage to home page
duplicate page,
adjust properties i.e. to rename page,
select advanced to set a shortened path name for the page
or you can hide it, not appear on the navigation bar
or remove it completely
As you can see by default the navigation bar will be on top of the page
you can go to Settings to change it to be vertical
If you select the vertical navigation bar then when in preview mode
you will see it will appear as a slider when you click on the header
Now we will start creating the content for the web page
There are many types of content you can insert:
text, images, code formatting embeds and file uploads from your computer or from Google Drive
For this type of text box,
you can define it is main title or subheading or body text
Change font,
When you click here
you will have more options for fonts from Google
Change the size, bold, italic, underline
change the font color by color suggestions or choose your own color,
insert a link when click on the text
align, remove, line spacing, increase or decrease indents, strikethrough or remove all formatting
For image formats, you can select images in Google Drive , by link
or by search keyword or choose to download directly from your computer
When image has been inserted and you can drag the edges to resize it
or select Crop to zoom the image, and move to select the part of the image to crop
By default, the image is close to the left margin, if you
want to move the image, click to drag and drop to the position you want to change in the frame.
Also, you can insert links into the image to other pages on your website.
or remove or change another image
Adding "alt text format" means creating text that describes the image
in case the image is not displayed on the viewer's device
Or add a caption that appears right below the image
You see now 2 image and text objects created as 2 separate sections
called Sections
For Sections, which can be duplicated, deleted,
or changed the background color of the Section according to the available colors of the Theme, or insert with an image or a picture from your computer.
For example, what if you want the image and text to be on the same section?
Please click and hold the mouse to drag and drop the image to the upper part
If you drop it at the position where the small horizontal bar appears like this
, the image will be dropped above or below the text box of the Section
If you drop it at the position where the vertical bar appears like this
, the image will be dropped to the left or right position of the text box
You can drag the edges to change the size of the text box or the image
section layout will automatically be changed
you can add an image or a text box to any place in the section by dragging and dropping like I just said
Note that many of you are easily confused, instead of dragging and dropping individual objects
, you choose to drag the whole Section like this
addition to image and text, you can insert the file type obtained from your Google Drive
Especially if you insert a PDF page
Then at the Preview, viewer will be able to view PDF files is very easily
Scroll up and down the pages,
zoom in or out or view in a new browser window.
But you must be very careful that,
in order for others to see the file insert from Google Drive like this
then that file in Google Drive must be change the privacy mode that allows viewing public
if not, the viewer will see an error like this
you can have to add a lot of utilities to your website if you
can take advantage of the Embed feature here
If it's as simple as embedding a web page link,
just paste the link here,
for example a school website, an agency, a newspaper page, from dictionary wikipedia…
When you embed a link on a website in this way,
the viewer will be able to work directly with the web page you have embedded
, without being redirected to a new browser window
If you know a little about embedding code web
then you can add many other interesting utilities to your website
If unot, then I can suggest you some utilities, such as:
a play lists of songs player or a weather feeds embed on the website like this
For example with the music player
I use some music platform such as SoundCloud
choose a playlist fit for your website
In the "Share" button, you have the option to get the embed code,
select the display interface of the music player on the web
select if you want the music will automatically turned on when opening the website or not,
then click on the code, press Cltr + C to Copy
and return to your Google Site
Cltr + V paste the code here and then insert it
Once inserted, in the Preview
you will see that the viewer now has a music player and selection of songs in the list to listen
Most music and audio platforms like Apple Music or Spotify
have a Share button to get the embed code like that.
For this weather feed widget
, I use the tool from the WeatherWidget.io website because It's free,
you just need to specify the location where you want to get the weather information,
customize the font, background color, text color if you want
Done and then click Get Code
copy all this code, then return to the Google Site
paste the embed code and Insert
Now the weather feed has appeared,
you just need to drag it adjust the appropriate size
the information inside will automatically be adjusted to fit the size you want
There are many other useful tools,
but in general, you should not install too many that can affect the website's access speed
If you have no idea about the content layout for the website, there are some Layout templates suggested here.
Then just insert pictures and text
In addition to the basic elements that I introduced, you can add a few other types of components
Type “Collapsible group” here means Expandable slide title
For example, you have a FAQ section, frequently asked questions.
You want that only when people click on a question, the answer will apear
instead of all the answers show up at the same time, it will take up a lot of site space.
Then you will use this type of “Collapsible Groups”.
Just enter the text for the title
and the content for the extension inside when clicking on it
“Table of Contents” Tool will create a table of contents at the top of the page automatically
based on the text boxes you defined. The hierarchy is Title, main heading, subheading…
Text boxes that are defined as either normal text or small text will not be displayed on table of contents
Image carousel feature here,
will let you create a frame displaying slideshow with the arrow
to browse multiple images on a section like this
to create an image carousel, you need to insert at least two image
You can add alt text or alt text or caption to the image like I instructed before
In the editing interface, you can only see the first image,
but when you open it in preview mode, you will see arrows on both sides to switch between images
The tool "Button" here is to create buttons to click to go to other pages
Name the button
Insert link for the button, when it clicked, it will go to which page of this website
The color or font style choices of the button will depend on the theme color set in the Theme that you have selected before
Divider tool is simply to create a horizontal line separating the sections
If you don't know what type of content to create or don't have a file to insert,
you can create a “Placeholder”
to define the layout first,
and then you can Click the plus sign to insert an image or file after
All the tools that support the attacht file below, you can realize that
they are all tools in the same Google system as: YouTube, Google Calendar,
Google Maps or office suites from Google Docs, Google Slides, Google Sheets
With YouTube, you can type keywords to find or paste a known link, insert it into a web page
So viewers will be able to watch this YouTube video directly in your website
without having to open another browser window
Similar with Google Maps,
you can specify any address, get the map area of that address inserted
So in the guest interface,
they can zoom in on the map, move the route view, or view it as a satellite
If you already have the calendars created in Google Calendar
Or in your Google Drive already have files created or viewed by
Google Docs, Google Slides, Google Sheets, you can insert them right here
All these files will be inserted directly from your Google Drive storage you
so please note as I had said before,
check to see if that file in Google Drive has been change the private mode
to public or not, if not, it would be show an error sign when people opens to view the web.
Embedding these applications are similar to each others,
so I will try to embedded Google Forms in here
I will select a Google Forms created in my account, and insert to the website
Adjust size as I want
When open the preview mode,
you will see that website visitors can see and fill out information sheets
or surveys dicrectly on website
without opening Google Forms
And if you don't use Google Forms but use Microsoft Forms, How do you insert it when it's not in the Google ecosystem?
In the sharing section of Microsoft Forms or other survey creation sites,
as long as you get the web embed code to copy,
then you just need to use the code embedding tool that I instructed earlier
So now you have understood all the tools to create content for the website
You should create content for all the pages on your website
If it is too much content to handle you can you can use the sharing & collaboration option of Google Sites
by typing your friend or colleague's email here,
specifying their role as editor of the website,
write a message and invite them to join to create content with you
During the process of building website content, Google will always automatically save it,
you can click here to review the history of all changes that have taken place
and also restore the website to its previous version of any time
Before publishing your site there are a few more settings you need to pay attention to
At “Viewer Tools”
you will find an option: show page last update
When you turn this option on, then at the interface of visitors viewing the site
will see a notation circular letter i at the bottom left corner
when click on it, they will know when the last time website has been updated
when the website is in the process of editing, maintenance
or there is a special event coming up
, you can use the feature to create a Announcement Banner
then write the message, add link and customize the way it is displayed, then click X
you will see that the message is already displayed at the top of the website to get the attention of the viewers
Finally everything is ready, now let's Publish the website
You will be customized a part of domain name of the website
This part of the name is after the fixed part is site.google.com
If your name shows in red, it means someone has used this name and link before
, you can change the name. or try to add a few letters or numbers until it's avaiable
if you have your own domain name then turn you can link Google Sites to it
Choose who can view the published website
that anyone, or some particular person or no one
Select if you want to hide your website from search engines like Google,
then press to confirm Publish
Your site is now public.
You can click here to get the link of your website and introduce and promote it to everyone.
Every time you change something for the website
, click on the arrow,
select "Review Change and Publish" to update and everyone can see the latest version
You can also choose "Publish Setting" to rename the site
If you want the site to go offline then you'll select Unpublish
All the sites you've created will show up in the Google Sites home page,
you can rename the file ,
delete websites completely or organize websites into folders
So I have guided you in great detail all the basic and advanced features of Google Sites
There are many other website builder tools, but I Introduce about Google Sites first
because it's free and very easy to use
Hope you guys can try to create a website for yourself,
and remember to share with me the Google Sites website you've designed