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

by | Jun 5, 2022 | Etcetera | 0 comments

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

Divi Fullwidth vs Regular Menu Module Fullwidth Desktop

Desktop: Not unusual Menu Module

Divi Fullwidth vs Regular Menu Module Fullwidth Desktop

Cell: Fullwidth Menu Module

Divi Fullwidth vs Regular Menu Module Fullwidth Mobile

Cell: Not unusual Menu Module

Divi Fullwidth vs Regular Menu Module Mobile

Divi Fullwidth vs Regular Menu Module Mobile Expanded

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.

Divi Fullwidth vs Regular Menu Module Insert Fullwidth Module

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.

See also  The best way to Use the WordPress Slideshare Embed Block

Divi Fullwidth vs Regular Menu Module Regular Row

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.

Divi Fullwidth vs Regular Menu Module Fullwidth Menu Links

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.

Divi Fullwidth vs Regular Menu Module Width Alignment Settings

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.

Divi Fullwidth vs Regular Menu Module New Page

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

Divi Fullwidth vs Regular Menu Module Start Building

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.

Divi Fullwidth vs Regular Menu Module Insert Fullwidth Section

Add a Fullwidth Menu module to the fullwidth row.

Divi Fullwidth vs Regular Menu Module Insert Fullwidth Menu

Add a background color to the fullwidth menu.

  • Background: #4e7560

Divi Fullwidth vs Regular Menu Module Add Background

Add an emblem to the fullwidth menu.

Divi Fullwidth vs Regular Menu Module Add Logo

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

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

Divi Fullwidth vs Regular Menu Module Fullwidth Font Settings

Next, navigate to the Dropdown Menu settings.

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

Divi Fullwidth vs Regular Menu Module Fullwidth Dropdown Settings

Set the Cell Menu background and text color.

  • Cell Menu Background Color: #FFFFFF
  • Cell Menu Text Color: #000000
See also  10 WooCommerce Subject matters to Test Out (2022)

Divi Fullwidth vs Regular Menu Module Fullwidth Mobile Menu Settings

Next, trade the Hamburger Menu settings.

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

Divi Fullwidth vs Regular Menu Module Fullwidth Hamburger Menu Settings

After all, add some highest and bottom padding.

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

Divi Fullwidth vs Regular Menu Module Fullwidth Add Padding

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.

Divi Fullwidth vs Regular Menu Module Regular Use Builder

Make a selection Get began Development to build from scratch.

Divi Fullwidth vs Regular Menu Module Regular Start Building

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

  • Background: #4e7560

Divi Fullwidth vs Regular Menu Module Regular Add Background

Next, remove the perfect and bottom padding.

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

Divi Fullwidth vs Regular Menu Module Regular Remove Padding

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

Divi Fullwidth vs Regular Menu Module Regular Insert Row

Inside the row settings, equalize the column heights.

  • Equalize Column Heights: Positive

Divi Fullwidth vs Regular Menu Module Regular Equalize Column Heights

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

 align-items:middle; 

Divi Fullwidth vs Regular Menu Module Regular Custom CSS

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”

Divi Fullwidth vs Regular Menu Module Regular Add Text

Set the Text Alignment to left on desktop.

  • Text Alignment-Desktop: Left

Divi Fullwidth vs Regular Menu Module Regular Text Alignment

Set the Text Alignment to middle on tablet and cell.

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

Divi Fullwidth vs Regular Menu Module Regular Mobile Alignment

Next, navigate to the heading text settings.

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

Divi Fullwidth vs Regular Menu Module Regular Menu Heading Font

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

Divi Fullwidth vs Regular Menu Module Regular Menu Add Menu

Remove the background color.

  • Background: None

Divi Fullwidth vs Regular Menu Module Regular Menu Remove Background

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

  • Style: Centered

Divi Fullwidth vs Regular Menu Module Regular Menu Layout

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

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

Divi Fullwidth vs Regular Menu Module Regular Menu Font Settings

Regulate the dropdown menu sorts as well.

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

Divi Fullwidth vs Regular Menu Module Regular Menu Dropdown Settings

Next, trade the cell menu settings.

  • Cell Menu Background Color: #FFFFFF
  • Cell Menu Text Color: #000000
See also  Angular vs React: A Detailed Facet-by-Facet Comparability

Divi Fullwidth vs Regular Menu Module Regular Menu Mobile Settings

After all, regulate the hamburger menu settings.

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

Divi Fullwidth vs Regular Menu Module Regular Menu Hamburger Icon Settings

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.

Divi Fullwidth vs Regular Menu Module Regular Menu Add Button

Trade the button text.

  • Button: “Loose 30 Day Trial”

Divi Fullwidth vs Regular Menu Module Regular Menu Button Text

Set the button alignment to middle.

  • Button Alignment: Middle

Divi Fullwidth vs Regular Menu Module Regular Menu Button Alignment

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

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

Next, 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

After all, set the left and correct padding.

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

Divi Fullwidth vs Regular Menu Module Regular Menu Button Padding

Final Outcome

Now let’s take a look at the full result for our menu modules.

Desktop: Fullwidth Menu Module

Divi Fullwidth vs Regular Menu Module Fullwidth Desktop

Desktop: Not unusual Menu Module

Divi Fullwidth vs Regular Menu Module Regular Menu Desktop

Cell: Fullwidth Menu Module

Divi Fullwidth vs Regular Menu Module Fullwidth Mobile

Cell: Not unusual Menu Module

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

Final Concepts

Expectantly this article has helped you realize one of the vital an important key diversifications between Divi’s fullwidth menu module and commonplace menu module. Each and every are very simple to customize to create great-looking menus to your internet web site. The fullwidth menu module takes up the width of the internet web page and springs with built-in alternatives to switch and tweak the width. On the other hand, the average menu module can be used alongside other modules and is contained inside of a row, where the width and other sizing alternatives can be tweaked. Do you utilize a fullwidth menu module or an atypical menu module in your internet web site? We wish to concentrate to from you throughout the comments!

The publish The usage of Divi’s Fullwidth Menu Module vs Common Menu Module gave the impression first on Sublime Subject matters Weblog.

WordPress Web Design

[ continue ]

WordPress Maintenance Plans | WordPress Hosting

read more

0 Comments

Submit a Comment

Your email address will not be published. Required fields are marked *