Adding a Divi Library Layout to Your Sub Menu with Divi Mobile

Divi Mobile provides a powerful way to customize your site's navigation by allowing you to integrate layouts from the Divi Library directly into your mobile sub menus. This guide walks you through the steps necessary to incorporate these layouts, offering a more dynamic and engaging navigation experience.

Step 1: Create a Divi Library Layout

1. In your WordPress dashboard, go to Divi > Divi Library.
2. Click on Add New to start creating a new layout. Design this layout to include the elements you want to display in your sub menu, such as text, images, or additional modules.
3. Once you’re satisfied with your layout, save it to the Divi Library for future use.

Step 2: Copy the Layout ID

1. After saving your layout, note the ID number assigned to it, which is found in the URL of the Divi Library page. It's the number following the "=" sign and before any "&" sign.
2. Take note of this number as it will be used to integrate the layout into your sub menu.

Step 3: Add the Layout ID as a CSS Class

1. In your WordPress dashboard, navigate to Appearance > Menus.
2. Find your mobile menu and expand the desired menu item options.
3. If the CSS Classes field is not visible, click Screen Options at the top right corner and enable it.
4. In the CSS Classes field for the chosen menu item, add a class in the format dm-LAYOUTID, replacing LAYOUTID with the actual ID number copied in Step 2. For example, if the ID is 1572, the CSS class would be dm-1572.
5. For this layout to display properly, the menu item must have child items. All menu items containing this CSS class will display the specified Divi Library layout.

Step 4: Turn On the Inject Layout Button

1. Go to Divi Mobile > Sub Menu Style.
2. Toggle the "Inject Layout" feature to enable it. This activates the functionality for displaying Divi Library layouts within your sub menus.

Step 5: Set the Layout Position

1. In the Divi Mobile settings, navigate back to Sub Menu Style and look for Injected Layout Position.
2. Choose where you want the layout to appear relative to the sub menu items. You can choose:
   1. On Top: The layout appears above the sub menu items.
   2. Below: The layout appears below the sub menu items.
   3. Remove Sub-Menu: Removes the traditional sub menu items entirely, leaving only the injected layout.

Tips for Success

1. Testing: Preview the menu on different devices to confirm the layout appears correctly and that the navigation remains intuitive.
2. Design Consistency: Make sure the integrated layout complements the overall design of your site to create a cohesive user experience.

By integrating Divi Library layouts into your mobile sub menus with Divi Mobile, you can create a more interactive and visually engaging navigation experience for your site visitors, enhancing the overall user journey on mobile devices.