Tips on how to Taste Your Fullwidth Header Module’s Background

Divi’s Fullwidth Header module makes it simple to design a surprising hero phase to your site in simply mins. A hero phase is the first actual phase of your site that your guests will see, so that you’ll need it to be branded, informative, and compelling. Fortunately, the Divi Fullwidth Header comes full of content material choices: header textual content, subtitle textual content, frame textual content, two pictures, and two buttons. We’ll be using all of those parts in our fullwidth headers these days.

On this submit, we’re going to reveal three ways to design your fullwidth header’s background with attention-grabbing designs. In a position to get began? Let’s dive in!

Design Preview

Let’s check out the three fullwidth headers we’ll be designing these days.

Divi Bushcraft Group

The primary design makes use of Divi’s background symbol choices to create a textured background this is distinctive and on-brand for the Bushcraft Group.

Mrs. Nicole’s Second Grade

This 2d design makes use of a background symbol and background gradient to create a blank, trendy, and recent welcome header for Mrs. Nicole’s Second-grade magnificence.

Realtor Header

The 3rd design makes use of a background symbol, background gradient, and background development, all mixed to create an increased but delicate design for a realtor’s house web page.

Obtain the Layouts for FREE

To put your arms at the designs from this educational, you’re going to first wish to obtain it the use of the button beneath. To realize get entry to to the obtain it is very important subscribe to our e-newsletter by means of the use of the shape beneath. As a brand new subscriber, you’re going to obtain much more Divi goodness and a loose Divi Format pack each Monday! In case you’re already at the record, merely input your e mail cope with beneath and click on obtain. You’ll no longer be “resubscribed” or obtain additional emails.

Obtain the Information

.et_bloom .et_bloom_optin_1 .et_bloom_form_content { background-color: #4843d2 !essential; } .et_bloom .et_bloom_optin_1 .et_bloom_form_container .et_bloom_form_header { background-color: #ffffff !essential; } .et_bloom .et_bloom_optin_1 .carrot_edge .et_bloom_form_content:ahead of { border-top-color: #ffffff !essential; } .et_bloom .et_bloom_optin_1 .carrot_edge.et_bloom_form_right .et_bloom_form_content:ahead of, .et_bloom .et_bloom_optin_1 .carrot_edge.et_bloom_form_left .et_bloom_form_content:ahead of { border-top-color: clear !essential; border-left-color: #ffffff !essential; }
@media handiest display and ( max-width: 767px ) {.et_bloom .et_bloom_optin_1 .carrot_edge.et_bloom_form_right .et_bloom_form_content:ahead of { border-top-color: #ffffff !essential; border-left-color: clear !essential; }.et_bloom .et_bloom_optin_1 .carrot_edge.et_bloom_form_left .et_bloom_form_content:after { border-bottom-color: #ffffff !essential; border-left-color: clear !essential; }
}.et_bloom .et_bloom_optin_1 .et_bloom_form_content button { background-color: #f92c8b !essential; } .et_bloom .et_bloom_optin_1 .et_bloom_form_content .et_bloom_fields i { coloration: #f92c8b !essential; } .et_bloom .et_bloom_optin_1 .et_bloom_form_content .et_bloom_custom_field_radio i:ahead of { background: #f92c8b !essential; } .et_bloom .et_bloom_optin_1 .et_bloom_border_solid { border-color: #f7f9fb !essential } .et_bloom .et_bloom_optin_1 .et_bloom_form_content button { background-color: #f92c8b !essential; } .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 robust { 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 robust, .et_bloom .et_bloom_optin_1 .et_bloom_form_container shape enter, .et_bloom .et_bloom_optin_1 .et_bloom_form_container shape button span { font-family: “Open Sans”, Helvetica, Arial, Lucida, sans-serif; } p.et_bloom_popup_input { padding-bottom: 0 !essential;}

Obtain For Unfastened

Sign up for the Divi E-newsletter and we can e mail you a replica of without equal Divi Touchdown Web page Format Pack, plus lots of different wonderful and loose Divi sources, guidelines and methods. Observe alongside and you’re going to be a Divi grasp very quickly. If you’re already subscribed merely kind to your e mail cope with beneath and click on obtain to get entry to the format pack.

You’ve gotten effectively subscribed. Please test your e mail cope with to substantiate your subscription and get get entry to to loose weekly Divi format packs!

To import the header template on your Divi Library, do the next:

Navigate to the Divi Theme Builder.
Click on the Import button on the peak proper of the web page.
Within the portability popup, make a choice the import tab
Make a selection the obtain document out of your pc (be sure to unzip the document first and use the JSON document).
Then click on the import button.

As soon as finished, the phase format will likely be to be had within the Divi Builder.

Let’s get to the educational, lets?

What You Wish to Get Began

To get began, it is very important do the next:

Set up Divi in your WordPress site.
Upload a Web page, give it a name, and post it.
Permit the Visible Builder.

Surroundings Up Our Web page

Whenever you click on the “Use Divi Builder” button the web page will reload the use of Divi’s drag and drop builder interface. 3 choices will pop up and for these days’s functions make a choice “Construct From Scratch” so that we’ve got a clean slate the place we will construct our fullwidth headers.

Tips on how to Design the Divi Bushcraft Group Fullwidth Header

Upload a Fulldwith Segment and Fullwidth Header

First, we’ll wish to upload a fullwidth phase to our web page. Click on at the “+” icon to carry up the phase choices after which click on “Fullwidth”. This may load the fullwidth module library the place you’ll be able to make a choice “Fullwidth Header” from the choices. This may load the fullwidth header module on your web page.

Upload The Content material

Now we’re going so as to add our module content material within the Textual content tab. Configure the next settings:

Header Textual content: Divi Bushcraft Group
Subtitle Textual content: Divi Bushcraft
Button #1: Sign up for As of late
Button #2: Be told Extra
Frame Textual content: At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident.

Taste the Background

This design makes use of a background symbol from the loose Divi Bushcraft pre-made format pack. You’ll get the entire pictures from that format pack on this submit. Merely scroll the entire option to the ground of the submit and click on to obtain the high-res pictures.

Upload Background Symbol

After getting the footage, upload a background symbol.

Click on the 3rd icon, the picture icon.
Click on “Upload Background Symbol”. This may carry up the media library the place you’ll be able to add a brand new picture or make a choice a photograph out of your media library.
The set the Background Symbol Mix Mode to Overlay.
Click on the primary icon, the paint bucket icon, and set a background coloration of: rgba(10,10,10,0.3)

Make a selection the Format

Beneath the Design settings, within the Format tab, make a choice middle alignment. Toggle the “Make Fullscreen” method to “sure”.

Taste Name Textual content

Taste the Name Textual content by means of configuring those settings:

Name Heading Degree: H1
Name Font: Josefin Sans
Name Font Weight: Daring
Name Font Taste: Uppercase
Name Textual content Dimension: 7rem

Taste Frame Textual content

Taste the frame textual content by means of configuring those settings:

Frame Font: Josefin Sans
Frame Textual content Dimension: 20px

Taste Subtitle Textual content

Taste the subtitle textual content by means of configuring those settings:

Subtitle Font: Josefin Sans
Subtitle Font Weight: Semi Daring
Subtitle Font Taste: Uppercase
Subtitle Letter Spacing: 3px
Subtitle Line Peak: 5em

Taste Button #1

Now let’s taste the buttons! For button one, configure those settings:

Use Customized Kinds For Button One: Sure
Button One Textual content Dimension: 14px
Button One Textual content Colour: #666b4a
Button One Background: #ead5a4
Button One Border Width: 0px
Button One Border Radius: 0px
Button One Letter Spacing: 3px
Button One Font Taste: Uppercase
Button One Padding: 15px peak and backside; 25px left and proper.

Taste Button #2

To taste button #2, configure the next settings:

Use Customized Kinds For Button One: Sure
Button One Textual content Dimension: 14px
Button One Textual content Colour: #ead5a4
Button One Background: #666b4a
Button One Border Width: 0px
Button One Border Radius: 0px
Button One Letter Spacing: 3px
Button One Font Taste: Uppercase
Button One Padding: 15px peak and backside; 25px left and proper.

And, voila! You’ve gotten a superbly styled fullwidth header with a textured background symbol with an overlay for the Divi Bushcraft Group.

Tips on how to Design Mrs. Nicole’s Fullwidth Header

Now let’s design a fullwidth header for Mrs. Nicole’s Second-grade magnificence! This header makes use of a background symbol and gradient to create a amusing and recent design. Let’s get began!