With Divi’s latest background mask and background pattern feature release, you can create some unique hero sections for your website. A hero section is the first section of your website and is the first thing your visitors see before scrolling through your website, so it’s important to be eye-catching! Combining Divi’s background image, background mask, and background pattern options allows us to create compelling hero sections so that your website makes a great first impression.
This post will show you how to create five unique background mask 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.
We’ll be using free photos from the Online Course Layout Pack in this example. To use the same images, scroll all the way to the bottom of this post to download the full-res images.
Let’s get started!
What We’ Creating
Here is a quick look at the five hero sections we’ll create in this post today.
The designs are subtle, simple, and yet impactful.
Download the Layout for FREE
If you’d like to download the pre-designed layout design from this tutorial, you will first need to download it using the button below. To gain access to the download, you will need to subscribe to our Divi Daily email list by using the form below. As a new subscriber, you will receive even more Divi goodness and a free Divi Layout pack every Monday! If you’re already on the list, simply enter your email address below and click download. You will not be “resubscribed” or receive extra emails.
Join the Divi Newsletter and we will email you a copy of the ultimate Divi Landing Page Layout Pack, plus tons of other amazing and free Divi resources, tips and tricks. Follow along and you will be a Divi master in no time. If you are already subscribed simply type in your email address below and click download to access the layout pack.
You have successfully subscribed. Please check your email address to confirm your subscription and get access to free weekly Divi layout packs!
How to Download and Use the Layouts
To import the section layout to your Divi Library, do the following:
Once you’ve successfully imported the layouts, they’ll be seen in your Divi Library and will be available for use in the Divi Builder.
Now, let’s get to the tutorial!
What You Need To Get Started
Before we can begin, you’ll need to:
Now we have a blank canvas to start designing!
How to Create 5 Background Mask & Pattern Overlays to Apply to a Background Image
First, Let’s Create the Hero Section
All our design examples use the same section, row, and column structure, so let’s set those up now.
1. Create Layout Structure
Add a row to your page and then click the green “+” icon to bring up the column structure and select the first column, the one fullwidth column.
2. Add Section Spacing
Now that we have our row and column set it, it’s time to add spacing to the section.
Under the Spacing tab, update the following:
How to Design Hero Section #1
Let’s design the first hero section.
1. Add Heading Text
Click on the grey “+” icon to bring up the module library. Scroll to text and click to load.
Type in the heading text and then under the Heading Text tab, configure these settings:
2. Add Button Module
Add a button and configure these settings:
3. Add Background Image
Now that we have our content set up, it’s time to start designing the section background.
4. Add Background Pattern
Now that we have our background image set up, let’s add a pattern.
5. Add background Mask
Now that we have our background image and pattern set up, let’s add a background mask.
Voila! Now you have a beautifully designed hero section.
How to Design Hero Section #2
Now, let’s design the second hero section.
1. Add a Background Image and Set Blend Mode to Overlay
Select your background image, set the blend mode to Overlay, and add an overlay color of rgba(10,10,10,0.64).
2. Add Background Pattern
Now that we have the background image set up, let’s add a background pattern.
3. Add Background Mask
Now that we have our background image and pattern set up, let’s add a background mask.
How to Design Hero Section #3
Now, let’s design the third hero section.
1. Add a Background Image and Set Blend Mode to Overlay
Select your background image, set the blend mode to Overlay, and add an overlay color of rgba(10,10,10,0.39).
2. Add Background Pattern
Now that we have our background image set up, let’s add a background pattern.
3. Add Background Mask
Now that we have a background image and pattern added, let’s add a background mask.
How to Design Hero Section #4
Now, let’s design the fourth hero section.
1. Add a Background Image
Select your background image.
2. Add Background Pattern
Now that we have our background image added, let’s add a background pattern.
3. Add Background Mask
Now that we have our background image and pattern applied, let’s add a background mask.
3. Configure Row Settings
Before we go, this hero section has unique row styles. Let’s set that up.
How to Design Hero Section #5
Now, let’s design the fifth hero section.
1. Add a Background Image
Select your background image.
2. Add Background Pattern
Now that we have our background image set up, let’s apply a background pattern.
3. Add Background Mask
Now that we have a background image and pattern applied, let’s add a background mask.
3. Configure Row Settings
Before we go, this hero section has unique row styles. Let’s set that up.
Get More Background Mask and Pattern Designs!
If you want more designs like this one, check out these 12 background mask and pattern designs free for download.
Final Thoughts
Designing a unique and eyecatching hero section for your website is easy with Divi’s new background mask and pattern options. Each feature has many options that allow you to create truly creative background designs. Plus, you can add background patterns and masks to any Divi Builder element! The design options are endless.
This content was originally published here.