How to use the Divi WordPress theme toolbox plugin

9 Min Read
divi toolbox plugin

Divi Toolbox plugin is that 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 Divi website 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.

divi toolbox plugin

General parameters of Divi Toolbox plugin

The Divi Toolbox plugin option screen is added to the Divi dashboard menu. Settings are enabled here, but adjustments are made in the customizer.

General settings include style for global headers, custom login page, hiding projects, permission to upload SVG file types, custom browser scroll bar, 404-page settings (choose one 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 General tab 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 styling 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 plugin header settings

Header settings add style to the menu, enable custom dropdown menu, add CTA menu button, change logo on docker, enable logo overlay, and add Divi layout before page navigation welcome, as well as 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 include a sticky footer, show footer, customize menus and widgets, customize the Back to Top button (which adds a custom button link option), and add before and after layouts to the footer.

I changed the header and menu fonts to uppercase 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 (that’s why the text is behind the text module above).

I styled the top of the page button to display 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 to Grow (it also includes shrink, move up, down, wobble, heartbeat, jello, and pulse).

Divi Toolbox plugin Mobile settings

Mobile settings 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, change the logo, choose the click effect of the screen. hamburger icon, 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 smaller than 980px, it was replaced with the mobile icon that I selected and added the hamburger menu with an animation that I chose.

In this, I’m styling the background color, hover background color, and mobile menu hamburger menu. I changed the main menu item text 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.

Divi Toolbox plugin blog settings

Blog settings allow you to customize sidebar and widgets, post meta, archive, and category pages, choose a layout (from 6 options), hide the archive sidebar, and customize the text of the Read More button.

For single posts, you can choose the sidebar layout, hide the post title, add an author box, add previous and next links, add related posts, and customize the comments form. You can also add custom post-browse 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 to the 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, I’m customizing the comments form. You control the colors of the field (focus and non-focus), the border, the text, the colors, the 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.

Read more: How to create a personalized login page with Divi

Divi Toolbox plugin license

You have the choice between two licenses :

  • 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 number 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.

There are a few settings you can access 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 checking out.


For website maintenance service contact us.divi toolbox plugin

Share this Article
Posted by Rebecca
Rebecca is an Independent content writer for breldigital, She writes content on any given topic. She loves to write a case study article or reviews on a brand, Be it any topic, she nails it
Leave a comment

Leave a Reply