Sélectionner une page

How to Build a Global Header with Divi’s Fullwidth Menu Module


The header is one of the most important elements of any website and is central to the user experience. The navigation menu gives your users an idea of what they can expect to find on your website and helps them locate the information they need. Additionally, a secondary menu bar can be a great space to highlight a call-to-action or to promote an offer. Not to mention, the header is one of the most prominent parts of your website because it typically appears on every single page. It is a great opportunity to showcase your branding and create a header that is cohesive with the design of the rest of your website.

Divi’s Theme Builder options allow you to create a custom global header and customize the look of your header and menu modules across your entire website. In this tutorial, we will show you how to build a global header using Divi’s fullwidth menu module.

Let’s get started!

Sneak Peek

Here is a preview of the global header we will design.

Divi Global Header With Fullwidth Menu

Divi Global Header With Fullwidth Menu Mobile

Divi Global Header With Fullwidth Menu Mobile Expanded

What You Need to Get Started

Before we begin, install and activate the Divi Theme and make sure you have the latest version of Divi on your website.
Now, you are ready to start!

How to Build a Global Header with Divi’s Fullwidth Menu Module

Open the Theme Builder

Since we are building a global header in this example, let’s navigate to the theme builder, which you can find under the Divi menu in WordPress. Select Add Global Header, then select Build Global Header.

Divi Global Header With Fullwidth Menu Build Global Header

Create the Secondary Menu Bar

When you first open the global header layout, it will come preloaded with a regular section. We will modify this to be our secondary menu bar, which will sit above our fullwidth menu and include some call-to-action text and a button.
First, open the section settings and add the background color.

Divi Global Header With Fullwidth Menu Background Color

Next, remove the padding from the section.

  • Padding-top: 0px
  • Padding-bottom: 0px

Divi Global Header With Fullwidth Menu Remove Padding

Now insert the row. For this design, we will use the row layout shown below.

Divi Global Header With Fullwidth Menu Insert Row
In the row settings under Sizing, equalize the column heights.

  • Equalize Column Heights: Yes


Next, set the top and bottom padding.

  • Padding-top: 5px
  • Padding-bottom: 5px

Divi Global Header With Fullwidth Menu Add Row Padding

We want the items in our secondary header to be vertically aligned, so let’s add some custom CSS to the row’s main element.

align-items:center;

Divi Global Header With Fullwidth Menu Custom CSS

Now our row is set up and we can add the modules for our content. Insert a text module on the left side.

Divi Global Header With Fullwidth Menu Insert Text Module

Modify the text content. This is a great place to include a CTA (call-to-action) or to promote an offer.

  • Text: “Sign up for our mailing list to receive 10% off your order!”

Divi Global Header With Fullwidth Menu Modify Text

Navigate to the design tab of the text module and set the text font, weight, and color.

  • Text Font: Poppins
  • Text Font Weight: Medium
  • Text Color: #FFFFFF

Divi Global Header With Fullwidth Menu Text Settings

Next, add the button module to the right.

Divi Global Header With Fullwidth Menu Insert Button

Add the button text,

  • Text: “Get a Free Quote”

Divi Global Header With Fullwidth Menu Button Text

Under the design tab, set the button alignment to center.

Divi Global Header With Fullwidth Menu Button Alignment

Now we can customize the look of the button.

  • Custom Styles for Button: Yes
  • Button Text Size: 14px
  • Button Text Color: #FFFFFF
  • Button Background: #2F5349

Divi Global Header With Fullwidth Menu Button Settings

  • Button Border Width: 0px
  • Button Border Radius: 50px
  • Button Letter Spacing: 1px
  • Button Font: Poppins

Divi Global Header With Fullwidth Menu Button Settings

Add the Fullwidth Menu Module

Now that the secondary menu is designed, we can move on to the primary menu. We will be building the menu using the fullwidth menu module. Add a new fullwidth section to the global header.
Divi Global Header With Fullwidth Menu Insert Fullwidth Section

Select and insert the Fullwidth Menu module.

Divi Global Header With Fullwidth Menu Add Fullwidth Menu

Next, we will customize the fullwidth menu settings.

  • Active Link Color: #2f5349
  • Menu Font: Poppins
  • Menu Font Weight: Semi Bold
  • Menu Font Style: Capitalized (TT)
  • Menu Text Color: #000000

Divi Global Header With Fullwidth Menu Font Settings

  • Menu Text Color on Hover: #2f5349
  • Menu Text Size: 15px
  • Menu Letter Spacing: 2px

Divi Global Header With Fullwidth Menu Text Settings

Next, edit the dropdown menu options.

  • Dropdown Menu Line Color: #2f5349
  • Dropdown Menu Active Link Color: #2f5349
  • Mobile Menu Background Color: #FFFFFF

Change the hamburger menu icon color to black.

  • Hamburger Menu Icon Color: #000000

Divi Global Header With Fullwidth Menu Hamburger Menu Icon Color

Before we add the logo to our menu, let’s modify the sizing options. We will use Divi’s built-in responsive options to set a different Max Height for desktop and mobile.

  • Logo Max Height on Desktop: 3vw

Divi Global Header With Fullwidth Menu Logo Height Desktop

  • Logo Max Height on Mobile: 6vw

Divi Global Header With Fullwidth Menu Mobile Logo Height

Now add your logo to the fullwidth menu.

Divi Global Header With Fullwidth Menu Add Logo

Finally, we want the primary menu to stick to the top of the screen as the user scrolls through the website, so we’ll use Divi’s built-in sticky settings for this.

  • Sticky Position: Stick to Top

Divi Global Header With Fullwidth Menu Sticky Settings

With that, the design of our global header is complete!

Create a New Page with a Premade Layout

To see the header and fullwidth menu in action, let’s create a new page with a premade layout from the Divi library. For this design, we will use the Flooring Home Page from the flooring layout pack.

Add a new page to your website and give it a title, then select the option to Use Divi Builder.

Divi Global Header With Fullwidth Menu New Page

We are using a premade layout from the Divi library for this example, so select Browse Layouts.

Divi Global Header With Fullwidth Menu Browse Layouts

Search for and select the Flooring Home Page layout.

Divi Global Header With Fullwidth Menu Find A Layout

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

Divi Global Header With Fullwidth Menu Use Layout

Now the design is complete!

Final Result

Let’s take a look at the final design for our global header.
Divi Global Header With Fullwidth Menu Divi Global Header With Fullwidth Menu Mobile Divi Global Header With Fullwidth Menu Mobile Expanded

Final Thoughts

As we have discussed, the header and navigation menu is central to the user experience of your website. Now you have seen how easy it is to design a great-looking global header with Divi’s fullwidth menu module. Thankfully, Divi’s theme builder gives you control over every aspect of your website’s menu and header, and you can create totally custom and unique designs with just a few clicks. If you are interested in more header tutorials, check out this collection of 30+ Helpful Divi Header Tutorials!

Have you used Divi’s global header options to customize your header and navigation menu? We would love to hear your thoughts in the comments!



Source link

Poster le commentaire

Votre adresse e-mail ne sera pas publiée.