Get a Custom Header Built for Your Divi Website

5

Divi MadMenu Sneak Peek #2: Layout Settings

by Ivan Chiurcci | Jul 3, 2020 | 6 comments

In the previous sneak peek I mentioned the MadMenu layout settings still being in the works and now that they are ready I would like to provide a quick overview of them.

Divi MadMenu Layout Settings allow to change the elements' ordering, set their columns' width and alignment, and align the element content both vertically and horizontally.

Also you can control the visibility of both Desktop and Mobile menus by adjusting their breakpoints.

Here is the preview of the layout settings.

UPDATE: Divi MadMenu has been released! View the full list of features and the live demos here.

Layout Outlines 

In order to make the layout adjustments process easier there is the Show Outlines setting provided under the Builder Settings toggle. 

It enables the outlines for the elements allowing you to see how they are currently aligned within their container and how much space they occupy.

You can change the outlines color as well.

Layout Settings

The layout settings is devided into two groups - general and individual elements.

The general layout settings allow re-ordering the elements and aligning them horizontally.

Whereas the individual element layout settings allow setting the element container(column) width and align its content vertically and horizontally.

Desktop and Mobile Menu Breakpoints

The previously available Menu Element has been separated into two different elements - the Desktop Menu Element and the Mobile Menu Element, each of them having it's own custom breakpoint setting.

Separating the desktop and the mobile menus from each other and providing a breakpoint setting for each of them makes it very easy to enable both of them at the same time and place them anywhere in the header independently from each other.

For example, if you want to have both the desktop menu and the hamburger menu enabled on all devices then simply set the desktop menu breakpoint to 0(zero) and apply a large breakpoint value for the mobile menu and place them anywhere in the header using the ordering functionality.

Divi MadMenu Coming Soon

The Layout settings were the final set of features planned to be implemented for the v1.0 of the MadMenu. Currently the module is being prepared for beta testing and the initial release will follow soon after.


Please let me know what you think of the MadMenu module, I appreciate your feedback. Feel free to leave your thoughts and suggestions in the comments section below or contact me directly.

And subscribe if you want to get notified when the MadMenu module is released (you'll also get these nice freebies after confirming your email address).

Divi MadMenu v2.5. Compatible with Divi 5.
Divi Accordions Plus v2.3. Compatible with Divi 5.
Free Download Smooth Divi Header Templates Pack v2.0. Compatible with Divi 5.

Divi AI

Master AI-powered development and lead the next generation of web designers.

View Live Demos & Get Divi MadMenu

Download FREE Divi Sections

6 Comments

  1. zain

    how can we use this module in our divi theme. Is there any link to download this module ?

    Reply
    • Ivan Chi

      Hi, zain.

      Here is the link: Divi MadMenu. Let me know if you have any questions.

      Reply
  2. Vincent

    Does the mad menu also support a vertical / side menu?

    Reply
    • Ivan Chi

      Not in v1.0 but it’s gonna be added later.

      Reply
  3. Alex Lp

    can’t wait for it! do you have a date release yet??

    Reply
    • Ivan Chi

      It will be this month (July) but I cannot give any certain date, it all depends on testing and debugging. Hopefully won’t have to postpone the release again :)

      Reply

Submit a Comment

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

Get FREE Divi Layouts

Download 20+ Divi templates for FREE!

Please confirm your email address to complete your subscription. Thank you!

Copy link