Divi’s Fullwidth Header module makes it simple to design a shocking hero segment in your web page in simply mins. A hero segment is the first actual segment of your web page 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 photographs, and two buttons. We’ll be using all of those components in our fullwidth headers nowadays.

On this submit, we’re going to show 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 nowadays.

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 contemporary welcome header for Mrs. Nicole’s Second-grade elegance.

Realtor Header

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

Obtain the Layouts for FREE

To put your arms at the designs from this instructional, you’ll first want to obtain it the use of the button under. To realize get entry to to the obtain it is important to subscribe to our e-newsletter via the use of the shape under. As a brand new subscriber, you’ll obtain much more Divi goodness and a loose Divi Structure pack each and every Monday! Should you’re already at the checklist, merely input your e mail deal with under and click on obtain. You are going to now not be “resubscribed” or obtain further emails.

Download the Files

.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:sooner than { border-top-color: #ffffff !essential; } .et_bloom .et_bloom_optin_1 .carrot_edge.et_bloom_form_right .et_bloom_form_content:sooner than, .et_bloom .et_bloom_optin_1 .carrot_edge.et_bloom_form_left .et_bloom_form_content:sooner than { 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:sooner than { 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 { shade: #f92c8b !essential; } .et_bloom .et_bloom_optin_1 .et_bloom_form_content .et_bloom_custom_field_radio i:sooner than { 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 sturdy { 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 sturdy, .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;}

See also  Responsive Design: What Is It & Why Is It Important?

Obtain For Unfastened

Sign up for the Divi E-newsletter and we will be able to e mail you a duplicate of without equal Divi Touchdown Web page Structure Pack, plus lots of alternative superb and loose Divi assets, guidelines and methods. Practice alongside and you’ll be a Divi grasp very quickly. If you’re already subscribed merely sort to your e mail deal with under and click on obtain to get entry to the structure pack.

DOWNLOAD

You could have effectively subscribed. Please take a look at your e mail deal with to verify your subscription and get get entry to to loose weekly Divi structure packs!

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

1. Navigate to the Divi Theme Builder.
2. Click on the Import button on the peak proper of the web page.
3. Within the portability popup, choose the import tab
4. Make a choice the obtain report out of your laptop (make sure you unzip the report first and use the JSON report).
5. Then click on the import button.

As soon as executed, the segment structure might be to be had within the Divi Builder.

Let’s get to the educational, we could?

What You Wish to Get Began

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

1. Install Divi to your WordPress web page.
2. Upload a Web page, give it a identify, and post it.
3. Allow the Visible Builder.

Environment Up Our Web page

When 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 nowadays’s functions choose “Construct From Scratch” so that we’ve got a clean slate the place we will construct our fullwidth headers.

How you can Design the Divi Bushcraft Group Fullwidth Header

Upload a Fulldwith Segment and Fullwidth Header

First, we’ll want to upload a fullwidth segment to our web page. Click on at the “+” icon to convey up the segment choices after which click on “Fullwidth”. This may load the fullwidth module library the place you’ll choose “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:

1. Header Textual content: Divi Bushcraft Group
2. Subtitle Textual content: Divi Bushcraft
3. Button #1: Sign up for Lately
4. Button #2: Be informed Extra
5. 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 structure pack. You’ll get all the photographs from that structure pack in this post. Merely scroll all of the technique to the ground of the submit and click on to obtain the high-res photographs.

Upload Background Symbol

After getting the pictures, upload a background symbol.

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

Make a choice the Structure

Beneath the Design settings, within the Structure tab, choose middle alignment. Toggle the “Make Fullscreen” strategy to “sure”.

Taste Identify Textual content

Taste the Identify Textual content via configuring those settings:

1. Identify Heading Stage: H1
2. Identify Font: Josefin Sans
3. Identify Font Weight: Daring
4. Identify Font Taste: Uppercase
5. Identify Textual content Dimension: 7rem

Taste Frame Textual content

Taste the frame textual content via configuring those settings:

1. Frame Font: Josefin Sans
2. Frame Textual content Dimension: 20px

Taste Subtitle Textual content

Taste the subtitle textual content via configuring those settings:

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

Taste Button #1

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

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

Taste Button #2

To taste button #2, configure the next settings:

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

And, voila!  You could have a fantastically styled fullwidth header with a textured background symbol with an overlay for the Divi Bushcraft Group.

How you can Design Mrs. Nicole’s Fullwidth Header

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

Upload a brand new web page, then upload a Fullwidth Segment and Fullwidth Header

First, we’ll want to upload a fullwidth segment to our web page. Click on at the “+” icon to convey up the segment choices after which click on “Fullwidth”. This may load the fullwidth module library the place you’ll choose “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:

1. Header Textual content: Welcome To Mrs. Nicole’s Second Grade Elegance
2. Subtitle Textual content: Welcome
3. Button #1: View Assignments
4. Button #2: Touch Mrs. Nicole
5. Frame Textual content: Donec sollicitudin molestie malesuada. Nulla quis lorem ut libero malesuada feugiat.

Taste the Background

This design makes use of photographs from the loose School room pre-made structure pack. You’ll obtain the full-res photographs via scrolling to the ground of this post.

Taste the background via configuring those settings:

1. Click on the second one tab, the gradient icon.
2. Set the gradient stops to: #ffffff at 40%, and clear at 18%.
3. Set the gradient course to 219 levels.
4. Toggle “sure” for the Position Gradient Above Background Symbol.
5. Click on at the 3rd icon, the picture icon, and click on “Upload Background Symbol”.

Make a choice the Structure

This is the place we’re going to align the module content material to the middle and make it fullscreen.

1. Textual content & Brand Alignment: Middle
2. Make Fullscreen: Sure

Taste the Identify Textual content

Taste the identify textual content via configuring those settings:

1. Identify Font: Candal
2. Identify Textual content Dimension: 4rem

Taste the Frame Textual content

Taste the frame textual content via configuring those settings:

1. Frame Font: Montserrat
2. Frame Textual content Colour: #6d6d6d
3. Frame Textual content Dimension: 20px

Taste the Subtitle Textual content

Taste the subtitle textual content via configuring those settings:

1. Subtitle Font Weight: Extremely Daring
2. Subtitle font Taste: Uppercase
3. Subtitle Textual content Colour: rgba(28,10,10,0.6)
4. Subtitle Letter Spacing: 3px
5. Subtitle Line Peak: 3em

Taste Button #1

Taste button #1 via configuring those settings:

1. Use Customized Kinds For Button One: Sure
2. Button One Textual content Dimension: 15px
3. Button One Textual content Colour: #ffffff
4. Button One Background: #000000
5. Button One Border Width: 0px
6. Button One Border Radius: 0px
7. Button One Letter Spacing: 3px
8. Button One Font Weight: Extremely Daring
9. Button One Font Taste: Uppercase
10. Button One Padding: 15px peak and backside; 25px left and proper.

Taste Button #2

Taste button #2 via configuring those settings:

1. Use Customized Kinds For Button Two: Sure
2. Button Two Textual content Dimension: 15px
3. Button Two Textual content Colour: #ffd078
4. Button Two Background: clear
5. Button Two Border Width: 0px
6. Button Two Border Radius: 0px
7. Button Two Letter Spacing: 3px
8. Button Two Font Weight: Extremely Daring
9. Button Two Font Taste: Uppercase
10. Button Two Icon Colour: #ffd078
11. Handiest Display Icon On Hover For Button Two: No
12. Button Two Padding: 15px peak and backside; 25px left and proper.

Sizing

Set the content material width to 70%.

Voila! You currently have a completely designed fullwidth header for Mrs. Nicole’s Second grade elegance.

How you can Design a Realtor’s Fullwidth Header

Let’s design this sublime and trendy fullwidth header for a realtor’s web page. This segment makes use of a background symbol, background gradient, AND a background development. Let’s get to paintings!

Upload a brand new web page, then upload a Fullwidth Segment and Fullwidth Header

First, we’ll want to upload a fullwidth segment to our web page. Click on at the “+” icon to convey up the segment choices after which click on “Fullwidth”. This may load the fullwidth module library the place you’ll choose “Fullwidth Header” from the choices. This may load the fullwidth header module on your web page.

Upload Content material

First, let’s upload the content material wanted for this module within the Textual content tab:

1. Identify: Let’s In finding Your Dream House
2. Subtitle: Dave Merrit – Realtor
3. Button #1 – E-book A Unfastened Seek the advice of
4. Button #2 – Electronic mail Me
5. Frame Textual content: Sed ut perspiciatis unde omnis iste natus error sit down voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto.

Taste the Background

Upload a Gradient

Within the background tab, click on the second one icon, the gradient icon, and configure those settings:

1. Gradient Stops: rgba(56,65,58,0.74) at 100% and #38413a at 70%
2. Gradient Path: 88deg
3. Position Gradient Above Background Symbol: Sure

Upload Symbol

Click on the 3rd icon, the picture icon, after which click on “Upload Background Symbol” to add your symbol. This demonstration makes use of photographs from the loose Realtor pre-made structure pack. You’ll obtain the full-resolution photographs via scrolling to the ground of this post.

Upload a Background Development

Upload a background development via configuring those settings:

1. Make a choice Tufted from the dropdown.
2. Development Colour: rgba(0,0,0,0.2)

Make a choice the Structure

This is the place we’re going to align the module content material to the middle and make it fullscreen.

1. Textual content & Brand Alignment: Middle
2. Make Fullscreen: Sure

Taste the Identify Textual content

Taste the identify textual content via configuring those settings:

1. Identify Font: Merriweather
2. identify Textual content Dimension: 5rem

Taste the Frame Textual content

Taste the frame textual content via configuring those settings:

1. Frame Font: Open Sans
2. Frame Textual content Dimension: 16px
3. Frame Line Peak: 2em

Taste the Subtitle Textual content

Taste the subtitle textual content via configuring those settings:

1. Subtitle Font: Open Sans
2. Subtitle Font Weight: Daring
3. Subtitle Font Taste: Uppercase
4. Subtitle Textual content Colour: #b4926b
5. Subtitle Letter Spacing: 3px

Taste Button #1

Taste button #1 via configuring those settings:

1. Use Customized Kinds For Button One: Sure
2. Button One Textual content Dimension: 18px
3. Button One Background: #b4926b
4. Button One Border Width: 0px
5. Button One Border Radius: 0px
6. Button One Padding: 10px peak and backside; 25px left and proper.

Taste Button #2

Taste button #2 via configuring those settings:

1. Use Customized Kinds For Button Two: Sure
2. Button Two Textual content Dimension: 18px
3. Button Two Border Width: 1px
4. Button Two Border Colour: rgba(255,255,255,0.19)
5. Button Two Border Radius: 0x
6. Button Two Padding: 10px peak and backside; 25px left and proper

Voila! Now you’ve got a stupendous fullwidth header for a realtor web page.

Ultimate Ideas

The Divi Fullwidth Header is a quick and simple technique to construct a shocking web page hero segment in your web page. Since web page hero sections are so crucial in making an ideal first affect, it’s essential that your design is branded, attention-grabbing, and informative. With the Fullwidth Header, it’s simple to construct a header that hits all of the ones targets inside of one module. Now that you simply’ve noticed what’s imaginable with the Fullwidth Header, how can you design yours?

The submit How to Style Your Fullwidth Header Module’s Background gave the impression first on Elegant Themes Blog.

read more