Comment afficher la barre de progression de la lecture dans WordPress avec Elementor

Une barre de progression de lecture est un indicateur visuel sur un site Web qui montre aux lecteurs à quel point ils ont parcouru la page ou la publication à l'écran. Cela affiche généralement une barre mince qui se remplit à mesure que les lecteurs progressent, faisant défiler la page. C'est un outil simple mais efficace pour les blogs et les sites Web lourds de contenu.

Une étude récente sur l'engagement des utilisateurs suggère que les indices visuels peuvent augmenter le temps passé sur une page jusqu'à 20% en rendant le contenu plus gérable . De la même manière, la barre de progrès peut aider les utilisateurs à suivre leur parcours de lecture, ce qui peut stimuler la satisfaction et les encourager à explorer davantage.

Avec Elementor, il est facile d'ajouter une barre de progression de lecture à WordPress. Ainsi, dans cet article, nous couvrirons un guide étape par étape sur la façon d'afficher la barre de progression de la lecture dans WordPress avec Elementor.

Avantages de l'affichage de la barre de progression du lecteur dans WordPress

L'ajout d'une barre de progression de lecture à un site WordPress offre plusieurs avantages. Cela améliore non seulement l'expérience utilisateur mais aussi l'engagement. Jetez un œil à certains avantages clés de l'ajout de la barre de progression de la lecture dans WordPress ci-dessous.

• Améliore l'engagement des utilisateurs

Une barre de progression de la lecture peut garder les lecteurs motivés en montrant visuellement dans quelle mesure ils ont progressé dans un article. Cela encourage les utilisateurs à continuer à lire, en particulier pour le contenu long. Jetez un œil à quelques points rapides sur la façon d'améliorer l'engagement des utilisateurs sur votre site Web.

• Améliore la clarté de navigation

Pour les longs articles ou tutoriels, une barre de progression fournit une indication claire de la quantité de contenu. Cela aide les utilisateurs à deviner s'ils ont le temps de terminer ou non.

• Réduit les taux de rebond

En offrant un repère visuel qui décompose le contenu dans un voyage traçable, une barre de progression peut rendre les messages longs moins écrasants. Cela peut baisser remarquablement les taux de rebond. Voici un guide sur la façon de réduire le taux de rebond sur WordPress.

• Améliore l'attrait esthétique

Une barre de progrès bien conçue ajoute un attrait moderne à votre site. Vous pouvez personnaliser l'apparence de la barre de progression de Reading pour correspondre à la marque de votre site pour créer un look poli.

• Prend en charge la convivialité mobile

Sur les appareils mobiles, où le défilement peut se sentir sans fin, une barre de progrès offre un sentiment de contrôle et de contexte. Il rassure les utilisateurs qu'ils progressent dans le post ou la page.

Comment afficher la barre de progression de la lecture dans WordPress avec Elementor

Dans ce didacticiel étape par étape, nous vous guiderons à travers le processus d'ajout et de personnalisation d'une barre de progression de lecture sur votre site WordPress à l'aide d'Elementor et de la version gratuite de HappyAddons. Mais vous pouvez demander - pourquoi HappyAddons et qu'est-ce que c'est ?

En fait, HappyAddons est un addon bien connu du plugin Elementor. Il est livré avec de nombreuses fonctionnalités et widgets ingénieux pour surmonter les limites de Elementor. La barre de progression de la lecture est l'une des. Et la bonne nouvelle est que la fonctionnalité de barre de progression de Reading est entièrement gratuite à utiliser.

Pré-requis pour ajouter la lecture de la barre de progression

• Élémentor
• Happyaddons

Assurez-vous que les plugins sont installés et activés sur votre site. Une fois qu'ils sont prêts sur votre site, commencez à suivre les étapes expliquées dans le tutoriel ci-dessous.

Étape 01: Activer la fonction de barre de progression de lecture

Accédez à votre tableau de bord WordPress et accédez à HappyAddons> fonctionnalités .

Lorsque vous arrivez sur la page des fonctionnalités , localisez l'option de barre de progression de lecture . Basculez pour activer la fonctionnalité.

Étape 02: Ouvrez une page avec Elementor

Maintenant, pour configurer la fonction de barre de progression de lecture, ouvrez une page avec Elementor.

Étape 03: Accédez aux paramètres du site d'Elementor

Cliquez sur l' icône du hamburger dans le coin supérieur gauche du panneau Elementor.

Accédez à l'option Paramètres du site en cliquant dessus.

En faisant défiler le panneau Elementor, localisez la barre de progression de la lecture et cliquez dessus .

Basculez pour activer l'option Reading Progress Bar .

Étape 04: Configurez l'option de barre de progression de lecture

Une fois que vous avez activé l'option Reading Progress Bar, vous obtiendrez de nombreuses options pour configurer la fonctionnalité.

# Sélectionnez où afficher la barre de progression

Vous pouvez choisir d'afficher la barre de progression de votre site, ce qui signifie sur tous les messages et pages. Ou, vous pouvez choisir de l'afficher sélectivement.

Si vous souhaitez l'afficher sur les messages et les pages, sélectionnez-les dans la case à côté pour afficher.

# Sélectionnez un type de barre de progression

HappyAddons vous permet de choisir parmi trois types de barres de progression - horizontales, verticales et cercle . Alors, choisissez l'un d'eux, cliquez sur l'option déroulante à côté de taper .

Vous verrez les options. Choisissez un type que vous souhaitez. Pour le tutoriel, nous irons avec le type horizontal.

# Sélectionnez un poste pour la barre de progression

Vous pouvez afficher la barre de progression en haut ou en bas. Alors, choisissez où vous souhaitez l'afficher à partir de l' option de position à côté.

Comme nous avons fait défiler la page, vous pouvez voir qu'une barre de progression apparaît en haut de la page.

# Styliser la barre de progression

À partir du même panneau Elementor, vous pouvez personnaliser la hauteur, la couleur de la barre de progression, la couleur d'arrière-plan et le pourcentage d'info-bulle de la fonction de barre de progression.

J'espère que vous pouvez faire cette personnalisation vous-même.

Étape 05: Aperçu de la barre de progression

Une fois que vous avez terminé, allez au frontend de votre site. Vérifiez si la barre de progression fonctionne bien ou non en faisant défiler votre écran.

Ainsi, vous pouvez facilement ajouter la barre de progression de lecture à WordPress à l'aide des plugins Elementor et HappyAddons.

À quoi ressemble la barre de progression verticale

Ci-dessus, nous vous avons montré le processus de création d'une barre de progrès horizontale. De la même manière, vous pouvez activer et afficher la barre de progression verticale sur votre site. Une fois que vous l'avez activé, la barre de progression ressemblera à celle indiquée dans la vidéo ci-dessous.

À quoi ressemble la barre de progression du cercle

Là encore, en suivant le même processus, vous pouvez afficher la barre de progression de Circle sur votre site WordPress, en configurant sa stylisation et ses paramètres. Vous pouvez regarder à quoi il ressemble sur le frontend à partir de la vidéo ci-dessous. La barre de progression du cercle apparaît dans le coin supérieur droit.

Que pouvez-vous faire d'autre avec HappyAddons?

Une fois que vous avez des HappyAddons, non seulement vous pouvez surmonter les lacunes de Elementor, mais aussi profiter de nombreuses fonctionnalités et widgets plus excitants. Jetez un œil à ce que vous pouvez faire de plus avec le plugin HappyAddons.

un. Utilisez un constructeur de thèmes

Le constructeur de thème de HappyAddons vous permet de personnaliser tous les aspects des pièces de modèle de votre site WordPress, y compris des en-têtes, des pieds de page, des pages uniques, des messages uniques et des pages d'archives. La excellente nouvelle est que la fonctionnalité du constructeur de thèmes est entièrement gratuite à utiliser, qui est une fonctionnalité premium dans Elementor. Vérifiez comment accéder à HappyAddons Theme Builder.

né Améliorer les sites WooCommerce

HappyAddons Pro propose une puissante suite de widgets WooCommerce pour améliorer la conception et la fonctionnalité de votre magasin de commerce électronique. Les widgets WooCommerce que HappyAddons offrent sont la grille de produits, le carrousel de produit, la grille de la catégorie de produits, le carrousel de catégorie de produits, le produit unique, le mini-panier, le chariot, le paiement et la barre d'expédition.

c. Artisanat du contenu créatif

HappyAddons fournit plus de 130 widgets et deux douzaines de fonctionnalités passionnantes pour rendre un site Web très excitant. En les utilisant, vous pouvez mettre en évidence des informations précieuses sur votre site d'une manière extrêmement créative qui semble bonne et attrayante pour les utilisateurs.

d. Créer des messages / pages infographiques

HappyAddons permet la création de messages et de pages de style infographique visuellement attrayants à l'aide de widgets comme le graphique à barres, la barre de compétence, les graphiques interactifs et la grille de la post. En conséquence, vous pouvez afficher des comparaisons telles que les ventes ou les résultats d'enquête avec des couleurs et des étiquettes personnalisables. Apprenez à créer une page Web infographique avec Elementor.

e. Pâte de copie inter-domaine

La fonction Copy-Domain Copy Paste dans HappyAddons Pro permet de copier des widgets, des sections ou des pages entières d'un domaine et de les coller à une autre, en conservant tous les styles et paramètres. Il s'agit d'un gain de temps pour les développeurs ou les agences qui gèrent plusieurs sites.

En plus de tout cela, vous aurez une bibliothèque de modèles ingénieuse, un chat en direct, une documentation complète et une liste de lecture de tutoriel YouTube pour rendre votre parcours de conception Web avec HappyAddons extrêmement agréable.

Réflexions finales!

J'espère que vous avez apprécié ce tutoriel. Nous avons constamment écrit de plus en plus de billets de blog basés sur des tutoriels sur notre site Web pour rendre votre parcours de conception Web sans code plus utile et plus efficace. Lorsque vous avez lu l'intégralité du post, vous avez évidemment une idée de ce que vous pouvez faire de plus avec le plugin HappyAddons.

Si vous avez à la fois Elementor et HappyAddons sur votre site, vous pouvez faire de la vraie magie. Vous pouvez consulter des critiques sur HappyAddons sur wordpress.org et d'autres sites de révision pour explorer à quel point nos utilisateurs sont satisfaits. Après tout cela, si vous avez des questions en tête, vous pouvez laisser un commentaire ci-dessous ou frapper notre boîte de chat de support.