Une seule barre de progression raconte une histoire Un ensemble empilé d'entre eux montre tout un ensemble de compétences, une gamme de services ou le statut d'un projet sans faire travailler le lecteur pour lui Le Widget Barres de progression dans Modules complémentaires principaux pour Elementor est construit pour ce cas Il regroupe plusieurs barres animées en un seul widget, vous en ajoutez donc autant que vous en avez besoin et vous les stylisez ensemble ou une à la fois.
Considérez-le comme le compagnon multi-barres du autonome Widget Bar de progression. Au lieu de laisser tomber un widget séparé pour chaque métrique, vous gérez l'ensemble du groupe à partir d'un panneau Chaque barre obtient son propre titre, pourcentage et couleur, tandis qu'un onglet Style partagé contrôle l'apparence de l'ensemble.
Préférez regarder en premier ? ce court tutoriel parcourt le widget bout à bout, de l'entraîner au coiffage des barres :
Ce que fait le widget Barres de progression #
Le widget rend une liste de barres horizontales qui s'animent de zéro à leur valeur définie lorsqu'elles défilent en vue Chaque barre affiche un titre à gauche, une étiquette de pourcentage et un remplissage coloré qui grandit pour correspondre au nombre que vous saisissez.
La différence avec le widget à barre unique est la structure Ici les barres vivent à l'intérieur d'un répéteur appelé Barres de statistiques« , donc vous ajoutez, dupliquez, réorganisez et supprimez des barres sans toucher au canevas. Un widget, un ensemble de commandes de style et un nombre illimité de barres. ».
Avant de commencer #
- WordPress avec Élémenteur installé et actif.
- Modules complémentaires principaux pour Elementor installé et actif. Nouveau au plugin ? voir le guide d'installation.
- Une page s'ouvre dans l'éditeur Elementor où les barres iront.
Comment ajouter le widget Barres de progression #
Dans l'éditeur Elementor, ouvrez le Éléments panneau et recherche pour Barres de progression(ou faites défiler vers le bas jusqu'à la section Addons principaux) Regardez les noms ici : il y a deux widgets qui lisent presque de la même manière. Barre d'avancement est une seule barre, et Barres d'avancement est le groupe. Glisser Barres d'avancement sur votre page.
Il arrive avec trois barres d'échantillons déjà remplies, vous voyez donc immédiatement un résultat de travail et le modifiez à partir de là au lieu de commencer vide.
Modifier chaque barre dans l'onglet Contenu #
Ouvrir le Contenu tab et vous trouverez le Barres de statistiques répéteur. Chaque ligne est une barre. Cliquez sur une ligne pour l'étendre et vous obtenez trois paramètres :
- Stats Titre: l'étiquette affichée au-dessus de la barre, comme“Web Design” ou“WordPress” Ce champ prend les balises dynamiques Elementor, vous pouvez donc extraire le titre d'un champ de publication, d'un méta auteur ou d'une autre source dynamique à l'aide de l'icône de la balise.
- Valeur en pourcentage : un nombre de 1 à 100 qui définit la distance à laquelle la barre se remplit et ce que l'étiquette lit Entrez
87et la barre se remplit à 87 pour cent. - Couleur de la barre : une couleur optionnelle pour cette barre unique Laissez-la vide pour utiliser la couleur de barre active globale, ou définissez-la ici pour remplacer la couleur de groupe pour une seule barre.
La couleur par barre est ce qui rend le groupe flexible Gardez chaque barre sur une couleur de marque, ou donnez à chaque métrique sa propre teinte afin qu'ils soient faciles à distinguer en un coup d'œil.
Ajouter des barres illimitées #
Pour ajouter une autre barre, cliquez sur Ajouter un élément au bas du répéteur Une nouvelle barre apparaît avec des valeurs par défaut que vous pouvez renommer et définir Il n'y a pas de capuchon, alors construisez-en autant que le contenu en a besoin L'icône de copie sur n'importe quelle ligne duplique une barre avec ses paramètres intacts, et l'icône X en supprime un.
L'onglet Contenu a également un Aide Docs lien pour référence rapide et a Lien d'emballage option à partir du gratuit Lien d'emballage extension qui rend l'ensemble du widget cliquable Celui-là est utile lorsque les barres sont assises sur une carte qui renvoie quelque part.
Style chaque barre à partir de l'onglet Style #
Passer au Style onglet pour contrôler l'apparence de l'ensemble du groupe Ces paramètres s'appliquent à chaque barre à la fois, c'est exactement pourquoi les remplacements par barre dans l'onglet Contenu valent la peine d'être connus L'onglet Style entre par effraction Barre Stats, Stats Titre, Statistiques Pourcentage, et Modèles.
Barre Stats #
- Barre BG Couleur : la couleur de la piste vide derrière chaque remplissage.
- Couleur de barre active : la couleur de remplissage par défaut pour toute barre qui n'a pas son propre jeu de couleurs de barre dans l'onglet Contenu.
- Espacement vertical : l'écart entre les barres empilées.
- Hauteur de la barre : quelle épaisseur ont les barres, en pixels.
- Statistiques Bar Rayon frontalier : arrondit les coins Reliez les quatre valeurs pour un rayon pair, ou définissez Haut, Droite, Bas et Gauche séparément.
Stats Titre #
Cette section stylise l'étiquette au-dessus de chaque barre.
- Alignement : gauche, centre ou droite pour le texte du titre.
- Couleur: la couleur du titre.
- Typographie: contrôle total sur la famille de polices, la taille, le poids, la transformation et le reste des options de caractères d'Elementor.
Statistiques Pourcentage #
L'étiquette de pourcentage obtient ses propres contrôles de couleur et de typographie, vous pouvez donc faire en sorte que le nombre soit gras et grand ou le garder silencieux. En dessous, il se trouve le Modèles section. Il provient de l'extension gratuite Patterns et ajoute un motif d'arrière-plan de couleur fixe derrière l'ensemble du widget, et non à l'intérieur des barres.
Le résultat sur la page #
Publiez ou prévisualisez la page et les barres s'animent de zéro jusqu'à leurs valeurs définies lorsque la section entre dans la fenêtre. Le style se poursuit : couleurs de barre personnalisées, couleur du titre, taille du pourcentage, espacement et hauteur, tout s'affiche sur la page en direct.
Cas d'utilisation courants #
- Barres de compétences sur une page à propos ou de CV (conception, développement, marketing).
- Forces de service sur une page d'agence, une barre par offre.
- Statut du projet ou de la campagne indiqué sous forme de pourcentages d’achèvement.
- Partitions de fonctionnalités dans un bloc de comparaison, associé à a tableau comparatif.
- Faits saillants des statistiques à côté des numéros animés du Widget Compteur.
Conseils pour travailler avec Progress Bars #
- Définissez d'abord le style du groupe, puis remplacez. Choisissez une fois votre couleur de barre active et votre hauteur de barre, puis ajoutez une couleur par barre uniquement là où vous souhaitez qu'une barre se démarque.
- Gardez les pourcentages honnêtes. Le nombre est aussi l'étiquette, donc une barre réglée sur 76 lit “76 %” Faites correspondre le remplissage au chiffre réel.
- Réglez la hauteur et le rayon ensemble. Une barre plus haute avec un rayon correspondant se lit comme une pilule arrondie ; une fine barre avec un grand rayon peut paraître coupée.
- Utiliser les titres dynamiques dans les modèles. Lorsque les barres sont placées dans un modèle de publication ou d'archive, connectez le titre des statistiques à une balise dynamique afin que chaque entrée s'étiquete elle-même.
- Dupliquer au lieu de reconstruire. L'icône de copie clone une barre avec sa couleur et sa typographie, ce qui vaut la mise en place d'un nouvel élément à la main.
Foire aux questions #
Qu'est-ce que le widget Barres de progression dans Master Addons ?
C'est un widget Elementor qui regroupe plusieurs barres de progression animées en un seul élément Vous ajoutez des barres via le répéteur Stats Bars, donnez à chacun un titre, un pourcentage et une couleur facultative, et stylisez l'ensemble à partir de l'onglet Style C'est la version multi-barres du widget unique Progress Bar.
En quoi Progress Bars est-il différent du widget unique Progress Bar ?
Le widget unique Progress Bar affiche une barre par widget Le widget Progress Bars contient un répéteur, vous ajoutez donc un nombre illimité de barres à l'intérieur d'un widget et les gérez ensemble Utilisez le seul pour une métrique autonome et des barres de progression pour un ensemble empilé.
Combien de barres de progression puis-je ajouter ?
Il n'y a pas de limite Cliquez sur Ajouter un élément dans le répéteur Barres de statistiques pour ajouter autant de barres que nécessaire Chaque nouvelle barre commence par des valeurs par défaut que vous pouvez renommer et ajuster, et vous pouvez dupliquer ou supprimer des barres à tout moment.
Chaque barre de progression peut-elle avoir une couleur différente ?
Oui. Définissez la couleur de la barre active dans l'onglet Style par défaut du groupe, puis ouvrez n'importe quelle barre dans l'onglet Contenu et utilisez son champ Couleur de la barre pour remplacer cette barre. Laissez le champ vide pour conserver une barre sur la couleur du groupe.
Les barres de progression animent-elles ?
Oui. Chaque barre remplit de zéro à son pourcentage défini lorsque le widget défile sur la page en direct, à environ 20 millisecondes par point de pourcentage. Il n'y a pas de paramètre pour modifier la vitesse.
Envelopper #
Le widget Barres de progression transforme une pile de métriques en un bloc animé bien rangé Ajoutez des barres dans le répéteur Barres de statistiques, définissez chaque titre et pourcentage, coloriez-les individuellement ou en groupe et façonnez l'ensemble à partir de l'onglet Style. Pour une seule barre autonome, atteignez le Widget Bar de progression au lieu de. Parcourir le complet Widgets et extensions Master Addons pour voir ce que vous pouvez construire d'autre, et voir le Page du widget Barres de progression pour les démos. Le widget est gratuit, sans options Pro uniquement.
