Build beautiful, unique sections of content for your pages that are sure to grab your visitor's attention. This highly customizable stack allows you to bring your own style through background images and multiple layer-able masks.
Inner Container
You can choose between a fixed-width for the inner portion of the Mask stack or make it fluid. Fluid allows the contents of the Mask stack to stretch out to the full-width, while fixed-width option allows you to set your own maximum width for the inner content.
Inner Max-Width
Set the maximum width you desire for your content in the Mask stack when using Fixed-Width as your inner container type.
Remove Left & Right Padding
When using the Fluid option of the Inner Container setting you are given the option of whether to remove the outer padding on the left- and right-hand sides of the Mask stack's content container.
Mobile, Table & Desktop Height
The Mask stack allows you to not only set a height for the stack at each of the responsive breakpoints, but it also allows you to choose how the height is measured. You can choose from the following height types at each breakpoint:
Hide Top Mask on Mobile
Enabling this feature will hide the masking element(s) at the top of the Mask stack when the page is viewed at the mobile breakpoint.
Hide Bottom Mask on Mobile
Enabling this feature will hide the masking element(s) at the bottom of the Mask stack when the page is viewed at the mobile breakpoint.
Vertically Center Content
When turned on this feature will cause the contents within the Mask stack to center itself vertically between the top and bottom edge of the stack.
Background Overlay
Allows you to add a translucent overlay color that is applied to the Mask stack's background.
Mobile, Tablet & Desktop Style
These three settings allow you to choose the background style for your mask. You can have a different background style at each breakpoint, or allow the tablet and desktop breakpoints to inherit their style from the previous breakpoint's style.
The available options for your per-breakpoint styles are as follows:
Horizontal Origin v2
Choose to have the center, or origin point, for your image be the left, center or right of your image. This allows you to define the focal point of the image.
Vertical Origin v2
Choose to have the center, or origin point, for your image be the top, center or bottom of your image. This allows you to define the focal point of the image.
The Mask stack allows you to insert a mask at the top and bottom of the stack. Each mask type can be used in both the top and bottom locations. You may also mix and match mask types, layering multiple masks together. Below we look at each mask type and their individual settings:
Wave Type
We provide 15 different preset wave patterns to choose from.
Mask Color
The Mask color allows you to choose how the mask will act, by either matching it to surrounding areas on the page to provide a masked appearance, or using different custom options to create layered looks.
Height
Allows you too set a height for the mask.
Point Location
Adjusting this slider will allow you to change the horizontal center point of the Point Down mask is located.
Mask Color
The Mask color allows you to choose how the mask will act, by either matching it to surrounding areas on the page to provide a masked appearance, or using different custom options to create layered looks.
Height
Allows you too set a height for the mask.
Point Location
Adjusting this slider will allow you to change the horizontal center point of the Point Down mask is located.
Mask Color
The Mask color allows you to choose how the mask will act, by either matching it to surrounding areas on the page to provide a masked appearance, or using different custom options to create layered looks.
Overall Height
Allows you too set the overall height for the entirety of the mask.
Left & Right Height
Allows you to set a height for each side independently in order to get a slanted mask effect.
Mask Color
The Mask color allows you to choose how the mask will act, by either matching it to surrounding areas on the page to provide a masked appearance, or using different custom options to create layered looks.
Height
Allows you too set a height for the mask. This also is a determinant as to how round the mask will be.
Mask Color
The Mask color allows you to choose how the mask will act, by either matching it to surrounding areas on the page to provide a masked appearance, or using different custom options to create layered looks.
Zig-zag Type
We provide 10 different preset zig-zag patterns to choose from.
Mask Color
The Mask color allows you to choose how the mask will act, by either matching it to surrounding areas on the page to provide a masked appearance, or using different custom options to create layered looks.
Block Type
We provide 10 different preset block patterns to choose from.
Mask Color
The Mask color allows you to choose how the mask will act, by either matching it to surrounding areas on the page to provide a masked appearance, or using different custom options to create layered looks.
This child stack mask is a bit more advanced as you'll be adjusting each value manually to get different curved masks.
Height
Allows you too set a height for the mask. This also is a determinant as to how round the mask will be.
Left Start Height
Sets the starting position for your curve on the left-hand side.
Curve 1 X and Y Position
These two values allow you to define the position of the the curve handle that is between the left position and the mid-point.
Mid-point X and Y position
These two values allow you to set the position of the mid-point in your curve.
Curve 2 X and Y Position
These two values allow you to define the position of the the curve handle that is between the right position and the mid-point.
Right Start Height
Sets the starting position for your curve on the right-hand side.
Mask Color
The Mask color allows you to choose how the mask will act, by either matching it to surrounding areas on the page to provide a masked appearance, or using different custom options to create layered looks.
You can combine multiple masks, of varying types, colors and opacities, to create truly unique designs for your site. Layering these different masks can add a lot of personality to your page.