Would you like to use Divi's mask and background pattern overlay?
With the last version of background mask and background pattern feature of Divi, you can create unique Hero sections for your Website. A hero section is the first section of your Website and that's the first thing your visiteurs see before scrolling your Website, so it’s important to be eye-catching!
This article will show you how to create five unique background masks and pattern overlays that you can apply to a background image to create truly stunning Hero Sections.
This tutorial will cover the essential steps needed to create each Hero section and give you the tools you need to create a striking Hero section for your website in minutes.
Let's start!
Preview
Here's a quick overview of the five Hero Sections we'll be creating in this article today.
Download DIVI now!!!
The designs are subtle, simple and yet impactful.
Read also: Divi: How to use the "Gradient Builder" to beautify your images
Create a new page with Divi Builder
To get started, you will need to do the following:
From the WordPress dashboard, go to Pages > Add New to create a new page.
Give it a title that makes sense to you and click Use Divi Builder
Then click Start Building (Build From Scratch)
After that, you will have a blank canvas to start designing in Divi.
Five examples of background mask and pattern overlays to apply to a background image
First, let's create the Hero section
All of our sample designs use the same section, row, and column structure, so let's set them up now.
1. Create a layout structure
Add a row to your page, then click the green "+" icon to show the column structure and select the first column, the full-width column.
2. Add Section Spacing
Now that we've defined our row and column, it's time to add some spacing to the section.
On the Spacing tab, update the following:
- Desktop: 400 pixels (Top and Bottom)
- Tablet: 200 pixels (Top and Bottom); 25px (Left and Right)
- Phone: 50 pixels (Top and Bottom); 25px (Left and Right)
Hero Section Design #1
Let's design the first Hero section.
Download DIVI now!!!
1. Add header text
Click on the gray “+” icon to bring up the module library. Scroll to text and click to load.
Enter the title text, then under the tab Heading text, configure these settings:
- Heading Font: Work Sans
- Text Color: White #ffffff
- Heading Text Size:
- Desktop: 3 em
- Tablet: 2,2 em
- Phone: 1.4em
2. Add Button Module
Add a button and configure these settings:
- Under the tab Contents: Find out more
- Under the tab Alignment, choose: Center
- Click on Use Custom Styles For Button then configure:
- Button Text Size:
- Desktop: 20px
- Tablet: 16px
- Phone: 14px
- Button Text Color: #ffffff
- Background: #1d1d1d
- Button Border Width: 0
- Border Radius: 0
- Letter Spacing: 3 points
- Button Font: Work Sans
- Font Style: TT
- Button Text Size:
3. Add a background image
Now that our contents is configured, it's time to start designing the background of the section.
- Go to the background toggle and click on the 3rd tab, the image tab, then click on “Add Background Image”.
- This will bring up your media library, where you can select a photo or upload a new one.
- Once you've selected your photo, click the "Upload an Image" button in the lower right corner.
4. Add a background pattern
Now that we've set up our background image, let's add a pattern.
- In the tab background, navigate to the 5th tab, the tab Background Pattern, then click “Add Background Pattern”.
- Select tufted from the drop-down menu and configure these settings:
- Pattern Color – rgba(255,255,255,0.31)
- Pattern Transform: none
- Size : Actual Size
- Pattern Repeat Origin: Top Bottom
- Pattern Repeat: Repeat
- Blend Mode: Normal
5. Add background mask
Now that we've set up our background image and pattern, let's add a background mask.
- In the tab background, navigate to the 6th tab, the tab BackgroundMask, then click “Add a Background Mask”.
- Select Bean from the drop-down menu and configure these settings:
- Mask Color: rgba(0,0,0,0.36)
- Mask Aspect Ratio: horizontal rectangle
- Size: Stretch to Fill
So ! You now have a beautifully designed Hero section.
Section Hero #2 design
Now let's design the second hero section.
1. Add a background image and set the blending mode to Overlay
Select your background image, set the blending mode to Overlay and add an overlay color of rgba (10,10,10,0.64).
2. Add a background pattern
Now that we've set up the background image, let's add a background pattern.
- In the Background tab, go to the 5th tab, the tab Background Pattern, then click “Add Background Pattern”.
- Select tufted from the drop-down menu and configure these settings:
- Pattern Color – rgba(255,255,255,0.09)
- Pattern Transform: none
- Size: Cover
- Pattern Repeat Origin: Top Left
- Pattern Repeat: Repeat
- Blend Mode: Normal
3. Add background mask
Now that we've set up our background image and pattern, let's add a background mask.
- In the tab background, navigate to the 6th tab, the tab BackgroundMask, then click “Add Background Mask”.
- Select Does not from the drop-down menu and configure these settings:
- Mask Color: rgba(0,0,0,0.36)
- Mask Transform: None
- Aspect Ratio: horizontal rectangle
- Mask Size: Stretch To Fill
- Mask Blend Mode: Normal
Section Hero #3 design
Now let's design the third Hero section.
1. Add a background image and set the blending mode to Overlay
Select your background image, set the blending mode to Overlay and add an overlay color of rgba (10,10,10,0.39).
2. Add a background pattern
Now that we've set up our background image, let's add a background pattern.
- In the tab background, navigate to the 5th tab, the tab Background Pattern, then click “Add Background Pattern”.
- Select Diagonal Stripes 2 from the drop-down menu and configure these settings:
- Pattern Color – rgba(0,0,0,0.06)
- Pattern Transform: none
- Size : Actual Size
- Pattern Repeat Origin: Top Left
- Pattern Repeat: Repeat
- Blend Mode: Normal
3. Add background mask
Now that we've added a background image and a pattern, let's add a background mask.
- In the tab background, navigate to the 6th tab, the tab BackgroundMask, then click “Add Background Mask”.
- Select Triangles from the drop-down menu and configure these settings:
- Mask Color: rgba(10, 10, 10, 0,61)
- Mask Transform: none
- Aspect Ratio: horizontal rectangle
- Mask Size: Stretch To Fill
- Mask Blend Mode: Normal
Section Hero #4 design
Now let's design the fourth section of Hero.
1. Add a background image
Select your background image.
2. Add a background pattern
Now that we've added our background image, let's add a background pattern.
- In the tab background, navigate to the 5th tab, the tab Background Pattern, then click “Add Background Pattern”.
- Select Smiles from the drop-down menu and configure these settings:
- Pattern Color – rgba(0,0,0,0.2)
- Pattern Transform: none
- Size: Cover
- Repeat Origin: top left
- Pattern Repeat: Repeat
- Pattern Blend Mode: Normal
3. Add background mask
Now that we have our background image and pattern applied, let's add a background mask.
- In the tab background, navigate to the 6th tab, the tab BackgroundMask, then click “Add Background Mask”.
- Select Corner Lake from the drop-down menu and configure these settings:
- Mask Color: rgba(10, 10, 10, 0,61)
- Mask Transform: horizontal
- Aspect Ratio: Horizontal Rectangle
- Size: Cover
- Mask Position: Center Left
- Mask Blender Mode: Normal
3. Configure line parameters
Before we go, this Hero section has unique line styles. Let's set this up.
- Sizing:
- Width: 80%
- Max Width: 800px
- Row Alignment:
- Desktop: Default
- Tablet: Center
- Phone: Center
- Margins:
- Left: 20vw
Section Hero #5 Design
Now let's design the fifth Hero section.
Download DIVI now!!!
1. Add a background image
Select your background image.
2. Add a pattern
Now that we've set up our background image, let's apply a background pattern.
- In the tab background, navigate to the 5th tab, the tab Background Pattern, then click “Add Background Pattern”.
- Select Crosses from the drop-down menu and configure these settings:
- Pattern Color – #ffffff
- Pattern Transform: none
- Size: Custom Size
- Pattern Width: 10px
- Pattern Height: 10px
- Repeat Origin: Top Bottom
- Pattern Repeat: Repeat
- Pattern Blend Mode: Normal
3. Add background mask
Now that we have a background image and pattern applied, let's add a background mask.
- In the tab background, navigate to the 6th tab, the tab BackgroundMask, then click “Add Background Mask”.
- Select Diagonal Pills from the drop-down menu and configure these settings:
- Mask Color: rgba(10, 10, 10, 0,61)
- Mask Transform: horizontal
- Aspect Ratio: Horizontal Rectangle
- Size: Cover
- Mask Position: center left
- Mask Blend Mode: Normal
3. Configure line parameters
Before we go, this Hero section also has unique line styles. Let's set this up.
- Sizing:
- Width: 80%
- Max Width: 800px
- Row Alignment:
- Desktop: Default
- Tablet: Center
- Phone: Center
- Spacing:
- Margin (Right): 18vw
See also: Divi: How to add masks and background patterns to a header
Conclusion
Designing a unique and eye-catching Hero section for your website is easy with the new options background and pattern mask by Divi. Each feature has many options that allow you to create truly creative backgrounds.
Plus, you can add background patterns and masks to any Divi Builder item! The design options are endless.
Hopefully this technique will add another useful design skill for future projects.
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.
Do not hesitate to also consult 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.
...
