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 :

Nous voila maintenant sur la page d’accueil de Divi Booster:

Menu 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 :

site wide settings divi booster

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

 

Vous avez la possibilité ici de personnaliser les icônes de votre site.

icons divi booster

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.

layout divi booster

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)

links divi booster

Site speed – Activer la compression du code 

 

site speed divi booster

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 :

enable compression

 

Vous aurez ici la possibilité de modifier le menu standard de Divi, la barre de menu supérieur ainsi que le menu mobile :

header divi booster

Voyons tout de suite les options de la barre de menu supérieur.

Top header – modifiez la barre de menu supérieur

 

top header divi booster

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

 

main header divi booster

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

 

mobile menu divi booster

  • 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

 

posts divi builder

  • 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

 

pages divi builder

  • 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 divi builder

  • 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 divi booster

  • 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

 

divi builder divi booster

Standard Builder

 

standard builder divi booster

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

 

visual builder divi booster

  • 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

 

module divi booster

On commence tout de suite avec…

L’accordéon

 

module accordeon divi booster

  • 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é)

 

module blurb divi booster

  • 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

 

countdown divi booster

  • 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

 

galerie divi booster

  • 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

 

header full width divi booster

  • 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

 

map divi booster

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

Portfolio – le portefeuille

 

portfolio divi booster

  • 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

 

portfolio filtrable divi booster

Idem que précédemment.

Portfolio (Full Width) – le portefeuille plein écran

 

portfolio full width divi booster

  • 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

 

post navigations divi booster

  • 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

 

post slider divi booster

  • 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

 

pricing table divi booster

  • 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

 

signup divi booster

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

Slider – le module diapo

 

slider divi booster

  • 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

 

text module divi booster

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

plugins divi booster

WooCommerce

 

Deux options sont disponibles avec WooCommerce:

WooCommerce divi booster

  • 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

 

autres plugins divi booster

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

 

css manager divi booster

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

 

outils developpeur divi booster

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é

 

deprecated divi booster

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:

 

D'autres tutoriels pouvant vous intéresser: