Widget de barres de compétences d'élémentateur : plusieurs barres de progression dans une seule liste
Le widget Barres de progression Master Addons empile plusieurs barres de compétences horizontales dans un widget Il est gratuit Ajoutez une barre pour chaque compétence, service ou objectif, donnez-lui un titre et un pourcentage de 1 à 100, et choisissez une couleur par barre si vous le souhaitez Les barres se remplissent à partir de zéro lorsqu'elles défilent dans la vue, avec le pourcentage affiché à l'intérieur de chaque barre Utilisez-la pour les compétences sur une page, l'état du projet ou les résultats de l'enquête Vous recherchez plutôt un seul cercle ou une seule jauge ? Utilisez le Barre d'avancement widget avec ses préréglages Circle et Fan Pour une barre qui se remplit au fur et à mesure que les visiteurs défilent dans un poteau, utilisez Barre de progression de lecture.
Comment ajouter des barres de compétences dans Elementor
Vous avez besoin d'Elementor et du plugin gratuit Master Addons. Découvrez ceci Barres de progression docs.
- Vérifiez que les barres de progression sont allumées ci-dessous Additions maîtresses, widgets.
- Dans l'éditeur Elementor, recherchez Barres de progression et faites-le glisser sur la page.
- Dans les barres de statistiques, modifiez les trois barres d'échantillons et cliquez sur Ajouter un élément pour en savoir plus.
- Définissez un titre et un pourcentage pour chaque barre, ainsi qu'une couleur de barre si vous souhaitez des couleurs différentes.
- Dans l'onglet Style, définissez les couleurs de piste et de remplissage, la hauteur de la barre, l'espacement et le rayon.
- Stylez les titres et les pourcentages, puis prévisualisez la page et faites défiler vers le widget.
Ajoutez autant de barres de compétences que nécessaire
Les bars vivent dans le Barres de statistiques répéteur dans l'onglet Contenu Cliquez sur Ajouter un élément pour chaque barre, puis définissez le Stats Titre (par exemple “Web Design”), le Valeur Pourcentage de 1 à 100, et un facultatif Couleur de la barre pour cette barre. Faites glisser les éléments pour les réorganiser Le champ titre accepte les balises dynamiques Elementor.
- N'importe quel nombre de barres dans un widget.
- Chaque barre a son propre titre, pourcentage et couleur.
- Les barres sans leur propre couleur utilisent la couleur de la barre active de l'onglet Style.
Stylez les barres, les titres et les pourcentages
Le Barre Stats la section de style définit la couleur de la barre BG (la piste vide), la couleur de la barre active (le remplissage), l'espacement vertical entre les barres (5 à 128 px), la hauteur de la barre (1 à 96 px) et le rayon de bordure de la barre de statistiques pour les barres carrées ou en forme de pilule. Stats Titre a l'alignement, la couleur et la typographie, et Statistiques Pourcentage a la couleur et la typographie pour le numéro à l'intérieur de la barre.
- Couleurs séparées pour la piste et le remplissage.
- Rayon de bordure en px ou % pour les barres arrondies.
- Remplissez l'animation une fois lorsque le widget défile ; les valeurs plus élevées prennent plus de temps à remplir.
Barre de progression d'élémenteur par rapport aux barres de progression d'ajout de maître
Elementor dispose d'un widget Progress Bar gratuit qui affiche une barre. Voici comment les deux se comparent.
| Caractéristique | Barre de progression des éléments | Barres de progression Master Addons |
|---|---|---|
| Barres par widget | Un | Autant que vous en ajoutez |
| Couleur par barre | Un widget, une couleur | Oui, par élément répéteur |
| Texte à l'intérieur de la barre | Oui, texte intérieur personnalisé | Pourcentage seulement |
| Animer lorsque vous faites défiler la vue | Oui | Oui |
| Tags dynamiques | Oui | Titre uniquement |
| Coût | Gratuit | Gratuit |
Pour une barre avec un texte intérieur personnalisé, le propre widget d'Elementor suffit Pour une liste de compétences, un widget Progress Bars les maintient alignées. Connexes : Barre d'avancement pour cercles et jauges, Barre de progression de lecture pour la progression du défilement, et Compter pour les nombres animés.
Questions fréquemment posées pour les barres de progression
Les barres s'animent-elles lorsqu'elles défilent en vue ?
Oui. Chaque barre remplit de zéro à sa valeur une fois que le widget entre dans la fenêtre d'affichage Le remplissage prend environ 20 millisecondes par point de pourcentage, donc une barre de 90 % prend moins de deux secondes Il n'y a pas de paramètre pour modifier la vitesse ou désactiver l'animation.
Le widget Progress Bars est-il gratuit ?
Oui. Progress Bars fait partie du plugin gratuit Master Addons avec chaque contrôle de contenu et de style Il n'y a pas de version Pro de ce widget.
Les barres de progression sont-elles réactives sur mobile ?
Oui. Les barres prennent toute la largeur de leur colonne, elles rétrécissent donc avec l'écran La hauteur de la barre et l'espacement vertical ne sont pas des commandes réactives, mais la typographie du titre et du pourcentage peut utiliser des tailles de police plus petites sur tablette et mobile.
Puis-je utiliser un dégradé pour la couleur de la barre active au lieu d'une couleur unie ?
No. Bar BG Color, Active Bar Color et la couleur propre de chaque barre prennent une couleur unie seulement Si vous avez besoin d'un remplissage dégradé, contactez-nous et nous pouvons suggérer un extrait CSS.
Widgets et extensions d'éléments tendance
Construisez des sites Web sophistiqués en moins de temps.
Glassmorphisme
Extras de conteneurs
Modèles
![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]](https://d1asvmc6qcowgk.cloudfront.net/wp-content/uploads/2026/09/15102930/post-page-duplicator-768x403.webp)
Duplicateur de messages/pages
