Le contenu long est fantastique pour le SEO et pour apporter de la valeur à vos lecteurs, mais il y a un petit problème : les gens aiment savoir à quoi s'attendre.
Lorsqu'une personne arrive sur un tutoriel de 3 000 mots, elle veut comprendre son engagement dès le départ. Les barres de progression résolvent ce problème magnifiquement en montrant aux lecteurs exactement où ils en sont dans votre contenu.
Nous les utilisons sur notre site d'adhésion vidéo WPBeginner pour montrer la progression des utilisateurs dans les cours. Ainsi, les étudiants peuvent facilement suivre leurs progrès d'apprentissage et rester motivés pour terminer leur formation.
Le meilleur dans tout ça ? Vous n'avez besoin d'aucune compétence en codage ni de plugins coûteux pour ajouter des barres de progression à votre site WordPress. Dans ce guide, nous vous montrerons exactement comment les créer, étape par étape.
Quand ajouter une barre de progression aux articles WordPress
Il existe plusieurs scénarios où l'ajout d'une barre de progression peut améliorer vos articles de blog WordPress et les rendre plus percutants.
Par exemple, les barres de progression sont excellentes pour afficher l'état d'avancement d'un projet.
Si vous tenez un blog qui documente des projets à long terme, l'ajout de barres de progression peut donner aux lecteurs une mise à jour visuelle rapide de votre avancement.
Nous avons également utilisé des barres de progression sur notre site d'adhésion vidéo.
Ceci afin d'aider nos utilisateurs à voir où ils en sont dans le cours.
Les campagnes de collecte de fonds sur votre site WordPress peuvent également bénéficier grandement des barres de progression. Elles fournissent une représentation visuelle immédiate de la proximité de l'atteinte de votre objectif, ce qui peut encourager davantage de dons.
Pour le contenu éducatif, les barres de progression peuvent illustrer les étapes d'apprentissage ou la complexité de différents sujets. Cela peut aider les lecteurs à voir le niveau de difficulté des différents sujets que vous abordez dans vos articles de blog.
Si votre site Web se concentre sur des sujets de remise en forme ou de santé, les barres de progression peuvent être utilisées pour montrer les niveaux d'intensité des entraînements, les compétences, les informations nutritionnelles ou les progrès vers les objectifs de santé.
En dehors de cela, l'ajout d'une barre de progression aux articles sur les statistiques ou les résultats d'enquêtes peut rendre les données plus digestes et attrayantes. Au lieu de simplement lister des pourcentages, vous pouvez représenter visuellement les données avec des barres de progression colorées.
Dans cette optique, nous avons trouvé 2 méthodes simples pour ajouter une barre de progression à votre site Web WordPress. Vous pouvez utiliser les liens rapides ci-dessous pour passer à votre méthode préférée :
- Méthode 1 : Ajouter une barre de progression avec un constructeur de pages (plus personnalisable)
- Méthode 2 : Utiliser un plugin gratuit de barre de progression (rapide et facile)
- Frequently Asked Questions: Adding Progress Bars in WordPress
Remarque : Vous recherchez plutôt un tutoriel sur la barre de progression de lecture ? Si c'est le cas, notre article sur comment ajouter une barre de progression de lecture dans les articles WordPress vaut la peine d'être lu.
Méthode 1 : Ajouter une barre de progression avec un constructeur de pages (plus personnalisable)
Une façon efficace d'ajouter une barre de progression à votre site WordPress est d'utiliser un constructeur de pages avec une fonctionnalité de barre de progression intégrée. Cette approche garantit que votre barre de progression s'intègre parfaitement à la conception globale de votre thème.
Pour cette méthode, nous utiliserons Thrive Architect, un puissant constructeur de pages qui offre de nombreux modèles de thèmes différents et une interface conviviale par glisser-déposer. C'est un excellent choix pour les débutants comme pour les utilisateurs expérimentés qui souhaitent un moyen simple de personnaliser la conception de leur site Web WordPress.
Cependant, gardez à l'esprit que cette méthode implique de changer de thème. Si vous êtes satisfait de votre thème actuel et que vous ne souhaitez pas le remplacer, vous préférerez peut-être notre deuxième méthode.
De plus, Thrive Architect n'a pas de version gratuite. Cela dit, vous pouvez utiliser notre code promo Thrive Themes pour obtenir jusqu'à 50 % de réduction sur votre premier achat.
Vous pouvez en apprendre davantage sur la plateforme dans notre avis sur Thrive Architect.
Étape 1 : Installer le Thrive Theme Builder
Pour commencer, vous devrez configurer Thrive Architect. Commencez par vous connecter à votre compte Thrive Themes et télécharger le plugin Thrive Product Manager.
Après cela, téléchargez et installez le plugin Thrive Product Manager. Vous pouvez consulter notre guide pour débutants sur comment installer un plugin WordPress pour des instructions étape par étape.
À ce stade, cliquez sur Product Manager dans votre zone d'administration WordPress.
Une fois que vous avez fait cela, vous pouvez cliquer sur le bouton « Se connecter à mon compte » pour connecter votre site WordPress à votre compte Thrive Themes.
Vous devriez maintenant voir une liste de tous les produits Thrive Themes disponibles dans votre compte.
Sélectionnez simplement « Thrive Architect » et cochez la case « Installer le produit ».
Après cela, faisons défiler jusqu'à la section « Thrive Theme Builder » et cochons la case « Installer le thème ». Nous devons le faire car Thrive Architect fonctionne mieux avec un thème Thrive.
Ensuite, cliquez sur le bouton « Installer les produits sélectionnés ».
Vous devriez maintenant voir que le gestionnaire de produits Thrive configure les plugins Thrive Architect et Thrive Theme Builder.
Une fois cela terminé, cliquez simplement sur « Accéder au tableau de bord du Theme Builder ».
À ce stade, vous pouvez simplement choisir un thème WordPress.
Vous pouvez également cliquer sur le bouton « Aperçu » pour voir à quoi ressemble le thème avant de cliquer sur « Choisir ».
Une fois votre thème configuré, vous devriez maintenant arriver à l'assistant du Theme Builder.
Cet assistant d'intégration vous aidera à télécharger votre propre logo, à choisir les couleurs de marque à ajouter à votre thème, et à configurer les différentes structures et modèles de votre thème.
Terminez simplement l'intégration pour pouvoir passer à l'étape suivante.
Étape 2 : Ajouter une barre de progression à vos articles WordPress
Ajoutons maintenant une barre de progression à vos articles WordPress. Pour commencer, ouvrez l'éditeur de blocs pour un nouvel article ou un article existant.
Ensuite, tapez le titre de votre nouvel article. Après cela, cliquez sur le bouton « Lancer Thrive Architect ».
Maintenant, vous pouvez utiliser Thrive Architect pour créer le contenu de votre article de blog. Il fonctionne de manière similaire à l'éditeur de blocs.
C'est-à-dire que vous pouvez simplement cliquer sur le bouton « + » et faire glisser n'importe quel élément que vous souhaitez dans la section qui dit « Cliquez ici pour ajouter du texte ou faites glisser un élément depuis le panneau de droite ».
Voici un exemple de nous ajoutant un bloc de texte à l'aide de l'éditeur :
Le processus d'ajout d'une barre de progression est à peu près le même. Cliquez simplement à nouveau sur le bouton « + » et trouvez le bloc « Barre de progression ».
Ensuite, ajoutez-le simplement à votre publication.
Ensuite, une fenêtre contextuelle apparaîtra, vous demandant de choisir un design de barre de progression.
Il y en a des dizaines parmi lesquelles choisir, et vous pouvez toujours la changer plus tard si nécessaire.
Une fois que vous avez fait votre choix, vous retournerez à l'interface principale de l'éditeur.
Étape 3 : Personnaliser la barre de progression
À ce stade, vous devriez voir une barre latérale dans le panneau de gauche avec des options de personnalisation pour la barre de progression.
Il y a de nombreux paramètres à configurer, et nous allons couvrir les principaux pour montrer comment modifier la barre de progression.
Dans le menu Options principales, vous pouvez changer la conception de la barre de progression d'une conception simple à une conception avec des nœuds. Les nœuds sont des icônes qui montrent où vous en êtes dans la progression. Nous avons choisi ce type de conception pour l'exemple.
Vous pouvez également modifier l'emplacement des étiquettes de la barre de progression, la hauteur de la barre et le niveau actuel de la barre de progression.
En descendant dans le panneau, vous trouverez des options pour changer les étiquettes des nœuds.
Pour les modifier, cliquez sur l'icône de crayon « Modifier » à côté de l'étiquette.
Maintenant, tapez simplement votre nouvelle étiquette.
Une fois terminé, cliquez sur l'icône « Enregistrer ».
Ce qui est formidable avec Thrive, c'est qu'il vous permet de personnaliser toutes les autres parties de la barre de progression afin que vous puissiez la concevoir comme vous le souhaitez.
Pour voir ces options de personnalisation en action, vous pouvez survoler l'un des éléments de la barre de progression et cliquer dessus.
Ici, nous avons sélectionné la partie de la barre de progression qui montre la progression incomplète.
Maintenant, un nouvel ensemble d'options est apparu dans la barre latérale gauche.
Si vous cliquez sur le menu déroulant « Style actuel » en haut, vous pouvez modifier des parties spécifiques de la barre, telles que les étiquettes de progression, les icônes, les nœuds, et plus encore.
Assurez-vous d'explorer chaque partie pour voir ce que vous pouvez personnaliser.
Essayons quelques exemples. Pour désactiver l'animation de rayures de bonbon dans la barre d'arrière-plan, sélectionnez « Arrière-plan des lignes groupées » dans le menu Style actuel.
Ensuite, désactivez le bouton « Animation de rayures de bonbon ».
Si vous souhaitez modifier les icônes à l'intérieur des nœuds de progression, passez à « Icônes de progression » dans le menu déroulant Style actuel.
Après cela, dans le menu « État » en haut, sélectionnez « Normal ».
Vous devriez maintenant voir certains paramètres conçus pour modifier les icônes de la barre de progression.
Ici, cliquez sur « Changer l'icône ».
Thrive Architect possède de nombreuses icônes dans sa bibliothèque pour diverses industries. Cela dit, assurez-vous que l'icône que vous choisissez convient à une barre de progression.
Une fois que vous avez fait votre choix, cliquez simplement sur « Sélectionner ».
Pour changer le style de l'icône, cliquez simplement sur le bouton « Changer le style ».
À partir d'ici, vous verrez des conceptions d'icônes prédéfinies parmi lesquelles vous pourrez choisir.
Pour changer l'apparence de l'étiquette de progression, passez à l'option « Étiquette de progression » dans le menu déroulant « Style actuel ».
Ici, vous verrez des options pour personnaliser la couleur de l'étiquette, surligner, formater, etc.
Une fois que vous êtes satisfait de l'apparence de la barre de progression, cliquez sur « Enregistrer le travail » pour sauvegarder vos modifications.
Assurez-vous de prévisualiser votre article de blog sur mobile, sur ordinateur et sur tablette afin que tout soit parfait.
Voici à quoi ressemble le nôtre sur notre site de démonstration :
Alternative : Ajouter une barre de progression circulaire
Thrive Architect propose également un autre type de barre de progression dans sa collection de blocs, appelé compteur de remplissage. Le bloc Compteur de remplissage ressemble à une barre de progression circulaire, ce qui est idéal pour afficher des statistiques.
Pour l'ajouter, cliquez simplement sur le bouton « + » dans la barre latérale droite et recherchez l'élément « Compteur de remplissage ». Ensuite, faites-le glisser et déposez-le n'importe où sur l'article.
Une fois que vous l'avez ajouté, vous verrez quelques options pour personnaliser le compteur de remplissage.
Principalement, vous pouvez modifier la taille du compteur de remplissage, le pourcentage de remplissage, les couleurs et si la valeur du pourcentage doit correspondre à la valeur présentée visuellement dans le compteur.
Vous pouvez également cliquer sur le nombre à l'intérieur du compteur de remplissage pour modifier son apparence.
N'hésitez pas à modifier ses couleurs, son type de police, sa visibilité sur différents appareils, et plus encore.
Si vous souhaitez modifier le texte sous le pourcentage, cliquez simplement sur le texte lui-même.
Après cela, vous pouvez taper une description pour le compteur de remplissage.
N'oubliez pas de sauvegarder votre travail une fois que vous avez terminé.
Alternative : Vous n'êtes pas fan de Thrive Architect ? Le constructeur de pages SeedProd propose également un bloc barre de progression que vous pouvez ajouter à votre thème ou à vos pages personnalisées.
Pour plus d'informations sur la façon d'utiliser SeedProd, consultez notre guide sur la création d'un thème WordPress personnalisé.
Méthode 2 : Utiliser un plugin gratuit de barre de progression (rapide et facile)
Cette méthode est préférable si vous ne souhaitez pas utiliser de constructeur de pages et que vous avez seulement besoin d'un plugin de barre de progression WordPress simple et gratuit.
Pour cela, nous utiliserons le plugin gratuit Ultimate Blocks, qui ajoute une tonne de blocs Gutenberg supplémentaires à votre éditeur WordPress.
Ce qui est formidable avec ce plugin, c'est que le bloc barre de progression est disponible gratuitement. Cela dit, vous pouvez passer à la version pro du plugin pour obtenir plus de blocs Gutenberg et d'options de personnalisation.
Vous pouvez en savoir plus sur le plugin dans notre avis sur Ultimate Blocks.
Tout d'abord, installez et activez le plugin WordPress sur votre site web. Une fois cela fait, vous pouvez ouvrir l'éditeur de blocs pour créer un nouvel article ou modifier un article existant.
Maintenant, cliquez sur le bouton ‘+’ n'importe où sur la page et sélectionnez le bloc ‘Barre de progression’.
Vous avez maintenant ajouté avec succès un bloc barre de progression à votre article. Personnalisons davantage cet élément de conception WordPress pour qu'il corresponde à vos besoins.
Si vous regardez la barre latérale des paramètres du bloc à droite, vous verrez quelques options de personnalisation. Dans l'onglet ‘Général’, vous pouvez modifier la position du pourcentage de la barre de progression, du haut vers l'intérieur ou vers le bas de la barre.
Vous pouvez également désactiver ou activer le design ‘Bande’ et modifier la valeur de la progression actuelle.
Ensuite, vous pouvez personnaliser les Paramètres des nombres.
Ici, nous avons choisi de ne pas afficher le pourcentage du nombre car nous ne le trouvons pas utile pour notre exemple.
Mais si vous choisissez de l'afficher, vous pouvez alors modifier le préfixe numérique (un symbole qui apparaît avant le nombre, comme un signe moins) et le suffixe numérique (un symbole qui apparaît après le nombre, comme un signe de devise).
Ensuite, nous avons le Contrôle Réactif.
Comme les barres de progression peuvent prendre de la place dans votre article, vous voudrez peut-être la masquer lorsque l'article est consulté sur un écran plus petit, comme sur une tablette ou un appareil mobile.
Vous voulez rendre la barre de progression plus interactive ? Envisagez d'ajouter une animation d'entrée. Lorsque vous activez cette fonctionnalité, la barre de progression apparaîtra avec un effet animé lorsque le spectateur fait défiler la page jusqu'à elle.
Vous pouvez également choisir un style d'animation et définir la période de délai afin que la barre de progression apparaisse au bon moment.
Passons à l'onglet « Style », où vous pouvez personnaliser la conception de la barre de progression.
En haut, vous pouvez changer la conception d'une barre de progression linéaire à une barre circulaire ou semi-circulaire. Vous pouvez également ajouter un rayon de bordure à la conception de la barre afin qu'elle paraisse plus circulaire que rectangulaire et anguleuse.
Ici, nous avons décidé de conserver la barre de progression linéaire.
Mais voici à quoi ressemblent les barres de progression circulaires et semi-circulaires :
En faisant défiler vers le bas, vous pouvez modifier l'épaisseur de la barre de progression afin qu'elle ressorte encore plus.
Vous voudrez peut-être également changer la couleur de la barre de progression, de la barre d'arrière-plan et de l'étiquette de la barre de progression pour qu'elle corresponde au design de votre site web.
Un autre élément que vous pouvez modifier est le remplissage et la marge de la barre de progression.
Ces deux paramètres contrôlent essentiellement l'espacement entre la barre de progression et les autres blocs qui l'entourent.
Vous pouvez augmenter la valeur des deux si vous ne voulez pas que la barre de progression soit trop proche des autres blocs au-dessus ou en dessous.
Ensuite, vous voudrez peut-être ajouter une étiquette ou une description à la barre de progression afin que les lecteurs obtiennent plus de contexte visuel.
Au-dessus de la barre de progression, tapez simplement du texte. Vous voudrez peut-être également modifier l'alignement et le style du texte à l'aide des paramètres de la barre d'outils du bloc.
Une fois que vous êtes satisfait de l'apparence de la barre de progression, cliquez simplement sur « Publier » ou « Mettre à jour » dans l'éditeur de blocs.
Vous voudrez peut-être également afficher l'article sur mobile, ordinateur et tablette pour vous assurer que la barre de progression s'affiche correctement sur tous les appareils.
C'est tout ! Vous avez ajouté avec succès une barre de progression à vos articles WordPress.
Voici à quoi ressemble notre barre de progression sur notre site de démonstration :
Foire aux questions : Ajouter des barres de progression dans WordPress
Voici quelques questions fréquemment posées par nos lecteurs concernant les barres de progression :
1. Quand dois-je utiliser une barre de progression de lecture par rapport à une barre de progression statique ?
Nous recommandons d'utiliser une barre de progression de lecture lorsque vous souhaitez maintenir l'engagement des lecteurs dans de longs articles. Elle se remplit au fur et à mesure qu'ils font défiler, montrant la quantité d'article qu'ils ont lue.
Cela fonctionne bien pour les tutoriels, les guides ou les articles de blog où vous souhaitez réduire les taux de rebond.
Une barre de progression statique est préférable pour suivre un objectif fixe, comme la progression d'une collecte de fonds, l'achèvement d'un projet ou les niveaux de compétence. Ces barres ne bougent pas lorsque l'utilisateur fait défiler la page, mais affichent plutôt un pourcentage ou une valeur définie, comme « 60 % terminé » ou « 300 $ sur 500 $ collectés ».
Si votre objectif est d'augmenter l'engagement pendant la lecture, optez pour une barre basée sur le défilement. Si vous souhaitez afficher la progression ou les réalisations, choisissez une barre statique.
2. Quelles sont les meilleures pratiques lors de l'utilisation des barres de progression ?
Voici quelques conseils pour rendre votre barre de progression plus efficace :
- Restez simple – Une barre fine et subtile est plus efficace et ne détourne pas l'attention de votre contenu.
- Adaptez votre image de marque – Personnalisez la couleur et la taille pour qu'elles correspondent au style de votre site.
- Choisissez le bon emplacement – La plupart des lecteurs s'attendent à la trouver en haut de l'écran.
- Testez sur mobile – Certaines barres peuvent sembler maladroites sur les petits écrans. Désactivez-les si nécessaire.
- Facultatif : Ajoutez le temps de lecture – Cela permet de définir les attentes quant à la durée du message.
Une barre de progression propre et bien placée peut améliorer l'expérience utilisateur sans ralentir les choses.
3. L'ajout d'une barre de progression ralentira-t-il mon site ?
La plupart des plugins modernes de barre de progression sont légers et n'affecteront pas de manière notable la vitesse de votre site.
Cependant, des plugins mal codés ou trop volumineux peuvent impacter les performances, surtout sur mobile. Pour rester en sécurité :
- Utilisez des plugins fiables avec de bons avis.
- Testez la vitesse de votre site après l'installation.
- Désactivez la barre sur mobile si elle affecte le temps de chargement.
Tant que vous faites attention au choix de vos plugins, l'ajout d'une barre de progression ne nuira pas au SEO et peut même stimuler l'engagement.
Éléments de conception bonus pour votre site WordPress
Vous souhaitez ajouter d'autres éléments visuels à votre site WordPress ? Consultez simplement ces articles ci-dessous :
- Comment ajouter des majuscules ornées dans les articles WordPress
- Comment ajouter un widget de compte à rebours dans WordPress
- Comment ajouter un bandeau d'actualités défilant dans WordPress
- Comment ajouter un arrière-plan animé dans WordPress
- Comment afficher une animation de compte numérique dans WordPress
- Façons d'ajouter des effets d'Halloween à votre site WordPress
- Comment ajouter des témoignages rotatifs dans WordPress
- Comment ajouter des boîtes de fonctionnalités avec des icônes dans WordPress
- Comment ajouter une vidéo YouTube en arrière-plan plein écran dans WordPress
Nous espérons que ce tutoriel vous a aidé à apprendre comment ajouter une barre de progression à vos articles WordPress. Vous voudrez peut-être aussi consulter notre sélection d'experts des meilleurs constructeurs de thèmes WordPress et notre guide sur comment modifier un site Web WordPress.
Si cet article vous a plu, abonnez-vous à notre chaîne YouTube pour des tutoriels vidéo WordPress. Vous pouvez également nous retrouver sur Twitter et Facebook.
Sachiko Ishikawa
Hello! I have a question
How can I adjust the size (width) of the progress bar? I’m putting it on my sidebar menu, but unfortunately, it’s too wide…
Nous nous excusons pour les désagréments.