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

by | Jun 7, 2022 | Etcetera | 0 comments

The header is among the maximum necessary components of any website online and is central to the person enjoy. The navigation menu provides your customers an concept of what they may be able to look forward to finding for your website online and is helping them find the guidelines they want. Moreover, a secondary menu bar is usually a tremendous area to spotlight a call-to-action or to advertise an be offering. To not point out, the header is among the maximum distinguished portions of your website online as it usually seems on each unmarried web page. This can be a tremendous alternative to show off your branding and create a header this is cohesive with the design of the remainder of your website online.

Divi’s Theme Builder choices can help you create a customized world header and customise the glance of your header and menu modules throughout all your website online. On this instructional, we will be able to display you how one can construct an international header the usage of Divi’s fullwidth menu module.

Let’s get began!

Sneak Peek

Here’s a preview of the worldwide header we will be able to design.

Divi Global Header With Fullwidth Menu

Divi Global Header With Fullwidth Menu Mobile

Divi Global Header With Fullwidth Menu Mobile Expanded

What You Wish to Get Began

Ahead of we start, install and activate the Divi Theme and you should definitely have the most recent model of Divi for your website online.
Now, you’re ready to begin!

The right way to Construct a World Header with Divi’s Fullwidth Menu Module

Open the Theme Builder

Since we’re development an international header on this instance, let’s navigate to the theme builder, which you’ll be able to to find underneath the Divi menu in WordPress. Choose Upload World Header, then make a choice Construct World Header.

Divi Global Header With Fullwidth Menu Build Global Header

Create the Secondary Menu Bar

While you first open the worldwide header structure, it’ll come preloaded with a typical phase. We will be able to alter this to be our secondary menu bar, which is able to sit down above our fullwidth menu and come with some call-to-action textual content and a button.
First, open the phase settings and upload the background colour.

  • Background: #92a8a1
See also  11 Issues You Must Do When Inheriting a WordPress Website online

Divi Global Header With Fullwidth Menu Background Color

Subsequent, take away the padding from the phase.

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

Divi Global Header With Fullwidth Menu Remove Padding

Now insert the row. For this design, we will be able to use the row structure proven underneath.

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

  • Equalize Column Heights: Sure


Subsequent, set the highest and backside padding.

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

Divi Global Header With Fullwidth Menu Add Row Padding

We wish the goods in our secondary header to be vertically aligned, so let’s upload some customized CSS to the row’s primary part.

align-items:middle;

Divi Global Header With Fullwidth Menu Custom CSS

Now our row is about up and we will be able to upload the modules for our content material. Insert a textual content module at the left facet.

Divi Global Header With Fullwidth Menu Insert Text Module

Adjust the textual content content material. This can be a great spot to incorporate a CTA (call-to-action) or to advertise an be offering.

  • Textual content: “Join our mailing record to obtain 10% off your order!”

Divi Global Header With Fullwidth Menu Modify Text

Navigate to the design tab of the textual content module and set the textual content font, weight, and colour.

  • Textual content Font: Poppins
  • Textual content Font Weight: Medium
  • Textual content Colour: #FFFFFF

Divi Global Header With Fullwidth Menu Text Settings

Subsequent, upload the button module to the appropriate.

Divi Global Header With Fullwidth Menu Insert Button

Upload the button textual content,

  • Textual content: “Get a Loose Quote”

Divi Global Header With Fullwidth Menu Button Text

Below the design tab, set the button alignment to middle.

  • Button Alignment: Middle

Divi Global Header With Fullwidth Menu Button Alignment

Now we will be able to customise the glance of the button.

  • Customized Kinds for Button: Sure
  • Button Textual content Dimension: 14px
  • Button Textual content Colour: #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

Upload the Fullwidth Menu Module

Now that the secondary menu is designed, we will be able to transfer directly to the main menu. We will be able to be development the menu the usage of the fullwidth menu module. Upload a brand new fullwidth phase to the worldwide header.
Divi Global Header With Fullwidth Menu Insert Fullwidth Section

See also  20 Nice Examples of PowerPoint Presentation Design [+ Templates]

Choose and insert the Fullwidth Menu module.

Divi Global Header With Fullwidth Menu Add Fullwidth Menu

Subsequent, we will be able to customise the fullwidth menu settings.

  • Lively Hyperlink Colour: #2f5349
  • Menu Font: Poppins
  • Menu Font Weight: Semi Daring
  • Menu Font Taste: Capitalized (TT)
  • Menu Textual content Colour: #000000

Divi Global Header With Fullwidth Menu Font Settings

  • Menu Textual content Colour on Hover: #2f5349
  • Menu Textual content Dimension: 15px
  • Menu Letter Spacing: 2px

Divi Global Header With Fullwidth Menu Text Settings

Subsequent, edit the dropdown menu choices.

  • Dropdown Menu Line Colour: #2f5349
  • Dropdown Menu Lively Hyperlink Colour: #2f5349
  • Cellular Menu Background Colour: #FFFFFF

Trade the hamburger menu icon colour to black.

  • Hamburger Menu Icon Colour: #000000

Divi Global Header With Fullwidth Menu Hamburger Menu Icon Color

Ahead of we upload the brand to our menu, let’s alter the sizing choices. We will be able to use Divi’s integrated responsive choices to set a distinct Max Top for desktop and cell.

  • Emblem Max Top on Desktop: 3vw

Divi Global Header With Fullwidth Menu Logo Height Desktop

  • Emblem Max Top on Cellular: 6vw

Divi Global Header With Fullwidth Menu Mobile Logo Height

Now upload your emblem to the fullwidth menu.

Divi Global Header With Fullwidth Menu Add Logo

In spite of everything, we wish the main menu to keep on with the highest of the display screen because the person scrolls in the course of the website online, so we’ll use Divi’s integrated sticky settings for this.

  • Sticky Place: Stick with Best

Divi Global Header With Fullwidth Menu Sticky Settings

With that, the design of our world header is entire!

Create a New Web page with a Premade Format

To peer the header and fullwidth menu in motion, let’s create a brand new web page with a premade structure from the Divi library. For this design, we will be able to use the Ground House Web page from the flooring layout pack.

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

See also  How to Use Blurb Modules as Footer Items with Divi

Divi Global Header With Fullwidth Menu New Page

We’re the usage of a premade structure from the Divi library for this situation, so make a choice Browse Layouts.

Divi Global Header With Fullwidth Menu Browse Layouts

Seek for and make a choice the Ground House Web page structure.

Divi Global Header With Fullwidth Menu Find A Layout

Choose Use This Format so as to add the structure for your web page.

Divi Global Header With Fullwidth Menu Use Layout

Now the design is entire!

Ultimate Outcome

Let’s check out the general design for our world header.
Divi Global Header With Fullwidth Menu Divi Global Header With Fullwidth Menu Mobile Divi Global Header With Fullwidth Menu Mobile Expanded

Ultimate Ideas

As now we have mentioned, the header and navigation menu is central to the person enjoy of your website online. Now you will have noticed how simple it’s to design a great-looking world header with Divi’s fullwidth menu module. Fortunately, Divi’s theme builder will provide you with keep watch over over each facet of your website online’s menu and header, and you’ll be able to create completely customized and distinctive designs with only some clicks. If you have an interest in additional header tutorials, take a look at this choice of 30+ Helpful Divi Header Tutorials!

Have you ever used Divi’s world header choices to customise your header and navigation menu? We would really like to listen to your ideas within the feedback!

The submit How to Build a Global Header with Divi’s Fullwidth Menu 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. Required fields are marked *