How to Build a Hero Section with Divi’s Fullwidth Header Module

by | Aug 16, 2022 | Etcetera | 0 comments

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.

Divi Fullwidth Header Hero Section Final Design

Divi Fullwidth Header Hero Section Final Design Mobile

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.

Divi Fullwidth Header Hero Section 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.

Divi Fullwidth Header Hero Section Browse Layouts

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

Divi Fullwidth Header Hero Section Find Layout

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

Divi Fullwidth Header Hero Section Use Layout

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.

See also  How to Use the Filter Products by Attribute WooCommerce Block

Divi Fullwidth Header Hero Section Add Fullwidth Section

Upload a fullwidth header module to the phase.

Divi Fullwidth Header Hero Section Fullwidth Header Module

Then, delete the unique header phase.

Divi Fullwidth Header Hero Section Delete Section

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.

Divi Fullwidth Header Hero Section Add Content

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

Divi Fullwidth Header Hero Section Add Image

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

Divi Fullwidth Header Hero Section Gradient Background

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

Divi Fullwidth Header Hero Section Background Mask

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)

Divi Fullwidth Header Hero Section Title Text

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

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

Divi Fullwidth Header Hero Section Title Color Size

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

Divi Fullwidth Header Hero Section Body Color

Subsequent, open the subtitle settings and customise the font.

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

Divi Fullwidth Header Hero Section Subtitle Font

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
See also  Download a FREE Blog Post Template for Divi’s Home Baker Layout Pack

Divi Fullwidth Header Hero Section Subtitle Size

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

Divi Fullwidth Header Hero Section Button One

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

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

Divi Fullwidth Header Hero Section Button Background Gradient

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)

Divi Fullwidth Header Hero Section Button Border

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

Divi Fullwidth Header Hero Section Button One Margin Padding

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

Divi Fullwidth Header Hero Section Button One Margin Padding Mobile

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.

Divi Fullwidth Header Hero Section Copy Button One Styles

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

Divi Fullwidth Header Hero Section Paste Button One Styles

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

  • Button Two Textual content Colour: #121F60

Divi Fullwidth Header Hero Section Button Two Text

Customise the background gradient for button two.

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

Divi Fullwidth Header Hero Section Button Two Background Gradient

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

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

Divi Fullwidth Header Hero Section Button Two Background Gradient Mobile

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
See also  WordPress Pricing: How Much Does a WordPress Website Really Cost?

Divi Fullwidth Header Hero Section Button Two Margin Padding

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%

Divi Fullwidth Header Hero Section Button Two Margin Padding Mobile

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;

Divi Fullwidth Header Hero Section Header Image CSS

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;

Divi Fullwidth Header Hero Section Title CSS Desktop

For cellular:

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

Divi Fullwidth Header Hero Section Title CSS Mobile

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

white-space: nowrap;

Divi Fullwidth Header Hero Section Button CSS

Ultimate Consequence

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

Divi Fullwidth Header Hero Section Full Design

Divi Fullwidth Header Hero Section Final Design Mobile

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

0 Comments

Submit a Comment

Your email address will not be published.