Divi Toolbox ➜ Modules ➜ Follow-The-Mouse Hover Effect This set of options adds a direction-aware overlay hover effect to the Portfolio and Gallery modules. No CSS class is required as this feature will apply to all Gallery, Fullwidth Portfolio, and Filterable...
Divi Toolbox ➜ Modules ➜ Slim Inline Email Optin To change the default Email Optin module into a slim version, navigate to the module’s Settings → Advanced tab → CSS ID & Classes → CSS Class, and add one of the following CSS classes: slim-optin1...
Toolbox Customizer ➜ Modules ➜ Buttons The following options are enabled by default in the Toolbox Customizer: Button font weight Button hover style (Default, Grow, Shrink, Move Up, Move Down, Wobble, Heartbeat, Jello, Pulse) Divi...
Divi Toolbox ➜ Blog ➜ Custom Layouts You can select any layout saved in the Divi Library and display it in the header area (after default navigation) of your website for one of the following page types: Single Post Header Layout – This layout will be...
Divi Toolbox ➜ Global ➜ Preloaders With the Divi Toolbox, you can add an animated overlay to your website, which will be displayed while your page is loading. You can edit the following settings: Only on the Home Page With this option, the preloader will be...
Divi Toolbox ➜ Global ➜ Popups You can choose to use up to five different popups. You can design popup content using the Divi Builder. You can assign any layout from the Divi Library to each of your popups. Each of the popups can be triggered by any link on the...
Divi Toolbox ➜ Blog ➜ Customize Sidebar & Widgets Enable this option to add three different customization panels in the Toolbox Customizer: Sidebar, Sidebar Widgets, and Sidebar Search. Toolbox Customizer ➜ Blog ➜ Sidebar Here’s the list of all the...
Divi Toolbox ➜ Blog ➜ Customize Sidebar & Widgets Enable this option to add three different customization panels in the Toolbox Customizer: Sidebar, Sidebar Widgets, and Sidebar Search. Toolbox Customizer ➜ Blog ➜ Sidebar Search Here’s the list of...
Divi Toolbox ➜ Global ➜ Moving Particles The Enable Particles Background feature adds a moving particles background effect to any element. The effect can be applied to any row, section, or even to a module, but only once on each page. You can use two different...
Divi Toolbox ➜ Extras ➜ Enable 3D Tilt Effect The effect can be applied to any row, section, or – for the best results – any module. Navigate to module Settings → Advanced tab → CSS ID & Classes → CSS Class, and add the following custom class:...
Divi Toolbox ➜ Extras ➜ Enable Typing Effect This feature adds a fun typing effect to any Text module. Navigate to Text Module Setting → Advanced tab → CSS ID & Classes → CSS Class and add a custom class of: dtb-typing Each paragraph in this module will be...
Divi Toolbox ➜ Extras ➜ Parallax Scrolling for Modules This feature adds ten different scrolling speeds you can apply to any module to achieve beautiful and smooth parallax scrolling effect. The effect can be applied to any row, section, or – for the best...
Divi Toolbox ➜ Blog ➜ Customize Sidebar & Widgets Enable this option to add three different customization panels in the Toolbox Customizer: Sidebar, Sidebar Widgets, and Sidebar Search. Toolbox Customizer ➜ Blog ➜ Sidebar Widgets Here’s the list of...
Divi Toolbox ➜ Blog ➜ Custom Post Meta This feature adds icons to the post meta info (post author, category, date etc.) both on the archive pages, single blog posts, and in the Divi Blog module. Once you enable this option, a new customization panel will become...
Divi Toolbox ➜ Blog ➜ Customize Archives, Categories & Blog List This feature adds multiple customization options to edit the appearance of the default WordPress index pages like archives, categories, tag archives, author archives, and the search result...
Divi Toolbox ➜ Blog ➜ Blog List Layout You can choose one of the following Blog layouts for your index pages (archives, categories, tag & author archives, search result page). And, by enabling the Hide Archive Sidebar option, you can hide the sidebar on...
Divi Toolbox ➜ Blog ➜ Change “Read More” Button Text With this setting, you can change the default text for Divi’s Blog Module “Read More” Button. This text will also appear on the button on the archive and category pages if you...
Divi Toolbox ➜ Blog ➜ Single Post Layout You can choose the global layout type for all your blog posts: Right Sidebar (default) Left Sidebar Fullwidth The following rules apply when you decide to change the layout for one single post: if the “Right...
Divi Toolbox ➜ Blog ➜ Add Author Box Enable this option to add an Author Box on the single blog post page, below the post content. Toolbox Customizer ➜ Blog ➜ Author Box Here’s the list of all the settings you can easily change: Rounded author avatar...
Divi Toolbox ➜ Blog ➜ Add Previous/Next Post Links Enable this feature to add previous and next post links globally to each post. We’re using this feature right here on our documentation page. You can see the links below the post content. Toolbox...
Divi Toolbox ➜ Blog ➜ Add Related Posts This option adds a section containing related posts below blog post content on the single blog post page. You can define the section’s title by changing the Related Posts Section Title text. Random posts from the...
Divi Toolbox ➜ Blog ➜ Customize Comment Form This setting adds additional customizer options that allow you to change the default comment form appearance. You can change the default “Submit a comment” text by editing the Comment Title text. ...
Divi Toolbox ➜ Mobile ➜ Mobile Menu Breakpoint We’re sure you’ve come across this issue: sometimes, if you have complex navigation with a lot of items, and the screen size is small, menu items overlap the second line, and logo get’s bigger....
Divi Toolbox ➜ Mobile ➜ Enable Custom Mobile Menu Style Enable this option to add a new customization panel called Mobile in the Toolbox Customizer with the following subsections: Mobile Menu Bar, Hamburger Icon, Mobile Search, Mobile Menu, Mobile Menu Links....
Divi Toolbox ➜ Mobile ➜ Enable Custom Mobile Menu Style ➜ Use a separate mobile menu with more styling options To unlock all extended customization options for the mobile menu enable the “Use a separate mobile menu with more styling options” option. Assign...
Divi Toolbox ➜ Mobile ➜ Change Logo on Mobile You can enable this option if you’d like to display a different logo image for the mobile view. The image upload input appears once the option is enabled. Simply choose the image which you want to appear on...
Divi Toolbox ➜ Mobile ➜ Enable Custom Hamburger Icon You can choose one of nine different types of hamburger icon animation: Toolbox Customizer ➜ Mobile ➜ Hamburger Icon Once enabled, you’ll be able to customize the appearance of the...
Divi Toolbox ➜ Mobile ➜ Collapse Nested Submenu This is what happens when this setting is enabled: second-level menu items are hidden on mobile; an arrow icon is added to the parent element; once clicked, it shows the submenu; the parent element is still a...
Divi Toolbox ➜ Modules ➜ Useful Tweaks There are some annoying default settings in some of the Divi modules, so we’ve added an option to tweak the modules listed below. All you need to do is enable the option, there’s no need to add a custom CSS...
Divi Toolbox ➜ Mobile ➜ Useful CSS Classes The Divi Toolbox adds CSS snippets which will allow you to modify some elements on mobile. The custom CSS classes can be added to any element (section, row, column, or module) – and if the class is specific to an...
Divi Toolbox ➜ Mobile ➜ Change Mobile Column Count The Divi Toolbox adds an option to use custom CSS classes to change the number of columns for Tablets and Phones. How to use it: Add one (or two) of these classes to Row Settings: tablet-two-cols – to...
Divi Toolbox ➜ Modules ➜ Equalize Modules’ Height You can use this feature to dynamically equalize modules’ height within a container. Available options: Equal Blurbs Height Equal Pricing Tables Height Equal Testimonials Height Disable on Mobile –...
Divi Toolbox ➜ Mobile ➜ Enable Parallax Background Effect on Mobile The Divi Toolbox adds the option to enable the parallax background effect when viewed on mobile device. How to use it: Navigate to Section, Row or Module Setting ➜ Advanced tab ➜ CSS ID &...
Divi Toolbox ➜ Footer ➜ Sticky Footer When there is not enough content on the page, the Divi footer “floats” in the middle of the screen by default. By enabling the Sticky Footer option, you will make the standard Divi footer (the footer widget...
Divi Toolbox ➜ Footer ➜ Footer Reveal Effect Use this feature if you want to achieve the following effect: The footer is hidden behind the page content and becomes visible once you scroll to the bottom of the page. Please note: This feature won’t hide and...
Divi Toolbox ➜ Footer ➜ Customize Footer Menu & Widgets Enable this option to add two different customization panels in the Toolbox Customizer: Footer Widgets and Footer Menu. Toolbox Customizer ➜ Footer ➜ Footer Widgets Here’s the list of all...
Divi Toolbox ➜ Footer ➜ Customize Footer Menu & Widgets Enable this option to add two different customization panels in the Toolbox Customizer: Footer Widgets and Footer Menu. Toolbox Customizer ➜ Footer ➜ Footer Menu Here’s the list of all...
Divi Toolbox ➜ Footer ➜ Back to Top Button You can enable the Back to Top Button Customization to add a new customization panel in the Toolbox Customizer and have the possibility to edit the default “Back to top” link appearance. If you choose...
Toolbox Customizer ➜ Footer ➜ Footer Bottom Bar The following set of options is enabled by default in the Toolbox Customizer: Hide bottom bar Bottom bar font family Bottom bar letter spacing Bottom bar text transform Center-align bottom...
Divi Toolbox ➜ Footer ➜ Custom Layouts The standard footer in Divi consists of three sections: the widget area, the footer menu, and the bottom bar (with website credits and social icons). You can select any layout saved in the Divi Library and display it in...
Divi Toolbox ➜ Modules ➜ Use custom map marker Divi Toolbox adds an option to upload your custom image as map marker, which will be used in all Map and Fullwidth Map modules across the site. Please note: Your custom image should be the same size, as Divi‘s...
Divi Toolbox ➜ Modules ➜ Global CSS Classes Divi Toolbox adds CSS snippets which will allow you to easily modify some elements. These custom CSS classes can be added to any element (section, row, column, or module) – if a class is specific to an element...
Divi Toolbox ➜ Header ➜ Add Menu Hover Effect Enable this option to add a hover effect to the default Primary Divi Menu or to a Menu module inside the Theme Builder. Toolbox Customizer ➜ Header ➜ Primary Navigation (Menu) The following set of options is added...
Toolbox Customizer ➜ Header ➜ Top Bar (Secondary Nav) The following set of options allowing you to edit the Top Bar header area is enabled by default in the Toolbox Customizer: Hide Top Bar on scroll Add Top Bar shadow (customize shadow color, offset-y, and...
Toolbox Customizer ➜ Header ➜ Dropdown Menus You can easily change the boring Divi dropdown menu look by enabling this feature on the Divi Toolbox settings page. The styling will apply to both the primary and secondary submenus. Here’s the list of all the...
Divi Toolbox ➜ Header ➜ Add CTA Menu Button You can easily change one (or more) of the Primary Menu items to a Call To Action Button-style link. You can choose to apply this style to the first or the last menu item, or to the link with a custom CSS class of...
Divi Toolbox ➜ Admin ➜ Divi Layouts Shortcode This option enables the possibility to display any layout from the Divi Library as a shortcode. You can display modules inside other modules, widgets, etc. How to use the Shortcodes? 1. Save any Module, Row or Section in...
Divi Toolbox ➜ Header ➜ Enable Custom Fixed Header You can enable this option if you’d like to display any section as a fixed header. There are two types of fixed headers available: Slide-In & Fixed Header The section will slide down from the top of...
Divi Toolbox ➜ Header ➜ Change Logo on Fixed Menu You can enable this option if you’d like to display a different logo image for fixed navigation. The image upload input appears once the option is enabled. Simply choose an image from your media library,...
Toolbox Customizer ➜ Header ➜ Overlapping Logo Effect If your website logo is long and narrow, then this feature is perfect for you. Once enabled, it will allow you to control the “Logo Box” appearance in the Toolbox Customizer. Here’s...
If there is a feature or option you feel is missing, feel free to get in touch! We’ll do our best to include it in the future Divi Toolbox version!
Maybe you’ve found a plugin setting that is not included in our documentation – please let us know.
Hi there!
If you have any questions or would like to get in touch, please fill the form below and we’ll get back to you as soon as possible.
Did you know?
You can create popups and effects like this one with Toolbox! It's so easy!
Ahhh yes!
You officially know the power of the irresistible 3D Button :D
You can easily design Popups like this one using Toolbox and Divi Builder!
Did you know?
Do you like this landing 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!
