Découvrez les bons plans & les réductions Alpa14

Ajouter une barre de progression animée à Divi.

Alpa14 les tutoriels faciles !

Catégories

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.

Divi Supreme Pro
Module Divi Supreme Progress Bar

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.

Divi Supreme : Progress bar
Divi Supreme Pro
Divi Supreme : Progress bar dans le footer

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

Fixer le module progress bar

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.

Supreme AI Writer
Progress bar

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.

Hostinger -10%
Progress bar

Vous serez peut-être intéressé par les articles suivants :

Supreme Card Carousel : un carrousel pour Divi efficace

Supreme Card Carousel : un carrousel pour Divi efficace

Dans ce tutoriel, je vous guide étape par étape dans l’utilisation de ce module de Divi Supreme pour créer des carrousels attrayants et dynamiques sur votre site WordPress. Ce tutoriel est fait pour vous si vous souhaitez améliorer l’apparence et l’interaction de vos contenus!

lire plus
Thème Divi : Créer une bannière accordéon

Thème Divi : Créer une bannière accordéon

Dans ce tutoriel Divi, je vous montre comment créer une bannière accordéon très design pour votre site web en utilisant le module « Image Accordion » du plugin Divi Supreme Lite. Divi Supreme Lite est la version gratuite de l’excellent Divi Supreme Pro. Divi Supreme lite compte un 20aine de nouveaux modules pour Divi contre une 60aine pour Divi Supreme Pro.

lire plus
Divi Supreme : Galerie filtrable – Filterable Gallery

Divi Supreme : Galerie filtrable – Filterable Gallery

Filtrer une galerie d’images par catégories ? C’est possible grâce au module Filterable Gallery de Divi Supreme, l’excellent plugin pour le Visual Builder de Divi.
Assignez les photos d’une galerie à certaines catégories et triez-les en 1 clic. Cette galerie photos filtrable c’est sûr, améliorera grandement le confort de navigation des visiteurs sur d’un site web WordPress Divi.

lire plus