The “Mask and Pattern Background Widget” allows you to create unique backgrounds using masks and patterns for free in WordPress Elementor websites. This widget enhances your design by adding stylish overlays, textures, and shapes to sections or elements. You can customize the mask style, pattern type, colors, and blending options to seamlessly match your site’s aesthetics.
Let’s explore the features of the “Mask and Pattern Background Widget” below.
Elementor Mask and Pattern Background Tutorial Video
Add a Free Mask and Pattern Background to Elementor
This widget requires Unlimited Elements Free 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 a Section Background in Elementor
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 Mask and Pattern Background to Elementor Page 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 in Elementor Mask and Pattern Background
Apply Mask
Enable / Disable Mask
Mask Type
- Abstract Polygon
- Arrow
- Blobs
- Circles
- Circle Corner
- Creative
- Hexagons 1
- Hexagons 2
- Diagonal
- Hexagon Corner
- Hive (Pro)
- Organic (Pro)
- Pointer (Pro)
- Psychedelic (Pro)
- Puzzel (Pro)
- Rectangles (Pro)
- Slices (Pro)
- Swirl (Pro)
- Squares (Pro)
- Triangles (Pro)
- Wave (Pro)
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 in Elementor Mask and Pattern Background
Apply Pattern
Enable / Disable Pattern.
Pattern Type
- Greek Key
- Rombs
- Honey Comb
- Squares
- Latisse
- Diamonds
- Damask
- Jumbo Dots (Pro)
- Scale (Pro)
- Geometric (Pro)
- Circles (Pro)
- Circles Dots (Pro)
- Chevron (Pro)
- Romb Zin (Pro)
- Floral (Pro)
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 Elementor Mask and Pattern Background
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 of Elementor Mask and Pattern Background
Here are some live use cases for the Masks and Patterns Background widget.
Free Mask and Pattern Background for Elementor with Hive Mask Type.
Free Mask and Pattern Background for Elementor with Circles Mask Type.
Some of the shapes you can make with the masks.
Thank you for using the Mask and Pattern Background Widget for Elementor! With its unique masking effects and customizable patterns, this is the best Mask and Pattern Background Widget for Elementor, perfect for adding stylish and creative visuals to your website. If you have any questions or need assistance, feel free to reach out. For more use cases and examples visit the live demo on our website.
