With Divi’s latest background masks and background trend function free up, you’ll create some unique hero sections to your internet web site. A hero section is the principle section of your internet web site and is the first thing your visitors see forward of scrolling through your internet web site, so it’s vital to be attention-grabbing! Combining Divi’s background image, background mask, and background pattern possible choices allows us to create compelling hero sections so that your internet web site makes a perfect first have an effect on.

This submit will show you the way you’ll create 5 unique background mask and pattern overlays that you simply’ll follow to a background image to create in reality unexpected hero sections. This tutorial will duvet the essential steps needed to create every hero section and give you the tools you want to create a hanging hero section to your internet web site in minutes.

We’ll be the use of unfastened pictures from the On-line Route Structure Pack in this example. To use the an identical images, scroll all of the way to the bottom of this put up to acquire the full-res images.

Let’s get started!

What We’ Rising

Right here’s a quick take a look on the 5 hero sections we’ll create in this submit in this day and age.

The designs are subtle, simple, and however impactful.

Download the Construction for FREE

Should you’d love to acquire the pre-designed construction design from this tutorial, you’re going to first need to download it the use of the button beneath. To reach get admission to to the download, you will need to subscribe to our Divi Daily e mail document by the use of the use of the form beneath. As a brand spanking new subscriber, you’re going to acquire a lot more Divi goodness and a unfastened Divi Construction pack every Monday! Should you’re already on the document, simply enter your e mail deal with beneath and click on on download. You’re going to not be “resubscribed” or download additional emails.

Obtain the Information

.et_bloom .et_bloom_optin_1 .et_bloom_form_content { background-color: #4843d2 !vital; } .et_bloom .et_bloom_optin_1 .et_bloom_form_container .et_bloom_form_header { background-color: #ffffff !vital; } .et_bloom .et_bloom_optin_1 .carrot_edge .et_bloom_form_content:forward of { border-top-color: #ffffff !vital; } .et_bloom .et_bloom_optin_1 .carrot_edge.et_bloom_form_right .et_bloom_form_content:forward of, .et_bloom .et_bloom_optin_1 .carrot_edge.et_bloom_form_left .et_bloom_form_content:forward of { border-top-color: transparent !vital; border-left-color: #ffffff !vital; }
@media best possible computer screen and ( max-width: 767px ) {.et_bloom .et_bloom_optin_1 .carrot_edge.et_bloom_form_right .et_bloom_form_content:forward of { border-top-color: #ffffff !vital; border-left-color: transparent !vital; }.et_bloom .et_bloom_optin_1 .carrot_edge.et_bloom_form_left .et_bloom_form_content:after { border-bottom-color: #ffffff !vital; border-left-color: transparent !vital; }
}.et_bloom .et_bloom_optin_1 .et_bloom_form_content button { background-color: #f92c8b !vital; } .et_bloom .et_bloom_optin_1 .et_bloom_form_content .et_bloom_fields i { color: #f92c8b !vital; } .et_bloom .et_bloom_optin_1 .et_bloom_form_content .et_bloom_custom_field_radio i:forward of { background: #f92c8b !vital; } .et_bloom .et_bloom_optin_1 .et_bloom_border_solid { border-color: #f7f9fb !vital } .et_bloom .et_bloom_optin_1 .et_bloom_form_content button { background-color: #f92c8b !vital; } .et_bloom .et_bloom_optin_1 .et_bloom_form_container h2, .et_bloom .et_bloom_optin_1 .et_bloom_form_container h2 span, .et_bloom .et_bloom_optin_1 .et_bloom_form_container h2 strong { font-family: “Open Sans”, Helvetica, Arial, Lucida, sans-serif; }.et_bloom .et_bloom_optin_1 .et_bloom_form_container p, .et_bloom .et_bloom_optin_1 .et_bloom_form_container p span, .et_bloom .et_bloom_optin_1 .et_bloom_form_container p strong, .et_bloom .et_bloom_optin_1 .et_bloom_form_container form input, .et_bloom .et_bloom_optin_1 .et_bloom_form_container form button span { font-family: “Open Sans”, Helvetica, Arial, Lucida, sans-serif; } p.et_bloom_popup_input { padding-bottom: 0 !vital;}

See also  Stella Training & On-line Path Kid Theme – Divi Kid Theme Evaluation

Download For Unfastened

Join the Divi Publication and we will e mail you a duplicate of the ultimate Divi Landing Internet web page Construction Pack, plus lots of different glorious and unfastened Divi assets, tips and strategies. Apply along and also you’re going to be a Divi snatch in no time. If you happen to’re already subscribed simply type to your e mail deal with beneath and click on on download to get admission to the construction pack.

DOWNLOAD

You could have successfully subscribed. Please take a look at your e mail deal with to confirm your subscription and get get admission to to unfastened weekly Divi construction packs!

Learn how to Download and Use the Layouts

To import the section construction to your Divi Library, do the following:

1. Navigate to the Divi Library.
2. Click on at the Import button at the height of the internet web page.
3. Inside the portability popup, select the import tab.
4. Choose the download record from your computer (you’ll want to unzip the record first and use the JSON record).
5. Then click on at the import button.

Every time you’ve successfully imported the layouts, they’ll be noticed to your Divi Library and it will be available for use inside the Divi Builder.

Now, let’s get to the learning!

What You Need To Get Started

Faster than we can get started, you’ll need to:

1. Set up and turn on the Divi Theme.
2. Create a brand spanking new internet web page, put up it, and click on at the “Use The Divi Builder” button to edit the internet web page on the front end the use of the Visual Builder.
3. Choose the selection “Assemble From Scratch.”

Now now we have now a blank canvas to start designing!

Learn how to Create 5 Background Mask & Construction Overlays to Practice to a Background Image

First, Let’s Create the Hero Segment

All our design examples use the an identical section, row, and column development, so let’s set those up now.

1. Create Construction Building

Add a row to your internet web page and then click on at the golfing inexperienced “+” icon to ship up the column development and select the principle column, the one fullwidth column.

2. Add Segment Spacing

Now that we’ve were given our row and column set it, it’s time so that you can upload spacing to the section.

Beneath the Spacing tab, substitute the following:

• Desktop: 400px height and 400px bottom
• Tablet: 200px height and 200px bottom; 25px left and right kind
• Phone: 50px height and 50px bottom; 25px left and right kind

Learn how to Design Hero Segment #1

Let’s design the principle hero section.

1. Add Heading Text

Click on on on the grey “+” icon to ship up the module library. Scroll to text and click on directly to load.

Sort inside the heading text and then underneath the Heading Text tab, configure the ones settings:

• Font Family: Art work Sans
• Font color: White #ffffff
• Font Measurement:
  • Desktop: 3rem
  • Tablet: 2.2rem
  • Phone: 1.4rem

2. Add Button Module

Add a button and configure the ones settings:

• Beneath the Text Tab type: Learn Additional
• Beneath the Alignment Tab Choose: Center
• Click on on Use Custom designed Sorts and then configure:
  • Button Text Measurement:
    • Desktop: 20px
    • Tablet: 16px
    • Phone: 14px
  • Button Text Color: White #ffffff
  • Button Background Color: Black #1d1d1d
  • Button Border Width: 0
  • Button Border Radius: 0
  • Button Letter Spacing: 3pt
  • Button Font: Art work Sans
  • Button Font Style: Uppercase

3. Add Background Image

Now that we’ve were given our content material subject matter organize, it’s time to start designing the section background.

1. Navigate to the Background toggle and click on at the 3rd tab, the picture tab, and then click on on “Add Background Image.”
2. This will likely an increasing number of ship up your media library, where you’ll select {a photograph} or upload a brand spanking new one.
3. Once your {photograph} is selected, click on at the “Upload an Image” button inside the bottom right kind corner.

4. Add Background Construction

Now that we’ve were given our background image organize, let’s add a pattern.

• All the way through the Background tab, navigate to the 5th tab, the patterns tab, and then click on on “Add Background Construction.”
• Select Tufted from the dropdown menu and configure the ones settings:
  • Construction Color – rgba(255,255,255,0.31)
  • Construction Grow to be: none
  • Construction Measurement: Precise Measurement
  • Construction Repeat Beginning position: Absolute best Left
  • Construction Repeat: Repeat
  • Combine Mode: Normal

5. Add background Mask

Now that we’ve were given our background image and pattern organize, let’s add a background mask.

• All the way through the Background tab, navigate to the 6th tab, the mask tab, and click on on “Add Background Mask.”
• Select Bean from the dropdown menu and configure the ones settings:
  • Mask Color: rgba(0,0,0,0.36)
  • Mask Facet Ration: horizontal rectangle
  • Mask Measurement: Stretch to fill

Voila! Now you’ve a superbly designed hero section.

Learn how to Design Hero Segment #2

Now, let’s design the second hero section.

1. Add a Background Image and Set Combine Mode to Overlay

Select your background image, set the combo mode to Overlay, and add an overlay color of rgba(10,10,10,0.64).

2. Add Background Construction

Now that we’ve were given the background image organize, let’s add a background pattern.

• All the way through the Background tab, navigate to the 5th tab, the patterns tab, and click on on “Add Background Construction.”
• Select Tufted from the dropdown and configure the ones settings:
  • Construction Color – rgba(255,255,255,0.09)
  • Construction Grow to be: none
  • Construction Measurement: Cover
  • Construction Repeat Beginning position: Absolute best Left
  • Construction Repeat: Repeat
  • Combine Mode: Normal

3. Add Background Mask

Now that we’ve were given our background image and pattern organize, let’s add a background mask.

• All the way through the Background tab, navigate to the 6th tab, the mask tab, and click on on “Add Background Mask.”
• Select Caret from the dropdown menu and configure the ones settings:
  • Mask Color: rgba(0,0,0,0.36)
  • Mask Grow to be: None
  • Mask Facet Ration: horizontal rectangle
  • Mask Measurement: Stretch to fill
  • Mask Combine Mode: Normal

Learn how to Design Hero Segment #3

Now, let’s design the third hero section.

1. Add a Background Image and Set Combine Mode to Overlay

Select your background image, set the combo mode to Overlay, and add an overlay color of rgba(10,10,10,0.39).

2. Add Background Construction

Now that we’ve were given our background image organize, let’s add a background pattern.

• All the way through the Background tab, navigate to the 5th tab, the patterns tab, and click on on “Add Background Construction”.
• Select Diagonal Stripes 2 from the dropdown and configure the ones settings:
  • Construction Color – rgba(0,0,0,0.06)
  • Construction Grow to be: none
  • Construction Measurement: Precise Measurement
  • Construction Repeat Beginning position: Absolute best Left
  • Construction Repeat: Repeat
  • Combine Mode: Normal

3. Add Background Mask

Now that we’ve were given a background image and pattern added, let’s add a background mask.

• All the way through the Background tab, navigate to the 6th tab, the mask tab, and click on on “Add Background Mask.”
• Select Triangles from the dropdown menu and configure the ones settings:
  • Mask Color: rgba(10,10,10,0.61)
  • Construction Grow to be: none
  • Mask Facet Ration: horizontal rectangle
  • Mask Measurement: Stretch to fill
  • Mask Combine Mode: Normal

Learn how to Design Hero Segment #4

Now, let’s design the fourth hero section.

1. Add a Background Image

Select your background image.

2. Add Background Construction

Now that we’ve were given our background image added, let’s add a background pattern.

• All the way through the Background tab, navigate to the 5th tab, the patterns tab, and click on on “Add Background Construction.”
• Select Smiles from the dropdown and configure the ones settings:
  • Construction Color – rgba(0,0,0,0.2)
  • Construction Grow to be: none
  • Construction Measurement: Cover
  • Construction Repeat Beginning position: Absolute best Left
  • Construction Repeat: Repeat
  • Combine Mode: Normal

3. Add Background Mask

Now that we’ve were given our background image and pattern performed, let’s add a background mask.

• All the way through the Background tab, navigate to the 6th tab, the mask tab, and click on on “Add Background Mask.”
• Select Corner Lake from the dropdown menu and configure the ones settings:
  • Mask Color: rgba(10,10,10,0.61)
  • Mask Grow to be: Horizontal
  • Mask Facet Ration: Horizontal rectangle
  • Mask Measurement: Cover
  • Mask Position: Center Left
  • Mask Combine Mode: Normal

3. Configure Row Settings

Faster than we move, this hero section has unique row varieties. Let’s set that up.

• Sizing:
  • Width: 80%
  • Max Width: 800px
• Row Alignment:
  • Desktop: Default
  • Tablet: Center
  • Phone: Center
• Spacing:
  • Left: 20vw

Learn how to Design Hero Segment #5

Now, let’s design the fifth hero section.

1. Add a Background Image

Select your background image.

2. Add Background Construction

Now that we’ve were given our background image organize, let’s follow a background pattern.

• All the way through the Background tab, navigate to the 5th tab, the patterns tab, and click on on “Add Background Construction.”
• Select Crosses from the dropdown and configure the ones settings:
  • Construction Color – #ffffff
  • Construction Grow to be: none
  • Construction Measurement: Custom designed Measurement
  • Construction Width: 10px
  • Construction Height: 10px
  • Construction Repeat Beginning position: Absolute best Left
  • Construction Repeat: Repeat
  • Combine Mode: Normal

3. Add Background Mask

Now that we’ve were given a background image and pattern performed, let’s add a background mask.

• All the way through the Background tab, navigate to the 6th tab, the mask tab, and click on on “Add Background Mask.”
• Select Diagonal Drugs from the dropdown menu and configure the ones settings:
  • Mask Color: rgba(10,10,10,0.61)
  • Mask Grow to be: Horizontal
  • Mask Facet Ration: Horizontal rectangle
  • Mask Measurement: Cover
  • Mask Position: Center Left
  • Mask Combine Mode: Normal

3. Configure Row Settings

Faster than we move, this hero section has unique row varieties. Let’s set that up.

• Sizing:
  • Width: 80%
  • Max Width: 800px
• Row Alignment:
  • Desktop: Default
  • Tablet: Center
  • Phone: Center
• Spacing:
  • Correct: 18vw

Get Additional Background Mask and Construction Designs!

If you want to have additional designs like this one, check out the ones 12 background masks and trend designs loose for obtain.

Final Concepts

Designing a singular and eyecatching hero section to your internet web site is easy with Divi’s new background masks and trend possible choices. Each serve as has many possible choices that assist you to create in reality creative background designs. Plus, you’ll add background patterns and masks to any Divi Builder section! The design possible choices are endless.

The submit 5 Background Masks & Development Overlays You Can Observe To Your Background Symbol gave the impression first on Chic Subject matters Weblog.

WordPress Web Design

[ continue ]

read more