Divi Toolbox is a third-party plugin that provides a large number of new results to Divi that might usually require CSS, JavaScript, PHP, or quite a lot of particular person plugins. The results are simple to make use of and customise and provides your Divi web page some additional sparkle to stick out from the gang.
Results come with site-wide adjustments, new cellular menus, particle backgrounds, footers, widgets, styling, animations, headers, navigation, new weblog layouts, Divi layouts in new places, login display screen customization, popups, and loads extra. Most of the options may also be styled with new additions to the theme customizer. Divi Toolbox does no longer paintings with Additional or the Divi Builder plugin.
Divi Toolbox Basic Settings
The Divi Toolbox possibility display screen is added to the Divi dashboard menu. Settings are enabled right here, however the changes are made within the customizer.
The Basic settings contains international headings taste, customise login web page, disguise tasks, permit SVG document sort uploads, customized browser scrollbar, 404 web page settings (make a choice a structure and conceal the header and footer), and social icons settings (allow styling, open in a brand new tab, and upload extra icons).
Including extra social icons opens a box the place you’ll be able to input the URL for 9 extra social networks.
Right here’s the Basic tab within the customizer, the place I will regulate the settings that I enabled. Settings come with headings and fonts, the browser scrollbar, and the login display screen. On this instance, I’ve made a couple of changes to the h1 and frame textual content and added styling to the scrollbar. I’ve additionally added extra social icons.
For the login display screen, you’ll need to make your adjustments after which log off or view the display screen in every other browser.
Right here’s my login display screen after including a background symbol, brand, and converting the dimensions and hues of the fields and the textual content. It does take a bit tweaking since you’ll be able to’t see the display screen as you are making your adjustments.
Divi Toolbox Header Settings
The Header settings upload styling to the menu, allow a customized dropdown menu, upload a CTA menu button, trade the emblem on fastened menu, allow overlapping brand, and upload a Divi structure earlier than navigation at the house web page, and a structure earlier than and after navigation on different pages.
The CTA menu button allows you to practice the CTA to the primary or remaining menu merchandise, or practice a customized elegance. It supplies the CSS and directions on the place so as to add it.
Right here’s customizer for the header. I’ve added a structure above the menu (on this instance it’s only a textual content module, however you’ll be able to upload an entire structure if you need). The overlapping brand has a sq. field with shadow results. I modified the emblem dimension from 200 to 140 and moved the social icons to the principle menu. I’m soaring over the Services and products menu merchandise so you’ll be able to see the CSS impact.
Divi Toolbox Footer Settings
Footer settings come with a sticky footer, footer expose, customise menus and widgets, customise the again to most sensible button (which provides a customized button hyperlink possibility), and upload earlier than and after footer layouts.
On this instance, I’ve modified the header and menu fonts to all caps and higher the spacing. I’ve additionally adjusted the hover colours and added an icon subsequent to the textual content on hover. I’ve added a structure after the footer structure. This one makes use of a printed footer (which is why the textual content is in the back of the textual content module above it).
I’ve styled the again to most sensible button so it presentations textual content. It has a shadow impact and I’ve adjusted its location. I left the colours at default. I’ve targeted the ground textual content and social icons. For the hover impact I selected Develop (it additionally contains shrink, transfer up, transfer down, wobble, heartbeat, jello, and pulse). I’m soaring over the Fb icon so you’ll be able to see the impact.
Divi Toolbox Cellular Settings
The Cellular settings come with a box to go into the cellular menu breakpoint (the precise display screen width when the menu adjustments from desktop to cellular), customized types, trade the emblem, make a choice the hamburger icon click on impact, cave in the nested sub-menu, and allow a number of CSS categories. The CSS categories let you opposite the columns and heart the textual content, modules, and buttons.
Right here’s a take a look at the web page in Google Chrome with Responsive decided on. Once I took the display screen dimension not up to 980 pixels it modified to the cellular icon that I decided on and added the hamburger menu with animation that I selected.
On this display screen, I’m styling the cellular menu’s background colour, hover background colour, and hamburger menu. I’ve modified the textual content for the principle menu pieces to all caps and left the CTA textual content usual. I additionally modified the background for the CTA menu merchandise. You’ll additionally regulate the menu and icon dimension.
Divi Toolbox Weblog Settings
The Weblog settings let you customise the sidebar and widgets, the submit meta, the archive and class pages, make a choice a structure (from 6 choices), disguise the archives sidebar, and customise the learn extra button textual content.
For unmarried posts you’ll be able to make a choice the sidebar structure, disguise the submit identify, upload an creator field, upload earlier and subsequent hyperlinks, upload comparable posts, and customise the feedback shape. You’ll additionally upload customized layouts after navigation to unmarried posts, archives, classes, creator pages, and seek effects pages.
For the weblog web page, I added a shadow impact to the sidebar, modified the fonts and their styling, and styled the quest field and higher the dimensions of the border. It makes use of an alternating structure and I custom designed the learn extra button textual content.
This situation is structure 6. I’ve custom designed the meta font colours once more and added a hover colour. I’ve additionally custom designed the learn extra button background.
The person weblog posts assist you to customise each and every of the weather that you just added within the weblog settings. On this display screen, I’m customizing the comparable posts, subsequent and former hyperlinks, and the creator field. You have got keep watch over over all the textual content, colours, shadows, and so on.
On this instance, I’m customizing the feedback shape. You have got keep watch over over the sector’s colours (each concentration and non-focus), border, textual content, colours, button, and so on. I’ve modified the button background colour, the sector’s concentration colour, added a border to the sector, and adjusted the radius.
Divi Toolbox Modules Settings
The Modules tab supplies settings so as to add a follow-the-mouse hover impact, upload a slender e-mail opt-in (it supplies CSS for 3 other choices), secondary buttons (which provides a brand new layer of customization), and quite a lot of tweaks.
The tweaks come with an animated triangle icon for accordion and toggle modules, getting rid of the horizontal backside border and padding for pricing tables, transferring the portrait symbol underneath the content material in testimonials, disguise horizontal scrollbars, and including CSS to vertically align columns and to modify the peak of any component to 100% of its viewport top.
Right here’s a take a look at the slender e-mail opt-in. It puts all the fields on a unmarried line. This situation additionally makes use of the secondary button. Simplest the buttons that I’ve added the CSS elegance to gets those adjustments. The use of the CSS elegance signifies that I now have two international button types.
Divi Toolbox Extras Settings
The Extras tab contains preloaders, popups, debris background, 3D tilt impact, and parallax scrolling for modules.
There are 12 preloaders to choose between. You’ll have them to simply seem at the house web page if you need, and make a selection their transition sort and pace. The selector display screen presentations the preloaders’ animations. You’ll customise them additional within the theme customizer.
Cause the popups with any hyperlink from a menu merchandise, button, hyperlink in textual content, and so on. Create as many as you need. Select any premade structure for the popup. Customise the background and shut button within the customizer.
That is transferring debris. You have got complete keep watch over over the colour, form, choice of debris, pace, dimension, line dimension, opacity, and interactivity. There are two CSS ID’s for debris, letting you’ve two other designs.
Right here’s a take a look at the lean characteristic. You’ll regulate the lean, viewpoint, scale, pace, and glare. Upload it to any phase, row, or module.
Divi Toolbox License
There are two licenses to choose between:
- Common License (to be used on one mission) – €49.00
- Prolonged License (to be used on limitless tasks) – €169.00
Finishing Ideas
I’m inspired with the volume of options and settings this plugin has. I particularly like that it provides comparable posts, earlier and subsequent hyperlinks, and an creator field to weblog posts that aren’t created with the Divi builder. The scrollbar may be a pleasing contact.
There are a couple of settings that you’ll be able to get to within the Divi modules, corresponding to header textual content, however this offers extra element for the ones settings. I wish to see a couple of extra changes added (as an example, shadow results for the feedback field, extra brand possibility, social media icon placements, and so on.).
In case you’re fascinated with added a ton of latest results to Divi in the best way conceivable, Divi Toolbox is value a glance.
We wish to pay attention from you. Have you ever attempted Divi Toolbox? Tell us about your enjoy within the feedback underneath.
Featured Symbol by the use of vasabii / shutterstock.com
The submit Divi Plugin Highlight: Divi Toolbox gave the impression first on Elegant Themes Blog.
WordPress Web Design