Do you want to create a unique and stunning background with masks and background patterns from Divi ?
The new background masks and patterns feature of Divi is most commonly used for sections of a page. But we can also add them to headers!
In this tutorial, we'll show you how to add masks and background patterns to a header template Divi using the constructor Themes.
It's a great way to create completely unique header designs for your Website.
Let's start.
Preview
Here's a quick look at the design we'll be creating in this tutorial.
Go to Divi's theme builder and start creating a global header
From the WordPress dashboard, go to Divi > Theme Builder
Click on “Add Global Header”
Select “Build Global Header”.
After that, you can start designing a new header using the Divi Builder.
How to Add Background Masks and Patterns to a Divi Header
Creating the section background with a background color and pattern
Read also: Divi: How to create a Testimonials section in the form of a grid
To get started, open the settings of the existing section.
Under the tab Content, update the background options with the following settings:
Background color:
- Background: #262d3f
BackgroundPattern:
- Model: Pills
- Pattern Color: rgba(255,255,255,0.1)
- Pattern size: custom size.
- Pattern width: 1px
Padding
Under the tab Design, update the section padding as follows:
- Padding (Top and Bottom): 0px
This will reduce the vertical space of the header a bit.
Add a row with the following column layout
Added placeholder header content (a menu and a button)
In the left column of the row, add a new menu.
Select a menu.
Then add a logo and use the settings to customize the menu and logo as desired.
In the right column, add a button module and also customize it to your liking.
Creating the line background with gradient, mask and pattern
The gradient
Open the row settings containing your menu and button. Then update the background options with the following background settings:
Background gradient:
- Gradient Stops 1 (50%): Clear
- Gradient Stops 2 (75%): #ff4c00
- Steering: 90 degrees
pattern
- Model: Pills
- Pattern Color: rgba(38,45,63,0.48)
- Pattern Size: 1 pixel
- Vertical Offset: 20px
Note: The vertical offset of the pattern is set to 20px because there is 20px top padding on the section above the line. This ensures that the section pattern aligns with the row pattern.
BackgroundMask
- Mask: Herringbone
- Mask Color: #262d3f
NOTE: For headers, it's best to keep the mask size set to "Extend to Fill" so that it covers the horizontal space without compromising the design of the mask.
Final touches to the line
See also: Divi: How to use the "Gradient Builder" to beautify your images
To complete the design, we'll add a border radius and a few more edits to the line.
The radius, border and border spacing
Under the tab Design, update the padding as follows:
- Padding (Top and Bottom): 5px
Then give the row a nice rounded corner for an extra design element.
- Rounded Corners: 50px
- Left Border Width: 50px
- Left Border Color: #262d3f
We need to give a border to the left side of the row because the square edge of the mask will overflow the row despite the rounded corners.
Final result
Let's see the final result.
The gradient is a bit subtle, so here's a look at what it looks like.
And here is the desktop and mobile header design.
Download DIVI Now!!!
Conclusion
The header background design is just the tip of the iceberg. There's a lot of exploring to do with the background options available in Divi.
We hope this tutorial has helped you understand how Divi's background masks and patterns can work together to create a unique background design for your headers.
Feel free to experiment with more background design combinations to fit your own design. Website or your upcoming project.
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.
...
