Skip to main content
All CollectionsEditorProcess optimization
Text Styles: Setup and Management
Text Styles: Setup and Management

Learn about the "Text Styles" feature that helps you efficiently manage text style settings such as size and font.

Saika avatar
Written by Saika
Updated over 2 weeks ago

What is The Text Styles?

Text Styles allow you to register and manage a collection of text-related settings (like font and size) in one place.

By registering Text Styles, you can quickly apply pre-set styles to new text without having to search for fonts or adjust sizes each time. This feature offers several benefits:

  • Maintains design consistency across your entire site

  • Ensures unified designs when working in teams

  • Allows bulk editing of applied text styles

Note: Currently, registered styles cannot be applied to Rich Text Boxes.

When to use Text Styles:

  • To maintain consistent font styles across your website

  • To efficiently manage frequently used text styles like headings and body text

  • To ensure design consistency within your team

Stylable Elements

  • Letter spacing

  • Line height

  • Size

  • Font

  • Weight

  • Italic

  • Underline

Note: Alignment, color, and shadow are set individually for each text box.

You can view registered Text Styles in the Style Panel on the left side of the editor screen.

Checking the style panel

How to Register a Style

Setting up styles for frequently used elements like headings and body text can streamline your workflow.

  1. Select Text
    Select the text with your desired size and font settings.

  2. Register Style
    Hover over [Style] in the style bar at the top of the screen, then click [Register as Text Style]. Edit the style name and click [✔️] to add the new style to the style panel.

Registering styles using the Text Style feature

Tips:

  • Use descriptive names like "Heading 1" or "Body Text" for easy identification.

  • You can also add preset default styles for a quick start. Click [Add Default Styles] in the Style Panel.

Text style presets

How to Apply and Remove Styles

How to Apply Styles

  1. Select Text
    To select multiple texts, hold Shift while clicking text elements.

  2. Select Style to Apply
    Hover over [Style] in the style bar at the top of the screen and select the style you want to apply.

Applying registered styles to text

How to Remove Styles

Applied styles can be removed at any time. After removal, the text will retain its current font, size, and other values.

  1. Open Style Panel
    Open the style panel on the left side of the editor screen.

  2. Select Text Box to Remove Style
    Click the remove button in [Style] located in the style bar at the top of the screen.

Editing Styles

Registered styles can be edited at any time. Changes will apply to all text using that style.

  1. Select Box with Applied Style

  2. Enter Edit Mode
    Hover over [Style] in the style bar at the top of the screen, then click the blue style name to enter edit mode. After making changes, click [Done] to save.

Editing registered styles

Deleting Registered Styles

You can delete registered styles at any time. Font, size, and other values will remain on applied text after deletion.

  1. Open Style Panel
    Open the style panel on the left side of the editor screen.

  2. Select Registered Style to Delete
    Click the three-dot menu in the top right of the style details screen and select [Delete Style].

Deleting registered text styles

Checking Where Styles are Applied

The Style Panel on the left shows which boxes and pages use each Text Style.

Checking Applied Boxes: Hover over a Text Style in the Style Panel to highlight applied boxes.

Viewing areas where text styles are applied

Checking Applied Pages:

  1. Open Style Details Screen
    Open the style panel and click on a text style to view its details screen.

  2. Check [Usage]
    [Usage] shows the pages where the style is applied. Selecting a page will display it on screen.
    Return to the style panel list, and hover over the text style to highlight boxes where it's applied.

Checking pages where text styles are being used

Setting Styles for Responsive Design

  1. Switch Breakpoint
    Click outside the screen and select a breakpoint (tablet, mobile, etc.) from the responsive bar at the top of the screen.

  2. Enter Edit Mode
    With the text box selected, hover over [Style] in the style bar at the top of the screen, then click the blue style name to enter edit mode.

  3. Adjust Responsive Styles
    After adjusting the styles, click [Done] to save.

Changing text size for tablet view

Frequently Asked Questions

Q: What happens when I copy-paste a text box with a registered style to another project?

Q: Are Text Styles included in version control?

A: Yes, Text Styles are part of our version control feature, which saves changes and allows for restoration when necessary.

Did this answer your question?