When the new version of Google Sites first came out you had very limited options to style it but that’s all changed and now you can use themes to not only style the way you want it but to save and share those styles between sites.
In this post, I’m going to show you all the options now available in themes. We’re going to work with this simple website.
Themes lives in the top right-hand corner of the page. When you click on it you will see the preset themes, “Simple” to “Impression” but most importantly we know have the custom section at the top.
Here, you can either create a new theme by clicking on the plus button, or upload a theme from another site by clicking on the upload arrow button.
Creating a theme
First, you give your theme a name. You then have the option to add a logo at the top of your site and a banner image, which will appear as a header background. To add the images just click on the image icons with a plus.
Choose “Upload” to upload an image from your computer, select to choose one from your Drive, and remove to delete an image you’ve already added.
Once you’ve added the images you want, click Next and now you have the option of setting the main colours you want on your site. You can either use a preset combination or you can customise the colours yourself, maybe to match a corporate brand.
If you choose to customise them, you can either click on one of the coloured circles, which will open up a colour palette and pick a colour form there, or if you want to create a specific colour you can enter the hexadecimal colour code. These are the three principal colours on your site.
Click “Next” to select the fonts. Here, you can set the font for the titles and headers, independently from the body text. Click on the font name and pick the font you want from the drop-down list. Click Create theme to do just that.
You will see that the style of the page has already changed pretty dramatically from the original page above. You will see that the theme we just created is stored on the right-hand side menu, under Themes.
Editing a theme
We can edit a theme and define far more options than the basic ones above. In the Themes section, click on the 3-dot menu on the theme. Then click “Edit”.
The A icon lets us edit the fonts and the palette one the colours, similar to what we saw above. But the real power is below where we can edit the colours, texts, images, navigation, and components, like buttons, in more detail.
Editing the colours
Click on the section called Colours to open it.
Clicking on a circle icon will open the colour palette, where you can choose either colours from the standard palette or from ones linked to the theme.
The style section lets you create up to three styles where in each style you can control the colours for the background, titles and headers, and the body text.
When you go to add a section, you can select one of the styles, saving you having to set the components individually every time.
Here, I’ve set up the five text types and below is how they appear.
You can also click on the eye icon to see what the text will look like, so you don’t have to change it then go to the web page to try it out.
Editing the texts
Under Colours, there are the text settings.
Here you can find a range of text settings per text style. For example, above are the settings for Normal text.
Click on the drop-down menu to change the text type, then edit the settings you want.
For example, above you can see you can create a wide variety of text styles.
Editing the images
Next, there are a few image settings.
Header and logo we saw earlier in the initial edit section but here you can also adjust the readability of text over the image, plus anchor the image so that a certain side of it is shown. Useful when you have an image that is larger than the space it occupies and you want to show a certain part of it.
You can also add a favicon, which is a little icon on the browser tab.
Editing the navigation
Next, is the navigation section.
The option “Colour when scrolled” changes the background colour of the navigation bar when the page being scrolled. For example, here it changes to back. There’s also the option to make it transparent.
Next, you have the option of what a selected page looks like on the navigation bar.
The above two options are “Bold” and “Background colour”. You can also highlight the active page, with a foreground colour or by underlining it. This is if you are using a top navigation bar.
If you choose to use a side navigation bar, you also have the options “Shading”, and “Line beside”. The difference between “Shading” and “Background colour”, is that “Shading” will add a background colour which covers the entire width of the menu bar (as above), whereas “Background colour” just adds a background colour to the word.
Editing the components
The final part, gives you the ability to edit the buttons, dividers, links, and image carousel. There are three styles and each style has these options. Here are all the options:
Let’s look at the buttons first.
Above, we have an example of a Filled button, Outlined button, and Text button.
We can add three different colours.
Next, we have two simple divider controls.
One controls the colour and the other the width of it.
Next, links can have a different colour.
The final option is to change the colour of the active dot on the image carousel.
Using the styles
As you can see above, when we add a section, just with a click on one of the styles, we can quickly change the look of the sections, buttons, etc.
Duplicating a theme
It’s very easy to duplicate a theme, just click on the 3-dot menu of a theme and select Duplicate theme.
This will create a new theme card and will prompt you for a name.
Importing a theme
Click on upload a theme icon on the right.
Select the Google Site with the theme you want.
Then select the theme within that site.
This adds a theme card to the sidebar.
Clicking on it will change the current theme and look. Note, this will change the look of all the pages on your site. It’s a great way to copy styles from previously made websites, to help have a standard look to them.
All the above is simple to use and can allow you create the look you want for your website.
To learn more about how to use Google Sites, check out my book “Step-by-step Guide to Google Sites”, available on Amazon here.
a
