(202) 750-1910
  • Facebook
  • X
  • Instagram
  • TikTok
  • Yelp
  • Google
  • Pinterest
  • WhatsApp
  • Threads
  • Facebook
  • X
  • Instagram
  • TikTok
  • Yelp
  • Google
  • Pinterest
  • WhatsApp
  • Threads
0 Items
Ask the Egghead, Inc.
  • Home
  • About
    • Reviews
    • Awards
    • Careers
    • Partners
    • Systems Status
  • Services
    • Website Design
    • Managed Hosting
    • Accessibility Compliance
    • Content Builder
    • Multi-Language Websites
    • SEO
    • Social Media
    • Premier Property Promotion
    • Reputation & Review Management Services
    • Low Code/No Code Solutions for MVP Development
    • Citation Builder
    • Pricing
    • Get A Quote
  • Portfolio
  • Website Audit
  • Blog
  • Invest Local
  • Contact
Select Page

How to Balance the Primary & Secondary Buttons in Your Divi Fullwidth Header Module

The Divi Fullwidth Header module makes it easy to add beautiful hero sections to your website. The module comes with two buttons, a title text, subtitle text, body text, a logo, and an image, making the customization options endless.

In today’s post, we’re going to demonstrate how to re-create hero sections using the Divi Fullwidth Header. We’ll start our design by using 3 premade layout packs and design our sections with a focus on balancing the primary and secondary buttons. We want the primary button to stand out, as it’s our main call to action while keeping the secondary button visible and accessible without overtaking the primary button.

Design Principles of Primary and Secondary Buttons

Primary buttons and secondary buttons help guide your website visitors towards certain actions. Primary buttons are typically the most common or desired action and secondary buttons are a less common action. This helps guide visitors to where they want to go.

To accomplish this, primary buttons should stand out visually and secondary buttons should not stand out as much. That means primary buttons should be more distinctive and have more visual weight so that it attracts more attention.

Now that we have an understanding of how primary and secondary buttons work, let’s get to the tutorial!

Design Preview

Here’s a look at the three fullwidth headers we will be designing today.

UX Fullwidth Header

Divi Retirement Center Fullwidth Header

Financial Planning Fullwidth Header

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

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.

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 and give it a title.
  3. Enable the Visual Builder

Ux Fullwidth Header Design Steps

Now that we have our page set up, let’s start with the fullwidth header for a UX landing page.

Setting Up Our Page

Before we can begin styling, we’ll need to load the free UX premade layout pack from the Divi Library. When you enable the Visual Builder you’ll see three options pop-up, select Choose A Premade Layout.

Load Layout Pack

To do load the UX layout pack onto your page:

  1. In the “Premade Layouts” tab use the search function to find the UX layout pack.
  2. Once you’ve found it click on it. This will bring up the layout details and pages available.
  3. Click on the landing page design, then click “Use This Layout”.

We’ll be recreating the top section of the layout as a fullwidth header module.

Delete First Section

Since we are going to recreate the first section using the Fullwidth Header module instead, we’ll need to delete this section. Hover over the section and click the trash icon.

Add Fullwidth Section

Before we can add the fullwidth header, we need to add a fullwidth section.

Click the “+” arrow to bring up the Divi sections and then click “fullwidth”. This will automatically bring up the Divi Fullwidth Module library.

Add Fullwidth Header

Inside the Divi Fullwidth Module Library, click “Fullwidth Header”.

Adding  Content

Before we begin styling the module, let’s add the content needed for this module.

Add Text Content

Underneath the Text tab, add the following content:

  1. Title: Improve Your UX Design Knowledge
  2. Subtitle: UX Design Course
  3. Button #1: Course Overview
  4. Button #2: Learn More
  5. Body: Placeholder text

Add Images

Now that we have our text content in place, we need to add two images to our design.

  1. In the Images tab, add the logo image (the stars) and the header image (the photo of the person holding a phone).

Change Background Color

In the Background tab, configure this setting:

  1. Background Color: #131517

Styling The Fullwidth Header

Now that we have our content set up, let’s add some styling to it via the Design tab.

Scroll Down Icon

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

  1. This design uses a scroll down icon, so toggle this option to yes.
  2. Select the downward arrow icon and then set the icon color to white.

Image

Let’s add curves to our images by rounding the corners.

In the image tab, configure the following settings:

  1. Image Rounded Corners: Click the chainlink button to unlink the corners, then type 1000px in the bottom left and bottom right input boxes. This will round the bottom left and bottom right corners of our images.

Title Text

Here let’s style the title text for this module. In the Title Text tab, configure these settings:

  1. Title font: PT Sans
  2. Title Font Weight: Bold
  3. Title Text Size: 5rem
  4. Title Line Height: 1.2em

Body Text

This is where we style the body text of this module. In the Body Text tab, configure these settings:

  1. Body Font: Mukta
  2. Body Text Size: 18px

Subtitle Text

This is where we style the subtitle text for this module. In the Subtitle Text tab, configure these settings:

  1. Subtitle Font: Mukta
  2. Subtitle Font Weight: Bold
  3. Subtitle Font Style: Uppercase
  4. Subtitle Text Color: #13d678
  5. Subtitle Letter Spacing: 3px

Button One

This is where we can set custom styles for button one, the primary button. In the Button One tab, configure these settings:

  1. Use Custom Styles For Button One: Yes
  2. Button One Color: #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: Bold
  8. Show Button One Icon: Yes
  9. Button One Icon: Right Arrow
  10. Only Show Icon On Hover For Button One: No

Button Two

Now let’s style the secondary button, the second button. In the Button Two tab, configure these settings:

  1. Use Custom Styles For Button One: Yes
  2. Button One Color: #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: Bold
  8. Show Button One Icon: Yes
  9. Button One Icon: Right Arrow
  10. Only Show Icon On Hover For Button One: Yes

Add Button Links

Don’t forget to add links to your buttons! In the Link tab, configure the following settings:

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

Save Your Design

Now that we have our fully designed Fullwidth Header, make sure to save your design!

  1. Click the green arrow at the bottom right of the module window.
  2. Then click the save icon on the Divi toolbar to save your page design.
  3. Exit the Visual Builder.

Have Fun Experimenting

The ways to style the Divi Fullwidth Header module are endless. Taking advantage of the primary button and secondary button can help direct your visitors to the page you want them to view or take the action (like submit an inquiry) you want them to take.

Let’s take a look at two other Fullwidth Header examples that have a primary button that stands out.

Divi Retirement Center Fullwidth Header

Button Styles

Let’s look at the unique styles for the primary and secondary buttons.

Button One

In the Button One Tab, configure the following settings:

  1. Use Custom Styles For Button One: Yes
  2. Button One Text Size: 14px
  3. Button One Color: #ffffff
  4. Button One Background: #0a0a0a
  5. Button One Border Width: 0px
  6. Button One Border Radius: 10px
  7. Button One Font Weight: Bold

Button Two

In the Button Two Tab, configure the following settings:

  1. Use Custom Styles For Button One: Yes
  2. Button One Text Size: 14px
  3. Button One Color: #ffffff
  4. Button One Background: #0a0a0a
  5. Button One Border Width: 0px
  6. Button One Border Radius: 10px
  7. Button One Font Weight: Bold

And there you have it! Two unique buttons, one that stands out, and one that takes the second seat.

Financial Planning Fullwidth Header

Button Styles

Let’s look at the unique styles for the primary and secondary buttons.

Button One

In the Button One Tab, configure the following settings:

  1. Use Custom Styles For Button One: Yes
  2. Button One Text Size: 18px
  3. Button One Text Color: #ffffff
  4. Button One Background Color: #1b4ffe
  5. Button One Padding: 15px Top and Bottom; 25px Left and Right

Button Two

In the Button Two Tab, configure the following settings:

  1. Use Custom Styles For Button Two: Yes
  2. Button Two Text Color: #1b4ffe
  3. Button Two Background Color: Transparent
  4. Button Two Icon Color: #1b4ffe

Final Thoughts

The Divi Fullwidth Header makes it easy to create stunning hero sections on your website. Making strategic use of the primary and secondary buttons will improve your user experience and help website visitors take the actions they want to take. The customization options are endless with the Fullwidth Header so have fun experimenting!

The post How to Balance the Primary & Secondary Buttons in Your Divi Fullwidth Header Module appeared first on Elegant Themes Blog.

Recent Posts

  • How AI Helps Us Help You

    How AI Helps Us Help You

  • Future-Proof Your WordPress Site in 2025

    Future-Proof Your WordPress Site in 2025

  • Why You Need Managed WordPress Hosting from Ask the Egghead

    Why You Need Managed WordPress Hosting from Ask the Egghead

  • Your Website Is More Than Just Curb Appeal

    Your Website Is More Than Just Curb Appeal

  • Top Website Mistakes That Hurt Your Business

    Top Website Mistakes That Hurt Your Business

  • Plugin of the Week: WPForms Made Simple

    Plugin of the Week: WPForms Made Simple

  • SEO Simplified: Boost Your Website Without Tech Skills

    SEO Simplified: Boost Your Website Without Tech Skills

  • Find Your Perfect Website Style

    Find Your Perfect Website Style

  • SEO Promises That Should Scare You

    SEO Promises That Should Scare You

  • Design Mistakes That Destroy Your Credibility

    Design Mistakes That Destroy Your Credibility

Awards

  • Clutch Top Web Design Company Medical Websites 2024

    Clutch Top Web Design Company Medical Websites 2024

  • Clutch Top Web Design Company Government Websites 2024

    Clutch Top Web Design Company Government Websites 2024

  • UpCity National Excellence Winner 2024

    UpCity National Excellence Winner 2024

  • UpCity National Excellence Winner 2023

    UpCity National Excellence Winner 2023

  • UpCity National Excellence Winner 2022

    UpCity National Excellence Winner 2022

  • UpCity Local Excellence Washington DC 2021

    UpCity Local Excellence Washington DC 2021

  • UpCity Top Designer 2021

    UpCity Top Designer 2021

  • DesignRush Accredited Agency 2021

    DesignRush Accredited Agency 2021

  • Clutch Top Company Washington DC 2021

    Clutch Top Company Washington DC 2021

  • Digital.com Best SEO Firms Washington DC 2021

    Digital.com Best SEO Firms Washington DC 2021

Ask-the-Egghead-logo

Capability Statement

View/Download

Ask the Egghead

200 Massachusetts Ave NW
8th Floor Suite 133
Washington, DC 20001
(202) 750-1910

Ask the Egghead

399 Boylston Street
Suite 685
Boston, MA 02116
(617) 221-8300

Quick Links

  • Website Design
  • Social Media
  • SEO
  • Managed Hosting
  • Privacy Policy
  • Investors
  • Facebook
  • X
  • Instagram
Designed by The Egghead © 2015-2025 Ask the Egghead, Inc.