Divi has at all times given you techniques to create customized menus, maximum particularly with the vintage Menu module. That module remains to be helpful, however additionally it is an all-in-one device, this means that it may well really feel proscribing when you need complete regulate over construction, styling, dropdown habits, or cellular navigation.
With Divi 5’s new menu features, you’ll be able to construct navigation from smaller, extra versatile items. The brand new Hyperlink and Dropdown modules mean you can create customized menus, dropdowns, mega-menu taste layouts, and cellular navigation immediately within the Visible Builder, with out depending on third-party plugins or customized code.
On this step by step information, we’ll construct a customized menu with submenus and a separate cellular model the use of local Divi 5 options.
Getting Began With Divi 5’s New Menu Options
Prior to construction your menu, be sure you are the use of the newest model of Divi 5. You’ll get started from a contemporary set up or use the Divi 5 Migrator if you’re updating an present Divi 4 website online. If you’re migrating a are living website online, take a look at the improve on a staging website online first so you’ll be able to evaluation the entirety earlier than pushing adjustments are living.
For this instructional, we’ll construct the menu throughout the Theme Builder as a part of a International Header. That approach, the menu seems persistently around the website online. You’ll additionally create separate header templates for explicit spaces, corresponding to archive pages, product templates, or different Theme Builder layouts, when a venture wishes other navigation in several contexts.
A Fast Observe On Menu Loops
We’re deliberately skipping Menu Loops for the desktop menu on this information. Menu Loops are helpful for dynamic, repeating navigation constructions, however they repeat the construction throughout the looped component. In the event you position the similar Dropdown module inside of a looped Hyperlink module, each and every repeated hyperlink can inherit that very same dropdown construction, which isn’t what most standard desktop menus want.
For the desktop menu, we’ll use particular person Hyperlink and Dropdown modules so each and every top-level merchandise could have its personal submenu content material. Later, we’ll use Menu Loops for the cellular menu, the place an easy repeated listing of hyperlinks makes extra sense.
What Is The Hyperlink Module?
The Hyperlink module is a standalone, customizable hyperlink designed for navigation. You’ll use it as a top-level menu merchandise, a submenu merchandise inside of a Dropdown module, or a part of a extra complex navigation structure. When compared with simple textual content hyperlinks or Button modules, the Hyperlink module provides you with centered regulate over how particular person navigation pieces glance and behave.
Upload your hyperlink textual content, assign a static or dynamic URL, and optionally come with an icon.
Like different Divi modules, the Hyperlink module may also be styled with Divi’s design settings.
Key Options At A Look
- Granular Styling: Each and every Hyperlink module could have its personal typography, colours, spacing, and hover kinds.
- Icon Fortify: You’ll upload icons immediately throughout the module, which turns out to be useful for customized menus, submenus, and extra visible navigation patterns.
- Dynamic Content material And Loop Compatibility: The Hyperlink module can pull labels and URLs dynamically, and it may well paintings with menu loops when you need hyperlinks generated from WordPress menu information.
- Semantic Flexibility: You’ll use Semantic Elements to make a choice extra suitable HTML output to your customized navigation construction.
What Is The Dropdown Module?
The Dropdown module is a container for submenu content material. It may be nested inside of a mother or father component, corresponding to a Hyperlink module, to create layered navigation immediately within the builder. It controls how and the place submenu content material seems.
Key Options At A Look
- Computerized Mother or father Triggering: When positioned inside of a mother or father component, the Dropdown module can open on hover or click on, relying for your settings.
- Versatile Content material: The Dropdown module isn’t restricted to hyperlinks. As a result of it really works with Nested Modules, you’ll be able to position different Divi modules inside of it, together with pictures, buttons, textual content, rows, and extra.
- Complicated Positioning: The module contains place, course, alignment, and offset settings so you’ll be able to regulate the place the dropdown seems.
- Constructed-In Menu Conduct: For fundamental dropdown habits, you’ll be able to use the module’s integrated hover or click on settings as a substitute of manually growing that interplay from scratch.
How To Construct A Customized Menu With Divi 5
Now that you understand what the Hyperlink and Dropdown modules do, let’s put them to paintings. Through the top of this instructional, you’ll have a customized desktop menu with dropdowns and a separate cellular menu constructed with Canvases, Menu Loops, and Interactions.
Construct The Desktop Menu
Get started via opening the Divi Theme Builder and clicking Upload International Header.
Prior to including content material, click on into the Phase at the canvas and pass to the Design tab. Amplify the Spacing menu and observe 15px of padding to the peak and backside.
Subsequent, open the Complicated tab, increase the Place menu, and set the Z Index to 999. This is helping stay the header above web page content material when dropdowns are open.
In any case, increase the Scroll Results menu and set the Sticky Place to Keep on with Best.
Now upload a single-column Row to the Phase. Edit the Column, transfer to the Design tab, and increase the Structure menu. Set Structure Path to Row, Justify Content material to Area Between, and Align Pieces to Heart. This creates a horizontal header construction with the kid components targeted vertically.
Prior to including menu pieces, be certain you have already got a WordPress menu created. If now not, pass to Look > Menus and upload your web page hyperlinks there.
Upload An Symbol Module
Upload an Symbol module to your emblem. Use Divi 5’s Responsive Editor or Customizable Responsive Breakpoints to dimension it correctly for various display screen sizes.
Upload A Workforce Module
Subsequent, upload a Workforce to the Row. This may increasingly hang the top-level menu pieces. Throughout the Workforce, upload a Hyperlink module.
Cross to the Workforce’s Design tab, increase the Structure menu, and set Structure Path to Row, Justify Content material to Area Between, and Align Pieces to Heart. Those settings position the top-level hyperlinks facet via facet.
Upload Hyperlink Modules
Choose the primary Hyperlink module and elegance it to compare your branding. Use settings corresponding to Font, Textual content Colour, and Textual content Measurement to succeed in the required glance.
You’ll additionally use hover-state styling so as to add a Background Colour, Border Radius, or Spacing when customers engage with the hyperlink.
Subsequent, upload the label and URL for the primary Hyperlink module. Within the Content material tab, increase the Textual content menu and upload the label within the Textual content box.
Then increase the Hyperlink menu. Use the dynamic content material icon within the Hyperlink URL box if you wish to assign the web page hyperlink dynamically.
Reproduction the Hyperlink module as repeatedly as had to construct the remainder of your menu.
Replace the Textual content and Hyperlink URL for each and every duplicated Hyperlink module.
We’ll additionally upload a Button and an Icon module to finish the top-level navigation. The Icon will function the mobile-menu cause later within the instructional.
With the top-level navigation in position, you’ll be able to get started including dropdowns for submenu pieces. Open probably the most top-level Hyperlink modules in the principle row. Within the Content material tab, increase the Parts menu and click on + Upload Part so as to add a nested module.
Choose the Dropdown module when the Insert Module Or Row conversation seems.
Throughout the Dropdown, upload Hyperlink modules for the submenu pieces and elegance the dropdown background as wanted.
For the primary Hyperlink module throughout the Dropdown, use the Content material tab to assign the label, icon, and URL.
Within the Design tab, use the Structure settings to position the icon to the left or proper of the textual content and align the icon and label.
Use the Icon menu to taste the icon colour, dimension, and any background settings you need so as to add.
Reproduction the submenu hyperlink or reproduction and paste its attributes onto the opposite submenu hyperlinks. Then replace each and every label, URL, and icon as wanted.
As soon as the submenu hyperlinks are styled, go back to the Dropdown module’s settings. Within the Design tab, increase the Dropdown menu and modify settings corresponding to Dropdown Place, Display Dropdown On, Dropdown Path, Dropdown Alignment, and Dropdown Offset.
Upload further Dropdown modules the place wanted, then save the template.
Construct The Cellular Menu
As a result of this practice desktop menu makes use of particular person Hyperlink and Dropdown modules, we’ll create a separate cellular menu that opens when a consumer clicks the hamburger icon within the header. We’ll use Divi 5’s Canvases characteristic to construct it.
Upload A New Canvas
Click on the Canvas Grid View icon to open the Canvas interface.
Click on + Upload Canvas to create a brand new Canvas for the cellular menu.
When the Upload Canvas conversation seems, give the Canvas a reputation, corresponding to Cellular Menu, and assign a Z Index of 999 so the cellular menu seems above the web page content material. Click on Upload Canvas to release the builder.
Within the Phase settings, pass to the Design tab, increase the Spacing menu, and assign 15px of padding to the end and backside.
Upload a single-column Row to the Canvas. Edit the Row’s Column and set the Vertical Hole within the Structure settings to 15px.
Upload a Hyperlink module to the Row and elegance it as wanted. Then increase the Loop menu within the Content material tab and allow Loop Part.
Within the Question Sort box, choose Menu.
Through default, Divi will use the Number one menu. Use the Menu box to make a choice the menu you need for cellular. Divi will populate the loop with the pieces from that decided on menu. As a result of it is a Menu Loop, it’s best suited for an easy repeated listing of hyperlinks, which is why this information makes use of a separate mobile-only menu construction right here.
As an alternative of coming into hyperlink textual content manually, use Divi’s dynamic content material choices to populate the hyperlink title. Click on into the Hyperlink module’s Textual content box, use the Insert Dynamic Content material icon, and make a choice Loop Menu Textual content. Divi will replace each and every looped hyperlink with the right kind menu label.
Amplify the Hyperlink menu and use dynamic content material to assign Loop Menu Hyperlink to the URL box.
In any case, upload two extra modules, a Button and a Textual content module, and elegance them as desired. We’ll use the Textual content module because the shut cause for the cellular menu. Within the Textual content module’s Background menu, upload a Background Colour.
Transfer to the Hover State and assign a hover Background Colour.
Transfer to the Design tab and increase the Spacing menu. Upload 15px of padding to all 4 aspects.
Use Divi’s responsive settings to make any essential tweaks earlier than transferring on.
Create The Interactions
We’ll use Divi 5’s Interactions to glue the hamburger icon to the cellular menu. You’ll create a cause that opens the menu, a detailed motion, and breakpoint-based visibility controls so the desktop and cellular navigation keep out of one another’s approach.
Cellular Menu
Whilst modifying the Cellular Menu Canvas, choose the Textual content module on the backside of the structure. Cross to the Complicated tab, increase the Interactions menu, click on + Upload Interplay, and choose Click on.
Within the Edit Interplay conversation, upload an Admin Label, make a choice Cover Part because the Impact Motion, and choose Root Container because the Goal Part. This makes the shut cause disguise the cellular menu when clicked.
Now choose the Canvas Phase. To stay the cellular menu hidden till it’s brought on, pass to the Complicated tab, increase the Visibility menu, and disable the Phase on all breakpoints.
Save the Canvas, then go back to Canvas Grid View and choose the Major Canvas.
Desktop Menu
For the desktop menu, we’ll disguise the Workforce containing the desktop hyperlinks and the Button on smaller breakpoints. The ones modules must solely seem on desktop-sized monitors.
Choose the Workforce and pass to the Complicated tab. Create an interplay titled Cover Desktop Menu. Choose Breakpoint Input because the cause. Upload an Admin Label, set the Breakpoint to Pill Broad, and set the Impact Motion to Cover Part. In any case, choose the Workforce because the Goal Part.
Repeat the similar procedure for the Button module so it additionally hides on smaller breakpoints.
Whilst you preview other breakpoints, the menu hyperlinks and button must disappear as soon as the Pill Broad breakpoint is energetic.
As a result of customers can resize their browser window, upload any other interplay to turn those components once more when the structure returns to desktop dimension. Use the similar settings, however set the Impact Motion to Display Part and the Breakpoint to Desktop.
Divulge The Cellular Menu
The general interactions will disclose the hamburger icon on smaller gadgets, disguise it once more on desktop, and use it to open the cellular menu.
Choose the Icon module and upload a brand new Interplay within the Complicated tab. Make a selection a Click on cause, upload an Admin Label, make a choice Display Part for the Impact Motion, and choose the Cellular Menu Canvas Phase because the Goal Module.
For the second one interplay, make a choice Breakpoint Input because the Cause Match. Set Pill Broad because the Breakpoint, make a choice Display Part because the Impact Motion, and choose the Icon module because the Goal Module.
For the 1/3 interplay, opposite that habits when the browser returns to desktop dimension. Upload a brand new interplay at the Icon module. Stay the settings the similar, however trade the Breakpoint to Desktop and the Impact Motion to Cover Part.
In any case, disguise the hamburger icon via default on all breakpoints the use of the Visibility settings within the Complicated tab. The interactions will disclose it solely when wanted.
Check the completed menu in a brand new tab and make any essential changes the use of Divi 5’s responsive settings.
Construct Customized Menus In Divi 5 As of late
The transfer from the vintage Menu module to the brand new Hyperlink and Dropdown modules opens up a a lot more versatile option to construct menus in Divi 5. As an alternative of depending on one all-in-one menu module, you’ll be able to bring together customized navigation from smaller items that paintings with Divi 5’s broader methods, together with nested modules, Menu Loops, Canvases, and Interactions.
The workflow is extra hands-on, but it surely provides you with extra regulate over how your menu seems to be and behaves. Whether or not you’re construction a easy dropdown, a mega-menu taste header, or a customized cellular navigation revel in, those equipment make it imaginable to construct that construction immediately inside of Divi. Obtain the newest Divi 5 release and experiment with the Link and Dropdown modules, Canvases, and Interactions to construct your subsequent customized menu.
The publish How To Build Custom Menus With Divi 5’s Link & Dropdown Modules gave the impression first on Elegant Themes Blog.
0 Comments