Alright! Finally! The Google Sites theme editor is now available! This means we can create custom Google Sites themes and apply it to the entire website.
Now we can make design changes faster. Instead of editing fonts, colors, and interactive elements page by page, we can change the style in one click.
That is awesome!
Let's discover what Google Sites theme editor has to offer.
In This Article
Getting Started: Quick Start Wizard
To use Google Sites you don't have to pay anything. It also doesn't have hidden payments for using some parts of the builder. The only thing that you may want to purchase is a custom domain, although Google Site will provide you with a free one. You can buy your new domain from Google Domains. Very convenient.
The Theme Editor found its home in the Theme tab on your right-hand panel, right above the default themes created by Google.
When you click the tile, you'll meet a quick start wizard. First, it will ask you to give your new theme a name, a logo, and a banner image. Too early for a logo and a banner, if you ask me, but instead of skipping this step, which is allowed, let's fulfill the requirements to see what happens.
Next, Google Sites ask you to pick the color palette of three default colors that will be used throughout your site. You can choose from default templates or create a custom palette.
I suggest you should choose any and move one because this palette can be (and should be) edited later when you have a testing page. Right now, it's too hard to decide which one suits you as you can see the colors in action.
Coming up next are the font settings. And it's a hard choice! Google offers hundreds of awesome free fonts and we have to pick only two — for title and headings and body text.
Designers recommend using only one font family for the website. However, if you Google "font pairings" you'll find an uncountable number of font combination ideas. But leave it for later. Right now, let's choose only one and move on (warning: choosing font pair can take hours!).
Let's click the "Create theme" button and see what happens!
We probably made different presets so we'll see different results, but here's what I see…
Well… it's ugly…
The colors are a failure, the fonts are awful… not the fonts themselves, but the order.
I bet you aren't happy with what you see either.
So, let's brush up our themes and explore the main theme editor with all its settings. In the end, we'll have a nice clean Google Sites theme.
The quick-start wizard turned out to be an evil sorcerer.
Colors and Styles
What we see here are the color presets for three styles. Each Google Sites theme has three styles that you can switch between. Styles work for blocks independently, so one block can be Style 1 and another one Style 2. It's convenient when you want to highlight an important block.
Considering this, it's smart to have two styles with opposing colors and one neutral.
So let's see what's here.
Default
This one is for setting up the default background for the styles where the background is not set. We don't care much about this setting. Let's just make it white.
Style 1/2/3 color settings
All styles have the same color settings:
Background
Titles and headings
Body text
Looks simple and straightforward, but I have to warn you, you can spend up to two hours configuring these settings. It's really hard to work with colors and color combinations.
Try to make it clean or search the internet for perfect color combinations.
My choice for this theme is:
Style 1 (White):
Background: #ffffff
Title: #212121
Heading: #212121
Subheading: #4c5052
Normal text: #3c4043
Small text: #3c4043
This combination mimics Think with Google website. Not 100% precise, but somewhere close.
Style 2 (Dark):
Background: #121212
Title: #f5f5f5
Heading: #f5f5f5
Subheading: #f5f5f5
Normal text: #bdbdbd
Small text: #bdbdbd
Dark mode (dark themes) can look different, it's not necessarily black-and-white. They can be cold or warm and can have bright colors for important elements. But for this article, I'll go with classics.
Style 3 (Colors):
Background: #ea4435
Title: #ffffff
Heading: #ffffff
Subheading: #ffffff
Normal text: #ffffff
Small text: #ffffff
I need a style with colors — a bright one to stand out. So I picked the red color (tomato, to be exact). It goes well with white, black, and gray shades. Perfect match.
Let's see what we have now!
Much better, huh!
Time to fix those fonts.
Text Settings
The first thing you have to note and remember here is that you have to choose the text style before making the changes. I found this annoying, but nothing is perfect.
Here's what you can edit:
Font. Google provides hundreds of them for free.
Size. I love BIG headings!
Format. Bolt or Italic.
Align. You know what it is.
Line spacing: Don't go below 1.25 for the normal text, I'm begging you.
Paragraph spacing. To make more space between paragraphs. BTW, titles and headings are also paragraphs.
I want to use big headings! However, my blog is SEO-first (I don't run ads — too lazy), so I'll be using many words in the Title and the Headings. I need to be careful with font size.
I don't like using text formatting anywhere except for body text. For me, formatting is a good way to highlight or stress out important words or phrases.
And I like air in the text, so I'll leverage paragraph spacing as much as I can.
Wanna see what I got? Here you go!
Now I feel better! It's still not perfect on the demo, but it will feel fantastic on the live website.
For those, who are curious, here're my settings:
Title: font - Inter Normal, size - 44, no formatting, align - left, line spacing - 1, paragraph spacing - 0/0.
Heading: font - Inter Normal, size - 30, no formatting, align - left, line spacing - 1, paragraph spacing - 30/0.
Subheading: font - Inter Normal, size - 20, no formatting, align - left, line spacing - 1, paragraph spacing - 30/0.
Normal text: font - Inter Light, size - 16, no formatting, align - left, line spacing - 1.25, paragraph spacing - 20/0.
Small text: font - Inter Light, size - 10, no formatting, align - left, line spacing - 1.25, paragraph spacing - 10/0.
To make things easier, I decided to use only one font family, but you can experiment with pairings. But don't take more than two.
That's not the end of the game, though. We have more things to look into.
Images Settings
These settings are pretty straightforward. Here you can:
Set up the header image. This will apply a chosen image to all covers. Convenient, if you don't want to configure each cover (same as a header in Google Sites) for every new page. Here, you can also set up the readability automation and anchoring.
Add a Logo. It adds a logo to your website. On the top left corner. Adding a logo can also be done via global settings.
Favicon. Adds a favicon. Simple as that. Duplicates the global settings.
Navigation Settings
The most important thing about navigation settings you have to keep in mind is the fonts: the main nav is using Normal text settings. You can't configure the font and its style separately here.
But here's what you can change:
Navigation background. You can pick any color.
Transparency. You can make the main nav transparent at the top of the page or not.
Selected page font style. Choose the font style of the selected page: bold, underline, font color, shade. You can configure settings for both menu styles: top menu and side menu.
Selected page background. You can specify the color for the background of the selected page.
This is how the main nav can look with the selected page background highlighting.
That's it.
The only thing I can add here is the advice to NOT make the main nav transparent.
Components Settings
The fun with three styles returns!
In this section, we can configure the look and feel of the following interactive and graphic elements:
Buttons
Dividers
Links
Image carousels
For each of the three styles separately.
Buttons
As you probably know, the buttons have three styles:
Filled — filled with color
Outlined — transparent inside but with colored lines
Text — no lines, only text
And you also know that buttons are the most important interactive elements of any website — they lead to key events like purchases, registrations, subscriptions, or more information.
This means they have to be visible and eye-catching.
With this in mind, try to give your buttons the colors that make them stand out in your color palette. For mine, I'll use the same colors as I did for the theme styles, but will mix them up.
For Style 1 (White) I'll use
Filled: #121212
Outlined: #ea4435
Text: #ea4435
I don't use outlined buttons often just because I don't like the way they look, so the color here doesn't mean much to me.
As for the filled, I'm using black, because when I use #ea4435 (red) Google Sites give me black color for the button text and I can't change the text color to white.
However, red is perfect for the text buttons.
Here's how it looks.
Good enough to me.
As for the Style 2 (Black), I'll go:
Filled: #ffffff
Outlined: #ffffff
Text: #ea4435
No rocket science here.
And for the Style 3 (Color) it will be:
Filled: #121212
Outlined: #ffffff
Text: #ffffff
Thin black lines on the red background are pretty hard to read. Uncomfortable. So I take white. However, the black buttons look great.
Dividers
Dividers help you separate important areas of your page. But they are not important elements by themselves. So, they have to be visible, but not steal the eyes.
For my theme, I'll use the same colors as I used for the text.
Style 1 (White) divider:
Color: #bdbdbd
Line weight: 1
Style 2 (Black) divider:
Color: #4c5052
Line weight: 1
Style 3 (Color) divider:
Color: #bdbdbd
Line weight: 1
Links
You can give your links the color of your desire. That's it. Try to use the same colors as for the buttons.
My choice is predictable for the white and black styles. However, I decided to go wild with the red style and made my links black. This makes them really stand out, but uncomfortable for the rest of the text. But, I never use bright blocks with links anyway, so why not.
Image carousel
The only configuration you can change here is the Active dot color. It's… the color of the dot.
Seriously, who cares about the Active dot color! Just pick any color.
Google Sites Custom Theme Examples
Time to see our themes in action! I've created several pages with different combinations of my block. Here they are. Sorry for the glitch with the screen selector.
Closing
So! We made it!
Now you know how to create your own Google Sites theme.
But some questions remain unanswered. Amazing that you have me to help you with them.
Can I use a custom theme for another new website?
Yes! Recently, Google Sites developers added an import feature that lets you apply previously created custom theme to any Google website associated with your Google account.
Can I use custom themes for multiple sites?
Yep! The theme sticks to your Google Sites account. Sharing your theme is easy.
Does the custom theme copy if you make a copy of the website?
Yes! If you make a copy of the Google website with a custom theme it will also copy. And that's amazing!
How can I share my custom Google Sites theme with others?
The only way to share your theme at the moment is to let other people make a copy of the website with your custom theme.
Alright, folks, this is it. See you around!
