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.
How can I access my site styles?
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.
Tip:
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:
- Click Site Styles
on the left side of the Editor. - Click Typography.
- Click the Edit typography icon
next to a style. - 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.
- Click Apply.
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.
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.
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.
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.
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.
Tip:
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:
- Click Site Styles on the left side of the Editor.
- Click Colors.
- 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.
- Adjust a specific shade: Hover over the shade and click the Edit icon
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:
- Click Site Styles on the left side of the Editor.
- Click Page Transitions.
- 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.
Did this help?
|