Widget de barre de progression de cercle d'élémentateur gratuit
Le widget Progress Bar gratuit d'Elementor trace une ligne droite Le widget Progress Bar dans Master Addons est également gratuit, et il peut dessiner la barre comme une ligne, une ligne avec une bulle de pourcentage, un cercle complet ou un demi cercle de jauge de ventilateur Donnez-lui un titre et une valeur de 0 à 100, choisissez un style préréglé, puis coloriez la barre remplie et la piste derrière elle Il fonctionne bien pour les objectifs de financement, la progression du cours, les notes et les statistiques uniques Pour une liste de barres de compétences à l'intérieur d'un widget, utilisez Barres de progression. Pour un bar qui se remplit lorsque les visiteurs défilent sur un poteau, utilisez Barre de progression de lecture.
Comment ajouter une barre de progression circulaire dans Elementor
Le widget fait partie du plugin gratuit Master Addons, il vous suffit donc d'Elementor et Master Addons.
- Installer et activer Modules complémentaires principaux de WordPress.org.
- Modifiez votre page avec Elementor et recherchez dans le panneau widgets Barre d'avancement.
- Faites-le glisser dans une colonne Pour une ligne de cercles, mettez un widget dans chaque colonne.
- Dans Contenu, tapez le Titre et définissez la Valeur de 0 à 100.
- Dans Style, Styles généraux, définissez les préréglages de style sur Cercle ou sur Ventilateur pour une jauge demi-cercle.
- Définissez les couleurs et les largeurs de la barre avant et de la barre arrière, puis stylisez le texte Titre et valeur.
Chaque paramètre est couvert dans le Paramètres du widget Progress Bar guide.
Préréglages de ligne, de bulle de ligne, de cercle et de ventilateur
Choisissez la forme dans Style, Styles généraux, Préréglages de style. Line est une barre horizontale plate avec le titre au-dessus. Line Bubble ajoute une étiquette ronde qui glisse jusqu'au point de remplissage et montre le pourcentage. Circle dessine un anneau complet avec la valeur au milieu et Fan dessine une jauge demi-cercle.
- Commutez les préréglages à tout moment et le titre, la valeur et les couleurs restent tels quels.
- Couleur de bulle règle le remplissage de la bulle sur Line Bubble.
- Position de bulle déplace la bulle vers le haut ou vers le bas contre la barre.
Titre et valeur
L'onglet Contenu comporte deux champs. Titre est-ce que l'étiquette, comme l'objectif de collecte de fonds ou la progression du cours. Valeur est un nombre de 0 à 100 (60 par défaut) qui définit la distance à laquelle la barre, l'anneau ou la jauge se remplit, et il s'affiche en pourcentage.
- Le remplissage s'anime de zéro à votre valeur sur environ une seconde lorsque la page se charge.
- Il n'y a pas de maximum personnalisé, donc 45 des 60 leçons sont classées à 75.
- Un widget est un indicateur Dupliquez-le pour construire une rangée de cercles ou une pile de lignes.
Styling de barre avant et de barre arrière
Barre avant est la partie remplie et Barre arrière est la piste derrière elle Chacun a sa propre Couleur et un numéro de Largeur pour l'épaisseur de course, 5 par défaut Une barre avant épaisse sur une piste légère plus fine est facile à lire, en particulier sur les préréglages Circle et Fan.
- Les couleurs par défaut sont le violet (#704aff) sur une piste gris clair (#ddd).
- Les couleurs sont solides Il n'y a pas d'option de remplissage de dégradé.
- La largeur est un numéro pour tous les appareils, alors vérifiez le résultat sur mobile.
Texte Titre et Valeur
Le Titre et Valeur les sections de style ont chacune un sélecteur de couleurs et un groupe complet de typographie, de sorte que le pourcentage peut être plus grand ou plus gras que l'étiquette. Sur les préréglages Circle et Fan, la valeur se situe à l’intérieur de la forme.
- Le titre est publié sous forme de titre H6 et par défaut en noir.
- La couleur de valeur et la typographie s'appliquent également à l'étiquette Line Bubble.
Barre de progression des éléments par rapport à la barre de progression des modules principaux
Les deux widgets sont gratuits La barre de progression d'Elementor est une barre droite qui peut contenir une ligne de texte à l'intérieur de celle-ci Master Addons ajoute des formes rondes, donc le choix se résume surtout à la forme dont vous avez besoin.
| Caractéristique | Barre de progression des éléments | Barre de progression Master Addons |
|---|---|---|
| Prix | Gratuit en Elementor | Gratuit dans Master Addons |
| Formes | Ligne uniquement | Ligne, bulle de ligne, cercle et ventilateur |
| Valeur | Curseur à pourcentage avec balises dynamiques | Nombre de 0 à 100 |
| Texte | Titre avec choix de balise HTML, Pourcentage d'affichage, Texte intérieur | Titre (H6) et une étiquette de pourcentage |
| Taille de barre | Hauteur et rayon de bordure | Largeur de la barre avant et de la barre arrière |
| Couleurs | Couleur de la barre et couleur de fond | Couleurs de la barre avant et de la barre arrière, couleur bulle |
| Animation | Se remplit lorsque la barre défile en vue | Remplit lorsque la page se charge |
Utilisez le widget d'Elementor pour une ligne simple qui s'anime lorsque les visiteurs l'atteignent ou tire sa valeur d'une balise dynamique Utilisez Master Addons lorsque vous voulez un anneau ou une jauge Widgets gratuits associés : Barres de progression pour les barres de compétences dans un widget, Barre de progression de lecture pour un indicateur de progression de défilement, et Compter pour les nombres animés.
Foire aux questions pour la barre de progression
Quelle est la différence entre Progress Bar, Progress Bars et Reading Progress Bar ?
Progress Bar (ce widget) est un indicateur affiché sous forme de ligne, de ligne avec une bulle, un cercle ou une jauge de ventilateur. Le Élément Barres de progression est une liste de barres de compétences horizontales que vous ajoutez dans un widget. Barre de progression de lecture est une extension qui montre jusqu'où un visiteur a parcouru la page.
La barre de progression s'anime-t-elle lorsqu'elle défile en vue ?
Non. Le remplissage s'étend de zéro à votre valeur en une seconde environ dès que la page se charge, donc une barre loin dans la page peut se terminer avant que quiconque ne la voie. La propre barre de progression d'Elementor et le widget Barres de progression Master Addons commencent tous deux à se remplir lorsqu'ils sont visibles.
Le widget Master Addons Progress Bar est-il gratuit ?
Oui. Il est livré avec le plugin gratuit Master Addons sur WordPress.org, et les quatre préréglages sont inclus sans licence Pro.
Puis-je faire une barre de progression circulaire pour un score sur 100 ?
Oui. Définissez les préréglages de style sur Cercle et Value sur le score, par exemple 85. l'anneau se remplit à 85 pour cent avec 85 % au milieu Pour un score sur un autre nombre, convertissez-le d'abord en pourcentage, puisque le widget n'a pas de maximum personnalisé.
Widgets et extensions d'éléments tendance
Construisez des sites Web sophistiqués en moins de temps.
Glassmorphisme
Extras de conteneurs
Modèles
Duplicateur de messages/pages
