Ajouter une barre de progression de lecture dans WordPress (Elementor)

Reading Progress Bar est une extension gratuite de Master Addons qui ajoute une fine barre en haut ou en bas de l'écran et la remplit lorsque les visiteurs font défiler la page. Vous l'activez par page ou par publication dans les paramètres de page d'Elementor, puis définissez la position, la hauteur, la couleur de la piste, la couleur de remplissage et la vitesse d'animation. Cela convient aux longs articles, didacticiels, documentation et pages juridiques où les lecteurs aiment savoir combien il reste.

Cette extension suit le défilement Pour afficher un but ou un score comme jauge de ligne, de cercle ou de ventilateur, utilisez le Widget Bar de progression. Pour une liste de barres de compétences, utilisez Barres de progression.

Lecture des paramètres de la page de la barre de progression avec la position définie sur Haut, hauteur, couleurs et vitesse d'animation, à côté des pages de politique de confidentialité avec une barre bleue en haut
Page de politique de confidentialité avec une barre de progression de lecture bleue en haut, à côté de la section Barre de progression de lecture à l'intérieur des paramètres de publication de l'élémenteur

Allumez-le par page, en haut ou en bas

Ouvrez la page ou la publication dans Elementor, cliquez sur l'icône d'engrenage pour Paramètres de la page (Post Paramètres sur les publications) et développez le Barre de progression de lecture section. Allumer Activer la barre de progression de lecture et ensemble Position vers le haut ou le bas La barre est fixée au bord de l'écran et se remplit de 0 à 100 % lorsque le visiteur défile du haut de la page vers le bas.

  • Le paramètre est enregistré par page, alors activez-le sur les publications longues et laissez-le hors des pages courtes. Il n'y a pas de changement à l'échelle du site.
  • Il fonctionne sur les pages et les publications construites avec Elementor, puisque le commutateur est présent dans les paramètres de page d'Elementor.
  • La progression couvre toute la hauteur de la page, y compris l'en-tête, les commentaires et le pied de page, et pas seulement le texte de l'article.
  • Pour les utilisateurs connectés, la barre descend sous la barre d'administration WordPress.

Hauteur, Couleurs et Vitesse d'animation

Définir Hauteur de 0 à 100 px (5 px par défaut). Couleur d'arrière-plan colore la piste vide (blanc par défaut) et Couleur de remplissage colore la progression (bleu #007bff par défaut). Vitesse d'animation définit la fluidité avec laquelle le remplissage suit le défilement, de 0 à 1 000 millisecondes, 50 par défaut.

  • Vous pouvez choisir les couleurs globales de votre kit Elementor pour la piste et le remplissage.
  • Une barre de 3 à 6 px est perceptible sans couvrir l'en-tête.
  • Une vitesse d'animation plus faible semble plus directe, une vitesse plus élevée plus douce mais légèrement retardée.
Article de financement participatif avec une barre de progression de lecture, à côté du sélecteur Fill Color affichant les couleurs globales du kit

Elementor Pro Progress Tracker contre Reading Progress Bar

Elementor Pro dispose d'un widget Progress Tracker qui effectue un travail similaire avec plus d'options Voici comment les deux se comparent.

CaractéristiqueSuivi des progrès Elementor ProBarre de progression de lecture Master Addons
PrixBesoins d'Elementor ProGratuit avec Master Addons
Comment vous l'ajoutezUn widget, généralement placé dans un modèle d'en-tête ou de publication uniqueUn commutateur dans les Paramètres de Page de chaque page
FormesHorizontal ou circulaireBarre horizontale
PistesPage entière, contenu de publication ou un sélecteur CSSPage entière
Étiquette pourcentageOui, facultatifNon
PlacementPartout où vous mettez le widget, avec des options de directionFixé en haut ou en bas de l'écran

Choisissez Progress Tracker d'Elementor Pro si vous en avez besoin sur chaque publication à partir d'un modèle, d'un style circulaire ou progressez dans l'article uniquement Choisissez la barre de progression de lecture pour une barre simple et gratuite sur les pages sélectionnées. Associez-la gratuitement Table des matières widget sur les longs messages.

Visionneuse de modèles
Facebook
Twitter
WhatsApp
Copier le lien
Acheter Maintenant
Lecture de la barre de progression sur une page de conditions
Lecture de la barre de progression sur une page de conditions

Comment ajouter une barre de progression de lecture dans WordPress

Vous avez besoin d'Elementor et du plugin gratuit Master Addons, avec la page ou la publication modifiée dans Elementor.

  1. Installer et activer Modules complémentaires principaux de WordPress.orget vérifiez que la barre de progression de lecture est activée Additions principales, extensions.
  2. Ouvrez le message ou la page avec Elementor.
  3. Cliquez sur l'icône d'engrenage pour ouvrir Paramètres de la page (Paramètres de publication sur les publications).
  4. Étendre Barre de progression de lecture et allumez Activer la barre de progression de lecture.
  5. Choisissez Haut ou bas, puis définissez Hauteur, Couleur de fond, Couleur de remplissage et Vitesse d'animation.
  6. Mettez à jour la page et faites-la défiler sur le front-end pour vérifier la barre.

Questions fréquemment posées pour la lecture de la barre de progression

Découvrez les requêtes les plus demandées par les utilisateurs sur la barre de progression de lecture et trouvez des réponses en un seul endroit.
La barre de progression de la lecture est-elle gratuite ?

Oui. C'est une extension gratuite dans le plugin Master Addons sur WordPress.org et fonctionne avec Elementor gratuit Il s'affiche également sur les téléphones et les tablettes, fixé sur le bord supérieur ou inférieur.

Oui, et c'est la seule façon dont cela fonctionne Le commutateur est dans les paramètres de page de chaque page ou publication de la page Élémenteur, alors allumez-le pour les publications longues et laissez-le éteint ailleurs Il n'y a pas de paramètre global pour l'ajouter à chaque publication à la fois.

Est-ce que cela va ralentir mon site web ?

Non. Il ajoute un petit script en ligne et quelques lignes de CSS sur les pages où il est activé, sans fichiers ni images supplémentaires.

Toute la page Le remplissage s'étend du haut de la page jusqu'en bas, donc les en-têtes, les commentaires et les pieds de page comptent aussi Le Progress Tracker d'Elementor Pro ne peut suivre que le contenu de la publication si vous en avez besoin.

Widgets et extensions d'éléments tendance

Construisez des sites Web sophistiqués en moins de temps.

Master Addons Extension de glassmorphisme pour Elementor : cartes en verre dépoli avec le contrôle Blur Value réglé sur 20px

Glassmorphisme

Accueil Extension de glassmorphisme des éléments libres : l'effet du verre givré en un seul bascule Le glassmorphisme est givré...
Voir Détails
Extension d'extras de conteneur Master Addons pour élémenteur : conteneur bouché à une largeur maximale de 1 400 px, avec des commandes de largeur maximale, de hauteur maximale, de largeur minimale et de hauteur minimale

Extras de conteneurs

Accueil Elementor Container Max Width et Max Height Controls Container Extras est un Master gratuit...
Voir Détails
Extension de modèles Master Addons pour Elementor : héros avec le style Purple Gradient Grid Left, trois autres styles de modèles et le panneau Enable Pattern

Modèles

Accueil 70+ Motifs d'arrière-plan d'élément libre Patterns est une extension gratuite Master Addons qui ajoute...
Voir Détails
Modules principaux Extension de duplicateur de messages/pages pour le lien de ligne Elementor : MA Duplicator dans la liste des pages WordPress créant une ébauche de page de destination - [Dupliqué n° 128]

Duplicateur de messages/pages

Accueil Dupliquer les pages et les messages des éléments en un clic Le duplicateur de messages/pages est un maître gratuit...
Voir Détails
Modules principaux L'extension de quel élément pour Elementor : widget de membre de l'équipe couvert dans l'éditeur intitulé Modules principaux pour Elementor (membre de l'équipe)

Quel élément

Accueil Identifiez n'importe quel widget d'élément sur Hover, quel élément est une extension gratuite de Master Addons...
Voir Détails