The New Divi Experience
Have you ever spent hours looking for a Divi tutorial to achieve a really cool effect on your website? Or experimenting with code, trying to make it work and never getting it completely perfect? It’s so frustrating! When you sweat over one bit of customization and it doesn’t come out right, no matter what you try…What if you could achieve these advanced effects in Divi with just a few clicks? What if you could make these changes easily in your Theme Customizer? Think of all the time you would save! And how much more awesome your website could be – with just a few clicks!
Divi Toolbox makes it possible. Say goodbye to wasting time and getting frustrated with your website. Say hello to Divi Toolbox!
The best way to achieve awesome effects in Divi without writing a single line of code!
See it in action!
The Divi Toolbox is designed to work with Divi Theme specifically. It will not work with the Extra theme, nor with the Divi builder.
Watch the Video Walkthrough
Check out this detailed step-by-step walkthrough and see how easy it is to enable and customize advanced effects in Divi! The only thing you need is the Divi Toolbox.
Make Site-wide Changes Fast
The Divi Toolbox lets you pick the elements you wish to change. When you enable a feature, it appears in your Theme Customizer, where you can make adjustments and site-wide enhancements with just a few clicks.
Logo and Header Custom Look
You can modify your logo and header with ease. Create a custom dropdown menu, add a CTA menu item, or edit hover effects. You can also change your logo on a fixed header, create an overlapping logo effect, and display any layout from your Divi library before and after header.
Fine-tune the Mobile Menu
Create the best mobile experience by adjusting your mobile menu! With Toolbox, you can make the mobile menu bar fixed, enable slide-in mobile menu, add hamburger icon animations, collapse nested submenus, and change your logo for mobile menu!
Make Divi Blog Awesome!
The Divi Toolbox has nine (!) custom layouts for your blog categories and archive pages. You can further customize each element in your chosen layout. You can also customize you single post page by adding an author box, related posts, and the previous/next post navigation to hold your visitors’ interest for longer. . Create the best blogging experience on your website!
Footer: Endless Possibilities
With the Divi Toolbox, you can style your footer without using CSS or looking up tutorials! You can customize the widgets and footer menu, add more social icons – and style them! The Toolbox makes it possible to quickly enable sticky footer or footer reveal effect, and customize the back to top button. Another option is to add custom Divi layouts before and after footer – globally. You’re just a few clicks away from making your footer amazing!
Do More with Divi Toolbox!
Get access to hundreds of powerful options and start building awesome websites today. The Divi Toolbox is so powerful that the feature list has come out quite long! But here it is. Check out what the Toolbox can do for your website:
Customize Login Page
Choose different logo, background, colors, and more – customize the appearance of the default WP login screen with ease.
Display Divi Layouts as Shortcodes
Use any layout from the Divi Library as a shortcode. You can display modules inside other modules, widgets, etc.
Hide the Projects post type and corresponding page builder modules from the Dashboard view.
Rename Projects Post Type
Rename the Project post type in the Dashboard view, change the default Icon and also change the projects slug in the URL.
Allow SVG File Type Uploads
Upload your SVG vector graphics and see their preview in the WordPress Media Library.
Allow TTF and OTF File Type Uploads
Upload your custom fonts using the Divi Builder with ease.
Use an Animated Preloader
Show loading animation during the page load, choose the loader image and change the colors and effect to match your website!
Add up to five different Popups, customize the UI colors and design the content of each Popup using the Divi Builder.
Customize Social Icons
Edit default social icons appearance in header and footer, add social isons to mobile menu – change colors, padding, borders, add animations, and more!
Add More Social Icons
Add links to your social profiles on Youtube, LinkedIn, Pinterest, Tumblr, Flickr, Dribbble, Vimeo, or Skype.
Enable Sticky Elements
Easily stick any element to the top of the page upon scroll. Define the top offset and mobile breakpoint.
Customize Password Protected Form
Edit the content and appearance of the form displayed for password protected website elements.
Add Moving Particles Background Effect
Add a moving particles background effect to any element, easily customize the effect.
Customize Browser Scrollbar
Change the default Scrollbar appearance in webkit-based browsers (eg. Chrome and Safari).
Header & Navigation
Add Fancy Hover Effects to your Menus
Choose the hover effect for the Primary Navigation and Menu modules and easily customize it using Toolbox Customizer.
Customize the Dropdown Menu
Change the appearance of dropdown menu: customize colors, size and animations.
Change the Header Shadow
Edit the default shadow of the primary menu and change it when navigation becomes fixed.
Change Logo on Fixed Menu
Set different logo image for fixed header.
Enable Custom Fixed Header
Display any section as a fixed header, which slides down as you scroll the page. Add an “always fixed” section and dynamically move the page content below it.
Add CTA Menu Button
Change any of the Primary Menu items to a Call To Action Button. You can customize the button’s appearance easily with Toolbox Customizer.
Use the Overlapping Logo Effect
Easily customize your logo area to overlap the standard header. Set different size for standard and fixed navigation.
Add Before & After Navigation Layouts
Select any layouts from Divi Library to be displayed globally before and/or after the main header and navigation.
Footer and Widgets
Make Footer Sticky
Move the footer to the bottom of browser window even if there isn’t enough content to fill the page.
Add Footer Reveal Effect
The footer is hidden behind the page content and becomes visible once you scroll to the bottom of the page.
Customize Footer Menu
Change footer menu look by editing color, links background, alignment and more.
Customize the Back to Top Button
Edit back to top button – change icon, replace it with custom text – customize the appearance
Change Back to Top Button Link
You can change the back to top button behaviour and set a custom link instead of the default scroll to top feature.
Customize Footer Widgets
Edit Footer widgets, add hover effects to navigation, customize headers easily.
Add Before & After Footer Layouts
Select any layout from Divi Library to be displayed globally before and/or after the standard Divi Footer.
Define Mobile Browser Theme Color
Choose a theme color for Android mobile browsers.
Change Mobile Menu Breakpoint
Define the screen width below which the header changes to mobile version.
Use Fixed Mobile Menu Bar
Or enable the custom Menu Trigger – a fully customizatable fixed button with hamburger icon and text.
Add Mobile Menu Animations
Change the default scroll down menu effect to any of over 20 different open and close animations or animate entire page on menu open!
Design your Mobile Menu Style
Enable hundreds of additional customizer controls to style the menu background, links, and additional custom menu elements.
Add Call to Action Menu Button
And control the CTA menu item appearance using the Customizer controls.
Edit Hamburger Icon Appearance and add Animation
Pick one of 9 different click animations effects and compleately change the look of the menu icon.
Change Logo on Mobile
Choose different logo image for mobile devices!
Add Any Content Inside the Mobile Menu
Add your website logo, search bar, social icons, shopping cart link or any Divi Layout using the Widget areas!
Collapse Nested Sub Menu Items
Hide the submenus on mobile – show them on click, customize the looks easily!
Enable Parallax Background Effect on Mobile
Bring your section background images to life on mobile devices with parallax background effect.
Change Mobile Column Count
Use custom CSS classes to change the default number of columns for Tablets and Phones.
Blog Posts and Archives
Easily Edit Archives & Category Pages
Tons of customization option to make your index pages awesome!
Change Blog List Layout
Pick one of the nine different layout types and use it on Archives and Blog modules!
Add Icons To Post Meta
Change the boring post meta information into custom links with icons!
Remove the default, border, add nice shadow, control the inner padding, or globally hide the sidebar on every index page.
Edit Sidebar Widgets Appearance
Edit the looks of your sidebar widgets easily.
Change Read More Blog Button Text
Add the missing buttons on index pages and change the text easily.
Add Related Posts
Display random posts from the same category to attract your readers to stay on your page and read more!
Add Prev/Next Posts Links
Add the navigation below the post to keep your readers for longer.
Add Author Box
Display author portrait and info below each post.
Customize Comments Form
Edit the default comment form looks with ease.
Divi Modules Customizations
Use Follow-The-Mouse Hover Effect
Add a direction-aware overlay hover effect to Portfolio and Gallery modules.
Display E-mail Optin Inline
Change the default Optin Module structure to a slim inline version.
Add Typing Effect
Bring your Text modules to life with the fun animated text strings effect.
Use 3D Tilt Hover Effect
Add this fancy 3D hover effect to any module by simly adding one custom CSS class.
Equalize Modules’ Height
Dynamically equalize Blurbs, Testimonials or Pricing Tables height.
Change the Map Marker Image
Easily replace the default Pin Icon on Divi Map modules with your custom image.
Add Secondary Buttons CSS Class
Choose your own class name and set additional global button styles using Toolbox Customizer.
Use Various Modules Tweaks
Change the default Accordion & Toggle icon to animated triangle arrow, move the portrait image below the Testimonial content.
Use Simple Parallax Modules Scrolling Effect
Change the scrolling speed of any element by adding one of twenty custom CSS classes.