How to add and edit a text mask

Learn how to add and edit a text mask with Wix Studio to create short, attention-grabbing pieces that engage site visitors.

In this tutorial, we'll go over how to add and edit a text mask to create short, attention-grabbing pieces of text. You'll also learn to customize its design and text formatting.

Transcript

Hey, it’s Henry from the Wix Studio team, let’s go over adding and editing a text mask with Wix Studio.

Text mask is a great tool to make short pieces of text grab your visitors' attention.

With a text mask, you can set the fill of up to 450 characters of text to be a video, image or a gradient, so it really pops on your page.

To create a text mask, head over to the Add Elements panel in the Studio Editor.

And that’s how you can create a text mask with the Wix Studio Editor. Check out the Wix Studio Academy for more lessons and tutorials.

Start with one of these curated designs—you can customize it later. Next, edit the placeholder text to say whatever you’d like.

You can resize it by dragging these handles, or by editing the measurements under “Size” in the Inspector panel.

Then change the font the same way as any other text element—by choosing one of these, or by uploading your own custom font.

Now, to design your text mask, select it, click the Inspector and open the Design tab. Select Media here under Fill, and click the Change Media box next to the slider. In the Media Manager, pick the image or video you want to make the background and click Change Fill.

Then drag the slider to adjust its opacity, and if you want, you can use this toggle to add a layer of color on top of the background you just picked.

You also have the option to set the overlay opacity and choose how to blend it, here under Blend Mode.

If you want to set a gradient fill instead, just click Gradient, click the

Change Gradient box next to the slider and in the Custom Color panel, choose the type of gradient you want:Linear, Radial or Conic.

Then design it by adjusting its colors, angle and focal point.

Or, you can choose a Fluid gradient, to add even more colors and individually set each of their sizes and spreads.

All of your formatting options are under Text in the Inspector, like font, styles, alignment and formatting, line height and character spacing.

Text mask is also optimized for SEO and accessibility, so you can change the heading tag to meet your specific requirements.

Lastly, under Capitalization, you can set your text to: all uppercase, title case, all lowercase or none, where the text will follow the capitalization rule you enter in the Change Text panel.