Divi: How to create a Hero section with the Fullwidth Header module

Would you like to know how to create a Hero section with Divi's Fullwidth Header module?

Building a Hero section is a great way to draw attention to the contents important to your page. This is a contents large size that you can use to tell your story, share information about your work, or highlight a product or service.

With Divi's Fullwidth Header module, you can add a title, subtitle, two buttons, body text, logo image, and header image. Of course, you can also use the background options to add and combine images, gradients, colors, patterns, and masks.

You can change all of these settings in the module settings instead of having to switch between multiple image, text, and button modules.

In this tutorial, we will show you how to create an attractive and eye-catching Hero section using Divi's Fullwidth Header module.

Let's go !

Preview

Here's a preview of what we'll be designing.

What you need to get started

Before you start, make sure you have the latest version of Divi on your Website.

Now you are ready to start!

How to Create a Hero Section with Divi's Fullwidth Header Module

Read also: Divi: How to use the “Gradient Builder” to beautify your images

Create a new page with a predefined layout

Let's start by using a predefined layout from the Divi library. For this design we will use the homepage veterinarian layout pack.

From the Worpress dashboard, add a new page to your Website

Give it a title, then select the option Use Divi Builder.

We are going to use a predefined layout from the Divi library for this example. So select Browse Layouts.

Find and select the layout dog breeder.

Select Use This Layout to add the layout to your page.

We are now ready to design.

Add the Fullwidth Header module

We will recreate the hero section using the Fullwidth Header module. Add a new full-width section to the page, below the existing header.

Add a Fullwidth Header module to the section.

Next, delete the original header section.

Customize the Fullwidth Header module

Add content

Open the module settings and add the contents next to the module:

• Title: Veterinarian
• Subtitle: Divivet. Serve our best friends
• Button #1: All Services
• Button #2: Make an appointment
• Body: Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Nulla quis lorem ut libero malesuada feugiat. Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Cras ultricies ligula sed magna dictum porta.

Next, add a header image.

Gradient background settings

Go to background settings. Delete the original background color, then add a background gradient.

• 0%: rgba(255,170,205,0.48)
• 40%: rgba(110,66,255,0.24)
• 87%: rgba(124,239,255,0.71)
• Gradient Type: Elliptical
• Gradient Position: Right

Then select the tab BackgroundMask and add a background mask.

• Mask Background: Corner Blob
• Mask Color: #FFFFFF
• Transform: vertical

Customize text

Switch to tab Design and change the title settings

• Title Font: Nunito
• Title Font Weight: Ultra Bold
• Font Style: TT (Uppercase)

• Title Text Color: #a9cb6b
• Text Size: 14px
• Title Letter Spacing: 2px

Go to the section of BodyText and customize the font.

• Text Color: #000000
• Body Text Size:
  • Desktop: 18px
  • Phone: 14px
• Body Line Height: 1.8em

See also: Divi: How to customize the basket and search icons of the "Fullwidth Menu" module

Next, open the subtitle settings and customize the font.

• Subtitle Font: Nunito
• Subtitle Font Weight: Bold
• Text Color: #000000

Finally, change the size of the text

• Subtitle Text Size:
  • Desktop: 56px
  • Movable: 32px
• Subtitle Line Height: 1.2em

Customize Button #1

Next, we'll customize the button styles. Start by enabling custom styles for button one, then adjust the text size.

• Use Custom Styles For Button: YES
• Button One Text Size: 14px

Add a background gradient to the button. The gradient values ​​are as follows:

• 58%: #316EFF
• 100%: #1D2B60
• Gradient Direction: 90deg

Next, customize border settings and font settings.

• Button One:
  • Border Width: 0px
  • Border Radius: 80px
  • Letter Spacing: 2px
  • Font: Nunito
  • Font Weight: Ultra Bold
  • Style: TT (Capitalized)
• Show Button One Icon: NO

Next, customize the margin and padding settings for the desktop design and add a box shadow.

• Button One Margin
  • Top: 200px
  • Bottom: 0px
• Button One Padding:
  • Top: 16px
  • Bottom: 16px
  • Left: 2em
  • Right: 50em
• Box Shadow: View Capture

Use responsive settings to set different margin and padding values ​​on mobile devices.

• Button One Margin-Top-Mobile: 25px
• Button One Padding-Right-Mobile: 10em

Customize Button #2

First, right click button #1 and click Copy Button One Styles.

Next, right click on button two and paste the styles from button #1.

Now we can customize button two. Change the text color.

• Button Two Text Color: #121F60

Customize the background gradient for button two.

• 30%: rgba(0,229,198,0)
• 100%: #00e5c6

Use responsive settings to adjust the background gradient for mobile devices.

• 0%: rgba(0,229,198,0)
• 100%: #00e5c6

Next, adjust the margin and padding for the desktop design.

• Button Two Margin:
  • Top: 0px
  • Bottom: 0px
  • Left: 30%
• Button Two Padding:
  • Top: 16px
  • Bottom: 16px
  • Left: 48em
  • Right: 2em

Use responsifq settings to set different margin and padding values ​​for mobile design.

• Button Two Margin-Left-Mobile: 5%
• Button Two Padding:
  • Left-Mobile: 35%
  • Right-Mobile: 5%

Custom CSS

Finally, the bulk of the design work is done. Now we need to add custom CSS to complete the design. Switch to tab Advanced and open the section Custom CSS.

First, let's start with the CSS for the header image. This CSS allows the header image to display above the button.

z-index: 1;
position:relative;

Next, custom CSS in the title. We will set different values ​​for desktop and mobile views using responsive settings.

For desktop computer:

padding-top:50px;
padding-bottom:30px;

For mobile:

padding-top:5px;
padding-bottom:10px;

Finally, add the following CSS to button one and button two.

white-space: nowrap;

Final result

Here is the final design for our full-width header hero section.

Read also: Divi: How to create a team members section as a carousel

Download DIVI Now!!!

Conclusion

The Fullwidth Header module allows you to easily create a beautiful Hero section to advertise your services and tell your visiteurs what is your talking about Website.

Built-in settings make it easy to customize every aspect of the header, and it's all in one place, so no need to switch between multiple modules to build your Hero section.

We hope this tutorial will inspire you for your next Divi projects. If you have any concerns or suggestions, find us in the comments section to talk about it.

You can also consult our resources, if you need more elements to carry out your projects of creation of Internet sites, by consulting our guide on the WordPress blog creation or the one on Divi: the best WordPress theme of all time.

But meanwhile, share this article on your different social networks.

...