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
Enable / Disable Mask
- 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 of the Mask
Set the position of the mask.
Set the size of the mask
- Cover
- Contain
Enable horizontal flip for mask.
Enable vertical flip of mask.
Set the opacity for the pattern layer.
Hide the pattern under a certain screen resolution.
Pattern Settings
Enable / Disable Pattern.
- Greek Key
- Rombs
- Honey Comb
- Squares
- Latisse
- Diamonds
- Damask
- Jumbo Dots
- Scale
- Geometric Circles
- Circles Dots
- Chevron
- Romb
- Zin
- Floral
Color of the Pattern.
Set the position of the pattern.
Set the repetitiveness of the pattern.
Enable horizontal flip of the pattern.
Enable vertical flip of the pattern.
Set the opacity for the mask layer.
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.
