Using Text Styles

Styles are reusable visual properties that define the appearance of text, including font, size, and color. They enable centralized management of text appearance across your site.

Applying and creating styles

By default, all text is unstyled. To apply a style:

  1. Select a text element or specific text.

  2. Click Text → Styles in the properties panel.

  3. To remove a style, click the × in the properties panel.

UI showing applied text style

Adding breakpoints

Text styles can adapt to different device sizes using breakpoints.

  1. Click on a text style to open the “Edit Style” modal.

  2. In the Breakpoints section, click Add Breakpoint to add defaults for Desktop (L), Tablet (M), and Mobile (S).

  3. Customize font size, line height, letter spacing, and paragraph spacing for each breakpoint.

Managing styles

To manage styles:

  1. Go to the Assets → Styles section in the left panel.

  2. Create, edit, or delete styles as needed to fit your project requirements.

Assets panel showing text styles within a project

Rich styled text

Apply multiple styles to a single text element using Markdown. To customize specific text within an element:

  1. Select the text you want to modify.

  2. Apply the desired style in the properties panel.

multiple text elements using markdown

CMS text styles

Text styles for CMS elements work the same way. In the properties panel, select any available style for your CMS text elements.

Link styles

To style links:

  1. Select a text layer and navigate to the Link row.

  2. Adjust the Style property to apply link-specific styles.

  3. Customize states such as hover, active, and current.

CMS link styles

Override colors

To emphasize specific text within a style:

  1. Apply the desired text style.

  2. Select the specific text you want to modify.

  3. Use the properties panel to override the color without creating a new style.

Still experiencing the issue after following the steps above? Create a support ticket in the Community.