Development a hero phase is a superb option to name consideration to vital content material to your web page. It’s a super-sized piece of content material that you’ll be able to use to inform your tale, percentage details about your paintings, or spotlight a services or products. With Divi’s Fullwidth Header module, you’ll be able to upload a identify, a subtitle, two buttons, frame textual content, an emblem symbol and a header symbol. In fact, you’ll be able to additionally make the most of the background choices so as to add and mix photographs, gradients, colours, patterns, and mask. You’ll be able to edit all of those settings inside of the only fullwidth header module’s settings as an alternative of getting to toggle between more than one symbol, textual content, and button modules.

On this educational, we can display you the best way to construct a fascinating and attention-grabbing hero phase the usage of Divi’s fullwidth header module.

Let’s get began!

Sneak Peek

Here’s a preview of what we can design.

What You Want to Get Began

Ahead of we commence,  and make sure to have the most recent model of Divi to your website online.

Now, you’re ready to start out!

The best way to Construct a Hero Phase with Divi’s Fullwidth Header Module

Create a New Web page with a Premade Structure

Let’s get started by means of the usage of a premade format from the Divi library. For this design, we can use the Veterinarian Touchdown Web page from the Veterinarian Layout Pack.

Upload a brand new web page for your website online and provides it a identify, then make a selection the method to Use Divi Builder.

We will be able to use a premade format from the Divi library for this situation, so make a selection Browse Layouts.

Seek for and make a selection the Veterinarian Touchdown Web page format.

Make a choice Use This Structure so as to add the format for your web page.

Now we’re able to construct our design.

Upload the Fullwidth Header Module

We’re going to be recreating the hero phase the usage of the fullwidth header module. Upload a brand new fullwidth phase to the web page, under the present header.

Upload a fullwidth header module to the phase.

Then, delete the unique header phase.

Customise the Fullwidth Header Module

Upload Content material

Open the fullwidth header module settings and upload the next content material to the module:

• Identify: Veterinarian
• Subtitle: DiviVet. Serving Our Very best Buddies
• Button #1: View All Services and products
• Button #2: Make An Appointment
• Frame: Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Nulla quis lorem ut libero malesuada feugiat. Curabitur arcu erat, accumsan identification imperdiet et, porttitor at sem. Cras ultricies ligula sed magna dictum porta.

Subsequent, upload the Header Symbol of the veterinarians with the animals.

Gradient Background Settings

Transfer to the background settings. Delete the unique background colour, then upload 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 Kind: Elliptical
• Gradient Place: Proper

Subsequent, make a selection the Background Masks tab and upload a background masks to the background.

• Background Masks: Nook Blob
• Masks Colour: #FFFFFF
• Masks Become: Vertical

Customise Textual content Types

With our header content material and background in position, let’s transfer over to the design tab to customise the textual content types. First, open the identify settings and customise the textual content as follows:

• Identify Font: Nunito
• Identify Font Weight: Extremely Daring
• Identify Font Taste: TT (Capitalized)

Adjust the identify textual content colour, measurement, and spacing.

• Identify Textual content Colour: #a9cb6b
• Identify Textual content Measurement: 14px
• Identify Letter Spacing: 2px

Transfer to the frame textual content phase and customise the font. Use Divi’s responsive settings so as to add a smaller textual content measurement for cellular gadgets.

• Frame Textual content Colour: #000000
• Frame Textual content Measurement-Desktop: 18px
• Frame Textual content Measurement: Cellular: 14px
• Frame Line Peak: 1.8em

Subsequent, open the subtitle settings and customise the font.

• Subtitle Font: Nunito
• Subtitle Font Weight: Daring
• Subtitle Textual content Colour: #000000

In spite of everything, exchange the textual content measurement for desktop and cellular (as soon as once more, use the responsive settings so as to add a smaller textual content measurement on cellular) and regulate the road peak.

• Subtitle Textual content Measurement–Desktop: 56px
• Subtitle Textual content Measurement-Cellular: 32px
• Subtitle Line Peak: 1.2em

Customise Button One Types

Subsequent, we can customise the button types. Get started by means of enabling customized types for Button One, then regulate the textual content measurement.

• Use Customized Types for Button One: Sure
• Button One Textual content Measurement: 14px

Upload a background gradient to the button. Gradient values are as follows:

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

Subsequent, customise the border settings and font settings.

• Button One Border Width: 0px
• Button One Border Radius: 80px
• Button One Letter Spacing: 2px
• Button One Font: Nunito
• Button One Font Weight: Extremely Daring
• Button One Font Taste: TT (Capitalized)

Disable the Button One Icon.

• Display Button One Icon: No

Subsequent, customise the margin and padding settings for the desktop design and upload a field shadow.

• Button One Margin-Most sensible-Desktop: 200px
• Button One Margin-Backside-Desktop: 0px
• Button One Padding-Most sensible-Desktop: 16px
• Button One Padding-Backside-Desktop: 16px
• Button One Padding-Left-Desktop: 2em
• Button One Padding-Proper-Desktop: 50em
• Button Field Shadow: Backside

Use the responsive settings to set other margin and padding values on cellular gadgets.

• Button One Margin-Most sensible-Cellular: 25px
• Button One Padding-Proper-Cellular: 10em

There are some textual content wrap problems with our button that we can repair with some customized CSS later.

Customise Button Two Types

Button two has some other colours and spacing however is lovely very similar to button one. To avoid wasting repetitive design steps, let’s reproduction the button one module types to the button two module, then customise what we wish to exchange.

First, right-click at the button one phase and duplicate the button one types.

Then right-click at the button two phase and paste the button one types.

Now we will be able to customise the button two types. Exchange the textual content colour.

• Button Two Textual content Colour: #121F60

Customise the background gradient for button two.

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

Use the responsive settings to regulate the background gradient for cellular gadgets.

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

Subsequent, regulate the margin and padding for the desktop design.

• Button Two Margin-Most sensible-Desktop: 0px
• Button Two Margin-Backside-Desktop: 0px
• Button Two Margin-Left-Desktop: 30%
• Button Two Padding-Most sensible-Desktop: 16px
• Button Two Padding-Backside-Desktop: 16px
• Button Two Padding-Left-Desktop: 48em
• Button Two Padding-Proper-Desktop: 2em

Use the responsive settings to set other margin and padding values for the cellular design.

• Button Two Margin-Left-Cellular: 5%
• Button Two Padding-Left-Cellular: 35%
• Button Two Padding-Proper-Cellular: 5%

Customized CSS

In spite of everything, the majority of the design paintings is completed. Now we wish to upload some customized CSS to finish the design. Transfer over to the Complex tab and open the Customized CSS phase.

First, let’s get started with the Header Symbol CSS. This CSS permits the header symbol to show above the button.

z-index: 1;
place:relative;

Subsequent, Customized CSS to the Identify. We’ll set other values for the desktop and cellular perspectives the usage of the responsive settings.

For desktop:

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

For cellular:

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

In spite of everything, upload the next CSS to Button One and Button Two.

white-space: nowrap;

Ultimate Consequence

Here’s the general design for our fullwidth header hero phase.

Ultimate Ideas

The fullwidth header module lets you simply create an exquisite hero phase to put it up for sale your products and services and inform your guests what your website online is set. The integrated settings make it simple to customise the design of each facet of the header, and the whole lot is in a single position, so no wish to toggle between more than one modules to construct your hero phase. For extra distinctive hero phase designs, take a look at this educational: How to Use Divi’s Background Masks and Patterns for a Hero Section. Do you utilize the fullwidth header module to construct your hero sections? We would really like to listen to from you within the feedback!

The publish How to Build a Hero Section with Divi’s Fullwidth Header Module gave the impression first on Elegant Themes Blog.

WordPress Maintenance Plans | WordPress Hosting

read more