Skip to main content

Divi Mobile: Inject Layouts Settings Guide

Divi Mobile allows for an enhanced customization experience by enabling users to inject layouts from the Divi Library into their mobile menus and headers. This feature can significantly elevate the design and functionality of your mobile site. This guide explores the Inject Layouts Settings, providing clear instructions on how to utilize these options effectively.

Video​

info

Live Preview Loading

  1. While working within WordPress, you might encounter delays in the live preview mode's responsiveness. This is a common occurrence due to the foundational structure of WordPress.
  2. Should the live preview not reflect your changes immediately, proceed to publish your modifications and then refresh the page. Repeating this process can help in accurately displaying your updates.
  3. To verify the appearance and functionality of your mobile menu accurately, consider viewing your site from a separate device where you're not logged into the WordPress admin area, such as on a mobile phone. This approach offers a more authentic user perspective.

Implementing Inject Layouts Settings​

  1. In your WordPress dashboard, find and select Divi Mobile inside the Theme Customizer.
  2. Look for the Inject Layouts Settings section where you can configure the Inject Layouts Settings.
  3. After making your selections, be sure to save your changes to apply them to your site.

Key Inject Layouts Settings​

Inject Layout Above the Menu​

Add a custom layout from the Divi Library to appear at the top inside your mobile menu. This feature is ideal for adding promotional banners, contact information, or any custom content you wish to highlight.

Inject Layout Above

Inject Layout Below the Menu​

Similar to the above setting, but this allows you to add a layout at the bottom of your mobile menu. Useful for footer information, social media links, or additional navigation.

Inject Layout Below

Inject Layout Above the Custom Header​

Inject a layout from the Divi Library to appear above the custom header exclusively. This is particularly useful for announcements, promotions, or adding a secondary navigation area distinct from the main menu.

Inject Layout Above Header

Inject Layout Below the Custom Header​

Place a custom Divi Library layout directly below the custom header. This placement is ideal for supplementary navigation, showcasing accolades, or providing quick access to essential pages.

Inject Layout Below Header

Tips for Success​

  1. Content Relevance: Ensure the content of the injected layouts is relevant and provides value to the mobile user experience.
  2. Design Consistency: Maintain a consistent design theme with the rest of your mobile site to ensure a cohesive look and feel.
  3. Performance Consideration: Be mindful of the size and complexity of the injected layouts, as heavy layouts can impact site performance and loading times on mobile devices.

By leveraging the Inject Layouts Settings in Divi Mobile, you can create a more dynamic and engaging mobile menu and header. This customization capability allows for a tailored mobile navigation experience, enhancing usability and reinforcing your brand identity on mobile devices.

danger

Menu Preservation Across Theme Changes

  1. Divi Mobile associates the mobile menu you design directly with your currently active theme
  2. Switching your website's theme to a different parent or child theme necessitates the reconfiguration of your mobile menu. This is essential to note, as a theme change can disrupt the appearance and functionality of your previously designed mobile menu.
  3. Before altering your site's theme, plan for the recreation of your mobile menu under the new theme. This ensures a seamless transition and maintains the navigational experience for your mobile users.
Last updated on