How to Design a Custom Theme on Google Sites

 

Create a Theme on Google Sites

Head to Google Sites, sign in, and open a site. In the sidebar on the right, select the Themes tab at the top. Expand the Custom section if necessary and click the plus sign to create a theme.

You’ll then set up the base of your theme in just three easy steps.

Give your theme a name and optionally attach a logo or banner image. Click “Next.”

Choose a color palette from one of the preset options or click “Customize Colors” to use your own. To pick specific colors, you can select three from the drop-down boxes or enter the Hex codes. Click “Next.”

Select the fonts for titles and headings along with the body text. Use the drop-down lists of fonts to see previews of each style along with variations like light or bold. You can also click “More Fonts” at the top of the list to see Google’s larger selection of font styles. Click “Create Theme.”

Note: You can change both the color palette and font styles you select during the setup process later if you like.

You’ll then see your theme appear in the sidebar, ready for you to customize the remaining elements.

Customize Your Theme

As with other Google applications, any changes you make as you customize your theme are saved automatically.

Note: At the time of this writing, themes you set up and customize are not available for other sites you have or create on Google Sites.

At the top of the sidebar, you’ll see the name of your theme with a couple of icons for fonts and colors. If you want to change those you picked during setup, just select the corresponding icon.

Colors

Along with the basic theme colors, you can choose those for the background, titles and headings, and body text. Click “More Options” at the bottom of the Colors section to view all available options.

For each of the text types, you can choose a color and conveniently see a preview. Click the Eye icon next to any of the options for that preview.

Text

Next, you can review the font styles, sizes, alignment, line spacing, and more. Expand Text and choose a style like Title, Heading, or Normal Text in the top drop-down box.

After you make changes to any of the text styles, click the Eye icon to the right to see how your choices look.

Images

The Images section lets you select or upload a Header, Logo, and Favicon.

Pick “Select” to choose an image from Google Drive or Photos, by URL, or using a Google image search. Or pick “Upload” to choose an image saved on your device.

Navigation

In the Navigation section, you can select the background color for when pages are scrolled and decide if you’d like the top navigation transparent.

Then, you can pick the top or side navigation appearance for when a page is selected. You can choose from options like bold or underline, foreground or background color, or a line beside. Like the above sections, click the Eye icon for a preview.

Components

Finally, you can adjust other components for your site. These include buttons, dividers, links, and the image carousel. So you can pick the colors, line weight, and active dot where applicable.

And of course, there are the Eye icons again for you to preview each choice you make.

Edit, Copy, or Delete a Theme

You can change your theme’s name and customizations, duplicate it, or delete it altogether.

Click the Themes tab in the sidebar and expand Custom. Click the three dots to open the Theme Options and then choose an action.