Les barres de compétences, les objectifs de financement et le statut du projet se lisent tous mieux en tant que visuel que comme un numéro enfoui dans une phrase. Le gratuit Widget Bar de progression dans Modules complémentaires principaux pour Elementor vous offre une barre animée avec un titre et un pourcentage, ainsi qu'une liste déroulante Style Presets qui bascule entre une ligne simple, une ligne avec une bulle, un cercle complet et une jauge en demi-cercle.
Vous définissez un titre et une valeur, choisissez un préréglage, puis colorez la barre avant, la barre arrière et la valeur pour qu'elles correspondent à votre marque. Ce guide couvre chaque paramètre du widget.
Ce que fait le widget Progress Bar #
Le widget rend un indicateur de progression : un titre, une valeur en pourcentage et une barre qui se remplit à cette valeur lorsque la page se charge. Le Préréglages de style la baisse modifie la forme, de sorte que la même valeur peut s'afficher sous la forme d'une ligne horizontale, d'une ligne avec une bulle flottante, d'un cercle de beignets ou d'une jauge en demi-cercle.
Il a trois onglets. Contenu détient le titre et la valeur. modeler contrôle le préréglage, les couleurs des barres avant et arrière, la bulle, le titre et le texte de valeur. Avancé transporte les options habituelles d'espacement et de visibilité des éléments.
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.
- Les étiquettes et pourcentages que vous souhaitez afficher, comme WordPress 60 % ou Java 85 %.
Comment ajouter le widget Progress Bar #
Dans l'éditeur Elementor, ouvrez le Éléments panneau et recherche pour Barre d'avancement(ou faites défiler vers la section Addons principaux) (les widgets portent un badge MA violet).Drag it on your page and it loads with a single bar ready to edit.
Tête haute : il existe deux widgets similaires. Barre d'avancement est une seule barre (ce guide), et Barres d'avancement (le Widget Barres de progression) empile plusieurs barres à l'intérieur d'un widget Pour quelques barres indépendantes dans différents styles, la seule Progressbar est le choix flexible.
Définissez le titre et la valeur #
Ouvrir le Contenu onglet. Il n'y a que deux champs, ce qui permet une configuration rapide.
- Titre: l'étiquette au-dessus de la barre, comme WordPress ou Design.
- Valeur: le pourcentage que la barre remplit à, de 0 à 100.
Puisque chaque Progressbar est une barre, vous construisez un ensemble en dupliquant le widget Faites-le un clic droit et choisissez Dupliquer (ou appuyez sur Ctrl/Cmd + D), puis changez le titre et la valeur sur chaque copie C'est ainsi que les barres WordPress et Java ci-dessus se sont retrouvées côte à côte.
Choisissez un préréglage de style #
Passer au modeler onglet et ouvrez Styles généraux. Le Préréglages de style le dropdown est l'endroit où vous choisissez la forme Le Bulle de ligne preset ajoute une bulle flottante qui indique le pourcentage et roule à la fin du remplissage.
- Préréglages de style : Ligne, bulle de ligne, cercle et ventilateur (une jauge en demi-cercle).
- Couleur des bulles : la couleur de la bulle de pourcentage sur la bulle préréglée.
- Position de la bulle : déplacez la bulle vers le haut ou vers le bas contre la barre.
Préréglages de jauge circulaire et demi-cercle #
Le Cercle preset tire un beignet complet avec le pourcentage au milieu, qui convient à un bloc de statistiques compact.
Le Ventilateur preset dessine une jauge en demi-cercle, un bon ajustement pour une note de style tableau de bord ou un look de compteur de vitesse.
Stylez les parties de barre #
Le modeler tab divise le widget en parties que vous pouvez styliser vous-même : Styles généraux, Titre, Barre avant, Barre arrière, et Valeur. Si le gratuit Modèles l'extension est allumée, a Modèles la section pour les superpositions décoratives apparaît également dans cet onglet.
- Titre: couleur et typographie pour l'étiquette.
- Barre avant: la couleur et la largeur de la partie remplie.
- Barre arrière : la couleur et la largeur de la piste non remplie derrière elle.
- Valeur: couleur et typographie pour le texte en pourcentage.
Ouvrir Barre avant pour définir la couleur et la largeur de remplissage C'est ce qui porte la couleur de votre marque sur toute la barre ou la jauge.
Cas d'utilisation courants #
- Barres de compétences sur une page d'environ ou de CV (WordPress 90 %, Design 75 %).
- Financement ou objectifsmètres montrer à quel point une campagne est proche.
- Stats du cercle dans un bloc de services ou de résultats.
- Jauges demi-cercle pour les scores, les évaluations ou les widgets du tableau de bord.
- Statut du projet barres sur une page client ou portefeuille.
Conseils pour travailler avec le widget Progress Bar #
- Dupliquer, puis modifier. Stylez une barre comme vous le souhaitez, puis copiez-la et modifiez le titre et la valeur.
- Gardez l'échelle honnête. La valeur est un pourcentage, donc 60 signifie 60 pour cent plein.
- Correspondre au contraste des barres avant et arrière. Une piste claire derrière un remplissage de couleur de marque se lit clairement.
- Utilisez la bulle pour les chiffres exacts. Le préréglage Line Bubble place le pourcentage à droite sur le remplissage.
- Choisissez la forme pour le contexte. Lignes pour les listes de compétences, les cercles et les fans pour des statistiques uniques remarquables.
Voir le tutoriel vidéo #
Préférez suivre à l'écran ? le didacticiel vidéo ci-dessous parcourt l'élément Progress Bar du début à la fin, montrant comment fonctionne chaque style prédéfini, couleur et valeur dans l'éditeur Elementor.
Foire aux questions #
Qu'est-ce que le widget Progress Bar dans Master Addons ?
C'est un widget Elementor qui montre un indicateur de progression animé avec un titre et un pourcentage Un dropdown Style Presets bascule entre une ligne, une ligne avec une bulle, un cercle complet et une jauge en demi-cercle, et vous colorez chaque partie du panneau Elementor.
Quels styles de barre de progression le widget inclut-il ?
Quatre préréglages : Ligne, Bulle de Ligne, Cercle, et Ventilateur La ligne est une barre horizontale simple, Line Bubble ajoute une bulle de pourcentage flottante, Circle tire un beignet complet avec la valeur au centre, et Fan dessine une jauge de demi-cercle La valeur reste la même sur tous.
Puis-je faire une barre de progression circulaire ou de jauge dans Elementor ?
Oui. Définissez les préréglages de style sur Circle pour un beignet complet avec le pourcentage au milieu, ou sur Ventilateur pour une jauge en demi-cercle. Les deux s'animent à la valeur que vous définissez et peuvent être colorés à travers les sections Barre avant et Barre arrière dans l'onglet Style.
Comment ajouter plusieurs barres de progression ?
Chaque widget Progressbar est une barre, alors dupliquez le widget et modifiez le titre et la valeur sur chaque copie Placez les copies dans des colonnes pour une rangée de barres de compétences Pour plusieurs barres gérées à l'intérieur d'un widget, utilisez plutôt le widget Progressbars séparé.
La barre de progression anime-t-elle ?
Oui, une fois. La barre se remplit de zéro à sa valeur en une seconde environ lorsque la page se charge, et non lorsqu'elle défile vers la vue, donc les barres placées près du haut affichent le meilleur mouvement. Il fonctionne de la même manière sur les préréglages de ligne, de cercle et de ventilateur.
Envelopper #
Le widget Progress Bar transforme un pourcentage simple en une ligne animée, une bulle, un cercle ou une jauge Définissez un titre et une valeur, choisissez un préréglage, puis coloriez la barre avant, la barre arrière et la valeur pour correspondre à votre conception. Pour un aperçu et une comparaison avec la propre barre de progression d'Elementor, consultez le Widget de barre de progression de cercle d'élément page. Pour les widgets associés, voir Barres de progression pour les barres de compétence, Barre de progression de lecture pour un indicateur de défilement, le Widget Compteur et le Widget de boîte d'informations: parcourez le tableau complet Widgets et extensions Master Addons&, et vérifiez le page de tarification pour ce que chaque plan comprend.
