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

by | Dec 11, 2022 | Etcetera | 0 comments

The brand new background pattern masks and patterns to be had in Divi assist you to upload passion in your backgrounds, with out the use of photographs. With quite a few choices to choose between, there are lots of alternatives to be had in your to taste your backgrounds inside Divi. Lately, we’ll be having a look at combining each background trend mask and patterns to improve your weblog submit header design in 3 distinctive tactics.

Let’s get to it!

The Vital of Weblog Publish Header Design

Prior to a reader is going via your submit, they’re going to first be met by way of the content material above the fold. The fold is the primary a part of the display this is noticed sooner than scrolling starts. It’s in reality essential for us to make sure that the phase above the fold in our design is attention-grabbing and encourages folks to stay on scrolling to learn the remainder of the web page. In our case, we wish folks to stay on studying our weblog posts after interacting with our weblog submit header. With the brand new Divi background options, we don’t need to spend hours in Canva and Photoshop to create superior designs. We’ve the entire gear that we’d like proper inside the Divi builder!

Divi Weblog Publish Header Design with Background Mask and Patterns

You’ll make some in reality cool designs out of the field with both background mask or background patterns. Alternatively, we wish to take it a step additional and mix the 2 of those new options in combination! Let’s see what we’ll be running in opposition to on this educational.

Background Masks and Trend Instance One

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

The header phase of our Divi Print Store Weblog Web page Template re-imagined Background Mask and Patterns.

Background Masks and Trend Instance Two

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

The header phase of our Divi Type Fashion designer Weblog Web page Template up to date the use of Background Mask and Patterns.

Background Masks and Trend Instance 3

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

The header phase of our Divi Company Weblog Web page Template redesigned with Background Mask and Patterns.

For this educational, we’ll be running with 3 other FREE Divi Weblog Publish Templates that are we able to discovered on our weblog. Now, let’s get into the educational!

Instance One: Divi Print Store

For this situation, we’ll be making an attempt to stay the background just about the unique. We wish to imitate the glance of the template, however we’ll be the use of the Divi Background Mask and Patterns characteristic to re-invent the header phase slightly bit. To start out this educational, obtain the Blog Page Template from the Divi Print Shop Layout Pack. That is what we’re beginning with:

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

Set up the Divi Print Store Weblog Publish Template

To add the template, navigate to the Divi Theme Builder within the backend of your WordPress site.

Getting started with the Divi Conference Layout Pack

Add Web site Template

Then, within the best proper nook, you’ll see an icon with two arrows. Click on at the icon.

Opening the import export functionality of the Divi Theme Builder

Navigate to the import tab, add the JSON record that it is advisable obtain on this submit, and click on on ‘Import Divi Theme Builder Templates’.

Import settings for the header and footer layout pack

Save Divi Theme Builder Adjustments

While you’ve uploaded the record, you’ll understand a brand new template with a brand new frame house that has been assigned to All Posts. Save the Divi Theme Builder adjustments once you wish to have the template to be activated.

Save the imported blog post layout within the Divi Theme Builder

The way to Alter The Header Design within the Template

Open the Divi Print Store Template

To change the template’s header phase, get started by way of opening the template.

See also  How to Use myCred to Add a Rewards System to WordPress

Begin editing the blog post body template within the Divi Builder

Input the Phase Settings

We’re going to make use of a mixture of Background Mask and Patterns to compare the Symbol and Gradient settings which might be lately getting used to create the unique background for the header phase. First, we’ll want to open the settings modal field to begin our paintings. To get right of entry to the settings for the phase, you’ll click on at the tools icon, which is the second one icon that looks whilst you hover over the blue phase border.

Edit the section settings for the Blog Post Template

Navigate to Background Settings

We will be able to now scroll inside the Phase settings modal field until we succeed in the Background tab. From right here, we’ll be editing the present settings and enforcing our new taste the use of Background Mask and Patterns.

Scroll through the modal till you reach the Background section

Take away the Background Gradient and Symbol

To get began, we’ll want to take away the present background settings to make means for the brand new adjustments we’ll be making to the weblog submit header design. You’ll wish to first hover over the Background subtitle. An icon menu will come out. Inside of this new menu, click on at the Reset icon to present your phase’s background a brand new rent on lifestyles.

Reset section background styles

Upload the Background Masks

Now that we’re the place we wish to be, we’ll move in and upload the Background Masks to the phase. First, we’ll click on at the Background Masks icon, then we’ll click on Upload Background Masks.

Beginning adding the background mask to the section

We’ve made step one in enhancing our weblog submit header design.

Taste Your Background Masks

After resetting the background kinds, you’ll understand that your masks is white. Don’t be alarmed! We’re now going to begin including some colour and styling into the weblog submit header design.

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

Make a selection Your Masks Taste

Let’s get began on styling our Background Masks! First, we’ll click on at the first dropdown. This will likely display us the entire Background Mask to be had to us. We’ll be running with the Diagonal Masks.

Select your background mask

Assign Your Masks Colour and Transformation Settings

Subsequent, we’ll assign it a Masks Colour. Our Masks Colour will fit the darkish blue that was once part of the unique weblog submit design. In any case, we’re going to turn the masks horizontally, rotate it, then invert it. We’ll go away the side ratio as it’s. Listed below are the settings that you just’ll want to use for this:

  • Masks: Diagonal
  • Masks Colour: #000645
  • Masks Become: Horizontal, Rotate, Invert
  • Facet Ratio: Broad

Select your background mask settings

Upload Your Background Trend

With the newly added Background Masks, that is what our Weblog Publish Template is having a look like:

The Divi Blog Post Header Design with the Background Mask

However we wish to jazz it up even additional and can upload a Background Trend to this. With the Background Masks, we’re ready to imitate the army bar that was once firstly part of the Divi Print Shop Layout Pack. By way of the use of the Background Masks, we’ve added some texture and passion to the header phase. We’ll now be the use of the Background Trend characteristic to hail to the dotted background symbol that we had inside the authentic design.

Opting for Your Background Trend

Whilst throughout the Background tab of the phase modal field, we’re going to now click on at the Background Trend icon. After we’ve clicked that, we can now click on Upload Background Trend to look our choices.

See also  The way to Get ready for A Process in Virtual Advertising and E-commerce [Google Certification]

Activate the Background Pattern settings within the Background tab

Styling the Background Trend

For this situation, we wish the Background Trend to seem very similar to the picture that was once used inside the authentic design. We’ll be the use of the Tufted Background Trend for this situation. As with the Background Masks, click on the dropdown to look the to be had Background Patterns and choose Tufted.

Selecting our option for the Background Pattern

With our Background Trend decided on, let’s now move in and make some stylistic changes. We received’t be making any transformations to the Background Trend, alternatively we can be the use of the Trend Colour atmosphere to tie the newly added trend into the remainder of our design. To do that, click on at the Eyedropper Instrument beneath Trend Colour and we’ll be the use of the similar army blue from the Background Masks, however with a slight transparency to it.

  • Trend Colour: rgba(0,6,69,0.3)

While you’ve added the Trend Colour, save your phase settings by way of clicking the fairway checkmark on the backside of the settings modal field. In any case, save your up to date Weblog Publish Template.

Instance Two: Divi Type Fashion designer

For this situation, we’ll be making a minimalistic weblog header design that references the blank traces and sharp edges used throughout the structure. You’ll want to obtain the Divi Fashion Designer Blog Post Template for the Divi Fashion Designer Layout Pack to practice together with this situation.

The method for putting in and downloading the template is equal to with the Divi Print Store instance from above. You’ll practice the ones steps by way of going again to the start of this tutorial. Prior to we begin on our background transformation adventure, let’s check out what the weblog header design looks as if instantly out of the field.

The Divi Fashion Designer Blog Post Header Design

Upload a Background Colour

Not like our earlier instance, this weblog header design shall be using a Background Colour. Open the Phase Settings, and scroll right down to the Background tab. Then, input within the colour main points underneath.

  • Background Colour: #fff9f2

Assigning a background color to the section

Including the Background Masks

With the Background Colour now we have a excellent base for our Background Masks. Giving a nod to the angular paperwork inside this structure pack, we’ll be the use of the Chevron Background Masks for this weblog header design. To choose Chevron, navigate to the Background Masks icon, after which click on Upload Background Masks.

Getting the Background Mask set up

As soon as that’s finished, click on at the dropdown menu that looks and navigate to the Chevron Background Masks.

Selecting the Background Mask

Styling the Background Masks

As our Background Masks has been installed position, we’ll now start to taste it. We’ll stay it the default colour of white, however we’ll invert it the use of the Masks Become settings.

  • Masks Colour: #ffffff
  • Masks Become: Invert

Styling the Background Mask's color and transform settings

Putting the Background Trend

With our cushy and minimum weblog header design thus far, we’ll be including a Background Trend to the Background Masks itself. Prior to we’re ready to try this, we’ll click on at the Background Trend icon, after which Upload Background Trend to make our selection of patterns to overlay onto the Background Masks.

Inserting the Background Pattern to overlay onto the Background Mask

 Click on at the dropdown that looks after clicking Upload Background Trend. We’ll be the use of the Honeycomb Background Trend to overlay onto our Chevron Background Masks.

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

Upload Colour to Background Trend

To stay consistent with the design of the Divi Weblog Publish Format, we’ll be converting the colour of the Background Trend to white.

  • Trend Colour: #ffffff
See also  How to Get Started with Email Segmentation

Choosing the Background Pattern coor

Have in mind to save lots of your laborious paintings by way of clicking the fairway checkmark to fasten to your phase settings. Additionally, save your weblog submit template by way of clicking at the inexperienced Save button.

Instance 3: Divi Company

Within the Divi Company weblog header design, we’ll be the use of Background Mask and Patterns so as to add texture. We’ll be additionally the use of transparency to create intensity inside the quite a lot of components of this header design. That is what we’re beginning out with upon getting imported the Divi Corporate Blog Post Template which is a part of the Divi Corporate Layout Pack.

The Divi Corporate Blog Post Header Design

Trade Background Colour

For this weblog header design, we wish to exchange the default background colour of the phase to make the Background Trend and Background Masks extra delicate. To do that, we’ll input into the Phase Settings and scroll right down to the Background tab. As soon as there, we’ll click on at the Background Colour icon, and input within the hex code for black to switch the default darkish grey proportion of the structure pack.

  • Background Colour: #000000

Change background color of the blog header design

Insert Background Trend

With our new background colour, we’ll be including a Background Trend so as to add some pleasure to the apparent, darkish background of the default weblog header design. To do that, we’ll input into the Phase Settings and scroll right down to the Background tab. Subsequent, we’ll click on the Background Trend icon after which click on Upload Background Trend to drag up our checklist of alternatives.

Selecting Background Pattern choices for a corporate blog header design

Taste Background Trend

We’ll be the use of a Background Trend that’s very similar to scanlines for this weblog header design. To do that, we’ll choose the Diagonal Stripes 2 from the Background Trend dropdown menu. Then, we’ll assign a clear white colour to the trend. Finally, we’ll turn out to be this trend at the horizontal axis.

Styling a blog header design with a scanlines inspired background pattern

Listed below are the settings that you just’ll want to use for the Background Trend:

  • Trend Taste: Horizontal Stripes 2
  • Trend Colour: rgba(255,255,255,0.12)
  • Trend Become: Horizontal

Upload the Background Masks

As with our different weblog header design examples, we’ll be including a Background Masks to the Background Trend. To do that, we’ll choose the Background Masks icon and click on Upload Background Masks. This will likely expose the Background Masks dropdown the place we will make a choice our Background Masks taste.

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

For this weblog header design, we’ll be the use of the Diagonal Traces Background Masks.

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

Stylize the Background Masks

We don’t wish to go away the Background Masks as it’s, so we’re now going to taste it. We’ll be the use of a clear model of the fairway this is used inside the structure pack. We will be able to even be inverting the Background Masks. To use those kinds, first, click on at the Eyedropper Icon beneath the Masks Colour identify and input within the atmosphere underneath. Subsequent, choose the Invert icon beneath the Masks Become atmosphere.

  • Masks Colour: rgba(76,89,76,0.54)
  • Masks Become: Invert

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

In Conclusion

We’ve many choices relating to styling backgrounds for our weblog posts. Taking part in with key design ideas like colour, transparency and texture permit us to use the local background design gear that include Divi. You’ll spend rather less time in symbol enhancing device by way of taking part in round and the use of our new Background Patterns and Mask to your website online nowadays!

The submit How to Boost Your Blog Post Header with a Background Mask & Pattern Design in Divi seemed first on Elegant Themes Blog.

WordPress Maintenance Plans | WordPress Hosting

read more

0 Comments

Submit a Comment

Your email address will not be published. Required fields are marked *