Studio, Partners & Enterprise

Wix Studio

Studio Editor: Adding and Customizing Text Masks

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.

Go to our Wix Studio Academy to check out additional Wix Studio webinars, tutorials, and courses.

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:

Click Add Elements
on the left side of the editor.
Click Text.
Click Text Mask.
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.
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:

Select the text mask element in the editor.
Click Change Text.
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:

Select the text mask element in the editor.
Click the Open Inspector icon
at the top right of the editor.

A screenshot of opening the Inspector panel in the Studio Editor.

Under Design, choose how you want to design the text mask:

Set an image or video fill

Select Media under Fill.
Click the Change Media box next to the slider.
(In the Media Manager) Select a new image or video.
When ready, click Change Background.
Drag the slider to adjust the fill opacity.
(Optional) Enable the Apply Color Overlay toggle to add a layer of color on top of the background. You can set the overlay opacity and choose how to blend it under Blend Mode.

Using a video background?

Visitors can play / pause the video on the live site by clicking the text. This is automatically enabled, and cannot be switched off.

Set a gradient background

Select Gradient under Fill.
Click the Change Gradient box next to the slider.
(In the Custom Color panel) Choose the type of gradient you want:
- Linear, Radial or Conic:
  1. Click the Gradient icon
    at the top.
  2. Choose the gradient type from the drop-down: Linear, Radial or Conic.
  3. Design the gradient by adjusting the colors, angle and focal point.
- Fluid:
  1. Click the Fluid Gradient icon
    at the top.
  2. Design the gradient by adjusting the colors and setting the size and spread of each color.

Format and align the text

You can find all of the formatting options under Text in the Inspector:

Font: Choose a different font from the drop-down.
Styles: Make the text bold, italicized, underlined or add a strikethrough.
Alignment & formatting: Align the text to the left, center, or right, and choose the text direction (e.g. left to right).
Line height & character spacing: Change the spacing between lines
and characters
.
Heading tag: Choose the relevant tag for the text (e.g. H1, P, Div, Blockquote) to improve the site's accessibility and SEO.

Accessibility tip:

If this text mask element is purely decorative, meaning it does not include important information for screen readers, select the checkbox next to Decorative. This hides the element from screen readers and changes the heading tag to 'Div'.

Change the text capitalization

Under Capitalization in the Inspector, you can decide when to use capital letters on the text:

Uppercase
: The entire text appears in capital letters.
Title case
: The first letter of each word is a capital letter.
Lowercase
: The entire text appears in small letters.
None
: The capitalization goes by the text you enter in the Change Text panel.