Easy methods to Construct a International Header with Divi’s Fullwidth Menu Module

by | Jun 7, 2022 | Etcetera | 0 comments

The header is among the most important parts of any internet website and is central to the individual enjoy. The navigation menu supplies your consumers an idea of what they can look forward to finding to your internet website and helps them to find the ideas they would like. Additionally, a secondary menu bar is normally an incredible space to concentrate on a call-to-action or to put it up for sale an offer. Not to indicate, the header is among the most exceptional parts of your internet website because it most often turns out on every single internet web page. It is a super selection to show off your branding and create a header that is cohesive with the design of the rest of your internet website.

Divi’s Theme Builder alternatives help you create a custom designed international header and customize the look of your header and menu modules all through your entire internet website. In this instructional, we will show you assemble a global header using Divi’s fullwidth menu module.

Let’s get started!

Sneak Peek

Right here’s 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

Forward of we commence, set up and turn on the Divi Theme and take into accout to have the newest fashion of Divi to your internet website.
Now, you’re able to start out!

Simple find out how to Assemble a World Header with Divi’s Fullwidth Menu Module

Open the Theme Builder

Since we’re building a global header in this example, let’s navigate to the theme builder, which you’ll to seek out underneath the Divi menu in WordPress. Select Add World Header, then make a selection Assemble World Header.

Divi Global Header With Fullwidth Menu Build Global Header

Create the Secondary Menu Bar

Whilst you first open the global header construction, it’s going to come preloaded with a normal section. We will be able to alter this to be our secondary menu bar, which is in a position to sit down above our fullwidth menu and include some call-to-action text and a button.
First, open the section settings and add the background color.

  • Background: #92a8a1
See also  The best way to Create a Habitual Promotional Banner with Divi

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 construction confirmed below.

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

  • Equalize Column Heights: Positive


Next, set the easiest and bottom padding.

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

Divi Global Header With Fullwidth Menu Add Row Padding

We would love the products in our secondary header to be vertically aligned, so let’s add some custom designed CSS to the row’s primary section.

align-items:middle;

Divi Global Header With Fullwidth Menu Custom CSS

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

Divi Global Header With Fullwidth Menu Insert Text Module

Modify the text content material subject matter. It is a great place to include a CTA (call-to-action) or to put it up for sale an offer.

  • Text: “Sign up for our mailing tick list to acquire 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 kind.

Divi Global Header With Fullwidth Menu Insert Button

Add the button text,

  • Text: “Get a Loose Quote”

Divi Global Header With Fullwidth Menu Button Text

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

  • Button Alignment: Center

Divi Global Header With Fullwidth Menu Button Alignment

Now we will customize the look of the button.

  • Custom designed Sorts for Button: Positive
  • Button Text Measurement: 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 will switch without delay to the main menu. We will be able to be building the menu using the fullwidth menu module. Add a brand spanking new fullwidth section to the global header.
Divi Global Header With Fullwidth Menu Insert Fullwidth Section

See also  28 Case Learn about Examples Each Marketer Must See

Select and insert the Fullwidth Menu module.

Divi Global Header With Fullwidth Menu Add Fullwidth Menu

Next, we will customize the fullwidth menu settings.

  • Vigorous 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 Measurement: 15px
  • Menu Letter Spacing: 2px

Divi Global Header With Fullwidth Menu Text Settings

Next, edit the dropdown menu alternatives.

  • Dropdown Menu Line Color: #2f5349
  • Dropdown Menu Vigorous Link Color: #2f5349
  • Cell Menu Background Color: #FFFFFF

Exchange the hamburger menu icon color to black.

  • Hamburger Menu Icon Color: #000000

Divi Global Header With Fullwidth Menu Hamburger Menu Icon Color

Forward of we add the brand to our menu, let’s alter the sizing alternatives. We will be able to use Divi’s built-in responsive alternatives to set a definite Max Top for desktop and mobile.

  • Brand Max Top on Desktop: 3vw

Divi Global Header With Fullwidth Menu Logo Height Desktop

  • Brand Max Top on Cell: 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

In the end, we want the main menu to stick with the easiest of the show for the reason that individual scrolls all through the internet website, so we’ll use Divi’s built-in sticky settings for this.

  • Sticky Position: Keep on with Perfect

Divi Global Header With Fullwidth Menu Sticky Settings

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

Create a New Internet web page with a Premade Construction

To appear the header and fullwidth menu in movement, let’s create a brand spanking new internet web page with a premade construction from the Divi library. For this design, we will use the Floor Area Internet web page from the floor structure pack.

Add a brand spanking new internet web page in your internet website and offers it a establish, then make a selection the strategy to Use Divi Builder.

See also  Towards the Long run: State of the Phrase 2021

Divi Global Header With Fullwidth Menu New Page

We’re using a premade construction from the Divi library for this example, so make a selection Browse Layouts.

Divi Global Header With Fullwidth Menu Browse Layouts

Search for and make a selection the Floor Area Internet web page construction.

Divi Global Header With Fullwidth Menu Find A Layout

Select Use This Construction as a way to upload the construction in your internet web page.

Divi Global Header With Fullwidth Menu Use Layout

Now the design is entire!

Final Outcome

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

Final Concepts

As we’ve were given discussed, the header and navigation menu is central to the individual enjoy of your internet website. Now you’ve were given spotted how easy it’s to design a great-looking international header with Divi’s fullwidth menu module. Thankfully, Divi’s theme builder offers you keep an eye on over every facet of your internet website’s menu and header, and also you’ll create totally custom designed and unique designs with only some clicks. If you are interested in more header tutorials, check out this collection of 30+ Useful Divi Header Tutorials!

Have you ever ever used Divi’s international header alternatives to customize your header and navigation menu? We want to concentrate for your concepts inside the comments!

The post Easy methods to Construct a International Header with Divi’s Fullwidth Menu Module gave the impression first on Sublime Topics Weblog.

WordPress Web Design

[ continue ]

WordPress Maintenance Plans | WordPress Hosting

read more

0 Comments

Submit a Comment