Barres de progression
Les chiffres sont révélateurs, mais les visuels se vendent Lorsque vous avez besoin de montrer votre expertise, l'achèvement de projet ou les objectifs de campagne, un pourcentage simple tombe à plat. L'élément Master Addons Progressbars transforme les statistiques en visuels clairs et convaincants. Créez des barres uniques ou des groupes entiers pour présenter vos compétences, vos objectifs de collecte de fonds ou les jalons de processus. Contrôlez la valeur, la couleur et le style de chaque barre de manière indépendante. Ensuite, concevez les étiquettes et les chiffres pour correspondre à votre site. C'est le moyen le plus simple d'ajouter de la crédibilité et de la clarté, prouvant les progrès en un seul coup d'œil.
Vous recherchez plutôt un seul cercle ou une seule jauge ? Utilisez le Widget Bar de progression avec ses préréglages Circle et Fan Pour un bar qui se remplit au fur et à mesure que les visiteurs défilent dans un poteau, utilisez Barre de progression de lecture.
Gestion de la barre de progression et contrôle de la valeur individuelle
Besoin d'une barre ou de dix ? pas de problème Commencez par le répéteur Barres de progression et cliquez sur Ajouter un élément pour créer autant de barres de progression que nécessaire Pour chaque barre, définissez un titre clair (comme “Web Design”) et sa valeur exacte en pourcentage (comme 87).Vous pouvez même attribuer une couleur de barre unique à chacune directement à partir du panneau de contenu Réarranger ou supprimer des barres à tout moment.
- Barres illimitées : ajoutez, supprimez et réorganisez librement les barres de progression avec le bouton + Ajouter un élément.
- Personnalisation de la barre individuelle : définissez un titre, une valeur en pourcentage et une couleur de barre uniques pour chaque barre de la liste.
- Réglage de la valeur en direct : modifiez le nombre de pourcentage à tout moment et la largeur de remplissage de la barre se met à jour automatiquement.
Styling et conception de structure de barre de progression visuelle
Contrôlez la hauteur de la barre de progression pour les rendre audacieuses et épaisses ou minces et subtiles Réglez la couleur BG de la barre (la piste vide) et la couleur active de la barre vibrante (la partie de remplissage).Utilisez les commandes Border Radius pour créer des barres rectangulaires pointues ou des compteurs souples en forme de pilule Ajustez l'espacement vertical entre les barres d'un groupe pour garantir une disposition épurée et facile à lire.
- Système bicolore : définissez indépendamment la couleur d'arrière-plan et la couleur de remplissage active pour un contraste clair.
- Dimensions de la barre : contrôlez la hauteur de la barre et le rayon de bordure pour une forme et des proportions parfaites.
- Espacement intelligent : utilisez l'espacement vertical pour ajouter de la marge de manœuvre entre les barres de progression empilées.
Questions fréquemment posées pour les barres de progression
Puis-je animer les barres pour qu'elles se remplissent lorsque l'utilisateur y fait défiler ?
Il s'agit d'une fonctionnalité standard et attendue pour les barres de progression En règle générale, les barres seraient statiques dans l'éditeur mais animeraient de 0 % à leur valeur définie lorsqu'elles sont à la vue du spectateur sur la page en direct Les addons principaux ont déjà cette fonctionnalité Mais il n'y a pas d'option pour vous de changer l'animation.
Quelle est la meilleure utilisation pour ces barres de progression ?
Ils sont incroyablement polyvalents ! les utilisations courantes incluent :
- Compétences et expertise : sur une page de “About ou CV.
- Statut du projet : Affichage du pourcentage d'achèvement pour les campagnes ou les objectifs.
- Suivi des collectes de fonds : Visualiser les dons par rapport à une cible.
- Tarification et tableaux de caractéristiques : Mise en évidence des limites du plan (par exemple, “Stockage : 80 % utilisé”).
Les barres de progression sont-elles réactives sur mobile ?
Oui. Les barres, leur hauteur, leur espacement et leur typographie de texte doivent toutes être réduites de manière appropriée sur les appareils mobiles. Vous pouvez utiliser le mode d'édition réactif d'Elementor pour affiner la hauteur de la barre ou les tailles de police spécifiquement pour mobile si nécessaire.
Puis-je utiliser un dégradé pour la couleur de la barre active au lieu d'une couleur unie ?
Non. À l'heure actuelle, il n'y a pas d'option pour choisir la couleur dégradée au lieu d'une couleur unie pour Elementor la barre de progression Si vous préférez utiliser la couleur dégradée alors nous avons une solution pour vous S'il vous plaît déposez-nous un message.
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
