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!

The Divi Toolbox empowers you to achieve effects which normally can only be done with custom CSS, PHP or Javascript! Now, you’ll be able to easily make these changes in the Divi Theme Customizer. Make your website awesome without any coding skills!

See it in action!

Make sure you check out our Toolbox Demo Page. Does it look pretty advanced? Well, guess what! We didn’t use even a tiny bit of custom CSS or JavaScript to build it. All the awesome effects have been created using the Divi Toolbox! You’ll find the full feature list there too!

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:

 

Admin Settings

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 Projects

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.

 

Global Options

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 Popups

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.

 

Mobile Enhancements

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!

Customize Sidebar

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.