Editor X: Adding and Customizing Text Masks
Text masks are a great tool for short pieces of text that should grab your visitors' attention. You can set the background (fill) of your text to an image, a video or a gradient, so it's much more noticeable.In this article, learn how to:
Add a text mask element Change the text on the element Resize the text mask Design the text maskAdding a text mask elementHead over to the Add Elements panel to add a new text mask element. Choose a design you like and drag it onto your 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  at the top of Editor X. Click Text. Click Text Mask. Drag a text mask design you like onto your page.
Tip: Some of our designs include a video background. Hover over a design to see it in action.  Enter the text that should appear on this element:
    
Click the new text mask you just added. Click Change Text. Enter the text you want to appear.  Changing the text on a text maskEdit the text that appears on your text mask at any point. Using the Enter key on your keyboard, you can create the amount of rows you need for your text. To change the text on a text mask:
Click the text mask element in your Editor. Click Change Text. Enter your text under Add your own text.Tip:Control the capitalization of your text from the Inspector panel (see Designing a Text Mask element below). For example, you can make the entire text uppercase or lowercase. Resizing a text mask elementYou can always make your text mask bigger or smaller so it perfectly fits your page. There are 2 ways to resize a text mask:
Drag the handles around the element to make it bigger or smaller. Enter the desired measurements in the Size section of the Inspector panel.Designing a text mask elementFrom the Inspector panel, you can adjust the existing design of your 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:
Click the text mask element in your Editor. Click the Inspector icon  at the top of Editor X. Click the Design tab . Choose how you want to design your 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. 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.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: 

Click the Gradient icon  at the top.  Choose the gradient type from the drop-down: Linear, Radial or Conic. Design your gradient by adjusting the colors, angle and focal point.    Fluid: 
        
Click the Fluid Gradient icon  at the top. Design your gradient by adjusting the colors and setting the size and spread of each color. 

    Format and align the textYou can find all of the formatting options under Text in the Inspector:
Font: Choose a different font from the drop-down. Styles: Make your text bold, italicized, underlined or add a strikethrough. Alignment & formatting: Align your text to the left, center, or right, and choose your 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 your text (e.g. H1, P) to improve your accessibility and SEO. Change the text capitalizationUnder Capitalization in the Inspector, you can decide when to use capital letters on your 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.