How to Design a Custom Theme on Google Sites - - Windows Tips and Tricks with Geek

Wednesday, November 3, 2021

How to Design a Custom Theme on Google Sites

 Google Sites Custom Theme

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.

Click the plus sign to create a theme on Google Sites

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.”

Name your theme

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.”

Choose the theme colors

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.”

Pick the theme font styles

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.

Theme created on Google Sites

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.

Change the theme fonts or 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.

Adjust the colors


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.

Adjust the text styles


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.

Upload or Select images


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.

Adjust the navigation options


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.

Customize the components

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.

Edit a theme on Google Sites

No comments:

Post a Comment