Divi has all the time hooked as much as WordPress menus all through the Menu module. What the new Hyperlink module, Dropdown module, and Menu question kind inside the Loop Builder add is compositional regulate. Instead of relying on a pre-packaged menu part with a collection building and styling constraints, you’ll now assemble navigation from for my part styleable modules using the equivalent setting up blocks you employ somewhere else in Divi 5.
The Menu query type inside the Loop Builder is the other key part. A Link module will also be looped against a WordPress menu so it repeats once in step with menu products and dynamically pulls in each products’s text and URL. Add, remove, or reorder items in Glance > Menus, and the navigation updates without requiring changes inside the Visual Builder.
There’s one provide limitation to keep in mind: Divi 5’s new menu looping does no longer however provide a complete one-loop resolution for top-level items and nested sub-menu items together. The ones new modules and the Menu query type however provide a strong foundation, alternatively for now, setting up dropdown navigation works perfect with a hybrid approach. On account of that, this tutorial covers two smart patterns: one for flat navigation driven utterly by the use of a single menu loop, and one for navigation with dropdowns where the perfect level is built manually and each dropdown’s links are looped from a loyal WordPress menu.
Forward of You Get began: Set Up Your WordPress Menus
Transfer to Glance > Menus and create the menus you need to loop. For flat navigation, a single menu containing all top-level items is enough.
For dropdown navigation, create a separate menu for each set of dropdown links you need to output dynamically. In this tutorial, the “Services” menu comprises highest the links that appear inside the Services dropdown.
One final apply previous to we begin: this text specializes in the new modules, loop settings, and basic semantic building. To stay on topic, it does no longer cover styling or setting up a broader design gadget for navigation. For that, talk over with the detailed guidance on Design Variables and Nested/Stacked Presets.
Flat Navigation Driven by the use of a Single Menu Loop
This building works smartly for navigation and no longer the usage of a dropdowns. One Link module, configured as a loop template, handles the entire menu. Add or remove items in WordPress, and the navigation updates mechanically.
Building
Open a World Header template inside the Theme Builder.
Use this building: Section > Row > Column containing an Image module for the brand, a Workforce module with a single Link module inside it, and a Button module for a CTA. Throughout the Column’s Design > Construction settings, set the structure to Flex, set Construction Trail to Row, Justify Content material subject material to House Between, and Align Items to Center.
On the Workforce module, use the ones flex settings: Justify Content material subject material set to House Between and Align Items set to Center.
The Link module inside the Workforce will serve as the loop template and output all menu items.
Loop Settings
Make a choice the Link module inside the Workforce. Throughout the Content material subject material tab, open the Loop selection staff. Toggle Loop Phase on, set Query Sort to Menu, then select your primary navigation menu inside the Menu field. Set Order Thru to Menu Order and Order to Ascending so the output fits the order you installed WordPress.
Set the Link module’s text field to tug dynamic values from the menu products so each repeated instance uses its non-public label. Use Loop Menu Text.
Do the equivalent for the link holiday spot by the use of environment the Link field to use Loop Menu Link.
Semantics
Artwork by means of each layer from the outdoor in.
Row: Throughout the Complicated tab, set the HTML part to
0 Comments