Vous souhaitez rendre votre site web plus attrayant ? L'ajout d'une barre de progression peut vous aider. Les barres de progression affichent visuellement les données, ce qui permet de comprendre les informations d'un seul coup d'œil. Elles améliorent l'expérience de l'utilisateur en fournissant des indicateurs visuels clairs de la progression ou des statistiques. 

Dans ce guide, nous allons vous montrer comment ajouter une barre de progression dans l'éditeur Gutenberg de WordPress.

Étapes pour ajouter une barre de progression dans WordPress pour Gutenberg

Nous utiliserons le Plugin ZoloBlocks (développé par BDThemes) pour ajouter une barre de progression. ZoloBlocks est l'un des meilleurs plugins WordPress pour faire en sorte que, sans effort, les personnaliser votre site web. Il propose plus de 30 blocs d'interface utilisateur personnalisables que vous pouvez utiliser sur votre site Web pour le rendre plus riche en fonctionnalités.

Pour commencer, vous devez donc installer ZoloBlocks. Voici comment procéder :

1. Connectez-vous à votre tableau de bord WordPress.
2. Naviguez vers Plugins > Ajouter un nouveau plugin.
3. Recherchez "ZoloBlocks".
4. Installer et activer le plugin.

Avec ZoloBlocks installé, vous êtes prêt à voir comment ajouter une barre de progression dans les sites WordPress. Vous pouvez consulter tous les blocs proposés par ZoloBlocks pour avoir une idée de ce que vous pouvez accomplir avec eux.

Maintenant, nous allons vous montrer les étapes pour ajouter une barre de progression dans WordPress Gutenberg.

Étape 1 : Ouvrir la page web dans l'éditeur Gutenberg

Visitez votre tableau de bord WordPress et trouvez la page ou l'article où vous souhaitez ajouter la barre de progression. Si vous souhaitez créer une nouvelle page, faites-le et passez à l'éditeur Gutenberg.

Une fois que vous êtes dans l'éditeur, faites défiler vers le bas jusqu'à la section que vous souhaitez ajouter et affichez la barre de progression.

Étape 2 : Ajout de la barre de progression

Une fois que vous avez décidé où ajouter la barre de progression, cliquez sur le bouton Ajouter un nouveau bloc (+). Dans le champ de recherche, tapez "barre de progression" et vous verrez le bloc de barre de progression de ZoloBlocks. Cliquez sur le bloc Barre de progression pour l'ajouter à votre page.

Voilà, c'est fait ! Le bloc de la barre de progression a été ajouté à votre page. Au départ, il ressemblera à ceci.

Vous obtiendrez différents modèles prédéfinis pour la disposition de la barre de progression. Vous pouvez donc les parcourir pour trouver celle qui vous convient le mieux.

Vous pouvez personnaliser ce bloc en fonction de vos préférences.

Étape 3 : Personnalisation de la barre de progression

La personnalisation de votre barre de progression est simple et intuitive. 

Suivez les étapes suivantes pour le rendre compatible avec votre marque :

1. Ajuster les couleurs : Cliquez sur le bloc de la barre de progression pour ouvrir le panneau des paramètres. Vous pouvez y modifier la couleur de la barre pour l'adapter au thème de votre site.
2. Définir la valeur en pourcentage : Saisissez la valeur en pourcentage que vous souhaitez afficher. Ce pourcentage indique l'état d'avancement du projet.
3. Ajouter des étiquettes : Fournissez un contexte en ajoutant des étiquettes ou des descriptions. Cela aide les utilisateurs à comprendre ce que représente la barre de progression.
4. Choisissez Style et mise en page : Personnalisez les options de style et de mise en page pour donner à la barre de progression l'aspect que vous souhaitez.

Lors de la personnalisation de ces éléments, l'objectif principal doit être de s'assurer que la barre de progression s'intègre parfaitement à la conception de votre site.

Bonus : Conseils de personnalisation avancée

Vous voulez faire passer votre barre de progression au niveau supérieur ? Voici quelques conseils de personnalisation avancée :

1. CSS personnalisé : Ajoutez une feuille de style CSS personnalisée pour styliser davantage la barre de progression. C'est parfait pour obtenir un look unique.
2. Animations : Incorporez des animations pour rendre la barre de progression dynamique et attrayante. Par exemple, vous pouvez faire en sorte que la barre se remplisse progressivement au fur et à mesure que les utilisateurs font défiler la page.
3. Barres de progression multiples : Ajoutez plusieurs barres de progression à une même page pour afficher différents ensembles de données. Cette fonction est utile pour montrer les différentes étapes d'un projet ou les statistiques.
4. Visibilité conditionnelle : Définissez des règles de visibilité conditionnelle. Cela signifie que la barre de progression ne sera visible qu'en fonction de certaines interactions ou conditions de l'utilisateur.

Ces options avancées vous permettent de créer une barre de progression plus interactive et plus attrayante sur le plan visuel.

Avantages de l'utilisation d'une barre de progression sur votre site WordPress

Les barres de progression offrent une multitude d'avantages pour votre site web, améliorant considérablement l'expérience et l'engagement des utilisateurs. Voici un aperçu de ces avantages :

• Améliorer l'attrait visuel : Les barres de progression ajoutent un élément visuel dynamique à votre site, le rendant plus attrayant et plus engageant. Elles rompent avec un contenu riche en texte et apportent une touche de couleur et de mouvement, ce qui permet de capter et de retenir l'attention des visiteurs.

• Améliorer la compréhension de l'utilisateur : Les barres de progression sont des outils intuitifs qui aident les visiteurs à saisir rapidement l'état d'avancement des tâches ou des projets en cours. Qu'il s'agisse de suivre l'achèvement d'un processus d'accueil des utilisateurs ou de montrer l'avancement d'une campagne de collecte de fonds, les barres de progression communiquent des informations complexes d'une manière simple et visuelle.

• Augmenter l'engagement : Les barres de progression peuvent maintenir l'engagement des utilisateurs en leur fournissant un retour d'information en temps réel. Par exemple, si les utilisateurs voient qu'ils sont à 80% d'une enquête, ils sont plus enclins à la terminer. Ce sentiment de progrès encourage les utilisateurs à interagir davantage avec votre site.

• Fournir des indicateurs clairs : Les barres de progression offrent des indicateurs visuels clairs de la progression ou des points de données. Elles peuvent être particulièrement utiles pour afficher des mesures telles que les pourcentages d'achèvement d'un projet, les réalisations d'un utilisateur ou l'état d'un processus de demande.

• Motiver les utilisateurs : La visualisation des progrès peut être très motivante. Qu'il s'agisse d'un tracker de fitness indiquant la progression de l'entraînement ou d'un site éducatif affichant les étapes de l'apprentissage, les barres de progression peuvent encourager les utilisateurs à continuer à travailler pour atteindre leurs objectifs.

• Professionnalisme : L'utilisation de barres de progression peut donner à votre site web un aspect poli et professionnel. Elle montre que vous êtes attentif aux détails et que vous vous engagez à fournir une expérience utilisateur de haute qualité.

• Polyvalence : Les barres de progression peuvent être utilisées dans différents contextes, des tableaux de bord de gestion de projet aux sites web de commerce électronique indiquant les étapes de traitement des commandes. Leur polyvalence en fait un ajout précieux à presque tous les sites.

Bonnes pratiques pour l'utilisation des barres de progression

Pour maximiser l'efficacité des barres de progression sur votre site web, suivez ces bonnes pratiques :

Placement stratégique

Placez les barres de progression dans les zones où elles seront les plus efficaces. Les emplacements les plus courants sont l'en-tête, la barre latérale ou les sections clés du contenu. Veillez à ce qu'elles soient bien visibles pour les visiteurs, sans pour autant surcharger la mise en page.

Une conception cohérente 

Veillez à ce que la conception de vos barres de progression soit cohérente avec le thème général et l'image de marque de votre site web. Il s'agit notamment de faire correspondre les couleurs, les polices et les styles. La cohérence permet de créer une expérience utilisateur homogène et de renforcer l'identité de votre marque.

Étiquettes transparentes

Les barres de progression doivent toujours être accompagnées d'une étiquette ou d'une description. Ce contexte aide les utilisateurs à comprendre ce que représente la barre de progression. Par exemple, une barre de progression intitulée "Achèvement du projet" est beaucoup plus informative qu'une barre sans étiquette.

Des valeurs réalistes

Veillez à ce que les pourcentages affichés par vos barres de progression soient exacts et réalistes. Le fait d'induire les utilisateurs en erreur avec des progrès exagérés peut nuire à la confiance et à la crédibilité. Mettez régulièrement à jour les barres de progression pour qu'elles reflètent les données les plus récentes.

Éléments interactifs

Pensez à ajouter des éléments interactifs à vos barres de progression, tels que des infobulles ou des segments cliquables qui fournissent des informations supplémentaires. Cette interactivité peut renforcer l'engagement de l'utilisateur et rendre les données plus accessibles.

Utiliser plusieurs barres de progression

Si vous avez plusieurs points de données ou mesures à afficher, utilisez plusieurs barres de progression. Cela peut être particulièrement utile sur les tableaux de bord ou les pages de suivi des performances, où les utilisateurs ont besoin de voir plusieurs éléments d'information d'un seul coup d'œil.

Accessibilité

Veillez à ce que vos barres de progression soient accessibles à tous les utilisateurs, y compris aux personnes handicapées. Utilisez des couleurs contrastées pour une meilleure visibilité, proposez des alternatives textuelles et veillez à ce que la barre de progression puisse être parcourue à l'aide d'un clavier.

Conception adaptée

Assurez-vous que vos barres de progression sont réactives et s'affichent correctement sur tous les appareils, y compris les ordinateurs de bureau, les tablettes et les smartphones. Testez-les sur différentes tailles d'écran pour garantir une expérience utilisateur transparente.

Tests réguliers et optimisation

Testez continuellement vos barres de progression pour vous assurer qu'elles fonctionnent comme prévu sur différents navigateurs et appareils. Utilisez des outils d'analyse pour savoir comment les utilisateurs interagissent avec les barres de progression et faites des ajustements en fonction des commentaires et du comportement des utilisateurs.

Pertinence contextuelle

Veillez à ce que l'utilisation des barres de progression soit pertinente par rapport au contenu de la page. Par exemple, l'utilisation d'une barre de progression pour suivre les objectifs de dons dans le cadre d'une campagne de collecte de fonds est tout à fait pertinente et ajoute de la valeur à l'expérience de l'utilisateur.

Test et optimisation de la barre de progression

Après avoir ajouté et personnalisé votre barre de progression, il est essentiel de la tester et de l'optimiser :

1. Compatibilité des appareils : Veiller à ce que la barre de progression s'affiche correctement sur différents appareils, y compris les ordinateurs de bureau, les tablettes et les smartphones.
2. Compatibilité avec les navigateurs : Testez la barre de progression sur différents navigateurs pour vous assurer qu'elle fonctionne parfaitement sur toutes les plateformes.
3. Interactions de pistes : Utilisez des outils d'analyse pour surveiller la façon dont les utilisateurs interagissent avec la barre de progression. Ces données peuvent fournir des indications sur le comportement des utilisateurs et vous aider à effectuer les ajustements nécessaires.
4. Mises à jour régulières : Maintenez les données de progression à jour. La mise à jour régulière de la barre de progression garantit que les utilisateurs disposent d'informations exactes, ce qui maintient leur confiance et leur engagement.

Conclusion

Maintenant que vous savez comment ajouter une barre de progression dans WordPress Gutenberg, en utilisant ZoloBlocks, souhaitez-vous essayer ? 

Une barre de progression est un moyen simple mais puissant d'améliorer l'expérience de l'utilisateur. Elle fournit un indicateur visuel clair de la progression, maintient l'intérêt des utilisateurs et ajoute une touche professionnelle à votre site. 

Suivez les étapes décrites dans ce guide pour créer et personnaliser une barre de progression adaptée à vos besoins. Expérimentez différents styles et emplacements pour trouver ce qui convient le mieux à votre public.

FAQ

Qu'est-ce qu'une barre de progression ?

Une barre de progression est un indicateur visuel, souvent une barre colorée, qui affiche la progression d'une tâche ou d'un point de données. Elle aide les utilisateurs à comprendre rapidement les progrès réalisés pour atteindre un objectif.

Comment une barre de progression améliore-t-elle l'expérience de l'utilisateur ?

Les barres de progression améliorent l'expérience de l'utilisateur en fournissant un retour d'information clair et visuel sur l'état des tâches ou des données. Elles facilitent la compréhension des informations en un coup d'œil, ce qui permet aux utilisateurs d'être informés et de s'impliquer.

Puis-je ajouter plusieurs barres de progression à une même page ?

Oui, vous pouvez ajouter plusieurs barres de progression à une même page. Cette fonction est utile pour afficher différents ensembles de données, tels que les étapes d'un projet ou les différents objectifs d'une campagne.

Les barres de progression sont-elles compatibles avec tous les thèmes WordPress ?

Les barres de progression créées avec ZoloBlocks sont conçues pour être compatibles avec la plupart des thèmes WordPress. Cependant, c'est toujours une bonne idée de tester la barre de progression sur votre thème spécifique pour assurer une intégration transparente.