Divi has at all times hooked up to WordPress menus during the Menu module. What the brand new Hyperlink module, Dropdown module, and Menu question kind within the Loop Builder upload is compositional keep watch over. As an alternative of depending on a pre-packaged menu element with a set construction and styling constraints, you’ll now construct navigation from in my view styleable modules the use of the similar constructing blocks you utilize in other places in Divi 5.
The Menu question kind within the Loop Builder is the opposite key element. A Hyperlink module can also be looped in opposition to a WordPress menu so it repeats as soon as in keeping with menu merchandise and dynamically pulls in every merchandise’s textual content and URL. Upload, take away, or reorder pieces in Look > Menus, and the navigation updates with out requiring adjustments within the Visible Builder.
There’s one present limitation to bear in mind: Divi 5’s new menu looping does now not but supply a whole one-loop answer for top-level pieces and nested sub-menu pieces in combination. Those new modules and the Menu question kind nonetheless supply a robust basis, however for now, constructing dropdown navigation works highest with a hybrid means. As a result of that, this instructional covers two sensible patterns: one for flat navigation pushed totally by way of a unmarried menu loop, and one for navigation with dropdowns the place the highest point is constructed manually and every dropdown’s hyperlinks are looped from a devoted WordPress menu.
Ahead of You Get started: Set Up Your WordPress Menus
Move to Look > Menus and create the menus you wish to have to loop. For flat navigation, a unmarried menu containing all top-level pieces is sufficient.
For dropdown navigation, create a separate menu for every set of dropdown hyperlinks you wish to have to output dynamically. On this instructional, the “Products and services” menu incorporates best the hyperlinks that seem within the Products and services dropdown.
One ultimate observe prior to we commence: this newsletter makes a speciality of the brand new modules, loop settings, and elementary semantic construction. To stick on subject, it does now not duvet styling or constructing a broader design machine for navigation. For that, seek advice from the detailed steerage on Design Variables and Nested/Stacked Presets.
Flat Navigation Pushed by way of a Unmarried Menu Loop
This construction works neatly for navigation and not using a dropdowns. One Hyperlink module, configured as a loop template, handles all of the menu. Upload or take away pieces in WordPress, and the navigation updates routinely.
Construction
Open a International Header template within the Theme Builder.
Use this construction: Segment > Row > Column containing an Symbol module for the emblem, a Staff module with a unmarried Hyperlink module inside of it, and a Button module for a CTA. Within the Column’s Design > Structure settings, set the format to Flex, set Structure Path to Row, Justify Content material to Area Between, and Align Pieces to Heart.
At the Staff module, use those flex settings: Justify Content material set to Area Between and Align Pieces set to Heart.
The Hyperlink module within the Staff will function the loop template and output all menu pieces.
Loop Settings
Make a selection the Hyperlink module within the Staff. Within the Content material tab, open the Loop choice team. Toggle Loop Part on, set Question Kind to Menu, then make a selection your number one navigation menu within the Menu box. Set Order Through to Menu Order and Order to Ascending so the output suits the order you put in WordPress.
Set the Hyperlink module’s textual content box to drag dynamic values from the menu merchandise so every repeated example makes use of its personal label. Use Loop Menu Textual content.
Do the similar for the hyperlink vacation spot by way of surroundings the Hyperlink box to make use of Loop Menu Hyperlink.
Semantics
Paintings via every layer from the out of doors in.
Row: Within the Complex tab, set the HTML component to
