Si vous êtes comme moi, vous vous êtes sans doute déjà pris la tête avec certaines fonctionnalités de Divi :

• Comment changer la couleur des liens du menu au passage de la souris ?
• Comment ajouter une adresse ou un texte dans la barre supérieur de menu (bon il y a aussi un autre moyen que je vous donne dans cet article) ?
• Comment changer la taille des images du module Galerie ?
• Comment modifier le design d’une seule de mes pages?
• …

Et bien à force de chercher à résoudre tous ces différents problèmes, j’ai voulu tester le plugin Divi Booster. C’est un plugin premium qui coute 19$ (environ 17€) pour une licence à vie mais qui a le mérite de proposer plus d’une centaine d’options différentes permettant de personnaliser votre site très simplement et rapidement. Si vous souhaitez télécharger Divi Booster pour suivre ce tuto, c’est par la: Pour commencer, vous trouverez les options du plugin dans le menu Divi de l’administration, puis cliquez sur Divi Booster . Je vous mets un petit menu de navigation si vous voulez vous rendre directement dans une section particulière :

• Site-wide Settings
• Header
• Posts
• Pages
• Sidebar
• Footer
• Divi Builder
• Modules
• Plugins
• CSS Manager
• Developer Tools
• Deprecated

Nous voila maintenant sur la page d’accueil de Divi Booster: Passons maintenant chacun de ces éléments en revue.

Site-wide settings

  Ce sont les options concernant le site dans sa globalité et non un module en particulier comme nous le verrons par la suite. Quatre sous-menus différents s’offrent à vous :

Icons – Les icônes de réseaux sociaux et personnalisés

  Vous avez la possibilité ici de personnaliser les icônes de votre site. Les différentes options proposées:

• Add custom icons for use in modules  : vous pouvez rajouter n’importe quel icone à la liste des icones d’origine de Divi. Vous les trouvez par exemple dans les modules Résumé (blurbs)
• Add more social icons : ajoutez l’un de ces réseaux sociaux à ceux présents dans le header et le footer.
• Open social media icon in a new tab: cette option permet de forcer l’ouverture dans un nouvel onglet lorsque le visiteur clique sur l’un de vos réseaux sociaux.

Layout – La mise en page globale du site

  Vous avez la possibilité de modifier certains aspects du design du site dans cet onglet. Les options proposées:

• Add image before header: ajoutez l’image de votre choix AVANT le menu
• Add sticky widget area to left of screen: cette option permet d’ajouter un widget fixe à gauche de l’écran. Il sera donc visible en permanence.
• Make main content overlap header in box layout: le contenu principal de votre site passe AU DESSUS du menu du site. Vous trouverez un exemple ici.
• Remove box layout shadow: supprimez les effets d’ombres portées.
• Set mobile content width: définissez en pixel la taille de votre contenu sur mobile.

 

Links – corrigez les bugs de scrolls entre les ancres

  Cochez cette option si vous remarquez des bugs lorsque vous utilisez la navigation avec des ancres ( sur un site One-page par exemple)

Site speed – Activer la compression du code 

  Cochez cette case pour accélérer un peu le temps de chargement de votre site si vous avez l’alerte suivante sur Google Speed Insight :

Header

  Vous aurez ici la possibilité de modifier le menu standard de Divi, la barre de menu supérieur ainsi que le menu mobile : Voyons tout de suite les options de la barre de menu supérieur.

Top header – modifiez la barre de menu supérieur

  Les options disponibles:

• Put all icons on the right : déplace tout le contenu du menu supérieur vers la droite
• Show secondary nav bar social icons on mobiles: affichez les icônes de réseaux sociaux aussi sur le menu mobile
• Link hover color: la couleur des items du menu au passage de la souris. Ici c’est celle du site.
• Put contact info on left, and social icons on the right: mettez les infos de contact à gauche et les icônes des réseaux sociaux à droite
• Add text to top header (on left-hand side): ajoutez du texte AVANT les infos de contact
• Make phone number a “click to call” link: rendre le numéro de téléphone cliquable

Main header – modifiez le menu principal de Divi

  Pas mal de choix ici:

• Add new widget area below the navigation links: ajoutez un widget sous les liens du menu
• Vertically center the header links: parfois lorsque vous modifiez la taille du logo, les items du menu ne sont plus centrés verticalement. Cette option regle ce problème.
• Fix header menu width/magnifying glass issue: cette option est très utile si vous avez beaucoup d’items dans votre menu. En effet lorsque la résolution diminue, les liens du menus passent sous le logo et l’icône de recherche est déplacé sous le menu. Ce bug est réglé grâce à cette option
• Don’t shrink the header until user scrolls down by: lorsque vous scrollez sur votre site, le menu devient instantanément plus compact. Et bien vous pouvez choisir de ne compacter le menu qu’une fois que l’utilisateur aura parcouru par exemple 500px.
• Use mobile header menu button on desktops too: utilisez le menu mobile (l’icone hamburger) sur tous les supports
• Hide header bottom border: cachez la bordure inférieure du menu
• Don’t shrink header on scroll: empêchez le menu de se compacter lorsque vous scrollez vers le bas de page
• Hide header completely: n’affichez pas du tout le header sur votre site
• Header minimum height: définissez la hauteur minimum du menu standard et secondaire ( compact lorsque vous scrollez)
• Submenu item hover background color: définissez la couleur de fond des sous menu au survol de la souris
• Menu link hover color: définissez la couleur des liens du menu au survol de la souris
• Fix sub-menu link color on single page navigation: modifie la couleur des liens du menu lorsque vous utilisez un site One Page pour quelles soient plus pertinentes pour vos visiteurs
• Space between menu items: vous pouvez modifier ici l’espace en pixel entre les liens du menu
• Change logo link URL to: modifiez le lien du logo dans le menu. C’est de base l’URL de votre site, mais vous pouvez le modifier pour y mettre le lien que vous voulez
• Search icon hover color: modifiez la couleur de l’icône de recherche au survol de la souris
• Change centered menu “Select Page” text : remplacez le texte “sélectionnez une page” du menu centré par le texte que vous voulez
• Show site title and tagline in header: cette option vous permet d’afficher le titre de votre site ainsi son slogan à droite du logo dans la barre de menu

 

Mobile header – les options du menu mobile

 

• Use an “app-style” header layout on mobiles: améliore le design mobile du logo et de l’icone hamburger. Vous pouvez voir un exemple ici.
• Hide the search icon on mobiles: cacher l’icone de recherche sur mobile
• Add text before menu button (mobiles): vous pouvez afficher le mot “Menu” par exemple
• Mobile menu font size: définissez la taille de la police pour le menu mobile
• Hide secondary menu items in mobile menu: cachez le menu secondaire sur mobile (celui avec les infos de contact: mail, téléphone…)

Voila pour toutes les options concernant le menu mobile. Voici maintenant les…

Posts – les options concernant vos articles

 

• Make featured images as wide as the content area: rendre l’image à la Une de la même largeur que le containeur de l’article
• Fix comment button responsiveness: améliore le coté responsive du bouton de commentaire sur téléphone
• Prevent featured post height cropping: augmente la hauteur maximum de la hauteur de l’image à la Une de 675 à 1000px pour empécher qu’elle ne soit tronquée (utile seulement si vous utilisez d’immenses images à la Une donc)
• Don’t stretch featured images: si vous voulez que vos images à la Une soient affichées à leur taille réelle, cochez cette case.

Pages

 

• Add Page Layout option on Divi Builder pages: ajoutez la possibilité de choisir le type de page à créer (fullwidth, avec sidebar…)  au Divi Builder

Sidebar – les options de la barre latérale

 

• Sidebar background color: choisissez la couleur de fond de votre barre latérale
• Hide dividing line: supprimez la barre séparant la barre latérale du contenu principal

 

Footer – les options pour le pied de page de votre site

 

• Center the footer links: cette option permet de centrer les liens de crédit en bas du footer
• Replace footer links with this text/HTML: idem que l’option native de Divi pour éditer les crédits du pied de page, vous avez en plus la possibilité d’utiliser des shortcodes pour les dates et le copyright

Divi Builder – les options des builders de Divi

 

Standard Builder

  Ces options concerne le Divi Builder que vous pouvez trouver dans l’administration sur vos pages ou articles:

• Make Divi Builder settings pop-ups full screen: une option très pratique qui rends le Divi Builder plein écran
• Enable Divi Builder on Custom Post Types: cette option vous permet d’utiliser le Divi Builder avec tous vos Custom Post Types, mais également d’utiliser votre bibliothèque de modules et layouts.
• Set minimum CTA button width: définissez une largeur minimum pour vos boutons d’appel à l’action ( CTA = Call To Action en anglais)

Visual Builder

 

• Show hover border on modules: cette option affiche une bordure au passage de la souris sur le module que vous êtes en train de modifier afin de bien délimiter ses dimensions
• Hide Visual Builder: masquer le Visual Builder
• Move publish buttons to left: déplacer le boutons de publication/sauvegarde à gauche au lieu de droite

  On va maintenant s’attaquer à un gros morceau…

Les modules – toutes les options disponibles pour chaque module de Divi

  On commence tout de suite avec…

L’accordéon

 

• Make accordions start fully closed by default: cette option ferme par défaut tous vos modules accordéons. Il faudra donc cliquer dessus pour afficher le contenu
• Make accordions closable: cette option permet de fermer tous les modules accordéons

Blurbs (module résumé)

 

• Make left-placed blurb icons bigger: cette option agrandit la taille des icônes du module Résumé lorsque vous choisissez de les placer sur la gauche du contenu

Countdown – le compte à rebours

 

• Hide leading zero on days: Si votre décompte est inférieur à 100 jours, alors un 0 sera affiché devant ceux-ci, ce qui n’est pas très beau. Cette option permet de le supprimer.

Gallery – la galerie photo de Divi

 

• Grid layout default image sizes: vous pouvez choisir le nombre d’images par ligne et définir leur hauteur et leur largeur
• Grid layout border color: ajoutez une bordure de la couleur que vous voulez aux images lorsque le format “grille” est défini
• Center the images in grid view thumbnails: centrez les miniatures d’image en mode “grille”
• Disable gallery image “slide in” effect: supprimez l’effet de slide des images à l’affichage de la galerie
• Hide gallery image titles (but not the captions): masquez le titre des images de la galerie, mais pas la légende

Header (full width) – l’entête plein écran

 

• Make scroll down icon bounce: animez la flèche de défilement vers le bas pour la rendre plus attractive et visible pour le visiteur. Vous pouvez trouver un tuto ici pour réaliser cet effet sans plugin.
• Fix fullscreen mode display issues in IE: corrigez le bug d’affichage de ce module sur Internet Explorer (et vraiment, arrêtez d’utiliser ce navigateur 😉 )

Map – la carte Google map

 

• Change map pin icon (46 x 43px): définissez un icone personnalisé à utiliser sur la carte pour vous localiser

Portfolio – le portefeuille

 

• Grid layout default image sizes: définissez le nombre d’images par ligne, leur hauteur et leur largeur
• Make grid images fill the container: rendre les images au format grille de la taille de leur contenant (100% du coup)

Portfolio (Filterable) – le portefeuille filtrable

  Idem que précédemment.

Portfolio (Full Width) – le portefeuille plein écran

 

• Add space between project images (grid view): ajoutez un espace entre les images du portefeuille plein écran lorsque vous utilisez le mode “grille”
• Stop project images from being stretched / cropped: utilisez cette option si vous souhaitez que vos images soient affichées dans leur format original et non tronquées ou étirées

Post Navigation – les liens de navigation des articles

 

• Swap the next and previous links: cette option vous permet d’inverser les liens de navigation “précédent” et “suivant”

Post Slider – curseur de défilement des posts

 

• Make slide image link to post (NB: read more button must be enabled): cette option rend l’image cliquable et liée à l’article. Vous devez pour cela activer le bouton “lire plus”
• Make post slider controls square: utilisez des petits carrés de navigation à la place des ronds pour faire défiler les articles.

• Make post slider controls hollow: rendez les boutons de contrôle du slider translucide

Pricing Table – la table de prix

 

• Fix pricing table excluded feature space issue: lorsque vous excluez une option de votre table de prix avec le signe “-“, si vous utilisez un espace après, alors la table de prix affichera “- votre option” au lieu d’afficher simplement votre option en grisée. Cochez cette case permet de résoudre ce bug.
• Use improved pricing table style: cochez cette case pour améliorer la personnalisation des tables de prix de Divi
• Use rounded pricing table corners: arrondissez les coins de vos tables de prix
• Use + and x feature bullet graphics: utilisez des “+” et “x” pour vos différentes options dans les tables de prix
• Strike-through unavailable features: cochez cette option pour que les options non disponibles soient barrées

Signup – le module de connexion

 

•  Use horizontal subscribe module style: utilisez un style horizontal pour le formule d’inscription

Slider – le module diapo

 

• Set default slider height: définissez une hauteur par défaut pour le slider
• Add background to slider text: ajoutez une couleur de fond au texte du diapo
• Put slider images on the right: déplacer l’image du slider sur la droite
• Open slider links in new tab: ouvrez les liens du diapo dans un nouvel onglet
• Disable slider image “slide in” effect: supprimez l’effet d’animation de slide des images
• Make slider controls square: rendez les boutons de contrôles carrés
• Make slider controls hollow: rendez les boutons de contrôle du slider translucide
• Make slide image link to URL (NB: requires slide to have a button): cette option est maintenant disponible sans utiliser de bouton.

Text – le module Texte

 

• Increase spacing around bullet lists: augmentez l’espace entre les éléments des listes à puces pour un design plus ergonomique

Plugins

  Les options présentes ici permettent de corriger quelques bugs de plugins ou d’ajouter certaines possibilités.

WooCommerce

  Deux options sont disponibles avec WooCommerce:

• Remove WooCommerce cart icon from header: Lorsque vous activez WooCommerce sur Divi, un icone de panier apparait dans la barre supérieur. Si vous n’en voulez pas, cochez cette option.
• Make WooCommerce store display 4 items per row: Divi affiche 3 articles par lignes lorsqu’il génère la page boutique automatiquement. Si vous en voulez 4, activez cette option.

Other – les options disponibles pour d’autres plugins

  Deux options sont également disponibles pour les plugins Simple LightBox et PageLoader by Bonfire :

• Fix Simple LightBox overlap with Divi top header: corrigez le conflit de superposition entre Simple LightBox et le menu de Divi
• Fix PageLoader by Bonfire page layout issues on Chrome: corrigez les bugs d’affichage sous Chrome entre PageLoader by Bonfire et Divi

CSS Manager

  Le manager CSS de Divi Booster est très interessant. Vous pouvez d’une part y écrire votre CSS standard dans le premier encart: Custom CSS as defined in Divi Custom CSS, mais surtout y créer des règles CSS. Le deuxième encart est très utilee. Vous allez par exemple pouvoir définir sur quelles pages s’appliquent le CSS, pour quels utilisateurs, quel navigateur web, quelle résolution… Extrêmement pratique pour un responsive au top et afficher ce que vous voulez la ou vous voulez. Vous pouvez ajouter autant de conditions et de code CSS que vous voulez en cliquant sur Add another custom CSS box.

Developer Tools – les outils pour développeurs

  Les outils de développeurs vous permettent d’exporter ou importer votre configuration Divi Booster, d’utiliser du CSS ou JS inline (donc directement dans le fichier HTML et non dans un fichier séparé) ou encore de désactiver la minification CSS ou JS. Je vous conseille de ne rien cocher ici si vous ne rencontrer aucun problème.

Deprecated – les options qui ne sont plus d’actualité

  Vous trouverez ici toutes les anciennes options de Divi Booster qui ont été intégrées à Divi au fil des mises à jour. Vous n’avez donc besoin d’aucune d’elle. Voila, ce (très) long descriptif de Divi Booster et de ces options est terminé. C’est un plugin que j’utilise sur tous mes sites car il permet de gagner beaucoup de temps et de modifier pas mal d’options en un rien de temps. Il vous en coutera 19$ pour une license illimité. A mon sens un bon investissement ! N’hésitez pas à me laisser vos avis ou questions sur Divi Booster dans les commentaires 😉 Pour télécharger Divi Booster, c’est ici: