These new features, along with Divi 5’s broader systems like canvases and semantic elements, all come together to give you the freedom to build any type of menu, including mega menus, slide-in menus, and more.
We haven’t finished adding more menu functions yet. We’re adding them piece by piece, and each piece unlocks a wide range of new possibilities.
Watch the following video to see the new feature in action. 👇
Instead of being stuck with a certain layout, you can build your own! With interactions, nested elements, pinned elements, and a wide variety of useful menu components (buttons, social icons, and more), you can build just about anything.
Today we’re adding two more pieces to the puzzle: the Link and Dropdown modules.
Link module
The link module is very simple; Allows you to add links! Mind-boggling, right? Every menu starts with links, so we started with that too.
You can use the menu module to build your own menus, instead of using the WordPress menu system directly. Add a link module, plug in dynamic content like page title and URL, and now you have an evergreen menu item
Simple!
Dropdown module
You can already build dropdown menus with the interaction builder. But it does require some installation work.
The new dropdown module includes that logic, making it easy to create dropdown menus on the fly.
When you add a drop-down module within an element, the interactivity is automatically linked to the parent element. When you hover over or click the parent element, the drop-down menu appears. You can add it anywhere.
The drop-down menu is a blank canvas; add links to create a menu, or add rows and build your own mega menu with any element.
You can build your own menus from separate modules, or you can use the new Menu Loop to cycle through items from a WordPress menu.For example, if I enable link looping and select the menu query type, as shown in the video below, I can choose from all the menus on my websites.
I can then plug in dynamic content from the loop, such as menu text and menu links, and now I have created my own dynamic menu with full control over the design of the loop element.
New interaction goals and triggers
We introduced selector-based interaction goals. When creating an interaction, you can now target parent or child elements instead of a specific element. This is useful when creating reusable menu components, such as a hamburger icon or X icon.
For example, in the video below, if I add an X icon to an off-canvas menu, I can tell it to always close the parent container. Wherever I place the X icon, the parent container always closes; I don’t have to reconfigure the interaction.
Finally, we added new breakpoint triggers to the interaction builder. Now you can have interactions that run at specific breakpoints, giving you more control over the mobile menu breakdown, for example.
Before/after image slider
Okay, one more thing: I added a new Before and After Image Slider module. I was doing a good job creating modules and had some extra time, so I thought, “Why not?” You can add a before and after image and a slide to compare the two.
Try Divi 5 today
These features are now available for Divi 5. Give them a try and let us know your thoughts.
We rebuilt Divi from the ground up and packed it with dozens of the most requested features. Forget everything you thought you knew about Divi, because Divi 5 is a completely different beast.
Have you tried the new Divi 5 Preset Manager?
In case you missed it, we recently released the new Page Manager, Preview Mode, and Content Analytics.
Watch this video for all the details. 👇
More Divi 5 updates are on the way
The features keep coming and we won’t be slowing down anytime soon!
If you like these updates, please do us a big favor and let us know at like this video and leave a comment. It means a lot to us to see you cheering on Divi, and it’s essential to fuel the algorithm and spread the message.
Don’t forget that follow us on YouTube and subscribe to the Divi newsletter so you never miss an update. I’ll see you soon for another Divi 5 feature announcement, which I promise is just around the corner. 😁
#menu #modules #menu #looping #interactions