Today, we are adding selector-based targeting, breakpoint triggers, menu looping, and new menu components to the interaction builder. You may create any kind of menu, including giant menus and slide-in menus, by combining these new features with Divi 5's more comprehensive systems, such as canvases and semantic elements. Additional menu features are still being added. We are incorporating them gradually, and every addition opens up a plethora of new opportunities.
We are integrating smaller menu components that can connect to larger systems to provide you the greatest flexibility to create any kind of menu. You can create your own layout rather than being restricted to one! You can create almost anything with interactions, nested elements, sticky elements, and a variety of practical menu elements (buttons, social symbols, and more). The Link and Dropdown modules are the two additional parts we are adding to the puzzle today.
You may add links with the link module, which is incredibly easy to use! Amazing, is not it? Links are at the beginning of every menu, so there is where we started as well. Rather than using the WordPress menu system directly, you may create your own menus using the menu module. You can create an evergreen menu item by adding a link module and entering dynamic content, such as the URL and page title.
Dropdown menus can already be created with the interaction builder. However, there is some preparation required. This logic is encapsulated in the new drop-down module, which makes it simple to generate dropdown menus on the fly. The interactability is immediately linked to the parent element when a dropdown module is added inside of it. The dropdown menu opens when you click or hover over the parent element. It can be added anywhere. The dropdown menu is a blank canvas; use any element to construct your own gigantic menu by adding rows or links to make a menu.
You can utilize the new Menu Loop to iterate through the items in a WordPress menu, or you can create your own menus using separate modules. For instance, as demonstrated in the video below, I can choose from all of the menus on my websites if I enable looping for a link and choose the Menu query type. With total control over the looping element's design, I can then include dynamic content from the loop, including menu text and links, to construct my own dynamic menu.
Selector-based interaction objectives were presented. Instead of focusing on a single element, you can now target parent or child elements when creating an interaction. When making reusable menu elements, such an X or hamburger icon, it is helpful. For instance, I may instruct an off-canvas menu to always close its parent container by adding an X icon to it, as demonstrated in the video below. The parent container will always close when I place the X icon there; I do not need to change the interaction.
Lastly, we updated the interaction builder with new breakpoint triggers. You may now have interactions that execute at particular breakpoints, giving you more control over the mobile menu breakdown, for instance.
Alright, I added a new module called Before and After Image Slider. Since I had some spare time and was having success creating modules, I reasoned, "Why not?" To compare the two, you can include a slide and a before-and-after photo.
Divi 5 can now utilize these functionalities. Try them out and share your comments with us. We completely redesigned Divi and included dozens of your most desired features. Forget about your preconceived notions about Divi; Divi 5 is a completely different animal.
