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

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

Divi-Fullwidth-vs-Regular-Menu-Module-Fullwidth-Desktop

An eternally overlooked then again an important part of any internet web site is the navigation menu. Navigation is a key element in the case of rising an exquisite client enjoy. If carried out as it should be, a menu can very a lot make stronger the shopper enjoy and make it easy to your visitors to navigate throughout the internet web site.

Divi comes with 2 different types of navigation modules; Fullwidth Menu and Not unusual Menu. In this article, we can discuss and divulge one of the vital an important diversifications between Divi’s fullwidth menu module and the average menu module. Must you’ve ever wondered which module to use to your internet web site, with a bit of luck this text will can help you understand the necessary factor diversifications and use cases for the ones modules. We will be able to moreover give you step-by-step instructions to customize the design of a fullwidth menu and an atypical menu module.

Let’s get started!

Sneak Peek

Desktop: Fullwidth Menu Module

Desktop: Not unusual Menu Module

Cell: Fullwidth Menu Module

Cell: Not unusual Menu Module

Key Diversifications Between Divi’s Fullwidth Menu Module and Not unusual Menu Module

That is an overview of the necessary factor diversifications between a fullwidth menu module and an atypical menu module.

Not unusual vs Fullwidth Phase Container

The fullwidth menu module requires a fullwidth phase in Divi. Because the phase is fullwidth, any module you add will take in the entire width of the internet web page. No longer like the average menu phase, you’ll no longer have a few modules side-by-side. The fullwidth menu module is very good if you want to have the menu to span the width of the internet web page and don’t need any longer modules alongside it.

The average menu module requires an atypical phase in Divi. Not unusual sections have many quite a lot of row layouts, and also you’ll have the ability to use any construction with the average menu module. This permits you to include additional content material subject material alongside the menu the use of the other rows to create a additional complicated menu bar. Because of Divi’s many row alternatives, you’ll have the ability to merely create unique layouts to your menu bar the use of the average menu module.

Built-In Width Settings vs Bettering the Row Container

The other key difference between the average and fullwidth menus is they’ve other ways to edit the width and spacing of the module.

The fullwidth menu module comes with some built-in settings to edit the width. You’ll make the menu text fullwidth with the “make menu links fullwidth” risk. This extends the fullwidth menu module previous the default content material subject material width.

To succeed in a an identical look with an atypical menu module, you would need to edit the containing row’s settings instead. For example, edit the width, max width, and alignment of the row containing the average menu to extend the average menu module previous the default content material subject material width.

The use of Divi’s Fullwidth Menu Module vs Not unusual Menu Module

What You Need to Get Started

If you want to observe at the side of this tutorial, set up and turn on the Divi Theme and remember to have the latest type of Divi in your internet web site.

Now, you are ready to begin out!

Designing a Fullwidth Menu Module

Add a brand spanking new internet web page in your internet web site and offers it a determine, then select the technique to Use Divi Builder.

For this tutorial we can assemble the design from scratch, so select the technique to Get began Development.

When you first create a blank internet web page, it comes preloaded with an atypical phase. First add a fullwidth phase below the average phase.

Then, delete the average phase from the internet web page.

Add a Fullwidth Menu module to the fullwidth row.

Add a background color to the fullwidth menu.

Background: #4e7560

Add an emblem to the fullwidth menu.

Next, navigate to the Menu Text alternatives beneath the Design tab.

Menu Font: Poppins
Menu Text Color: #FFFFFF
Menu Text Measurement: 20px

Next, navigate to the Dropdown Menu settings.

Dropdown Menu Background Color: #FFFFFF
Dropdown Menu Line Color: #7EAD70
Dropdown Menu Text Color: #000000

Set the Cell Menu background and text color.

Cell Menu Background Color: #FFFFFF
Cell Menu Text Color: #000000

Next, trade the Hamburger Menu settings.

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

After all, add some highest and bottom padding.

Padding-Best possible: 10px
Padding-Bottom: 10px

Now your fullwidth menu module is complete!

Designing a Not unusual Menu Module

Add a brand spanking new internet web page in your internet web site and offers it a determine, then select the technique to Use Divi Builder.

Make a selection Get began Development to build from scratch.

The internet web page comes preloaded with an empty commonplace phase. To this phase, add a background color.

Background: #4e7560

Next, remove the perfect and bottom padding.

Padding-Best possible: 0px
Padding-Bottom: 0px

Add a brand spanking new row with the construction confirmed below.

Inside the row settings, equalize the column heights.

Equalize Column Heights: Positive

Inside the Primary Section CSS settings beneath the Sophisticated tab, add the following custom designed CSS.

 align-items:middle;

Add a text module to the leftmost column. We will be able to use this to turn the internet web site determine instead of uploading an emblem. This is a unique good thing about the average menu module on account of you’ll have the ability to use it alongside other modules so that you can upload further portions to the menu bar.

H1 Text: “Divi Blog”

Set the Text Alignment to left on desktop.

Text Alignment-Desktop: Left

Set the Text Alignment to middle on tablet and cell.

Text Alignment-Tablet: Middle
Text Alignment-Cell: Middle

Next, navigate to the heading text settings.

Heading Font: Poppins
Heading Font Weight: Bold
Heading Text Color: #FFFFFF
Heading Text Measurement: 40px

Now that the “Divi Blog” determine is completed, let’s add the average menu module to the center column.

Remove the background color.

Background: None

Next, navigate to the design tab. Underneath Construction, trade the style to Centered.

Style: Centered

Now we will be able to regulate the menu text sorts.

Menu Font: Poppins
Menu Text Color: #FFFFFF
Menu Text Measurement: 20px

Regulate the dropdown menu sorts as well.

Dropdown Menu Line Color: #7EAD70
Dropdown Menu Text Color: #000000

Next, trade the cell menu settings.

Cell Menu Background Color: #FFFFFF
Cell Menu Text Color: #000000

After all, regulate the hamburger menu settings.

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

This completes the styling of the average menu module. To finish up the menu design, let’s add a call-to-action button to the right kind column. First, add the button module.

Trade the button text.

Button: “Loose 30 Day Trial”

Set the button alignment to middle.

Button Alignment: Middle

Set “Use Custom designed Sorts for Button” to Positive and change the text color.

Use Custom designed Sorts for Button: Positive
Button Text Color: #FFFFFF

Set the button background.

Button Background: #7EAD70

Set the button background on hover to orange.

Button Background on Hover: #D19929

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

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

After all, set the left and correct padding.

Padding-Left: 30px
Padding-Correct:30px