How to Boost Your Blog Post Header with a Background Mask & Pattern Design in Divi

Last Updated on January 4, 2023 by Leave a Comment

How to Boost Your Blog Post Header with a Background Mask & Pattern Design in Divi
Blog / Divi Resources / How to Boost Your Blog Post Header with a Background Mask & Pattern Design in Divi
Play Button

The new background pattern masks and patterns available in Divi allow you to add interest to your backgrounds, without using images. With a variety of options to choose from, there are tons of opportunities available to your to style your backgrounds within Divi. Today, we’ll be looking at combining both background pattern masks and patterns to upgrade your blog post header design in three unique ways.

Let’s get to it!

Subscribe To Our Youtube Channel

The Important of Blog Post Header Design

Before a reader goes through your post, they will first be met by the content above the fold. The fold is the first part of the screen that is seen before scrolling begins. It’s really important for us to ensure that the section above the fold in our design is eye-catching and encourages people to keep on scrolling to read the rest of the page. In our case, we want people to keep on reading our blog posts after interacting with our blog post header. With the new Divi background features, we don’t have to spend hours in Canva and Photoshop to create awesome designs. We have all the tools that we need right within the Divi builder!

Divi Blog Post Header Design with Background Masks and Patterns

You can make some really cool designs out of the box with either background masks or background patterns. However, we want to take it a step further and combine the two of these new features together! Let’s see what we’ll be working towards in this tutorial.

Background Mask and Pattern Example One

The Divi Corporate Blog Post Template using the Divi Builder's new Background Mask and Patterns

The header section of our Divi Print Shop Blog Page Template re-imagined Background Masks and Patterns.

Background Mask and Pattern Example Two

The Divi Corporate Blog Post Template using the Divi Builder's new Background Mask and Patterns

The header section of our Divi Fashion Designer Blog Page Template updated using Background Masks and Patterns.

Background Mask and Pattern Example Three

The Divi Corporate Blog Post Template using the Divi Builder's new Background Mask and Patterns

The header section of our Divi Corporate Blog Page Template redesigned with Background Masks and Patterns.

For this tutorial, we’ll be working with three different FREE Divi Blog Post Templates that can we found on our blog. Now, let’s get into the tutorial!

Example One: Divi Print Shop

For this example, we’ll be attempting to keep the background close to the original. We want to imitate the look of the template, but we’ll be using the Divi Background Masks and Patterns feature to re-invent the header section a little bit. To begin this tutorial, download the Blog Page Template from the Divi Print Shop Layout Pack. This is what we’re starting with:

The initial header layout of the Divi Print Shop Blog Post Template

Install the Divi Print Shop Blog Post Template

To upload the template, navigate to the Divi Theme Builder in the backend of your WordPress website.

Getting started with the Divi Conference Layout Pack

Upload Website Template

Then, in the top right corner, you’ll see an icon with two arrows. Click on the icon.

Opening the import export functionality of the Divi Theme Builder

Navigate to the import tab, upload the JSON file that you could download in this post, and click on ‘Import Divi Theme Builder Templates’.

Import settings for the header and footer layout pack

Save Divi Theme Builder Changes

Once you’ve uploaded the file, you’ll notice a new template with a new body area that has been assigned to All Posts. Save the Divi Theme Builder changes as soon as you want the template to be activated.

Save the imported blog post layout within the Divi Theme Builder

How to Modify The Header Design in the Template

Open the Divi Print Shop Template

To modify the template’s header section, start by opening the template.

Begin editing the blog post body template within the Divi Builder

Enter the Section Settings

We’re going to use a combination of Background Masks and Patterns to match the Image and Gradient settings that are currently being used to create the original background for the header section. First, we’ll need to open the settings modal box to start our work. To access the settings for the section, you will click on the gear icon, which is the second icon that appears when you hover over the blue section border.

Edit the section settings for the Blog Post Template

Navigate to Background Settings

We will now scroll within the Section settings modal box till we reach the Background tab. From here, we’ll be modifying the current settings and implementing our new style using Background Masks and Patterns.

Scroll through the modal till you reach the Background section

Remove the Background Gradient and Image

To get started, we’ll need to remove the current background settings to make way for the new changes we’ll be making to the blog post header design. You’ll want to first hover over the Background subtitle. An icon menu will pop out. Within this new menu, click on the Reset icon to give your section’s background a new lease on life.

Reset section background styles

Add the Background Mask

Now that we’re where we want to be, we’ll go in and add the Background Mask to the section. First, we’ll click on the Background Mask icon, then we’ll click Add Background Mask.

Beginning adding the background mask to the section

We’ve made the first step in editing our blog post header design.

Style Your Background Mask

After resetting the background styles, you’ll notice that your mask is white. Don’t be alarmed! We’re now going to start adding some color and styling into the blog post header design.

Don't be alarmed by the blank Background Mask! We're going to fill it in right now.

Select Your Mask Style

Let’s get started on styling our Background Mask! First, we’ll click on the first dropdown. This will show us all the Background Masks available to us. We’ll be working with the Diagonal Mask.

Select your background mask

Assign Your Mask Color and Transformation Settings

Next, we’ll assign it a Mask Color. Our Mask Color will match the dark blue that was a part of the original blog post design. Finally, we’re going to flip the mask horizontally, rotate it, then invert it. We’ll leave the aspect ratio as it is. Here are the settings that you’ll need to use for this:

  • Mask: Diagonal
  • Mask Color: #000645
  • Mask Transform: Horizontal, Rotate, Invert
  • Aspect Ratio: Wide

Select your background mask settings

Add Your Background Pattern

With the newly added Background Mask, this is what our Blog Post Template is looking like:

The Divi Blog Post Header Design with the Background Mask

But we want to jazz it up even further and will add a Background Pattern to this. With the Background Mask, we are able to mimic the navy bar that was originally a part of the Divi Print Shop Layout Pack. By using the Background Mask, we’ve added some texture and interest to the header section. We’ll now be using the Background Pattern feature to hail to the dotted background image that we had within the original design.

Choosing Your Background Pattern

While inside the Background tab of the section modal box, we’re going to now click on the Background Pattern icon. Once we’ve clicked that, we will now click Add Background Pattern to see our options.

Activate the Background Pattern settings within the Background tab

Styling the Background Pattern

For this example, we want the Background Pattern to look similar to the image that was used within the original design. We’ll be using the Tufted Background Pattern for this example. As with the Background Mask, click the dropdown to see the available Background Patterns and select Tufted.

Selecting our option for the Background Pattern

With our Background Pattern selected, let’s now go in and make some stylistic adjustments. We won’t be making any transformations to the Background Pattern, however we will be using the Pattern Color setting to tie the newly added pattern into the rest of our design. To do this, click on the Eyedropper Tool under Pattern Color and we’ll be using the same navy blue from the Background Mask, but with a slight transparency to it.

  • Pattern Color: rgba(0,6,69,0.3)

Once you’ve added the Pattern Color, save your section settings by clicking the green checkmark at the bottom of the settings modal box. Finally, save your updated Blog Post Template.

Example Two: Divi Fashion Designer

For this example, we’ll be creating a minimalistic blog header design that references the clean lines and sharp edges used through the layout. You’ll need to download the Divi Fashion Designer Blog Post Template for the Divi Fashion Designer Layout Pack to follow along with this example.

The process for installing and downloading the template is the same as with the Divi Print Shop example from above. You can follow those steps by going back to the start of this tutorial. Before we start on our background transformation journey, let’s take a look at what the blog header design looks like straight out of the box.

The Divi Fashion Designer Blog Post Header Design

Add a Background Color

Unlike our previous example, this blog header design will be utilizing a Background Color. Open the Section Settings, and scroll down to the Background tab. Then, enter in the color details below.

  • Background Color: #fff9f2

Assigning a background color to the section

Adding the Background Mask

With the Background Color we have a good base for our Background Mask. Giving a nod to the angular forms within this layout pack, we’ll be using the Chevron Background Mask for this blog header design. To select Chevron, navigate to the Background Mask icon, and then click Add Background Mask.

Getting the Background Mask set up

Once that’s done, click on the dropdown menu that appears and navigate to the Chevron Background Mask.

Selecting the Background Mask

Styling the Background Mask

As our Background Mask has been put in place, we’ll now begin to style it. We’ll keep it the default color of white, but we’ll invert it using the Mask Transform settings.

  • Mask Color: #ffffff
  • Mask Transform: Invert

Styling the Background Mask's color and transform settings

Inserting the Background Pattern

With our soft and minimal blog header design so far, we’ll be adding a Background Pattern to the Background Mask itself. Before we’re able to do this, we’ll click on the Background Pattern icon, and then Add Background Pattern to make our choice of patterns to overlay onto the Background Mask.

Inserting the Background Pattern to overlay onto the Background Mask

 Click on the dropdown that appears after clicking Add Background Pattern. We’ll be using the Honeycomb Background Pattern to overlay onto our Chevron Background Mask.

Selecting the background pattern of choice for our blog post header design

Add Color to Background Pattern

To keep in line with the design of the Divi Blog Post Layout, we’ll be changing the color of the Background Pattern to white.

  • Pattern Color: #ffffff

Choosing the Background Pattern coor

Remember to save your hard work by clicking the green checkmark to lock in your section settings. Also, save your blog post template by clicking on the green Save button.

Example Three: Divi Corporate

In the Divi Corporate blog header design, we’ll be using Background Masks and Patterns to add texture. We’ll be also using transparency to create depth within the various elements of this header design. This is what we’re starting out with after you have imported the Divi Corporate Blog Post Template which is part of the Divi Corporate Layout Pack.

The Divi Corporate Blog Post Header Design

Change Background Color

For this blog header design, we want to change the default background color of the section to make the Background Pattern and Background Mask more subtle. To do this, we’ll enter into the Section Settings and scroll down to the Background tab. Once there, we’ll click on the Background Color icon, and enter in the hex code for black to replace the default dark gray share of the layout pack.

  • Background Color: #000000

Change background color of the blog header design

Insert Background Pattern

With our new background color, we’ll be adding a Background Pattern to add some excitement to the plain, dark background of the default blog header design. To do this, we’ll enter into the Section Settings and scroll down to the Background tab. Next, we’ll click the Background Pattern icon and then click Add Background Pattern to pull up our list of choices.

Selecting Background Pattern choices for a corporate blog header design

Style Background Pattern

We’ll be using a Background Pattern that’s similar to scanlines for this blog header design. To do this, we’ll select the Diagonal Stripes 2 from the Background Pattern dropdown menu. Then, we’ll assign a transparent white color to the pattern. Lastly, we’ll transform this pattern on the horizontal axis.

Styling a blog header design with a scanlines inspired background pattern

Here are the settings that you’ll need to use for the Background Pattern:

  • Pattern Style: Horizontal Stripes 2
  • Pattern Color: rgba(255,255,255,0.12)
  • Pattern Transform: Horizontal

Add the Background Mask

As with our other blog header design examples, we’ll be adding a Background Mask to the Background Pattern. To do this, we’ll select the Background Mask icon and click Add Background Mask. This will reveal the Background Mask dropdown where we can choose our Background Mask style.

Adding background mask to the blog header design with a background pattern

For this blog header design, we’ll be using the Diagonal Lines Background Mask.

Choosing the Diagonal Lines Background Mask for the Divi Corporate blog header design

Stylize the Background Mask

We don’t want to leave the Background Mask as it is, so we’re now going to style it. We’ll be using a transparent version of the green that is used within the layout pack. We will also be inverting the Background Mask. To apply these styles, first, click on the Eyedropper Icon under the Mask Color title and enter in the setting below. Next, select the Invert icon under the Mask Transform setting.

  • Mask Color: rgba(76,89,76,0.54)
  • Mask Transform: Invert

Using transparency within the background mask styling of the Divi Corporate blog header design

In Conclusion

We have many options when it comes to styling backgrounds for our blog posts. Playing with key design concepts like color, transparency and texture allow us to make use of the native background design tools that come with Divi. You can spend a little less time in image editing software by playing around and using our new Background Patterns and Masks on your site today!

Divi Marketplace

Are You A Divi User? Find Out How To Get More From Divi! 👇

Browse hundreds of modules and thousands of layouts.

Visit Marketplace
Divi Marketplace
Divi Cloud

Find Out How To Improve Your Divi Workflow 👇

Learn about the new way to manage your Divi assets.

Get Divi Cloud
Divi Cloud
Divi Hosting

Want To Speed Up Your Divi Website? Find Out How 👇

Get fast WordPress hosting optimized for Divi.

Speed Up Divi
Divi Hosting
Premade Layouts

Check Out These Related Posts

New Starter Site for Construction (Quick Install)

New Starter Site for Construction (Quick Install)

Posted on October 29, 2024 in Divi Resources

Divi empowers you to build the best websites possible, and now, Divi Quick Sites takes website creation to a whole new level. This revolutionary tool lets anyone, regardless of skill level, generate a complete website in under two minutes! Divi Quick Sites provides everything you need to launch...

View Full Post
Divi 5 Update: Public Alpha Version 2

Divi 5 Update: Public Alpha Version 2

Posted on October 28, 2024 in Divi Resources

The Divi 5 Public Alpha is available for testing. As we progress towards the final release, we’ll update Divi 5 every two weeks, appearing as a standard update in your WordPress dashboard. If you use Divi 5, you’ll notice an update notification for Public Alpha Version 2 today. We have...

View Full Post
Divi Plugin Highlight: DiviFlash

Divi Plugin Highlight: DiviFlash

Posted on October 27, 2024 in Divi Resources

DiviFlash, a powerful premium plugin, offers a suite of tools to help you easily create beautiful, professional Divi websites. From advanced modules and layout packs to customizable sections and more, DiviFlash lets you design websites that captivate and engage your audience. In this post,...

View Full Post

Leave A Reply

Comments are reviewed and must adhere to our comments policy.

Join To Download Today