Would you like to combine background mask settings and pattern transform options Divi to create unique backgrounds?
Background designs are a great way to give your Website visual flair and stand out from the crowd. The new Background Mask and Pattern Transform settings from Divi can be combined in many ways to create these background patterns.
In this article, we will see how to use background mask and pattern transform settings from Divi to create interesting backgrounds for your layouts Divi.
Let's start.
Preview
First, here's a preview of each example on different screen sizes (phone and desktop).
Read also: Divi: How to use shadow and hover effects to create interactive content
Example 1
Version 1 on desktop
Version 1 on phone
Download DIVI Now!!!
Version 2 on desktop
Version 2 on phone
Example 2
Version 1 on desktop
Version 1 on phone
Download DIVI Now!!!
Version 2 on desktop
Version 2 on phone
Example 3
Version 1 on desktop
Version 1 on Phone
Download DIVI Now!!!
Version 2 on desktop
Version 2 on phone
Divi Background Mask and Pattern Transform Options
Divi's new mask and background pattern features include several options to adjust them. Adjustments include horizontal and vertical flip, rotation and inversion. To see the options, go to the background settings of a section or line and select the Background pattern or Background mask tabs.
Once you've added a pattern or mask, the transform settings appear. Simply click on the options you want to use. We can use them together and in any combination we want.
How Divi's Mask and Pattern Transform Settings Work
The pattern below is Zig Zag with default settings.
We add a Layer Blog mask in the image below. Let's use them to demonstrate how the Background Mask and Pattern Transform settings work.
Horizontal turning
It is the horizontal reversal. We applied the transform settings to both the pattern and the mask.
Vertical flip
This is the vertical flip for the pattern and the mask.
Rotation
This one shows Rotation for pattern and mask.
Reverse
This example shows Invert for pattern and mask.
Background mask and pattern transform combinations
Of course, we can also use transformation parameters in various combinations. Here are some examples.
This rotates the pattern and inverts the mask.
This example uses vertical flip, rotation, and inversion for the background pattern. The background mask uses horizontal flip, vertical flip, and rotation.
For this example, we used horizontal flip and rotation for the background pattern, and vertical flip and rotation for the background mask.
Examples of background mask and pattern transform settings
Next, let's see how these settings can be used with Divi layouts. We'll use one section as a starting point and create three examples. We'll customize it and then use the transform settings to modify it for each example.
For our examples, we are using a modified version of the Hero section of the layout landing page Estate planning available in Divi.
Here is an overview of the section in question. It uses the background color: #92a5ab.
- Background: #92a5ab
Background Mask and Pattern Transform Parameters Example 1
Our first example gives us an arch that sits vertically in the center of the screen. One side of the screen has a tufted pattern. Next, we'll create an alternate version with the arc facing the other way.
background pattern
Open the section settings, scroll down to background and select the tab Background Pattern. Choose Tufted for the background pattern and Inverting for Pattern Transform.
- Background Pattern: Tufted
- Pattern Transform: Reverse
Background Mask
Select tab BackgroundMask and choose Arch for the background mask. Change the mask color to #616d72 and set the mask transform to Invert. This completes our first version of the bow with tufts.
- Background Mask: Arch
- Mask Color: #616d72
- Mask Transform: Invert
Example 1 Version 2
Next, let's create a variation of our design. Just modify the mask transformation for background pattern in horizontal flip and vertical flip. This changes the arch to face the other direction and offsets the pattern, so it doesn't just look like a mirror image.
- Mask Transform: flip horizontal, flip vertical
Background Mask and Pattern Transform Parameters Example 2
For our second example, we'll create an oval in the center of the screen with a pattern inside the oval. Next, we'll change the placement of the pattern. We will also modify this one for different screen sizes.
Background pattern
In the background settings, select the tab Background Pattern and choose shippo for the motive. Set the pattern transform to Invert.
- Pattern Background: Shippo
- Pattern Transform: Reverse
Background Mask
Then select the tab BackgroundMask and change the following settings.
- Background Mask: Ellipse
- Color: #758489
- Mask Transform: horizontal flip, rotation
Tablet and phone
Both the tablet and the phone will use the same settings, so we will only have to change the tablet settings. Select the Tablet tab and modify the mask transformation in horizontal reversal.
- Mask Transform: horizontal flip, inversion
Example 2 Version 2
Next, we'll create the variation for our second example. First, select the tab Background Pattern and set the Pattern Color to rgba(0,0,0,0.06).
- Pattern Color: rgba(0,0,0,0.06)
Then select the tab BackgroundMask and choose Flip Horizontal, Rotate, and Invert for the mask transformation.
- Mask Transform: horizontal flip, rotation, inversion
Tablet and phone
For tablet and phone options, select the icon of the Tablet . Modify the mask transformation in horizontal reversal and inversion. The alternate version of example two is now complete.
- Mask Transform: horizontal flip, inversion
Background Mask and Pattern Transform Parameters Example 3
For our third example of mask and pattern transform settings, we'll use a honeycomb pattern with a paint mask. We will also create a mobile version for this one.
background pattern
First, choose the Device Settings tab and select the Device icon. office. Select tab Background Pattern and choose Honeycomb for the background pattern. Change the Color to rgba(0,0,0,0.42). For this one we will leave the options Pattern Transform deactivated. We will add them for the alternate version.
- Background Pattern: Honeycomb
- Pattern Color: rgba(0,0,0,0.42)
- Pattern Transform: none
Background Mask
Then select the tab BackgroundMask. Choose Paint for the background mask. Change the color to #697b82. Choose Flip Vertical for the mask transform.
- Background Mask: Paint
- Mask Color: #697b82
- Mask Transform: vertical flip
Then select Cover for size. This opens up a few more options. Choose Bottom right for location. That's it for the desktop version. Next, we will create the mobile version.
- Mask Size: Cover
- Mask Position: Bottom Right
Tablet and phone
Then select tab tablet and modify the transformation of the mask background in vertical flip and rotation. This completes the style for our third example. Next, we'll create the alternate version.
- Mask Transform: vertical flip, rotation
Example 3 Version 2
For the alternate version of this example, we'll adjust both the background pattern and the background mask.
background pattern
For the background pattern, change the pattern color to rgba(0,0,0,0.11). Change the pattern transformation to flip horizontal, flip vertical, and rotate.
- Mask Color: rgba(0,0,0,0.11)
- Mask Transform: horizontal flip, vertical flip, rotation
background mask
Then select tab BackgroundMask. Change the color to white and the transformation of the mask to horizontal flip, vertical flip and inversion.
- Mask Color: #ffffff
- Mask Transform: horizontal flip, vertical flip, inversion
Next, change the size of the mask to cover, then choose Center for the position of the mask.
- Mask Size: Cover
- Mask Position: Center
Tablet and phone
Finally choose tab tablet to create the mobile version. Choose tab background mask and select the four mask transform options. This completes the alternate version of the third example.
- Mask Transform: horizontal flip, vertical flip, rotation, inversion
Final Results
Here is an overview of each example with on different screen sizes (Desktop and Phone)
Example 1
Version 1 on desktop
Version 1 on Phone
Version 2 on Desktop
Version 2 on phone
Example 2
Version 1 on Desktop
Version 1 on Phone
Version 2 on Desktop
Version 2 on Phone
Example 3
Version 1 on desktop
Version 1 on Phone
Version 2 on Desktop
Version 2 on Phone
Download DIVI Now!!!
See also: Divi: How to create a team members section as a carousel
Conclusion
This is our look at how to use Divi's background mask and pattern transform settings to create many interesting background patterns.
Since patterns and masks can be used together, their transform settings can also be used together. This opens up many design options, giving you even moretools to add elegance to your Divi backgrounds.
The best way to learn how to use them is to play around with the adjustments and see what you can create.
We hope this tutorial will inspire you for your next Divi projects. If you have any concerns or suggestions, find us in the comments section to talk about it.
You can also consult our resources, if you need more elements to carry out your projects of creation of Internet sites, by consulting our guide on the WordPress blog creation or the one on Divi: the best WordPress theme of all time.
But meanwhile, share this article on your different social networks.
...
