How to Use Divi’s Background Masks and Patterns for a Hero Section | Elegant Themes Blog

Divi’s new background masks and patterns is one of our most exciting new design features yet. Each of the masks and patterns can be combined with other background elements (like colors, images, and gradients) for countless unique combinations in a few clicks.

Today we are going to show you how to use Divi’s new background masks and patterns to design a hero section. In this tutorial, we’ll cover the important steps needed to create background masks and patterns. We’ll even show how to position background images to fit a mask design. This should help give you the tools you need to create the perfect hero section for your site in minutes.

Let’s have some fun!

Sneak Peek

Here is a quick look at the design we’ll build in this tutorial.

Here is an example hero section with a white mask and pattern.

Here is a dark version of the same hero section with a black mask and pattern.

With this design in place, you can easily change masks and mask positions with a few clicks!

Download the Layout for FREE

To lay your hands on the 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!

To import the section layout to your Divi Library, navigate to the Divi Library.

Click the Import button.

In the portability popup, select the import tab and choose the download file from your computer.

Then click the import button.

Once done, the section layout will be available in the Divi Builder.

Let’s get to the tutorial, shall we?

What You Need to Get Started

To get started, you will need to do the following:

How to Use Divi’s Background Masks and Patterns on Your Hero Section

1. Create the Layout Structure

For this hero section, we are going with a classic layout structure with the headline and call to action on the left and an image (or visual design) on the right. For this design, our visual design will be created using Divi’s background options. But before we get into that, we need to create a two-column row so that we can save room on the right side of the page for showcasing our section background masks and patterns design.

2. Add the Headline and Call to Action

In the left column (column 1), add a text module for your main heading, a text module for your subheading text, and a button module for your button.

If you want to know the specific design settings for these, feel free to download the layout and check it out for yourself at another time. For today, we are going to concentrate on the background design.

3. Add Vertical Spacing to the Section

In order for our background design to be big and beautiful, we need to add some vertical height to the section. An easy way to do that is to add padding to the top and bottom of the section. Keep in mind that we need to adjust the padding on tablet and phone display to make room for our background desiggn once the columns stack vertically.

Open the settings for the section. Under the design tab, update the padding as follows:

4. Add a Background Image and Gradient

Next, we can add a background image and gradient to the section. Keep in mind that the main focal point of the background image will be revealed on the right side of the section, so use an image that has what you want to see on the right side. For this example, we are using an image with a city skyline. The right side of the image has buildings that are closer and more aesthetically pleasing so it works great.

Under the image tab, upload the image to the section background.

In Divi, you can easily add a color gradient over the background image. Under the gradient tab, add the following gradient to the section background:

5. Create a Background Pattern for the Section

Now that our background image and gradient are ready, we can add a background pattern to compliment the design. In this example, we are going to use a subtle pattern that just adds a little texture to give it a more unique look.

Under the patterns tab, update the following:

TIP: With background patterns, it is generally better to keep it subtle. Try using custom sizes for patterns that are smaller and then drop the opacity of the color.

5. Create a Background Mask for the Section

With our background pattern in place, we a finally ready to test out a brand new background mask for our design. There are a bunch of options and variations to choose from. For this example, we are going to use the honeycomb mask.

Under the masks tab, update the following:

6. Adjust Background Image Position

Since we are using a background mask, most of our background images is being hidden (or “masked”). So, you may need to adjust the position of the background image so that you can reveal a particular section of the image through the open portion of the mask. To do this, you can use the background image position and offset options to nudge the background image in the right spot.

In this example, we are going to make sure the bottom right of the image is most visible and we’ll move it over to the right a bit to show more of the buildings.

Under the image tab, update the following:

Notice how the background image can be moved to the right.

8. Use a Blend Mode

One way we can get creative with all of these background elements is to add a blend mode. Blend modes can be added to any of the background options and they can be used to blend multiple background layers (image, gradient, mask, etc.) together in creative ways.

For this example, we are going to blend the background image with the gradient color. To do this, click the background image tab and add a blend mode to blend the gradient color with the background image as follows:

NOTE: The multiply blend mode basically multiplies the current layer (in this case the background image) with the background gradient. An easy way to think about the effect is to imagine two slides in a slide projector stacked one behind the other. If you project the two images on a screen, you would get a blend of the two that is slightly darker.

For more on blend modes, check out this

7. Adjust the background mask for mobile

It is important to make sure the background mask design looks great on mobile devices as well. Thankfully, the built-in options make this process easy. Remember, we already added the extra padding on tablet and phone to make room for our background design. Now, all we need to do is use the background transform and aspect ratio options to adjust the mask for mobile.

Under the mask tab, activate the responsive options and update the following:

On tablet…

On Phone…

The Result

Check out the design we created so far.

8. Create a Dark Version

If you want a dark version of this design, simply change the background mask color to a dark color (like black).

Then change the pattern color to black.

Then change the headline and subheader text to white. And you may want to update the button color as well.

Here is what the dark version looks like.

Final Results

Here is another look at our final results.

Try Different Masks and Transform Options

With this hero section background design in place, we can experiment with other background masks (and patterns) by selecting different masks from the list. Then you can use

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 hero section for your website is a lot of fun with Divi’s background masks and patterns. The background options are easy to tweak to get the design just right. And there are so many other options you can use (like blend modes) to create even more unique background designs. Plus, you can add masks and patterns to any Divi element, not just sections. So have fun experimenting!

I look forward to hearing from you in the comments.

Cheers!

This content was originally published here.