Studio Editor: Adding and Customizing Text

5 min read
The Studio Editor makes it easy to add text that looks great on every screen. There are various types of text elements you can use for your content, all fully customizable and already responsive.
An example of several different text elements on a live site
In this article, learn how to:

Adding text

Add new text elements from the Add Elements panel, on the left side of the Studio Editor. There are several different types of elements you can add, depending on the content you want to show. 

To add text:

  1. Click Add Elements on the left side of the Editor.
  2. Click Text.
  3. Drag a text element on to your page:
    • Text Themes: These are titles and paragraphs that match your site's theme, as defined in the Site Styles panel .  
    • Titles: Choose a beautiful title from our many pre-designed suggestions.
    • Collapsible Text: These elements are great for long text – some of the text is hidden, so it's easier to read. You can choose whether visitors either click a link to view the full text, or a button to expand it on the current page.
    • Text Mask: These elements are perfect for short pieces of text that should stand out. The background (fill) of your text is either an image, a video or a gradient, so it's much more noticeable and attention-grabbing.  
  4. Click Edit text and type your text.
The Text tab of the Add Elements panel has been opened in the Editor. The cursor is clicking a themed text type to add it.
Spell check:
The Studio Editor uses your browser's spell check whenever you add text to a site. You don't need to enable it, simply start typing inside a text element to see it in action. If you can't see spell check working, make sure it is enabled in your browser. 

Designing and formatting text

Formatting helps to organize your text for clearer communication. Align, bullet or number your text to keep it neat. Make the text bold, italicized, underlined or highlighted so it stands out. You can format and style your text differently per breakpoint so it looks ideal for every screen.

To format your text:

  1. Select the relevant text element in the Editor.
    Tip: Hold the Shift key on your keyboard to format multiple text elements at once.
  2. Click Edit Text.
  3. (In the Inspector) Format your text using the available tools:
Hyperlink the text:
Select a text element and click the Link icon . You can redirect visitors to other parts of the site, an external web address, a phone number or an email. It can even open a lightbox, which is a pop-up window you can tailor to any purpose.
A screenshot of a text element and the design options in the Inspector panel

Changing the bullet or numbering color

Make your lists more interesting by choosing one color for the text, and a different one for the bullet points or numbering. 

To change the color of your bullet points or numbers:

  1. Click the relevant text box.
  2. Click Edit Text.
  3. Choose a color for your bullets or numbers:
    1. Highlight the entire text inside the text box (including any bullets or numbers).
    2. Select the color you want.
      Note: At this point, the entire text changes to the selected color.  
  4. Choose a different color for the text:
    1. Highlight the relevant text (without its bullet / number).
    2. Select the color you want.
      Note: The text changes to the new color, but the bullet or number stays the color you chose in step 3.

Did this help?

|