Als je mij een beetje kent weet je dat Divi mijn favoriete page builder is. Deze website is gebouwd met Divi, en de meeste websites van mijn klanten ook. Maar ondanks dat de Divi Builder geweldig is, geldt dat niet voor het Divi thema zelf… Er zijn veel betere thema’s beschikbaar, zelfs gratis thema’s. Natuurlijk zorgde de introductie van de Theme Builder voor een flinke verbetering, maar het is nog lang niet perfect.

Waarom ik dan niet gewoon een ander thema gebruik? Nou, voor sommige dingen die ik graag gebruik heb je echt het Divi thema zelf nodig. Zo zet ik graag het paneel met module instellingen vast aan de linkerzijde van het scherm, dat kan niet in een ander thema. Verder pas ik altijd de standaard kleuren in de kleurenkiezer aan op de projectkleuren, ook dat kan niet met een ander thema. En ik voeg regelmatig code toe aan het Integratie tabblad in de Divi Theme Options, bijvoorbeeld voor Google Analytics zodat ik daar geen extra plugin voor nodig heb. Dus tja, ik zit eigenlijk wel een beetje vast aan het Divi thema.

Divi’s mobiele menu zoals het hoort

Een van de belangrijkste tekortkomingen van Divi is dat je geen fatsoenlijk navigatiemenu voor smartphones en tablets kunt maken. Oke, het standaard mobiele menu in Divi werkt op zich wel, maar je kunt er echt helemaal niets aan aanpassen (behalve wat kleurtjes dan). 

Divi Toolbox geeft je echter het juiste gereedschap om het mobiele menu precies zo te ontwerpen als jij dat wilt. 

Wil je dat je mobiele menu vanaf rechts naar binnen schuift , zoals bij de de meeste moderne thema’s? Geen probleem met Divi Toolbox. Liever een fade effect? Inzoomen vanaf onder? Bounce? Het kan allemaal, en je kunt zelfs een ander effect kiezen voor het sluiten van het menu.

Je kunt ook een animatie instellen om het hamburger icoon te veranderen naar een kruisje, en je kunt dat icoon ook verregaand stylen; Niet alleen de kleur en grootte ervan, maar zelfs de dikte van de strepen en hoe ver die uit elkaar staan.

Een ander probleem met het standaard mobiele menu van Divi is dat alle submenu items standaard zijn uitgeklapt. Als je veel submenu items hebt zorgt dat ervoor dat het menu totaal onoverzichtelijk wordt, eigenlijk gewoon onbruikbaar. Met Divi Toolbox kun je instellen dat submenu items standaard zijn ingeklapt, zoals ik heb gedaan in de schermafbeelding links. 

Eén van mijn favoriete functies is echter dat je alles kunt toevoegen wat je wilt in het mobiele menu.
Er zijn een paar populaire dingen die je gewoon kunt inschakelen, zoals een zoekbalk, social media icoontjes en een winkelwagen icoontje, maar je kunt ook een widgetarea toevoegen boven en onder het menu zelf 😮

Dat brengt me bij de volgende Divi Toolbox-functie waar je dol op zult zijn … maar niet voordat ik je heb verteld dat je met Divi Toolbox je eigen mobiele breaking point kunt instellen
(nogmaals 😮 ). Standaard schakelt Divi over naar het mobiele menu bij een resolutie van 980px breed, maar met Divi Toolbox kunt je dat op elk gewenst breaking point instellen.
Op die manier kun je het mobiele menu bijvoorbeeld ook op tablet in landscape stand weergeven (of zelfs op desktop als je dat wilt), of juist het desktop menu ook op een tablet in portrait stand.

Gebruik Divi layouts overal

Sinds de Divi Theme Builder kun je natuurlijk al je eigen layout maken voor je header, footer, blog template enzovoorts, waardoor deze functie misschien niet zo heel interessant lijkt op het eerste gezicht. Toch is dit een erg krachtige feature. Als je dit inschakelt wordt er een shortcode toegevoegd achter alle layouts in de Divi bibliotheek, waarmee je de betreffende layout kunt toevoegen op plekken waar dit meestal niet kan.

Om te beginnen kun je hiermee elke Divi layout toevoegen aan een widget. En zoals je net hebt gelezen kun je widgets toevoegen aan je mobiele menu… wat wil zeggen dat je elke layout die je wilt kunt toevoegen aan je mobiele menu! Maar dat is niet alles… je kunt de shortcode ook gebruiken om een layout toe te voegen in een andere module, zoals de accordeon module of de tabbladen module!

Verbeter de standaard header en footer

Niet alleen het mobiele menu wordt een heel stuk beter met Divi Toolbox, ook voor de desktop header zijn er enkele verbeteringen ingebouwd. Zo kun je een mooi geanimeerd hover effect instellen, je submenu mooier maken, een ander logo voor de fixed header instellen, de content automatisch onder de fixed header plaatsen en een call to action knop toevoegen aan je navigatiemenu. 

De footer kun je vastzetten aan de onderkant van het scherm, verbergen totdat de gebruiker scrollt en je kunt de “terug naar boven” knop aanpassen.

Pimp je blog

Andere Divi Toolbox features

• Het aantal kolommen op mobiel en tablet aanpassen door een CSS class toe te voegen: In de mobiele weergave maakt Divi standaard alle kolommen full width. Dat is meestal een goed idee, maar soms wil je liever 2, 3 of 4 kolommen op mobiel en/of tablet. Met Divi Toolbox kun je gewoon een CSS class toevoegen aan de rij waar je meerdere kolommen wilt houden en klaar ben je.
• Er is ook een CSS class om de volgorde van de kolommen om te draaien op mobiel in een bepaalde rij. 
• Als je een parallax effect instelt op een achtergrond wordt dat standaard niet gebruikt op mobiel. Door wederom een CSS class toe te voegen maakt Divi Toolbox dat wel mogelijk.
• Er zit een schakelaar in Divi Toolbox waarmee je het Projecten post type kan verbergen. Persoonlijk gebruik ik projecten toch nooit dus dat is een welkome toevoeging. Je kunt er ook voor kiezen om “projecten” te veranderen in een andere term.
• Je kunt eigen lettertypes uploaden in Divi, maar om veiligheidsredenen is het standaard niet mogelijk om TTF en OTF bestanden te uploaden in WordPress. In Divi Toolbox kun je instellen dat je dit wel wilt toestaan.
• Datzelfde geldt voor SVG bestanden.
• Je kunt een gave particles achtergrond instellen die reageert op de muis of vinger van de bezoeker, evenals een mooi 3D tilt effect.
• Divi Toolbox laat je de scrollbar stylen zodat die perfect past bij het design van je website.
• Je kunt ook elke Divi layout als popup instellen, maar die kun je alleen activeren door te klikken; je kunt de popup dus niet automatisch tonen na een aantal seconden, of als de gebruiker scrollt, of als de bezoeker je website wil verlaten.

Divi Toolbox Prijzen

Divi Toolbox heeft 2 soorten licenties: met de regular licentie mag je Divi Toolbox op 1 website gebruiken en met de extended licentie mag je Divi Toolbox op een onbeperkt aantal websites gebruiken. De regular licentie kost € 49,00 inclusief levenslange updates en 6 maanden support, en de extended licence kost € 169,00 met dezelfde voorwaarden.

Je kunt eventueel ook een licentie via de Divi Marketplace kopen voor $ 89 per jaar, inclusief onbeperkte websites en support.

Conclusie

De Divi Theme Builder heeft de meeste functies in dit soort plugin overbodig gemaakt. Ik kan ook een call to action knop toevoegen in de header met de theme builder, en ook de footer onderaan vastzetten is daarmee geen probleem. De custom blog template en single post template kan ik ook helemaal naar wens vormgeven.

Voor de meeste websites zijn de standaard Divi header, footer en blog layouts echter wel prima, zeker als je een beetje kunt tweaken. En dat soort dingen tweaken met een plugin als Divi Toolbox is een stuk sneller dan ze zelf bouwen met de Divi theme builder.

Voor mij persoonlijk was de Divi mobiele menu bouwer genoeg reden om Divi Toolbox aan te schaffen, de rest is een bonus wat mij betreft 🙂 En de user interface is al net zo mooi als de Divi Toolbox demo website (klik op de “view demo” link), die alleen met Divi en de Divi Toolbox plugin is gemaakt – zonder andere plugins of custom CSS dus.