Using Divi’s Fullwidth Menu Module vs Regular Menu Module

by | Jun 5, 2022 | Etcetera | 0 comments

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

Divi Fullwidth vs Regular Menu Module Fullwidth Desktop

Desktop: Common Menu Module

Divi Fullwidth vs Regular Menu Module Fullwidth Desktop

Cellular: Fullwidth Menu Module

Divi Fullwidth vs Regular Menu Module Fullwidth Mobile

Cellular: Common Menu Module

Divi Fullwidth vs Regular Menu Module Mobile

Divi Fullwidth vs Regular Menu Module Mobile Expanded

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.

Divi Fullwidth vs Regular Menu Module Insert Fullwidth Module

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.

See also  How you can Upload Privateness & Phrases Hyperlinks to Your Divi Footer

Divi Fullwidth vs Regular Menu Module Regular Row

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.

Divi Fullwidth vs Regular Menu Module Fullwidth Menu Links

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.

Divi Fullwidth vs Regular Menu Module Width Alignment Settings

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.

Divi Fullwidth vs Regular Menu Module New Page

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

Divi Fullwidth vs Regular Menu Module Start Building

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.

Divi Fullwidth vs Regular Menu Module Insert Fullwidth Section

Upload a Fullwidth Menu module to the fullwidth row.

Divi Fullwidth vs Regular Menu Module Insert Fullwidth Menu

Upload a background colour to the fullwidth menu.

  • Background: #4e7560

Divi Fullwidth vs Regular Menu Module Add Background

Upload an emblem to the fullwidth menu.

Divi Fullwidth vs Regular Menu Module Add Logo

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

Divi Fullwidth vs Regular Menu Module Fullwidth Font Settings

Subsequent, navigate to the Dropdown Menu settings.

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

Divi Fullwidth vs Regular Menu Module Fullwidth Dropdown Settings

Set the Cellular Menu background and textual content colour.

  • Cellular Menu Background Colour: #FFFFFF
  • Cellular Menu Textual content Colour: #000000
See also  How to Use the WordPress Speaker Deck Embed Block

Divi Fullwidth vs Regular Menu Module Fullwidth Mobile Menu Settings

Subsequent, alternate the Hamburger Menu settings.

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

Divi Fullwidth vs Regular Menu Module Fullwidth Hamburger Menu Settings

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

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

Divi Fullwidth vs Regular Menu Module Fullwidth Add Padding

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.

Divi Fullwidth vs Regular Menu Module Regular Use Builder

Choose Get started Development to construct from scratch.

Divi Fullwidth vs Regular Menu Module Regular Start Building

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

  • Background: #4e7560

Divi Fullwidth vs Regular Menu Module Regular Add Background

Subsequent, take away the highest and backside padding.

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

Divi Fullwidth vs Regular Menu Module Regular Remove Padding

Upload a brand new row with the format proven under.

Divi Fullwidth vs Regular Menu Module Regular Insert Row

Within the row settings, equalize the column heights.

  • Equalize Column Heights: Sure

Divi Fullwidth vs Regular Menu Module Regular Equalize Column Heights

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

 align-items:heart; 

Divi Fullwidth vs Regular Menu Module Regular Custom CSS

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”

Divi Fullwidth vs Regular Menu Module Regular Add Text

Set the Textual content Alignment to left on desktop.

  • Textual content Alignment-Desktop: Left

Divi Fullwidth vs Regular Menu Module Regular Text Alignment

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

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

Divi Fullwidth vs Regular Menu Module Regular Mobile Alignment

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

Divi Fullwidth vs Regular Menu Module Regular Menu Heading Font

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

Divi Fullwidth vs Regular Menu Module Regular Menu Add Menu

Take away the background colour.

  • Background: None

Divi Fullwidth vs Regular Menu Module Regular Menu Remove Background

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

  • Taste: Targeted

Divi Fullwidth vs Regular Menu Module Regular Menu Layout

Now we will regulate the menu textual content kinds.

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

Divi Fullwidth vs Regular Menu Module Regular Menu Font Settings

Adjust the dropdown menu kinds as smartly.

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

Divi Fullwidth vs Regular Menu Module Regular Menu Dropdown Settings

Subsequent, alternate the cell menu settings.

  • Cellular Menu Background Colour: #FFFFFF
  • Cellular Menu Textual content Colour: #000000
See also  Revealing $1,160,500 In Black Friday Prizes!

Divi Fullwidth vs Regular Menu Module Regular Menu Mobile Settings

In the end, regulate the hamburger menu settings.

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

Divi Fullwidth vs Regular Menu Module Regular Menu Hamburger Icon Settings

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.

Divi Fullwidth vs Regular Menu Module Regular Menu Add Button

Exchange the button textual content.

  • Button: “Unfastened 30 Day Trial”

Divi Fullwidth vs Regular Menu Module Regular Menu Button Text

Set the button alignment to heart.

  • Button Alignment: Middle

Divi Fullwidth vs Regular Menu Module Regular Menu Button Alignment

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

Divi Fullwidth vs Regular Menu Module Regular Menu Button Custom Styles

Set the button background.

  • Button Background: #7EAD70

Divi Fullwidth vs Regular Menu Module Regular Menu Button Background

Set the button background on hover to orange.

  • Button Background on Hover: #D19929

Divi Fullwidth vs Regular Menu Module Regular Menu Hover Background

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

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

Divi Fullwidth vs Regular Menu Module Regular Menu Button Border Font

In the end, set the left and proper padding.

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

Divi Fullwidth vs Regular Menu Module Regular Menu Button Padding

Ultimate Consequence

Now let’s check out the general consequence for our menu modules.

Desktop: Fullwidth Menu Module

Divi Fullwidth vs Regular Menu Module Fullwidth Desktop

Desktop: Common Menu Module

Divi Fullwidth vs Regular Menu Module Regular Menu Desktop

Cellular: Fullwidth Menu Module

Divi Fullwidth vs Regular Menu Module Fullwidth Mobile

Cellular: Common Menu Module

Divi Fullwidth vs Regular Menu Module Mobile Divi Fullwidth vs Regular Menu Module Mobile Expanded

Ultimate Ideas

Expectantly this text has helped you know one of the vital key variations between Divi’s fullwidth menu module and common menu module. Each are extremely simple to customise to create great-looking menus to your website online. The fullwidth menu module takes up the width of the web page and is derived with integrated choices to change and tweak the width. However, the common menu module can be utilized along different modules and is contained inside of a row, the place the width and different sizing choices can also be tweaked. Do you utilize a fullwidth menu module or an ordinary menu module to your website online? We would really like to listen to from you within the feedback!

The publish Using Divi’s Fullwidth Menu Module vs Regular Menu Module seemed first on Elegant Themes Blog.

WordPress Maintenance Plans | WordPress Hosting

read more

0 Comments

Submit a Comment