Studio Editor: Managing Your Site Styles

5 min read
Manage the site's text styles, colors and page transitions, all in one place. This is a great way to save time and ensure your design is consistent. 
A GIF showing all the tabs in the site styles panel
In this article, learn how to:

Editing the typography styles

Customize and save 9 typography styles to use across the site - 6 headings (H1 - H6) and 3 paragraph styles. Change the font, color and formatting of each style to match the look you want to achieve. 
H1 - H6 are heading tags that are automatically assigned to these titles. Keeping the top-down hierarchy of your titles, in accordance with the heading tags, helps both SEO and accessibility. 

To update a typography style:

  1. Click Site Styles  on the left side of the Editor.
  2. Click Typography.
  3. Click the Edit typography icon  next to a style.
  4. Customize the typography as you wish.
    • Adjust the font, size and color.
    • Make your text bold or italicized.
    • Make the text scale proportionally to the visitor's screen. When the toggle is enabled, you can also set a min and max font size.
    • Set the line and character spacing for the text.
  5. Click Apply.
The typography tab in the site styles panel, editing the Heading 1 theme
Using heavy custom fonts?
Enable the Optimize site loading with default fonts toggle at the bottom of the panel. This instructs the visitor's browser to temporarily display a quick-to-load default font, until the custom font fully downloads.
The toggle you need to click in the Studio Editor to enable default fonts to load first

Adding text styles to a page

Your themed titles and paragraphs are available for you to use from the Add Elements panel. Click Text and drag the relevant style under Text Themes to the desired location. 
A screenshot of the text themes available in the Add Elements panel

Applying a style to a text element

You can also apply a typography style on an existing text element on the page. Click Edit Text on the element and select the relevant style from the Theme drop-down in the Inspector
A screenshot of the Design section in the Inspector where you can apply a typography style to a text element
If you change an element's font, size or color after selecting a style (theme) for it, you're creating a "design override". This means that any updates to the chosen style don't apply to this text element.
However, you can always re-apply the style on a text element with overrides. Open the Theme drop-down and click Reset Changes at the bottom. 
Clicking the option to reset changes for a text element and re-apply the chosen typography style

Changing the site colors

Define the color palette of the site. The color palette is divided into categories to reflect the different uses and parts of the site. For example, the action colors are often used on buttons and links.  
You can customize the main color of each category, or a specific shade in a palette.
This action instantly affects the elements with the color you want to change. For example, any themed elements you added, or other elements you used this color on.

To change the site colors:

  1. Click Site Styles  on the left side of the Editor.
  2. Click Colors.
  3. Choose what you want to do:
    • Adjust a specific shade: Hover over the shade and click the Edit icon .
    • Change a color: Click the Edit color range icon next to the color.
A screenshot of the colors tab in the site styles panel, hovering over a shade to edit it

Adding a page transition

Add a page transition to make the navigation experience more engaging for visitors. Once you choose a transition from the Site Styles panel, it appears on every page of the site. 

To add a page transition:

  1. Click Site Styles  on the left side of the Editor.
  2. Click Page Transitions.
  3. Select a transition from the list:
    • None: No transition is shown when visitors move between pages.
    • Out-In: The current page fades out and the new page fades in.
A screenshot of the page transitions tab in the site styles panel

Did this help?