header-logo
Getting started with WixBuild your website and business with Wix. Try using our AI tools to create your website, customize templates, or hire professionals to build or enhance your online presence.
Creating a websiteRead how to use the Wix Editor and manage content on your site. Discover how to protect your visitors' privacy and make your site accessible.
Account & billingReview your account settings, manage your subscriptions and plans and understand your invoices.
Using the Wix mobile appsUse our mobile apps to run your business efficiently on the go and set up a dedicated app for your site members to stay in touch.
Connecting a domainFollow our step-by step guides to learn how to purchase, connect or transfer a domain for your site, and find out how to keep your site’s data secure.
Managing your businessGet tools to grow your business and web presence. Find the right tools for your specific needs, set up online payments and keep track of your site's analytics.
Promoting your siteLearn to make your site more visible promoting it on search engines, sending emails and running paid ads. Improve your online presence with practical tips.
Studio, Partners & EnterpriseGet the most out of your Studio or Enterprise account with advanced features that'll help you work more efficiently.
Need more help?Find solutions for site performance and technical issues, learn about issues we’re working to fix or contact us for help.
placeholder-preview-image
Wix LearnImprove your skills with our courses and tutorials.
Wix BlogGet tips for web design, marketing and more.
SEO Learning HubLearn to increase organic site traffic from search engines.
Website developmentBuild a custom site using our full-stack platform.
Hire a ProfessionalGet matched with a specialist to help you reach your goals.
placeholder-preview-image
In this article
  • Adding a text mask element
  • Changing the text on a text mask
  • Designing a text mask element

Studio Editor: Adding and Customizing Text Masks

In this article
  • Adding a text mask element
  • Changing the text on a text mask
  • Designing a text mask element
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:

  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 icon  at the top right of the editor.
A screenshot of opening the Inspector panel in the Studio Editor.
  1. Under Design, choose how you want to design the text mask:

Helpmate

Hello

Need a bit more guidance?
Unlock personalized helpLog in to get the most out of Helpmate.