How to Customize Theme in Google Sites: Change Colors, Fonts, Layouts, and More
How to Customize Theme in Google Sites: Change Colors, Fonts, Layouts, and More
Embedded Files
Create your website with designer-made Google Sites template
Change colors
Change colors
How to Change Background and Font Colors in Google Sites
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.
Change Font
Change Font
How to Change Fonts in Google Sites
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:
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.
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.
- You can modify fonts for different text elements like:
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)
Images (Logo & Favicon)
How to Customize Images in Google Sites
How to Customize Images in Google Sites
Global Headers and Logos:
Navigate to Themes > Edit Theme > Images.
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.
Navigation style
Navigation style
How to change 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.
Components
Components
How to Customize Components in Google Sites
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.
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.
Spacing
Spacing
Spacing & Layout Customization
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.
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.
Quick FAQs
Quick FAQs
How do I change Google Sites’ background color?
Go to Themes > Edit Theme > Colors, then adjust the Background Color option.How do I change Google Sites’ background color?
How do I change fonts in Google Sites?
Go to Themes > Edit Theme > Text, then modify Title, Heading, or Body Text fonts. Use More Fonts to load Google Fonts.How do I change fonts in Google Sites?
Page updated
Google Sites
Report abuse