Get Started

Divi Mobile

1.8.2

Overview
Features
Documentation
Demo

Divi Mobile Features

Revolutionize your Divi site's mobile responsiveness with Divi Mobile. This plugin offers extensive customization for mobile menus, ensuring a superior user experience. Delve into its features to make your site mobile-friendly and stylish.

Packed full of 7+ major features, filter below
All Desktop Features Mobile Features Style Options
Built with Divi Machine
Theme Builder Compatibility

Theme Builder Compatibility

Seamlessly Integrate with Divi Theme Builder

In the evolving landscape of website design, adaptability is key. The Divi Mobile plugin exemplifies this by offering full compatibility with the Divi Theme Builder. This feature ensures that you can create and customize mobile menus within the Theme Builder, harmonizing with Divi’s evolving capabilities.

Initially, when Divi Mobile was conceived, the Theme Builder didn’t exist. However, recognizing the importance of staying in step with Divi’s advancements, we have meticulously adapted Divi Mobile to work seamlessly with the Theme Builder. This integration allows you to leverage the powerful design tools of the Theme Builder while crafting your mobile menu, ensuring a consistent and unified design process.

Using Divi Mobile in conjunction with the Theme Builder, you can create a mobile menu that not only looks great but also aligns perfectly with the overall design of your website. Whether you are working on a new site or updating an existing one, this compatibility ensures that your mobile menu is an integral part of your website’s design, not an afterthought.

To assist you in making the most of this feature, we have provided a detailed tutorial on how to add Divi Mobile to your Divi Theme Builder header. This guide will walk you through the process, ensuring that you can efficiently and effectively integrate your mobile menu into your site’s design.

Embrace the combination of Divi Mobile and the Divi Theme Builder to create mobile menus that are not just functional but also aesthetically pleasing and perfectly integrated into your website’s design.

Download

Download an example header below for you to import and get you started

Download layout here

Premade Menu Styles

Premade Menu Styles

Explore and Customize with Premade Menu Styles

Dive into a world of creative possibilities with the Divi Mobile plugin, featuring a variety of ‘Premade Menu Styles’ that cater to diverse aesthetic preferences and functional needs. This feature is all about providing you with a jumpstart in designing your mobile menu, coupled with the flexibility to tailor it to your unique Divi website.

Our premade menu styles are crafted with attention to detail and an understanding of different design trends and user needs. Whether you’re looking for something sleek and modern, classic and timeless, or bold and innovative, our range of styles provides a solid foundation to begin with.

Once you choose a menu style that resonates with your vision, the customization journey begins. The Divi Mobile plugin offers a comprehensive set of settings that allows you to tweak and fine-tune your chosen style. Adjust colors, fonts, spacing, and more to ensure that the menu perfectly aligns with your website’s design and brand identity.

This blend of premade styles and customizable options empowers you to create a mobile menu that is not just a functional element but a seamless extension of your website’s aesthetic. It’s about making your menu an integral part of the user experience, one that captures your brand’s essence and enhances your site’s overall appeal.

With Divi Mobile, unleash your creativity and craft a mobile menu that stands out, engages your audience, and elevates your website’s design.

Style 1
Style 2
Style 3
Style 4
Style 5
Style 6
Hamburger Icons

Hamburger Icons

Enhance Your Menu with Customizable Hamburger Icons

In the realm of mobile navigation, the hamburger icon is more than just a button; it’s a gateway to your website’s world. Recognizing its importance, the Divi Mobile plugin offers an array of custom ‘Hamburger Icons’ to elevate the style and functionality of your Divi mobile menu.

Our collection of hamburger icons is meticulously designed to suit a wide range of aesthetic preferences and branding styles. From classic and understated to modern and quirky, our selection ensures that you can find the perfect icon to match the look and feel of your website. These icons are not just visually appealing but also crafted to catch the user’s eye, making the navigation experience both intuitive and engaging.

But the customization doesn’t stop at the visual appearance. This feature also includes the ability to change the animation of the hamburger icon. Whether you prefer a simple fade, a spin, a flip, or any other dynamic effect, you can select the animation that best complements your site’s design and enhances user interaction.

To explore our diverse range of hamburger icons and animations, we invite you to visit the documentation for Divi Mobile. Here, you can view all the options available and select the one that aligns perfectly with your vision for your mobile menu.

Incorporate our custom hamburger icons into your Divi website and witness how a small element can make a significant impact, adding a touch of sophistication and functionality to your mobile navigation.

Header Control

Header Control

Master Your Header Design with Complete Header Control

In the world of website design, the header is more than just a part of your page – it’s a critical element that defines the user’s first impression. With Divi Mobile’s ‘Header Control’ feature, you gain unparalleled mastery over the header of your Divi website, enabling you to create a custom look that perfectly reflects your brand and meets your functional needs.

This feature extends beyond the standard capabilities offered by the Divi Theme Builder. It’s our unique approach to crafting a custom header that offers you additional flexibility and control. With Header Control, you can reposition key elements like the search and cart icons, adjust your logo placement, and fine-tune the header’s height and color scheme to match your aesthetic vision.

For e-commerce websites, this feature is particularly beneficial. You can design a header that places your logo centrally for maximum brand exposure, while strategically positioning the search and cart icons for user convenience. On the other hand, the hamburger menu can be placed on the opposite side, ensuring a balanced and user-friendly layout.

The possibilities with Divi Mobile’s Header Control are vast. Whether you’re aiming for a minimalist look, a feature-rich header, or a balanced e-commerce layout, this feature provides the tools to make it happen. You’re not just designing a header; you’re crafting an experience, a welcoming gateway that sets the tone for your entire website.

Embrace the power of Divi Mobile’s Header Control to transform your website’s header into a standout feature that captivates visitors from the very first glance.

Sub-Menu Style

Sub-Menu Style

Explore Diverse Sub-Menu Styles for Enhanced Navigation

Navigating the intricacies of sub-menus on mobile devices can be a challenging task for any Divi developer. Recognizing this, the Divi Mobile plugin offers an array of ‘Sub-Menu Styles’, designed to simplify and enhance the display of sub-menus in your Divi mobile menu.

Our collection of sub-menu styles is crafted to cater to various navigation needs and design preferences. Among our offerings is the popular side-by-side style, an ideal choice for websites with extensive and detailed sub-menus. This style presents sub-menu items in an adjacent manner, making it easy for users to browse through large categories or complex menu structures without feeling overwhelmed.

Understanding the evolving nature of web design, we are committed to developing more sub-menu styles in the future, each aimed at addressing different website requirements and enhancing user experience. Our goal is to provide you with a versatile range of options that not only make your menus more navigable but also add a touch of sophistication to your website’s design.

To explore our current range of sub-menu styles and get a glimpse of what’s to come, we encourage you to visit the documentation for Divi Mobile. Here, you will find detailed previews and information about each style, helping you choose the perfect one for your website’s unique needs.

Implementing these Sub-Menu Styles from Divi Mobile not only simplifies the navigation process for your users but also elevates the overall aesthetic of your mobile menu, making it both functional and visually appealing.

Inject Divi Layouts

Inject Divi Layouts

Elevate Mobile Menus with Injected Divi Layouts

Take your Divi mobile menu to new heights with the ‘Inject Divi Layouts’ feature of the Divi Mobile plugin. This innovative feature offers unparalleled customization, allowing you to infuse your mobile menu with unique layouts created in the Divi Builder.

With the ability to inject layouts from the Divi library, your mobile menu becomes more than a navigational tool; it transforms into a dynamic, engaging part of your website. You can inject these custom layouts above or below the menu, within submenus, or even above the header, providing a level of versatility that pushes the boundaries of traditional mobile menu design.

Whether you wish to add a striking visual element, incorporate promotional content, or display important information, this feature gives you the space and flexibility to do so. The integration is seamless, ensuring that the injected layouts blend perfectly with your existing menu structure and overall site design.

The ‘Inject Divi Layouts’ feature opens up a world of creative possibilities, allowing you to craft mobile menus that are not just functional, but also visually stunning and uniquely tailored to your brand. Embrace this feature to create an unforgettable mobile navigation experience that captivates your visitors and enhances their interaction with your site.

Stop Stacking

Stop Stacking

Transform Mobile Views with the Stop Stacking Module

Addressing a common design challenge in mobile responsiveness, the Divi Mobile plugin introduces the ‘Stop Stacking’ feature, a tailored solution for those who seek more control over the layout of their mobile menus. This feature is specifically designed to counteract the default behavior of the Divi builder, where columns are automatically stacked in mobile view.

Under normal circumstances, the Divi builder’s responsive design stacks columns vertically on smaller screens, such as those of mobile devices. While this is often useful for readability and navigation, there are scenarios where a side-by-side column arrangement is preferable, especially in mobile menus. This is where our ‘Stop Stacking’ module comes into play, offering the flexibility to maintain a horizontal column layout even in mobile view.

By using this module, you can align your menu columns side-by-side, creating a more streamlined and cohesive appearance for your mobile menu. This approach not only enhances the aesthetic appeal of your menu but also improves the user experience by providing a clear, organized layout that is easy to navigate on smaller screens.

To explore the full capabilities of the Stop Stacking module and understand how it can transform your mobile menu, we invite you to delve into the detailed documentation for Divi Mobile. Here, you will find comprehensive guidance on leveraging this feature to its fullest potential, ensuring your mobile menus are not just responsive, but also visually appealing and user-friendly.

Embrace the power of Divi Mobile’s Stop Stacking feature to redefine the mobile responsiveness of your menus, aligning with your unique design vision and user experience goals.