How do I edit a color mask?

Many Splash themes come equipped with a Color Mask element, which most commonly lives in the page's Cover Block. A Color Mask is just a fancy term for the color overlay on top of your image.

Using a Color Mask is a great way to emphasize dynamic text on top of an image, as well as contribute to the overall style of your event page. Check out an example:

No Color Mask (The Before!):

Screen_Shot_2017-03-03_at_10.53.41_AM.png

With a blue Color Mask (The After):

Screen_Shot_2017-03-03_at_10.54.08_AM.png

 

How to edit the Color Masks's color: 

1. Head to your Layout tab in the editing toolbar. 

2. Click into the block you'd like to edit. In the example below, the theme's Cover Block contains a Color Mask element.

3. Locate and click into the Color Mask element.

4. Open the Background menu option.

5. Select a Background Color from your color set.

 

Screen_Recording_2017-03-03_at_11.08_AM.gif

 

How do I edit the opacity of the Color Mask?

1. Locate the "Edit Image" button on the top left corner of your Cover Block.

2. Click on the color box.

3. Click to scroll and adjust the gradient.

Pro tip: Check out the animation below! The on-page slider is another place to edit the color of your Color Mask. Simply click on the color box and select a color from your color set.

 

Screen_Recording_2017-03-03_at_11.54_AM.gif

 

How do I hide a Color Mask?

Hiding a Color Mask is just like hiding any other element on your Splash page. Check out this quick FAQ and our example below.

 

Screen_Recording_2017-03-03_at_11.14_AM.gif

 

How do I add a Color Mask element to a block? (Designer Pro)

Working on a content block that doesn't already have a Color Mask element built in? No sweat! Adding a Color Mask is just like adding any other Designer Pro element to your event page.

1. Head into your Layout tab.

2. Click into the block you'd like to add an element to.

3. Click the circular "+" button underneath the current elements.

4. Search for the element you'd like to add - in this case, Color Mask.

5. In the Layout tab, drag the element to the top of your block. It's important the Color Mask element is first in your list of elements, so that it doesn't prevent buttons from being clickable.

6. Style the element as you please!

Pro tip: You can also adjust the Color Mask's opacity inside the Display menu. This is especially useful since not all blocks with a color mask element will display the on-page slider and edit image button that we saw earlier.

Screen_Recording_2017-03-12_at_04.50_PM.gif

Was this article helpful?
0 out of 0 found this helpful