Divi Toolbox is a plugin which adds many new effects to Divi that normally require CSS, JavaScript, PHP or many individual plugins. The effects are easy to use, customize and give your Website Give that extra sparkle to stand out from the crowd.
Effects include site-wide changes, new mobile menus, particle backgrounds, footers, widgets, styles, animations, headers, navigation, new blog layouts, Divi presentations in new locations, customization of the login screen, popups, etc. Many features can be customized with new additions to the theme customizer. Divi Toolbox does not work with Extra or the Divi Builder plugin.
General settings of Divi Toolbox
The Divi Toolbox option screen is added to the Divi dashboard menu. Settings are enabled here, but adjustments are made in the customizer.
The settings general include global headers style, custom login page, hiding projects, permission to upload SVG file types, custom browser scroll bar, 404 page settings (choose layout and hide header and footer) and social icons (activate style, open file). new tab and add more icons).
Adding social icons opens a field where you can enter the URL of 9 additional social networks.
Here is the tab General of the customizer, where I can adjust the settings I have enabled. Settings include headers and fonts, browser scroll bar, and login screen. In this example, I made some adjustments to the h1 text and body, and added a style to the scroll bar. I also added more social icons.
For the login screen, you will need to make your changes and then log out or view the screen in another browser.
Here is my login screen after adding a background image, logo, and changing the size and color of fields and text. It takes a bit of tweaking as you can't see the screen while you make your changes.
Divi Toolbox header settings
The settings Header add a style to the menu, activate a custom drop-down menu, add a CTA menu button, change the logo on the docker, activate the overlay logo and add a Divi layout before homepage navigation, as well as 'a formatting before and after. navigation on other pages.
The CTA menu button lets you apply the CTA to the first or last menu item or apply a custom class. It provides the CSS and instructions on where to add it.
Here is the customizer for the header. I added a layout above the menu (in this example it's just a text module, but you can add a full layout if you want). The overlapping logo has a square box with shadow effects. I changed the logo size from 200 to 140 and moved the social icons to the main menu. I'm hovering over the Services menu item so you can see the CSS effect.
Footer Settings in the Divi Toolbox
Footer settings include a sticky footer, display footer, customize menus and widgets, customize the Back to Top button (which adds a custom button link option), and add before and after layouts the footer.
In this example, I changed the header and menu fonts to all caps and increased the spacing. I also adjusted the hover colors and added an icon next to the hover text. I added a layout after the layout. This uses a revealed footer (which is why the text is behind the text module above).
I styled the top of page button to show text. It has a shadow effect and I adjusted its location. I left the default colors. I have centered the bottom text and the social icons. For the hover effect, I chose Grow (it also includes shrink, move up, down, wobble, heartbeat, jello, and pulse).
Settings for Divi Toolbox Mobile
The settings mobile include a field to enter the mobile menu breakpoint (the exact width of the screen when the menu changes from desktop to mobile), custom styles, edit the logo, choose the hamburger icon click effect , collapse the nested submenu and activate. several CSS classes. CSS classes allow you to reverse columns and center text, modules and buttons.
Here is a preview of the page in Google Chrome with Responsive selected. As soon as I took the screen size below 980px, it changed to the mobile icon I selected and added the hamburger menu with an animation I chose.
In this screen, I'm styling the background color, hover background color, and mobile menu hamburger menu. I changed the text of the main menu items to uppercase and left the CTA text standard. I also changed the background for the CTA menu item. You can also adjust the menu and icon size.
Blog Settings Divi Toolbox
The parameters of blog allow you to customize sidebar and widgets, post meta, archive and category pages, choose a layout (from 6 options), hide archive sidebar and customize button text Read more.
For single posts, you can choose sidebar layout, hide post title, add author box, add previous and next links, add related posts and customize the online form of comments. You can also add custom post-navigation layouts to single posts, archives, categories, author pages, and search results pages.
For the blog page, I added a shadow effect to the sidebar, changed the fonts and styling, styled the search box, and increased the size of the border. It uses an alternating layout and I customized the text for the read more button.
This example is layout 6. I customized the font colors for the meta section again and added a hover color. I also customized the background for the Learn More button.
Individual blog posts allow you to customize each of the items you've added in blog settings. In this screen, I customize the associated articles, the next and previous links, as well as the author area. You control all text, colors, shadows, etc.
In this example, I am customizing the online form of comments. You control the field colors (focus and non-focus), border, text, colors, button, etc. I changed the background color of the button, the focus color of the field, added a border to the field and changed the radius.
Divi Toolbox License
You have the choice between two licences :
- Regular license (to be used on a project) - € 49,00
- Extended license (for use on unlimited projects) - € 169,00
What you must remember
I am impressed with the amount of features and settings in this plugin. I particularly like the fact that it can add similar articles, previous and next links, and an author area to blog posts that are not created with the Divi builder. The scroll bar is also a nice touch.
You can access a few settings in the Divi modules, such as the header text, but it provides more details for those settings. I would like a few more tweaks to be added (e.g. shadow effects for the comments area, more logo options, social media icon locations, etc.).
If you want to add a ton of new effects to Divi in the easiest way possible, Divi Toolbox is worth the detour.
