Studio Editor: Adding and Customizing Text Masks

6 min read
Text masks are a great tool for short pieces of text intended to grab visitors' attention. You can set the text background (fill) to an image, a video or a gradient, so it's much more noticeable on the page. 
A GIF with an example of a text mask element with a video fill
In this article, learn how to:

Adding a text mask element

Head over to the Add Elements panel to add a new text mask element. Choose a design you like and drag it onto the page - you can fully customize it later, from the Inspector panel. 
Best practice:
We recommend adding up to 10 text masks per page, to ensure the best site performance on mobile.

To add a text mask:

  1. Click Add Elements  on the left side of the Editor.
  2. Click Text.
  3. Click Text Mask.
  4. Drag a text mask design you like onto the page.
    Tip: Some of our designs include a video background. Hover over a design in the panel to see it in action. 
  5. Enter the text that should appear on this element:
    1. Click the new text mask you just added.
    2. Click Change Text.
    3. Enter the text you want to appear.
The video preview you see when hovering over a text mask in the Add Elements panel

Changing the text on a text mask

Edit the text that appears on the text mask at any point. Using the Enter key on your keyboard, you can create the amount of rows you need for the text. 

To change the text on a text mask:

  1. Select the text mask element in the Editor.
  2. Click Change Text.
  3. Enter the text under Add your own text.
A screenshot of the change text panel where you enter the text you want to appear
Tip:
Control the capitalization of the text from the Inspector panel. For example, you can make the entire text uppercase or lowercase (see "Designing a text mask element" below). 

Designing a text mask element

From the Inspector panel, you can adjust the existing design of the text mask or create one from scratch, based on your needs. You can add an interesting media / gradient fill, change the spacing between letters and rows, and much more.

To design a text mask:

  1. Select the text mask element in the Editor.
  2. Click the Open Inspector arrow  at the top right of the Editor.
  3. Scroll down to Design.
  4. Choose how you want to design the text mask:

Did this help?

|