Create new forms by framing backgrounds and using positive and negative space. Background masks are set above your background elements, below your content. They work by framing your background colors, gradients, photos, and videos. You can transform backgrounds into unique creative layouts in a matter of no time. Masks are created using SVGs, which means they’re extremely crisp, lightweight, and adapt to any device size.
Let’s look at each of the options in the “Masks and Patterns Background” below.
Install Background Widget
This widget requires Unlimited Elements PRO version installed and activated on your WordPress website.
- Go to Unlimited Elements Widget Library
- Click on the Background Widgets option in the sidebar menu.
- Hover over the Masks & Patterns Widget and click install
Design Background
Before adding the Unlimited Background it is important that we design our section with some background so we have what to mask later on in the next section. You can choose to add a background image, video, or slideshow according to your preference.
Add Unlimited Background to Section
Select edit page section in Elementor >> Go to Style tab >> Go to Unlimited Background option >> Select the background type as “Masks & Patterns”
Mask Settings
Apply Mask
Enable / Disable Mask
Mask Type
- Abstract Polygon
- Arrow
- Blobs
- Circles
- Circle Corner
- Creative
- Hexagons 1
- Hexagons 2
- Diagonal
- Hexagon Corner
- Hive
- Organic
- Pointer
- Psychedelic
- Puzzel
- Rectangles
- Slices
- Swirl
- Squares
- Triangles
- Wave
Color
Color of the Mask
Position
Set the position of the mask.
Size
Set the size of the mask
- Cover
- Contain
Flip Horizontally
Enable horizontal flip for mask.
Flip Vertically
Enable vertical flip of mask.
Opacity
Set the opacity for the pattern layer.
Hide on Breakpoint
Hide the pattern under a certain screen resolution.
Pattern Settings
Apply Pattern
Enable / Disable Pattern.
Pattern Type
- Greek Key
- Rombs
- Honey Comb
- Squares
- Latisse
- Diamonds
- Damask
- Jumbo Dots
- Scale
- Geometric Circles
- Circles Dots
- Chevron
- Romb
- Zin
- Floral
Color
Color of the Pattern.
Position
Set the position of the pattern.
Repeat
Set the repetitiveness of the pattern.
Flip Horizontally
Enable horizontal flip of the pattern.
Flip Vertically
Enable vertical flip of the pattern.
Opacity
Set the opacity for the mask layer.
Hide on Breakpoint
Hide the mask under a certain screen resolution.
Set Background Location
In some cases, you may want to move the background widget in front of your content. Determine the placement of the background by changing the setting to your liking.
- Background
- Foreground
Usage Examples
Here are some live use cases for the Masks and Patterns Background widget.
Mask with opacity over a background image.
Below you can see some of the shapes you can make with the masks.
