Using Divi’s Fullwidth Menu Module vs Regular Menu Module

by DS | Jun 5, 2022 | Etcetera | 0 comments

divi-fullwidth-vs-regular-menu-module-featured-image

An ceaselessly lost sight of however very important a part of any website online is the navigation menu. Navigation is a key component in relation to growing a delightful person enjoy. If finished accurately, a menu can very much support the person enjoy and make it simple to your guests to navigate in the course of the website online.

Divi comes with 2 several types of navigation modules; Fullwidth Menu and Common Menu. On this article, we can speak about and exhibit one of the vital variations between Divi’s fullwidth menu module and the common menu module. For those who’ve ever puzzled which module to make use of to your website online, with a bit of luck this article is going to will let you perceive the important thing variations and use circumstances for those modules. We can additionally come up with step by step directions to customise the design of a fullwidth menu and an ordinary menu module.

Let’s get began!

Sneak Peek

Desktop: Fullwidth Menu Module

Desktop: Common Menu Module

Cellular: Fullwidth Menu Module

Cellular: Common Menu Module

Key Variations Between Divi’s Fullwidth Menu Module and Common Menu Module

Here’s an summary of the important thing variations between a fullwidth menu module and an ordinary menu module.

Common vs Fullwidth Segment Container

The fullwidth menu module calls for a fullwidth segment in Divi. Since the segment is fullwidth, any module you upload will take in all the width of the web page. Not like the common menu segment, you can’t have more than one modules side-by-side. The fullwidth menu module is superb if you need the menu to span the width of the web page and don’t want any further modules along it.

The common menu module calls for an ordinary segment in Divi. Common sections have many alternative row layouts, and you’ll use any format with the common menu module. This lets you come with further content material along the menu the usage of the opposite rows to create a extra advanced menu bar. Because of Divi’s many row choices, you’ll simply create distinctive layouts to your menu bar the usage of the common menu module.

Constructed-In Width Settings vs Enhancing the Row Container

The opposite key distinction between the common and fullwidth menus is that they’ve alternative ways to edit the width and spacing of the module.

The fullwidth menu module comes with some integrated settings to edit the width. You’ll be able to make the menu textual content fullwidth with the “make menu hyperlinks fullwidth” choice. This extends the fullwidth menu module past the default content material width.

To succeed in a equivalent glance with an ordinary menu module, you would have to edit the containing row’s settings as a substitute. For instance, edit the width, max width, and alignment of the row containing the common menu to increase the common menu module past the default content material width.

The usage of Divi’s Fullwidth Menu Module vs Common Menu Module

What You Want to Get Began

If you want to observe at the side of this educational, install and activate the Divi Theme and remember to have the newest model of Divi to your website online.

Now, you are prepared to begin!

Designing a Fullwidth Menu Module

Upload a brand new web page on your website online and provides it a identify, then make a selection the approach to Use Divi Builder.

For this educational we can construct the design from scratch, so make a selection the approach to Get started Development.

Whilst you first create a clean web page, it comes preloaded with an ordinary segment. First upload a fullwidth segment under the common segment.

Then, delete the common segment from the web page.

Upload a Fullwidth Menu module to the fullwidth row.

Upload a background colour to the fullwidth menu.

Background: #4e7560

Upload an emblem to the fullwidth menu.

Subsequent, navigate to the Menu Textual content choices below the Design tab.

Menu Font: Poppins
Menu Textual content Colour: #FFFFFF
Menu Textual content Measurement: 20px

Subsequent, navigate to the Dropdown Menu settings.

Dropdown Menu Background Colour: #FFFFFF
Dropdown Menu Line Colour: #7EAD70
Dropdown Menu Textual content Colour: #000000

Set the Cellular Menu background and textual content colour.

Cellular Menu Background Colour: #FFFFFF
Cellular Menu Textual content Colour: #000000

Subsequent, alternate the Hamburger Menu settings.

Hamburger Menu Icon Colour: #FFFFFF
Hamburger Menu Icon Font Measurement: 40px

In the end, upload some most sensible and backside padding.

Padding-Most sensible: 10px
Padding-Backside: 10px

Now your fullwidth menu module is entire!

Designing a Common Menu Module

Upload a brand new web page on your website online and provides it a identify, then make a selection the approach to Use Divi Builder.

Choose Get started Development to construct from scratch.

The web page comes preloaded with an empty common segment. To this segment, upload a background colour.

Background: #4e7560

Subsequent, take away the highest and backside padding.

Padding-Most sensible: 0px
Padding-Backside: 0px

Upload a brand new row with the format proven under.

Within the row settings, equalize the column heights.

Equalize Column Heights: Sure

Within the Primary Component CSS settings below the Complicated tab, upload the next customized CSS.

 align-items:heart;

Upload a textual content module to the leftmost column. We can use this to show the website online title as a substitute of importing an emblem. It is a distinctive benefit of the common menu module as a result of you’ll use it along different modules so as to add further parts to the menu bar.

H1 Textual content: “Divi Weblog”

Set the Textual content Alignment to left on desktop.

Textual content Alignment-Desktop: Left

Set the Textual content Alignment to heart on pill and cell.

Textual content Alignment-Pill: Middle
Textual content Alignment-Cellular: Middle

Subsequent, navigate to the heading textual content settings.

Heading Font: Poppins
Heading Font Weight: Daring
Heading Textual content Colour: #FFFFFF
Heading Textual content Measurement: 40px

Now that the “Divi Weblog” identify is completed, let’s upload the common menu module to the middle column.

Take away the background colour.

Background: None

Subsequent, navigate to the design tab. Below Structure, alternate the way to Targeted.

Taste: Targeted

Now we will regulate the menu textual content kinds.

Menu Font: Poppins
Menu Textual content Colour: #FFFFFF
Menu Textual content Measurement: 20px

Adjust the dropdown menu kinds as smartly.

Dropdown Menu Line Colour: #7EAD70
Dropdown Menu Textual content Colour: #000000

Subsequent, alternate the cell menu settings.

Cellular Menu Background Colour: #FFFFFF
Cellular Menu Textual content Colour: #000000

In the end, regulate the hamburger menu settings.

Hamburger Menu Icon Colour: #FFFFFF
Hamburger Menu Icon Font Measurement: 40px

This completes the styling of the common menu module. To complete up the menu design, let’s upload a call-to-action button to the correct column. First, upload the button module.

Exchange the button textual content.

Button: “Unfastened 30 Day Trial”

Set the button alignment to heart.

Button Alignment: Middle

Set “Use Customized Kinds for Button” to Sure and regulate the textual content colour.

Use Customized Kinds for Button: Sure
Button Textual content Colour: #FFFFFF

Set the button background.

Button Background: #7EAD70

Set the button background on hover to orange.

Button Background on Hover: #D19929

Subsequent, set the button border width, radius, and font.

Button Border Width: 0px
Button Border Radius: 40px
Button Font: Poppins

In the end, set the left and proper padding.

Padding-Left: 30px
Padding-Proper:30px