Hi everyone,
In this video I will show you how to
add nice looking buttons and banner with animation
for your Google Sites.
Canva is a graphic design platform that
allows users to create graphics, presentations,
posters and other visual content.
It provides thousands of templates,
clip arts and stock images.
What’s really cool is it provides pro features
that are free for educators.
If you are interested in learning how to
sign up for their free education account,
please check out my other tutorial video link below.
To create a banner for you sites,
go to Canva.com
and click the “Create a design” button on top.
Then type in Google Classroom Banner.
Once you enter the design page
you will see some pre-made templates by Canva.
I just picked the ones I like
and change the text for my site.
So far the banner templates provided
can only be saved as still images
If you want to learn how to
create an animated banner from scratch on Canva,
please watch my other tutorial video.
This video link is also shared in the video description.
Next, I will show you how to make buttons.
Go back to the home page
and hit the “Create a design” button again,
type in “logo”.
This will give you a blank square template
and it fits nicely for round buttons.
I really like the watercolor designs on Canva
and there are so many to choose from.
So I am going to use these designs
as the backgrounds for my buttons.
Go to the “Elements” tab,
type in “watercolor circle”,
or add a specific color word.
You can also filter the elements by colors
by clicking the 3 line icon next to the search bar.
Now that I picked the watercolor “background”,
I am going to add a white circle on top
to complete the look.
I just search “circle” in the “Elements” tab,
then pick a thin open circle.
To change the color of the circle,
just select the circle and click the color icon on top.
I change the color to white so it’s more visible.
Now you can resize, move
and rotate the circle to your liking.
I’ve decided to make this button
for my math resources page,
so I am going to add an animated laptop icon.
You can search “laptop” in the “Elements” tab,
then click the three line icon next to the search bar.
Select “Animated” and “Apply filters”.
You can also flip the animation, resize, and move it.
Next, we will head to the “Text” tab,
and embed the page name on this button.
Change the text color to white so it’s easy to identify.
To make the text look nicer,
you can also change its “effect” to “Lift”.
The next button I want to make is a “contact me” button.
So parents and students can just
click the button and email me.
For this one I will choose
a rounder watercolor background
and add a perfect white dotted circle.
The next button I am going to create
is for my assignments page.
I search “homework” and pick this clipart I like.
Since it’s white color
I want to choose a darker watercolor background
to make it pop.
If you delete an element and add a new one,
you will see that it covers the previous element,
you can right click and “send to back”
so that you will see the element added before this.
I will recommend to download buttons with animation
and buttons with still images separately.
To do that,
click the down arrow button next to “Download”
and change the file type to GIF.
Then select one page at a time
to download the buttons with animation.
I tried to download all GIF buttons at once
but Canva only saved one page.
However, for still images
you can download them altogether.
Select PNG as the file type,
click “Transparent background”
and select all pages you want to save as still images.
Here is an example to show you why
you need to save the buttons
with transparent background.
If you choose to add
dark color background image on your site,
you can see the button fits nicely there.
Unfortunately, this will only work for PNG images.
I haven’t figured out a way to
make a GIF image with transparent background.
If you know how to do that
please share in comments below.
I will really appreciate that.
The next part of this video will show you how to
add the banners and buttons on your google site.
Open sites.google.com.
Once you are on the Sites page,
you can either click the “Create” button
and choose in new Sites,
or click the “New Google Sites” option underneath.
This will bring you to the page
with templates ready to be used.
If you want to start from scratch,
click a blank template.
The first thing you will see is
the home page of your site.
So there are two ways to add your banner,
depending on how you want to
show your banner image.
The first way is to move your mouse over the header
and select “change image”,
then upload your design.
Since mine has transparent background
I will change the theme to get white background.
Notice there’s grey overlay on the banner,
You can make it disappear by clicking the star icon
on the bottom right corner of your banner.
My website name is already embedded in the image
so I will just delete the text in the title text box.
Now when I preview the site page
I see that it’s stretched to fit the whole top part.
But one thing I noticed is
part of the banner will be cut out
if you view the site in tablet mode or cellphone mode.
So I usually use the second method to make sure
my whole banner shows in all three modes.
To do that,
you will first delete the whole header section.
Then select “Images” on the right side
and upload your banner.
Now just drag and resize it
until you see the whole banner image.
With this method,
the image won’t fit the site page
all the way from left to right,
but it will make sure the whole banner
is shown in cellphone mode and tablet mode.
Finally I am going to add the buttons
I’ve just created on Canva.
Choose a layout to your liking,
click each plus sign
and upload your PNG or GIF files.
You can type the page name under each button,
or you can delete the text boxes
if the names are already on the button images.
To link each button to a specific page on my site,
I will need to create new pages.
You can add as many pages as you want
by clicking the plus sign.
After naming each page,
go back to the home page,
and select one button image.
Click the “Insert link” icon on top of the image.
So for my “homework” button
I will choose the “Assignments” page.
For the “contact me” button,
you can enter your email address as a link.
If you don’t want to show
the subpages at the navigation bar,
click the three dots icon next to each page,
and choose “Hide from navigation”.
To make sure visitors can go back to the home page
after I hide the subpages,
I just create another button
and link it to the home page of my Google Site.
Now when you enter the preview mode,
you should be able to click each button
and it will bring you to the designated page.
Thank you for watching my video.
If you enjoyed this video,
be sure to hit the like button
and subscribe to my channel.
Until next time!
