Divi Supreme Progress Bar, une barre de progression design
Dans ce tutoriel, je vous montre comment utiliser le module Progress Bar pour Divi grâce à l’un des modules de Divi Supreme Pro, l’excellent Plugin pour le thème Divi d’Elegant Themes. Ce module intitulé « Progress Bar » vous permettra de créer des barres de progression animées sur votre site WordPress. Le module Progress Bar est une fonctionnalité utile qui permet aux visiteurs de votre site de suivre leur progression sur une page en affichant leur progression en pourcentage. Dans la vidéo, je vous montre comment ajouter le module Progress Bar à une page de votre site WordPress en utilisant l’éditeur visuel de Divi. Je vous montre également comment personnaliser le module en choisissant entre l’affichage de la barre ou de la version circulaire. Et enfin je vous apprends à designer ce module afin qu’il s’adapte parfaitement au style de votre site.

Lorsque Divi Supreme Pro est installé, vous diposez de près de 60 nouveaux modules (fond bleu) pour Divi, permettant de pousser le design de vos pages Divi au maximum !
Placement de la barre de progression sur la page
Ce module pratique permet 2 types d’affichages : un affichage sous forme de barre ou un affichage circulaire, tous deux marquant la progression dans la page au fur et à mesure où on scrolle.
Ces 2 affichages doivent donc rester en position et ne pas bouger tout au long de la lecture.
Pour l’affichage barre l’élément de la page qui reste souvent fixe, c’est l’entête ou header qui accueille le menu. Je vous recommande donc cet emplacement si vous choisissez l’affichage barre du module.


Pour l’affichage circulaire, le footer sera un bon emplacement.
Pour pouvoir placer ces 2 versions du module « Progress bar », utilisez le thème builder pour construire un entête global et un pied de page global dans lesquels, vous pourrez placer au choix une des 2 versions du module dans une nouvelle rangée.
Dans la vidéo, je vous montre comment maximiser la largeur de la rangée (style > Dimensionnement > largeur maximale 100%) qui accueille le module pour qu’elle épouse la pleine largeur de la section. Je vous montre également comment retirer les marges internes. (Style > Espacement > marge interne (sommet et bas 0px)
Maximiser la largeur de la rangée permet de pouvoir ensuite positionner précisément le module (aspect circulaire) en bas à droite du footer. Pour l’aspect barre cela permet que le module occupe toute la largeur de la page ce qui est plus esthétique.
Fixer le module barre de progression
Pour que le module soit toujours apparent sur la page lors de son défilement vers le bas ou le haut, il est essentiel de le fixer.
Il existe une fonction dans Divi qui permet de faire ca très facilement. Cette foction est disponible pour les 3 éléments de Divi que ce soit la section, la rangée ou le module.
Il s’agit de la fonction « position collante » présente dans l’onglet « Avancé » dans la partie « Effets de défilement ».
Pour la version barre du module, il est plus simple de fixer toute la section qui accueille le menu et le module « Progress Bar » puisque l’ensemble peut rester apparent lors du défilement de la page. Rendez-vous donc dans l’onglet « Avancé » > « Effets de défilement » > « Position collante » et choisir « Rester en haut »
Pour la version circulaire, on ne va pas fixer toute la section du footer car on ne veut pas que le footer soit toujours apparent. Ici vous avez 2 choix : soit vous fixez la rangée qui accueille le module ou soit le module Progress bar lui-même. Les 2 fonctionnent.
Dans les 2 cas, rendez-vous donc dans l’onglet « Avancé » de l’élément (rangée ou module) > « Effets de défilement » > « Position collante » et choisir « Coller au fond ».

Configuration du module Progress Bar
Onglet « Contenu » du module
Une fois l’emplacement du module paramétré, il est remps d’insérer le module « Progress Bar » dans sa rangée.
Dans l’onglet contenu, plusieurs options sont proposées:
« Tracker Type » vous permet de choisir entre la barre de progression horizontal ou circulaire.
« Direction » vous permet de choisir en droite et gauche.
Pour une progression de la droite vers la gauche, choisissez « Left ».
Pour une progression de la gauche vers la droite, choisissez « Right ».
« Pourcentage » vous permet d’afficher ou pas le progression en pourcentage de l’avancée dans la page.

Onglet « Style » du module
Dans cet onglet « Style » plusieurs options sont proposées, voici les principales :
« Progress Indicator » vous allez pouvoir à cet endroit modifier l’apparence de l’indicateur de progression comme sa couleur, l’arrondi, la bordure etc.
« Tracker » vous permet de modifier l’aspect de la partie de la barre pas « encore atteinte ». Vous allez pouvoir modifier aussi : sa couleur, la bordure etc.
« Percentage Text » comme son nom l’indique, vous permettra de modifier l’aspect du texte du % : taille, couleur etc.
Vous pouvez donc choisir selon vos goûts les paramètres souhaités.