Setting Global Styles (Colors, Typography, & More)

TIMESTAMPS:

00:20: building & setting a home page (to better visualize changes to global styles)
03:00: what are global styles?
03:58: locating global styles
04:50: global styles panel
06:54: changing colors – using built-in color palettes
08:22: undo/redo buttons
08:48: changing colors – using custom colors
13:45: changing colors – elements
15:47: global typography styles
21:00: global layout styles
22:00: global block styles

WHAT ARE GLOBAL STYLES?

Global styles are used across your website, and are used if block-specific formatting or styling isn’t added (see “block styles/settings”). The theme you are using defines your global styles initially, and you can update the color palette, typography settings, and layout using the site editor.

BEFORE YOU UPDATE YOUR GLOBAL STYLES:

This process is easier if you have your home page set up. It’s recommended to create a home page using one of the built-in page patterns first, set it as your home page, and then continue on with this tutorial.

1. HOW TO ACCESS YOUR SITE’S GLOBAL STYLES:

Navigate to Appearance >> Editor
The screen that pops up should be the page you’ve set as your home page
Click the home page to access the editor. Access Global Styles by clicking the circle icon that’s half full and half empty:

Access Global Styles with the circle icon in the toolbar

2. CHANGING GLOBAL COLORS:

A. USING A PREMADE COLOR SCHEME

Our themes have several premade color schemes built-in that you can change to with a simple click.
When you have “Global Styles” open, click “Browse styles”
Select the color scheme you want
If you like the way it looks, save to push the update live.

B. USING CUSTOM COLORS

When you have “Global Styles” open, click “Colors”
Click into “Palette”
You have two options: 1) change theme colors or 2) add custom colors. Changing the 1) theme colors is fastest, as the colors of the patterns that come with your theme will also be updated. Adding 2) custom colors will simply make those colors easily accessible when you’re styling blocks, but won’t update any of the patterns.
To update 1) theme colors: click the 3-dot icon >> show details >> choose the color you want to change and update the hex code.
Click “done” when satisfied, followed by “Save” if you want to push the changes live.

NOTE:

As of right now, there is no way to restore only one of the original colors; you have to restore them all to default. To see a list of the original hex codes used for your theme, view the Theme Color Palettes.

C. UPDATING GLOBAL ELEMENT COLORS

When you have “Global Styles” open, click “Colors”
Under “Elements”, change the colors of any of the listed elements. You can use color palette colors, or enter custom HEX code values.
If you like the way it looks, save to push the update live.

3. CHANGING GLOBAL TYPOGRAPHY:

When you have “Global Styles” open, click “Typography”
Choose the Element you want to edit
Change the font family, sizing, casing, and more for each Element.
If you like the way it looks, save to push the update live.

4. CHANGING GLOBAL LAYOUT STYLES

Note: we recommend using caution when changing anything here.
When you have “Global Styles” open, click “Layout”
Change any dimensions you want to edit
If you like the way it looks, save to push the update live.

5. CHANGING GLOBAL BLOCK SETTINGS

Note: we recommend using caution when changing anything here.
When you have “Global Styles” open, click “Blocks”
Open the Block you want to edit styles for & make any changes
If you like the way it looks, save to push the update live.