fbpx

Need Help?

Here are some good places you cant start.

Join the Community

Whats New?

Get updated about all the good stuff!

Masks and Patterns Background

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.

  1. Go to Unlimited Elements Widget Library
  2. Click on the Background Widgets option in the sidebar menu.
  3. 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

1
Apply Mask

Enable / Disable Mask

2
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
3
Color

Color of the Mask

4
Position

Set the position of the mask.

5
Size

Set the size of the mask

  • Cover
  • Contain
6
Flip Horizontally

Enable horizontal flip for mask.

7
Flip Vertically

Enable vertical flip of mask.

8
Opacity

Set the opacity for the pattern layer.

9
Hide on Breakpoint

Hide the pattern under a certain screen resolution.

Pattern Settings

1
Apply Pattern

Enable / Disable Pattern.

2
Pattern Type
  •  Greek Key
  • Rombs
  • Honey Comb
  • Squares
  • Latisse
  • Diamonds
  • Damask
  • Jumbo Dots
  • Scale
  • Geometric Circles
  • Circles Dots
  • Chevron
  • Romb
  • Zin
  • Floral
3
Color

Color of the Pattern.

4
Position

Set the position of the pattern.

5
Repeat

Set the repetitiveness of the pattern.

6
Flip Horizontally

Enable horizontal flip of the pattern.

7
Flip Vertically

Enable vertical flip of the pattern.

8
Opacity

Set the opacity for the mask layer.

9
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. 

  1. Background
  2. 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.

Video Overview

Download is just a click away

Get instant access to tons of Elementor goodies, completely FREE!

Hurray!

You got FREE access to the worlds leading widgets for Elementor page builder!