Divi Toolbox, le plugin dont vous ne pourrez plus vous passer - Divi Community

Si vous ne connaissez pas encore Divi Toolbox, il est possible qu’à la fin de cet article vous vous demandiez comment vous faisiez avant.

C’est un plugin premium édité par le site DiviLover, pas forcément donné puisque le prix de vente démarre à 49€, proposant de très nombreuses options pour personnaliser Divi de manière très poussée sans entrer une ligne de code et permettant de remplacer de nombreux plugins.

Nous allons passer en revue toutes les options qu’il propose et voir ce que cela peut nous apporter.

Si vous souhaitez acheter le plugin pour suivre ce tutoriel ou vous renseigner :

Et parce qu’on est super sympa chez Divi Community, nous vous avons intégralement francisé Divi Toolbox.

Téléchargez gratuitement notre mini-plugin pour obtenir Divi Toolbox en français :

Une fois le plugin installé et activé, un nouvel onglet d’options apparait dans l’administration de votre site dans Divi -> Divi Toolbox vous apportant une vue d’ensemble sur les différents axes sur lesquels vous allez pouvoir agir:

L’onglet General

Vous trouverez ici des options globales du site à modifier ou ajouter.

Avant d’aller plus loin, sachez que de nombreuses options de personnalisations du plugin sont disponibles directement via le personnaliseur de WordPress.
Ainsi, chaque fois que vous activerez l’une des options ou le lien bleu “ToolBox Customizer” apparaitra en dessous, des nouvelles options seront disponibles également dans le personnaliseur.

Voyons ces options plus en détails :

Divi Toolbox
  • Global Heading Style : cette option vous permet de définir globalement l’apparence de vos titres au lieu de le faire dans chaque module (police, taille, couleur…) ;
  • Customize Login Page : cette option vous permet de modifier l’apparence de la page de connexion de WordPress directement dans le personnaliseur ;
  • Hide Projects : activer cette option permet de masquer les projets intégrés à Divi ainsi que le module dans le Divi Builder ;
  • Allow SVG File Type Uploads : activer cette option vous permet d’uploader des fichiers SVG dans WordPress et de les voir dans la bibliothèque de médias.
    Notez néanmoins que le code des fichiers SVG uploadés n’est pas assaini. Par mesure de précaution, si d’autres personnes sont amenées à uploader des fichiers SVG sur votre site, privilégiez l’utilisation du plugin Safe SVG qui détecte et supprime les éventuelles inclusions de code malicieux dans les fichiers SVG ;
  • Custom Browser Scrollbar : vous permet de modifier l’apparence de la scrollbar du navigateur de Chrome et Safari;
  • No Results – Error 404 Page Layout : vous permet de définir un modèle de page pré-établis avec le Divi Builder pour l’assigner comme étant votre page 404 ;
  • Hide the 404 Header : cette option supprime le menu de votre page 404 ;
  • Hide the 404 Footer : cette option supprime le pied de page de votre page 404 ;
  • Enable Custom Social Icons Style : activer cette option vous permet de définir la couleur des icônes, leur couleur au passage de la souris ainsi qu’un effet associé ;
  • Open Social Link in New Tab : permet d’ouvrir vos profils de réseaux sociaux dans un nouvel onglet plutôt que dans la page en cours ;
  • Add More Social Icons : permet d’ajouter des icones de réseaux sociaux tels qu’Instagram, Youtube, LinkedIn, Dribbble, Pinterest, Vimeo…

Passons à l’onglet suivant…

L’onglet Header

header divi toolbox

Comme son nom l’indique, ces options concernent exclusivement le menu de navigation et y apportent les améliorations suivantes :

  • Primary Nav Hover Effect Type : cette option vous permet d’afficher un effet dynamique des items de votre menu au survol de la souris et d’en personnaliser ensuite l’apparence et la couleur dans le personnaliseur WordPress ;
  • Enable Custom Dropdown Menu : ici vous avez la possibilité de modifier l’apparence de vos sous-menus : couleurs, ombres, polices… ;
  • Add CTA Menu Button : cette option transforme l’un de vos items de menu en bouton d’appel à l’action. Vous pouvez choisir le premier ou le dernier, ou ajoutez manuellement une class CSS à l’item de votre choix ;
  • Change Logo on Fixed Menu : vous permet de définir un logo particulier lorsque le menu est fixe ;
  • Enable Logo Overlapping Effect : cette option vous permet de faire dépasser/chevaucher votre logo de la barre de menu et de définir sa taille, couleur de fond, ombre portée… ;
  • Before Navigation Layout : cette option vous permet d’insérer un modèle de page AVANT votre menu sur tout le site ;
  • Before Navigation – Homepage Layout : cette option fait la même chose mais UNIQUEMENT sur la page d’accueil de votre site ;
  • After Navigation Layout : permet d’insérer un modèle de page sous le menu sur toutes les pages du site.

Après le menu de navigation, passons maintenant à…

Vous y trouverez toutes les options relatives au pied de page de votre site.

Voici les différentes options proposées :

  • Sticky Footer : cette option permet de fixer votre pied de page en bas de l’écran même si votre page comporte peu de contenu ;
  • Footer Reveal Effect : permet de révéler le pied de page au scroll ;
  • Customize Footer Menu & Widgets : permet de modifier l’apparence de tous vos liens de footer comme les couleurs de texte, les ombres, la couleur de fond, les couleurs au passage de la souris, la police… ;
  • Back to Top Button Customization : cette option permet de personnaliser le bouton de retour vers le haut, et remplace par exemple notre tutoriel sur le sujet. Vous pourrez y personnaliser les couleurs, l’icône, la position, la taille et même y inscrire un texte.
    Si vous activez cette option, vous pourrez aussi définir un lien personnalisé qui remplacera le retour vers le haut de page ;
  • Before Footer Layout/After Footer Layout : vous permet de charger un layout depuis la bibliothèque Divi pour l’afficher AVANT ou APRÈS le footer sur toutes les pages de votre site.

L’onglet Mobile

L’un des onglets les plus pratiques des options, il vous permettra de modifier en profondeur l’apparence mobile de votre site et de le dynamiser sans utiliser la moindre ligne de code.

Voyons de suite les options proposées :

  • Mobile Menu Breakpoint : vous pouvez définir ici un point de rupture personnalisé entre votre menu classique et votre menu mobile. Cette option remplace notre tutoriel sur le sujet ;
  • Enable Custom Mobile Menu Style : en activant cette option, vous pourrez modifier l’apparence de votre menu mobile : couleur, police, taille des libellés… ;
  • Change Logo on Mobile : vous souhaitez afficher un logo différent entre votre site sur ordinateur et sur mobile ? Cette option le permet ;
  • Hamburger Icon Click Effect : vous avez le choix ici entre 4 animations pour dynamiser l’icône votre menu hamburger lors du clic de vos visiteurs ;
  • Collapse Nested Sub Menu : en l’activant, vos sous-menus seront automatiquement fermés sur mobile et la page parente restera cliquable. Cette option remplace notre tutoriel sur les menus mobiles ;

Les 4 options suivantes concernent des classes CSS prêtes à l’emploi à copier-coller dans les différents modules/sections/lignes concernés :

  • reverse-columns-mobile: en utilisant cette classe dans votre ligne, vous pourrait inverser l’ordre des colonnes sur mobile. Cette option remplace également l’un de nos tutoriels ;
  • txt-center-mobile: en assignant cette classe à un module Texte, votre paragraphe sera automatiquement centré sur téléphone même s’il ne l’était pas sur ordinateur ;
  • module-center-mobile: vous permet de centrer n’importe quel module sur téléphone ;
  • btn-center-module: vous permet de centrer vos boutons automatiquement sur téléphone.

Passons maintenant aux personnalisations proposées pour les modules de Divi.

L’onglet Modules

Cet onglet vous offre la possibilité de jouer sur quelques paramètres de différents modules natifs de Divi.

  • Follow-The-mouse Hover Effect : en activant cette option, l’effet d’overlay sur les galeries d’images ou les portfolios suivra le trajet de la souris sur l’écran.
  • Slim Inline E-mail Optin : cette option vous propose 3 classes CSS à utiliser suivant le nombre de champs que vous utilisez pour rendre afficher sur une seule ligne votre module d’optin ;
  • Secondary Buttons : activez cette option si vous voulez définir un deuxième style global de bouton à utiliser sur votre site en plus du style du bouton standard. Vous pourrez créer une classe CSS à assigner à ceux-ci pour leur appliquer le style voulu ;
  • Accordion & Toggle : permet d’animer la flèche d’ouverture ou fermeture ;
  • Pricing Table : supprimez la bordure et la marge inférieure sous le prix ;
  • Testimonials : déplacez la photo de la personne sous le contenu à coté de son nom ;
  • Hide horizontal scrollbars : une option qui peut être intéressante. Lorsque votre contenu dépasse de l’écran, il apparait parfois une barre de scroll horizontal. En activant cette option elle sera désactivée.

Deux classes CSS vous sont ensuite proposées :

  • vertical-align: assignez cette classe à vos colonnes pour centrer le contenu verticalement. Cette option remplace notre tutoriel sur le sujet.
  • full-height: assignez cette classe CSS à n’importe quel élément de votre page et il prendra automatiquement 100% de la hauteur.

L’onglet Extras

Cet onglet apporte quelques petites fonctionnalités intéressantes qui remplaceront à nouveaux quelques plugins:

  • Enable Preloaders : ajoute une animation de préchargement à vos pages ou juste la page d’accueil. Vous pouvez choisir parmi les 12 proposées et personnaliser sa couleur, sa transition et sa vitesse ;
  • Enable Custom Popups : permet de créer jusqu’à 5 popups via le Divi Builder et de les utiliser en ajoutant la classe CSS correspondant à n’importe quel bouton ou lien de vos pages ;
  • Enable Particle Background : permet d’ajouter un fond de particules animées de la même manière que notre tutoriel ;
  • Enable 3D Tilt Effect : ajoute un effet de mouvement au passage de la souris à n’importe quel module/section/ligne en ajoutant une classe CSS ;
  • Enable Parallax Scrolling For Modules : ajoute un effet parallaxe à n’importe quel module via l’une des classes CSS fournies. Vous pouvez également choisir la vitesse d’animation.

Passons maintenant au dernier onglet, et pas des moindres puisque Divi ne propose nativement que très peu d’options de modification le concernant…

L’onglet Blog

Les options proposées ici vont probablement vous faire gagner un temps incroyable pour un rendu original sans avoir à rentrer dans le code.

Allez c’est parti.

  • Customize Sidebar & Widgets : en activant cette option, vous pourrez modifier l’apparence de la barre latérale vers le personnaliseur WordPress : couleurs, police, taille des textes, ombres… ;
  • Custom Post Meta : comme précédemment, vous pourrez ici modifier l’apparence des métas de vos articles (auteur, date, commentaires…) ;
  • Customize Archives & Categories : vous donnera la possibilité de personnaliser l’affichage de la page d’archives et des categories de votre blog : police, couleur, tailles, ajout d’un bouton “lire plus”, bordure, marge… ;
  • Blog Archives Layout : choisissez parmi 6 modèles prédéfinis pour afficher vos articles sur les pages d’archives, de catégories, d’auteur, d’étiquettes, et surtout des résultats de recherches ;
  • Hide Archives Sidebar : permet de cacher la barre latérale sur les pages d’archives ;
  • Read More Blog Button Text : vous pouvez ici modifier le texte “Read More” des articles pour le remplacer par ce que vous voulez ;
  • Change Single Post Layout : définissez ici un modèle global pour l’ensemble des pages de blog de votre site : barre latérale gauche, droite ou modèle plein écran ;
  • Hide Post Title : supprime le titre de l’article sur les pages de blog. Pas forcément utile en revanche ;
  • Add Author Box : ajoute une description de l’auteur de l’article avec une petite biographie comme sur la plupart des thèmes WordPress classiques ;
  • Add Prev/Next Posts Links : ajoute des boutons de navigation “Précédent” et “Suivant” à vos articles ;
  • Add Related Posts : ajoute une section d’articles similaires sous vos articles. Vous pouvez également définir le titre de cette section ;
  • Customize Comments Form : permet de modifier l’affichage des commentaires via le personnaliseur. Vous pouvez également modifier la phrase “Laissez un commentaire” pour la remplacer par celle de votre choix ;
  • Single Post Header Layout – After Navigation : vous permet d’ajouter un layout que vous pouvez concevoir via le Divi Builder sous le menu sur tous les articles ;
  • Archives Header Layout – After Navigation : idem mais le layout sera affiché sous le menu de vos pages d’archives ;
  • Categories Header Layout – After Navigation : idem mais le layout sera affiché sous le menu de vos pages de catégories ;
  • Author Pages Header Layout – After Navigation : idem mais le layout sera affiché sous le menu de vos pages d’auteur.

Conclusion

On en a terminé avec la liste de toutes les options proposées, et comme vous avez pu le voir, elles sont très nombreuses.

Divi Toolbox est le plugin le plus complet et abouti que j’ai pu tester jusqu’à présent concernant la personnalisation globale de Divi.

Il surclasse largement Divi Switch et Divi Booster, même si ces derniers proposent quelques options non comprises dans Toolbox.

Même s’il reste un plugin assez cher de l’écosystème Divi, l’investissement vous fera à coup sur gagner de nombreuses heures de développement et vous permettra d’améliorer vos sites de manière très poussée sans avoir besoin d’ajouter de quelconques morceaux de code à la main.

Si jamais le plugin vous intéresse :

Et n’oubliez pas la traduction française :

Alors, convaincu par Divi Toolbox ?

Dites-nous tout en commentaires !