How to Style Your Fullwidth Header Module’s Background

Divi’s Fullwidth Header module makes it easy to design a stunning hero section for your website in just minutes. A hero section is the very first section of your website that your visitors will see, so you’ll want it to be branded, informative, and compelling. Thankfully, the Divi Fullwidth Header comes packed with content options: header text, subtitle text, body text, two images, and two buttons. We’ll be utilizing all of these elements in our fullwidth headers today.

In this post, we’re going to demonstrate 3 ways to design your fullwidth header’s background with eye-catching designs. Ready to get started? Let’s dive in!

Design Preview

Let’s take a look at the 3 fullwidth headers we’ll be designing today.

Divi Bushcraft Community

The first design uses Divi’s background image options to create a textured background that is unique and on-brand for the Bushcraft Community.

Mrs. Nicole’s 2nd Grade

This second design uses a background image and background gradient to create a clean, modern, and fresh welcome header for Mrs. Nicole’s 2nd-grade class.

Realtor Header

The third design utilizes a background image, background gradient, and background pattern, all combined to create an elevated yet subtle design for a realtor’s home page.

Download the Layouts for FREE

To lay your hands on the designs from this tutorial, you will first need to download it using the button below. To gain access to the download you will need to subscribe to our newsletter by using the form below. As a new subscriber, you will receive even more Divi goodness and a free Divi Layout pack every Monday! If you’re already on the list, simply enter your email address below and click download. You will not be “resubscribed” or receive extra emails.

Download the Files

.et_bloom .et_bloom_optin_1 .et_bloom_form_content { background-color: #4843d2 !important; } .et_bloom .et_bloom_optin_1 .et_bloom_form_container .et_bloom_form_header { background-color: #ffffff !important; } .et_bloom .et_bloom_optin_1 .carrot_edge .et_bloom_form_content:before { border-top-color: #ffffff !important; } .et_bloom .et_bloom_optin_1 .carrot_edge.et_bloom_form_right .et_bloom_form_content:before, .et_bloom .et_bloom_optin_1 .carrot_edge.et_bloom_form_left .et_bloom_form_content:before { border-top-color: transparent !important; border-left-color: #ffffff !important; }
@media only screen and ( max-width: 767px ) {.et_bloom .et_bloom_optin_1 .carrot_edge.et_bloom_form_right .et_bloom_form_content:before { border-top-color: #ffffff !important; border-left-color: transparent !important; }.et_bloom .et_bloom_optin_1 .carrot_edge.et_bloom_form_left .et_bloom_form_content:after { border-bottom-color: #ffffff !important; border-left-color: transparent !important; }
}.et_bloom .et_bloom_optin_1 .et_bloom_form_content button { background-color: #f92c8b !important; } .et_bloom .et_bloom_optin_1 .et_bloom_form_content .et_bloom_fields i { color: #f92c8b !important; } .et_bloom .et_bloom_optin_1 .et_bloom_form_content .et_bloom_custom_field_radio i:before { background: #f92c8b !important; } .et_bloom .et_bloom_optin_1 .et_bloom_border_solid { border-color: #f7f9fb !important } .et_bloom .et_bloom_optin_1 .et_bloom_form_content button { background-color: #f92c8b !important; } .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 !important;}

Download For Free

Join the Divi Newsletter and we will email you a copy of the ultimate Divi Landing Page Layout Pack, plus tons of other amazing and free Divi resources, tips and tricks. Follow along and you will be a Divi master in no time. If you are already subscribed simply type in your email address below and click download to access the layout pack.

DOWNLOAD

You have successfully subscribed. Please check your email address to confirm your subscription and get access to free weekly Divi layout packs!

 

To import the header template to your Divi Library, do the following:

1. Navigate to the Divi Theme Builder.
2. Click the Import button at the top right of the page.
3. In the portability popup, select the import tab
4. Choose the download file from your computer (make sure to unzip the file first and use the JSON file).
5. Then click the import button.

Once done, the section layout will be available in the Divi Builder.

Let’s get to the tutorial, shall we?

What You Need to Get Started

To get started, you will need to do the following:

1. Install Divi on your WordPress website.
2. Add a Page, give it a title, and publish it.
3. Enable the Visual Builder.

Setting Up Our Page

Once you click the “Use Divi Builder” button the page will reload using Divi’s drag and drop builder interface. Three options will pop up and for today’s purposes select “Build From Scratch” so that we have a blank slate where we can build our fullwidth headers.

How to Design the Divi Bushcraft Community Fullwidth Header

Add a Fulldwith Section and Fullwidth Header

First, we’ll need to add a fullwidth section to our page. Click on the “+” icon to bring up the section options and then click “Fullwidth”. This will load the fullwidth module library where you can select “Fullwidth Header” from the options. This will load the fullwidth header module to your page.

Add The Content

Now we’re going to add our module content in the Text tab. Configure the following settings:

1. Header Text: Divi Bushcraft Community
2. Subtitle Text: Divi Bushcraft
3. Button #1: Join Today
4. Button #2: Learn More
5. Body Text: 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.

Style the Background

This design utilizes a background image from the free Divi Bushcraft pre-made layout pack. You can get all of the images from that layout pack in this post. Simply scroll all the way to the bottom of the post and click to download the high-res images.

Add Background Image

Once you have the photos, add a background image.

1. Click the third icon, the image icon.
2. Click “Add Background Image”. This will bring up the media library where you can upload a new photo or select a photo from your media library.
3. The set the Background Image Blend Mode to Overlay.
4. Click the first icon, the paint bucket icon, and set a background color of: rgba(10,10,10,0.3)

Choose the Layout

Underneath the Design settings, in the Layout tab, select center alignment. Toggle the “Make Fullscreen” option to “yes”.

Style Title Text

Style the Title Text by configuring these settings:

1. Title Heading Level: H1
2. Title Font: Josefin Sans
3. Title Font Weight: Bold
4. Title Font Style: Uppercase
5. Title Text Size: 7rem

Style Body Text

Style the body text by configuring these settings:

1. Body Font: Josefin Sans
2. Body Text Size: 20px

Style Subtitle Text

Style the subtitle text by configuring these settings:

1. Subtitle Font: Josefin Sans
2. Subtitle Font Weight: Semi Bold
3. Subtitle Font Style: Uppercase
4. Subtitle Letter Spacing: 3px
5. Subtitle Line Height: 5em

Style Button #1

Now let’s style the buttons! For button one, configure these settings:

1. Use Custom Styles For Button One: Yes
2. Button One Text Size: 14px
3. Button One Text Color: #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 Style: Uppercase
9. Button One Padding: 15px top and bottom; 25px left and right.

Style Button #2

To style button #2, configure the following settings:

1. Use Custom Styles For Button One: Yes
2. Button One Text Size: 14px
3. Button One Text Color: #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 Style: Uppercase
9. Button One Padding: 15px top and bottom; 25px left and right.

And, voila!  You have a beautifully styled fullwidth header with a textured background image with an overlay for the Divi Bushcraft Community.

How to Design Mrs. Nicole’s Fullwidth Header

Now let’s design a fullwidth header for Mrs. Nicole’s 2nd-grade class! This header uses a background image and gradient to create a fun and fresh design. Let’s get started!

Add a new page, then add a Fullwidth Section and Fullwidth Header

First, we’ll need to add a fullwidth section to our page. Click on the “+” icon to bring up the section options and then click “Fullwidth”. This will load the fullwidth module library where you can select “Fullwidth Header” from the options. This will load the fullwidth header module to your page.

Add The Content

Now we’re going to add our module content in the Text tab. Configure the following settings:

1. Header Text: Welcome To Mrs. Nicole’s 2nd Grade Class
2. Subtitle Text: Welcome
3. Button #1: View Assignments
4. Button #2: Contact Mrs. Nicole
5. Body Text: Donec sollicitudin molestie malesuada. Nulla quis lorem ut libero malesuada feugiat.

Style the Background

This design uses images from the free Classroom pre-made layout pack. You can download the full-res images by scrolling to the bottom of this post.

Style the background by configuring these settings:

1. Click the second tab, the gradient icon.
2. Set the gradient stops to: #ffffff at 40%, and transparent at 18%.
3. Set the gradient direction to 219 degrees.
4. Toggle “yes” for the Place Gradient Above Background Image.
5. Click on the third icon, the image icon, and click “Add Background Image”.

Choose the Layout

Here is where we’re going to align the module content to the center and make it fullscreen.

1. Text & Logo Alignment: Center
2. Make Fullscreen: Yes

Style the Title Text

Style the title text by configuring these settings:

1. Title Font: Candal
2. Title Text Size: 4rem

Style the Body Text

Style the body text by configuring these settings:

1. Body Font: Montserrat
2. Body Text Color: #6d6d6d
3. Body Text Size: 20px

Style the Subtitle Text

Style the subtitle text by configuring these settings:

1. Subtitle Font Weight: Ultra Bold
2. Subtitle font Style: Uppercase
3. Subtitle Text Color: rgba(28,10,10,0.6)
4. Subtitle Letter Spacing: 3px
5. Subtitle Line Height: 3em

Style Button #1

Style button #1 by configuring these settings:

1. Use Custom Styles For Button One: Yes
2. Button One Text Size: 15px
3. Button One Text Color: #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: Ultra Bold
9. Button One Font Style: Uppercase
10. Button One Padding: 15px top and bottom; 25px left and right.

Style Button #2

Style button #2 by configuring these settings:

1. Use Custom Styles For Button Two: Yes
2. Button Two Text Size: 15px
3. Button Two Text Color: #ffd078
4. Button Two Background: transparent
5. Button Two Border Width: 0px
6. Button Two Border Radius: 0px
7. Button Two Letter Spacing: 3px
8. Button Two Font Weight: Ultra Bold
9. Button Two Font Style: Uppercase
10. Button Two Icon Color: #ffd078
11. Only Show Icon On Hover For Button Two: No
12. Button Two Padding: 15px top and bottom; 25px left and right.

Sizing

Set the content width to 70%.

Voila! You now have a fully designed fullwidth header for Mrs. Nicole’s 2nd grade class.

How to Design a Realtor’s Fullwidth Header

Let’s design this elegant and modern fullwidth header for a realtor’s website. This section utilizes a background image, background gradient, AND a background pattern. Let’s get to work!

Add a new page, then add a Fullwidth Section and Fullwidth Header

First, we’ll need to add a fullwidth section to our page. Click on the “+” icon to bring up the section options and then click “Fullwidth”. This will load the fullwidth module library where you can select “Fullwidth Header” from the options. This will load the fullwidth header module to your page.

Add Content

First, let’s add the content needed for this module in the Text tab:

1. Title: Let’s Find Your Dream Home
2. Subtitle: Dave Merrit – Realtor
3. Button #1 – Book A Free Consult
4. Button #2 – Email Me
5. Body Text: Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto.

Style the Background

Add a Gradient

In the background tab, click the second icon, the gradient icon, and configure these settings:

1. Gradient Stops: rgba(56,65,58,0.74) at 100% and #38413a at 70%
2. Gradient Direction: 88deg
3. Place Gradient Above Background Image: Yes

Add Image

Click the third icon, the image icon, and then click “Add Background Image” to upload your image. This demonstration uses images from the free Realtor pre-made layout pack. You can download the full-resolution images by scrolling to the bottom of this post.

Add a Background Pattern

Add a background pattern by configuring these settings:

1. Select Tufted from the dropdown.
2. Pattern Color: rgba(0,0,0,0.2)

Choose the Layout

Here is where we’re going to align the module content to the center and make it fullscreen.

1. Text & Logo Alignment: Center
2. Make Fullscreen: Yes

Style the Title Text

Style the title text by configuring these settings:

1. Title Font: Merriweather
2. title Text Size: 5rem

Style the Body Text

Style the body text by configuring these settings:

1. Body Font: Open Sans
2. Body Text Size: 16px
3. Body Line Height: 2em

Style the Subtitle Text

Style the subtitle text by configuring these settings:

1. Subtitle Font: Open Sans
2. Subtitle Font Weight: Bold
3. Subtitle Font Style: Uppercase
4. Subtitle Text Color: #b4926b
5. Subtitle Letter Spacing: 3px

Style Button #1

Style button #1 by configuring these settings:

1. Use Custom Styles For Button One: Yes
2. Button One Text Size: 18px
3. Button One Background: #b4926b
4. Button One Border Width: 0px
5. Button One Border Radius: 0px
6. Button One Padding: 10px top and bottom; 25px left and right.

Style Button #2

Style button #2 by configuring these settings:

1. Use Custom Styles For Button Two: Yes
2. Button Two Text Size: 18px
3. Button Two Border Width: 1px
4. Button Two Border Color: rgba(255,255,255,0.19)
5. Button Two Border Radius: 0x
6. Button Two Padding: 10px top and bottom; 25px left and right

Voila! Now you have a beautiful fullwidth header for a realtor website.

Final Thoughts

The Divi Fullwidth Header is a fast and easy way to build a stunning website hero section for your website. Since website hero sections are so essential in making a great first impression, it’s important that your design is branded, eye-catching, and informative. With the Fullwidth Header, it’s easy to build a header that hits all of those goals within one module. Now that you’ve seen what’s possible with the Fullwidth Header, how will you design yours?

The post How to Style Your Fullwidth Header Module’s Background appeared first on Elegant Themes Blog.