The Divi Fullwidth Header module makes it simple so as to add stunning hero sections on your website online. The module comes with two buttons, a name textual content, subtitle textual content, frame textual content, a symbol, and a picture, making the customization choices unending.

In nowadays’s put up, we’re going to reveal the right way to re-create hero sections the use of the Divi Fullwidth Header. We’ll get started our design by means of the use of 3 premade structure packs and design our sections with a focal point on balancing the main and secondary buttons. We would like the main button to face out, because it’s our major name to motion whilst protecting the secondary button visual and out there with out overtaking the main button.

Design Ideas of Number one and Secondary Buttons

Number one buttons and secondary buttons lend a hand information your website online guests in opposition to positive movements. Number one buttons are most often the commonest or desired motion and secondary buttons are a much less not unusual motion. This is helping information guests to the place they need to move.

To perform this, number one buttons must stand out visually and secondary buttons must now not stand out as a lot. That implies number one buttons must be extra unique and feature extra visible weight in order that it draws extra consideration.

Now that we have got an figuring out of the way number one and secondary buttons paintings, let’s get to the educational!

Design Preview

Right here’s a take a look at the 3 fullwidth headers we can be designing nowadays.

UX Fullwidth Header

Divi Retirement Heart Fullwidth Header

Monetary Making plans Fullwidth Header

Obtain the Layouts for FREE

To put your palms at the designs from this educational, you are going to first wish to obtain it the use of the button underneath. To achieve get admission to to the obtain it is very important subscribe to our publication by means of the use of the shape underneath. As a brand new subscriber, you are going to obtain much more Divi goodness and a unfastened Divi Format pack each Monday! If you happen to’re already at the checklist, merely input your e-mail deal with underneath and click on obtain. You’ll now not be “resubscribed” or obtain further emails.

.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 screen 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 robust { 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 robust, .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;}

Download For Free

Obtain For Loose

Sign up for the Divi Publication and we can e-mail you a duplicate of without equal Divi Touchdown Web page Format Pack, plus lots of alternative wonderful and unfastened Divi assets, guidelines and methods. Apply alongside and you are going to be a Divi grasp very quickly. If you’re already subscribed merely kind for your e-mail deal with underneath and click on obtain to get admission to the structure pack.

You’ve effectively subscribed. Please test your e-mail deal with to substantiate your subscription and get get admission to to unfastened 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 height proper of the web page.
  3. Within the portability popup, make a selection the import tab
  4. Make a selection the obtain document out of your laptop (you’ll want to unzip the document first and use the JSON document).
  5. Then click on the import button.

As soon as performed, the segment structure will likely be to be had within the Divi Builder.

Let’s get to the educational, we could?

What You Want to Get Began

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

  1. Set up Divi to your WordPress website online.
  2. Upload a Web page and provides it a name.
  3. Permit the Visible Builder

Ux Fullwidth Header Design Steps

Now that we have got our web page arrange, let’s get started with the fullwidth header for a UX touchdown web page.

Surroundings Up Our Web page

Earlier than we will be able to start styling, we’ll wish to load the unfastened UX premade structure pack from the Divi Library. While you allow the Visible Builder you’ll see 3 choices pop-up, make a selection Make a selection A Premade Format.

Load Format Pack

To do load the UX structure pack onto your web page:

  1. Within the “Premade Layouts” tab use the quest serve as to search out the UX structure pack.
  2. If you’ve discovered it click on on it. This may carry up the structure main points and pages to be had.
  3. Click on at the touchdown web page design, then click on “Use This Format”.

We’ll be recreating the highest segment of the structure as a fullwidth header module.

Delete First Phase

Since we’re going to recreate the primary segment the use of the Fullwidth Header module as a substitute, we’ll wish to delete this segment. Hover over the segment and click on the trash icon.

Upload Fullwidth Phase

Earlier than we will be able to upload the fullwidth header, we wish to upload a fullwidth segment.

Click on the “+” arrow to carry up the Divi sections after which click on “fullwidth”. This may mechanically carry up the Divi Fullwidth Module library.

Upload Fullwidth Header

Throughout the Divi Fullwidth Module Library, click on “Fullwidth Header”.

Including  Content material

Earlier than we commence styling the module, let’s upload the content material wanted for this module.

Upload Textual content Content material

Beneath the Textual content tab, upload the next content material:

  1. Name: Support Your UX Design Wisdom
  2. Subtitle: UX Design Path
  3. Button #1: Path Evaluate
  4. Button #2: Be informed Extra
  5. Frame: Placeholder textual content

Upload Pictures

Now that we have got our textual content content material in position, we wish to upload two pictures to our design.

  1. Within the Pictures tab, upload the emblem symbol (the celebrities) and the header symbol (the picture of the individual conserving a telephone).

Alternate Background Colour

Within the Background tab, configure this surroundings:

  1. Background Colour: #131517

Styling The Fullwidth Header

Now that we have got our content material arrange, let’s upload some styling to it by means of the Design tab.

Scroll Down Icon

Let’s upload the scroll down icon, the downward arrow.

  1. This design makes use of a scroll down icon, so toggle this strategy to sure.
  2. Choose the downward arrow icon after which set the icon shade to white.

Symbol

Let’s upload curves to our pictures by means of rounding the corners.

Within the symbol tab, configure the next settings:

  1. Symbol Rounded Corners: Click on the chainlink button to unlink the corners, then kind 1000px within the backside left and backside proper enter bins. This may spherical the ground left and backside proper corners of our pictures.

Name Textual content

Right here let’s taste the name textual content for this module. Within the Name Textual content tab, configure those settings:

  1. Name font: PT Sans
  2. Name Font Weight: Daring
  3. Name Textual content Measurement: 5rem
  4. Name Line Peak: 1.2em

Frame Textual content

That is the place we taste the frame textual content of this module. Within the Frame Textual content tab, configure those settings:

  1. Frame Font: Mukta
  2. Frame Textual content Measurement: 18px

Subtitle Textual content

That is the place we taste the subtitle textual content for this module. Within the Subtitle Textual content tab, configure those settings:

  1. Subtitle Font: Mukta
  2. Subtitle Font Weight: Daring
  3. Subtitle Font Taste: Uppercase
  4. Subtitle Textual content Colour: #13d678
  5. Subtitle Letter Spacing: 3px

Button One

That is the place we will be able to set customized types for button one, the main button. Within the Button One tab, configure those settings:

  1. Use Customized Kinds For Button One: Sure
  2. Button One Colour: #ffffff
  3. Button One Background: #13d678
  4. Button One Border Width: 0px
  5. Button One Border Radius: 100px
  6. Button One Font: Mukta
  7. Button One Font Weight: Daring
  8. Display Button One Icon: Sure
  9. Button One Icon: Proper Arrow
  10. Simplest Display Icon On Hover For Button One: No

Button Two

Now let’s taste the secondary button, the second one button. Within the Button Two tab, configure those settings:

  1. Use Customized Kinds For Button One: Sure
  2. Button One Colour: #ffffff
  3. Button One Background: #303030
  4. Button One Border Width: 0px
  5. Button One Border Radius: 100px
  6. Button One Font: Mukta
  7. Button One Font Weight: Daring
  8. Display Button One Icon: Sure
  9. Button One Icon: Proper Arrow
  10. Simplest Display Icon On Hover For Button One: Sure

Upload Button Hyperlinks

Don’t fail to remember so as to add hyperlinks on your buttons! Within the Hyperlink tab, configure the next settings:

  1. Button #1 Hyperlink URL: Paste the URL for button one right here.
  2. Button #2 Hyperlink URL: Paste the URL for button two right here.

Save Your Design

Now that we have got our absolutely designed Fullwidth Header, you’ll want to save your design!

  1. Click on the fairway arrow on the backside proper of the module window.
  2. Then click on the save icon at the Divi toolbar to avoid wasting your web page design.
  3. Go out the Visible Builder.

Have A laugh Experimenting

The tactics to taste the Divi Fullwidth Header module are unending. Making the most of the main button and secondary button can lend a hand direct your guests to the web page you need them to view or take the motion (like post an inquiry) you need them to take.

Let’s check out two different Fullwidth Header examples that experience a number one button that sticks out.

Divi Retirement Heart Fullwidth Header

Button Kinds

Let’s take a look at the original types for the main and secondary buttons.

Button One

Within the Button One Tab, configure the next settings:

  1. Use Customized Kinds For Button One: Sure
  2. Button One Textual content Measurement: 14px
  3. Button One Colour: #ffffff
  4. Button One Background: #0a0a0a
  5. Button One Border Width: 0px
  6. Button One Border Radius: 10px
  7. Button One Font Weight: Daring

Button Two

Within the Button Two Tab, configure the next settings:

  1. Use Customized Kinds For Button One: Sure
  2. Button One Textual content Measurement: 14px
  3. Button One Colour: #ffffff
  4. Button One Background: #0a0a0a
  5. Button One Border Width: 0px
  6. Button One Border Radius: 10px
  7. Button One Font Weight: Daring

And there you’ve got it! Two distinctive buttons, one that sticks out, and person who takes the second one seat.

Monetary Making plans Fullwidth Header

Button Kinds

Let’s take a look at the original types for the main and secondary buttons.

Button One

Within the Button One Tab, configure the next settings:

  1. Use Customized Kinds For Button One: Sure
  2. Button One Textual content Measurement: 18px
  3. Button One Textual content Colour: #ffffff
  4. Button One Background Colour: #1b4ffe
  5. Button One Padding: 15px Most sensible and Backside; 25px Left and Proper

Button Two

Within the Button Two Tab, configure the next settings:

  1. Use Customized Kinds For Button Two: Sure
  2. Button Two Textual content Colour: #1b4ffe
  3. Button Two Background Colour: Clear
  4. Button Two Icon Colour: #1b4ffe

Ultimate Ideas

The Divi Fullwidth Header makes it simple to create shocking hero sections to your website online. Making strategic use of the main and secondary buttons will strengthen your consumer revel in and lend a hand website online guests take the movements they need to take. The customization choices are unending with the Fullwidth Header so have a laugh experimenting!

The put up The best way to Steadiness the Number one & Secondary Buttons in Your Divi Fullwidth Header Module seemed first on Sublime Issues Weblog.

WordPress Web Design

[ continue ]