Are you looking for more advanced features and design options for your Divi mobile menu? Here’s a tutorial on how to create stunning menus for smartphones and tablets with the top-rated plugin Divi Toolbox.
Join +2 640 subscribers!
Summary: Divi Toolbox
Divi Toolbox is a premium Divi plugin that adds tons of new options to Divi. My favorite part is the massive additional options for the Divi mobile menu. It’s compatible both with the default Divi Theme Customizer menu and the menu module (using the Theme Builder header).
I’ve been using Divi Toolbox on my own websites as well on my client websites since the release back in 2018 and I’m really happy with the flexibility, usability and extensive support. Divi Toolbox is like a Swiss Army Knife for Divi.
Mobile Menu Features
- Collapse nested mobile menu submenus
- Choose from 20+ beautiful mobile menu animations
- Choose from 9 hamburger icon animations
- Add any content you like in the mobile menu (using the Divi library layouts, shortcodes or widgets)
- Set custom mobile menu breakpoint
- Use a custom menu logo on mobile
- Use fixed mobile menus
- Add text (i.e. “MENU”) to the hamburger menu
- Change mobile browser theme color
- … and much more.
And this is just the mobile menu settings. Divi Toolbox is also stacked with settings for the desktop menu, powerful global settings, blog customizations and other great mobile enhancements like changing the mobile column count – just to mention a few things.
Pricing & License
Enter the discount code DIVIMUNDO15 in the checkout to get 15% off.
Regular license: €49 €41.65 for lifetime usage on 1 website.
Extended license: €169.00 €143.65 for lifetime usage on unlimited websites.
All features + automatic updates are included. Support is provided for 6 months after the purchase date. There is no free version of Divi Toolbox. The plugin is developed by Divi Lover.
Installing the plugin
- Purchase Divi Toolbox at Divi Lover
Enter the code DIVIMUNDO15 in the checkout for 15% discount - Download the plugin ZIP file
- Log in to your WordPress dashboard
- Go to Plugins » Add new and click Upload Plugin
- Upload and activate the plugin.
That’s it. You should now see Divi Toolbox in the WordPress dashboard menu.
Add your license key
- From your WodPress dashboard, go to Settings » Divi Toolbox Activation
- Add your license key in the field API Key and click Save Changes
Now you have access to automatic plugin updates.
The Divi Toolbox User Interface
Divi Toolbox has two different areas where you choose your settings settings:
- The Divi Toolbox Settings in the WordPress dashboard at Divi » Divi Toolbox
- The Divi Toolbox Customizer tab at Divi » Theme Customizer » Divi Toolbox
Divi Toolbox does not add any new modules in Divi. It simply enhances and enriches the existing modules and templates in Divi via these two interfaces.
Part 1: Divi Toolbox Settings
This is where you enable and disable features in Divi Toolbox. You can choose between these tabs:
- Admin
- Global
- Header
- Footer
- Mobile
- Blog
- Modules
You’ll find most of the mobile menu options in the Mobile tab but if you want to use shortcodes and Divi library layouts in your mobile menu, you’ll need to enable “Divi Layouts Shortcode” in the Admin tab first.
Also, if you want to add a CTA button in your mobile (and desktop) menu, you need to enable “Add CTA Menu Button” in the Header tab first.
Let’s take a closer look under the hood at the mobile options in Divi Toolbox. There are so many options that I had to divide the screenshot into two separate images!
Change the mobile browser theme color and the mobile menu breakpoint. Enable custom mobile menu style and use a separate menu for mobile vs. desktop. Add your website logo, search bar, social media icons and widgets to your mobile menu. Use a custom menu trigger to create a fixed hamburger menu with a nice background and a label text. Change logo on mobile, enable custom hamburger icons, change the hamburger animation effect and collapse nested submenus (killer feature!).
Change mobile columns count, enable parallax background effect on mobile, reverse column stacking order in mobile, add hyphens for pretty line breaks in mobile or prevent words from breaking in mobile.
Part 2: Divi Toolbox Customizer
Divi Toolbox adds a new tab in the Theme Customizer called – yes you guessed it right – Divi Toolbox. This is where you’ll do most of the nitty gritty design settings.
Go to Theme Customizer » Divi Toolbox » Mobile to customize for example the:
- Mobile menu bar
- Menu bar search icon
- Hamburger icon
- Mobile menu container
- Mobile menu animation
- Mobile menu links
- Nested submenus
- Mobile menu call to action button
- Mobile menu search bar
- Mobile menu widgets
- Mobile menu social icons
You will see a different set of tabs depending on which settings you have enabled in the Divi Toolbox settings. Let’s take a look in the Theme Customizer!
The Divi Theme Customizer.
The Divi Toolbox Customizer.
The Divi Toolbox Mobile Customizer.
Final words
Divi Toolbox is one of the must have plugins that I use in all my Divi projects. It’s a perfect way to fill in the gaps in Divi in regards to design settings and features.
It’s worth the money just for its’ mobile menu features alone. The other features are just a massive bonus.
Enter the discount code DIVIMUNDO15 in the checkout to get 15% off.
👉 Related content: Six tips for a better Divi mobile menu
👉 Free course: Style the mobile menu with the Divi Theme Builder
0 Comments