Make your Google Site stand out. Add modern elements, style images, and more with SitesBuddy

How to Customize Theme in Google Sites: Change Colors, Fonts, Layouts, and More

IN THIS GUIDE

Change colors

Change Font

Images (Logo & Favicon)

Navigation style

Components

Spacing

Change colors

How to Change Background and Font Colors in Google Sites

Where to Start:
Navigate to the “Themes” tab on the right-hand side of your Google Sites editor. Click on the three dots (⋮) beside your chosen theme and select Edit Theme.Customizing Colors:

- Go to the Color section.
- Here, you can change the background color, title color, heading colors, subheading, and body text.
- Choose from predefined color schemes (Style 1, Style 2, Style 3) or select custom colors for a more personalized look.
To publish your changes, at the top right, click Publish.

Pro Tip: Stick to a consistent color scheme for brand cohesion and better readability.

Change Font

How to Change Fonts in Google Sites

Where to Start:
Go to the “Themes” tab, click on the three dots (⋮), and choose Edit Theme > Text.Customizing Fonts:

- You can modify fonts for different text elements like:
  - Title
  - Heading
  - Subheading
  - Body text (normal and small)
- Adjust the font size, format, alignment, line spacing, and paragraph spacing.
- To change the title font, select “Title” from the dropdown, and pick your desired font from the list.

Loading More Google Fonts:
Click More fonts to browse and select from Google’s extensive font library. Choose the font, click OK, and it will be added to your dropdown list for future use.

Images (Logo & Favicon)

How to Customize Images in Google Sites

Global Headers and Logos:
Navigate to Themes > Edit Theme > Images.

Here, you can set a global header image for consistent branding across pages.
Add a Logo and Favicon by clicking the settings cog at the top right of the editor. Under “Brand Images,” upload your logo and favicon.

Pro Tip: Use a favicon to make your website instantly recognizable on browser tabs and bookmarks.

Navigation style

How to change navigation style

To customize navigation:

Go to Themes → click 3 dots → Edit theme → Navigation.
Choose Top or Side navigation mode.
Customize the background color when scrolled or keep it transparent at the top.
Set the foreground color for top/side navigation and customize the color of the selected page.

These settings ensure smooth navigation on both mobile and desktop.

Components

How to Customize Components in Google Sites

Buttons, Dividers, and Links:
In the Components section, you can customize the appearance of interactive elements like buttons, dividers, link colors, and image carousel dots.

Set individual colors for each background or section on your site.

SEO Tip: Ensure your buttons are easily visible and use actionable text like "Learn More" or "Get Started" for better engagement.

Spacing

Spacing & Layout Customization

Density & Site Width:
The Spacing option lets you adjust the spacing between site elements (like images or text blocks) by choosing from compact, cozy, or comfortable layouts. You can also control the overall site width (default, wide, full-width).Frame Option:
The “Show Frame” setting allows you to add a border around your content, helping to focus the user’s attention and giving your site a more structured feel.