Would you like to use the masks and patterns for your Hero section in Divi ?
Divi's new masks and background patterns are one of our coolest 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 with just a few clicks.
Today we are going to show you how to use Divi and its new masks and background patterns to design a hero section.
In this tutorial, we'll cover the important steps needed to create masks and background patterns.
We'll even show how to position background images to suit a mask design. This should give you the tools you need to create the perfect Hero section for your site in minutes.
Preview
Here's a quick look at the design we'll be creating in this tutorial.
Read also: Divi: How to create a responsive image grid with links and hover effects
Example section of Hero 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 just a few clicks!
Create a new page with Divi Builder
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.
How to Use Divi's Masks and Background Patterns on Your Hero Section
1. Create the layout structure
For this hero section, we're going with a classic layout structure with the title and call-to-action on the left and an image (or visual design) on the right.
For this example, our visual design will be created using Divi's background options. But before we get to the nitty-gritty, we need to create a two-column row to save space on the right side of the page to showcase our section background masks and pattern design.
2. Add the title and call to action
In the left column (column 1), add a Text module for your main title, a Text module for your subtitle text and a Button module for your button.
3. Add vertical spacing to the section
To make our background design look tall and beautiful, we need to add vertical height to the section. A simple way to do this is to add padding to the top and bottom of the section. Keep in mind that we need to adjust the padding on the tablet and phone screen to make room for our background design once the columns are stacked vertically.
Open section settings. Under the design tab, update the padding as follows:
- Padding:
- Desktop: Top 20vw, Bottom 20vw
- Tablet: Top 8vw, Bottom 48vw
- Phone: Top 8vw, Bottom 70vw
4. Add 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're 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 really well.
Under the tab background Image, upload the image in the section background.
In Divi, you can easily add a color gradient on the background image. Under the tab Background Gradient, add the following gradient to the background of the section:
- Gradient Stops:
- 0%: #3e22ff
- 100%: clear
- Square Gradient Above Background Image : YES
5. Create a background pattern for the section
Now that we have our background image and gradient ready, we can add a background pattern to complete the design.
In this example, we're going to use a subtle pattern that just adds a bit of texture to give it a more unique look.
Under the tab Background Patterns, update the following:
- Background Pattern: Tufted
TIP: With background patterns, it's usually best to keep it subtle. Try using custom sizes for smaller designs, then lower the color opacity.
6. Create a background mask for the section
With our background pattern in place, we're 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'll use the honeycomb mask.
Under the tab BackgroundMask, update the following:
- Mask: Honeycomb
- Mask Color: #ffffff
- Size: Cover
7. Adjust background image position
Since we're using a background mask, part of our background image is masked (or "masked").
In this example, we'll make sure the bottom right of the image is most visible, and we'll move it a bit to the right to show more buildings.
Under the Image tab, update the following:
- Background Image Position: Bottom Right
- Background Image Horizontal Offset: -4vw
8. Use a blending mode
One way to get creative with all of these background elements is to add a blending mode. Blending modes can be added to any of the background options, and they can be used to mix multiple background layers (image, gradient, mask, etc.) in creative ways.
For this example, we'll blend the background image with the gradient color. To do this, click on the tab background Image and add a blending mode to blend the gradient color with the background image as follows:
- Background Image Blend: Multiply
9. Adjust background mask for mobile
It is important to ensure that the background mask design also looks great on mobile devices. Fortunately, the built-in options make this process easier.
Remember we have already added the extra padding on the 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 tab BackgroundMask, enable responsive options and update the following:
Tablet version
- Mask Transform: Flip Vertical, Flip Horizontal, Rotate
- Mask Aspect Ratio: square
Phone version
- Mask Transform: Flip Vertical, Flip Horizontal, Rotate
- Mask Aspect Ratio: Portrait
The result
Check out the design we've created so far.
Desktop computer
Tablet version
Phone version
10. Create a dark version
If you want a dark version of this design, just change the background mask color to a dark color (like black).
Then change the color of the pattern to black.
Then change the title and subtitle text to white. And you might want to update the button color as well.
This is what the dark version looks like.
Final results
See also: Divi: How to customize the "Read More" link of a Blog
Here's another look at our final results.
Download DIVI Now!!!
Conclusion
Design a Hero section for your Website is great fun with masks and background patterns by Divi. Background options are easy to change to get the perfect design. And there are plenty of other options you can use (like blending modes) to create even more unique backgrounds.
Additionally, you can add masks and patterns to any Divi element, not just sections. So have fun experimenting!
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.
...
