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.

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.

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

Next, remove the padding from the section.

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

Now insert the row. For this design, we will use the row construction confirmed below.

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

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;

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.

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!”

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

Next, add the button module to the right kind.

Add the button text,

• Text: “Get a Loose Quote”

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

• Button Alignment: Center

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

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

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.

Select and insert the Fullwidth Menu module.

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

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

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

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

• Brand Max Top on Cell: 6vw

Now add your logo to the fullwidth menu.

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

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.

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

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

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

Now the design is entire!

Final Outcome

Let’s take a look at the entire design for our international header.

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