Les chiffres convainquent plus vite que les phrases : notifications 5.5 K délivrées, vues vidéo 120 M. Le Compter widget dans Modules complémentaires principaux pour Elementor place ces statistiques dans une rangée de cartes qui comptent à partir de zéro lorsque les visiteurs y font défiler, chacune avec une icône, un suffixe comme K+ ou M+, et son propre style.
Ce guide crée une section de quatre statistiques à partir de zéro : les éléments, les chiffres, les icônes, la mise en page et le style des cartes, se terminant par les compteurs finis sur la page en direct.
Ce que fait le widget Counter Up #
Un widget contient un ensemble d'éléments de compteur Chaque élément est une statistique : un nombre qui anime à partir de zéro lorsqu'il défile dans la vue, un préfixe ou un suffixe autour, un titre en dessous et une icône ou une image facultative en haut. Le widget dispose les éléments en colonnes et les stylise en groupe, de sorte qu'une bande de statistiques reste cohérente sans tripoter par carte.
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.
- Le widget Counter Up activé dans le panneau d'options Master Addons, sous Widgets de base.
- Vos chiffres réels Une section de statistiques avec des chiffres inventés fait plus de mal que pas de statistiques du tout.
Comment ajouter le widget Compter Up #
Dans l'éditeur Elementor, recherchez le Éléments panneau pour Compter et faites-le glisser sur la page Elle se charge avec des exemples d'éléments comptant déjà sur le canevas, donc l'animation est visible dès la première seconde.
Configurez chaque élément du compteur #
Ouvrir Contrer le contenu et cliquez sur un élément dans la liste Chacun porte l'ensemble complet des contrôles par statistique :
- Type: aucun, icône ou image au-dessus de la statistique. L'icône ouvre la bibliothèque Elementor ; l'image ouvre la médiathèque.
- Titre: l'étiquette sous le numéro, comme “Notifications Livrées”.
- Préfixe de numéro et suffixe : texte autour du numéro Un préfixe“$” ou un suffixe“K+” transforme 5,5 en $5,5 ou 5,5 K+.
- Numéro: la valeur à laquelle grimpe le compteur Les décimales fonctionnent, donc 5,5 avec un suffixe K+ indique 5,5 K+.
- Contexte: une couleur de carte par article, pour quand une statistique doit se démarquer.
L'astuce du suffixe garde les grands nombres courts : au lieu d'animer jusqu'à 120 000 000, la démo compte jusqu'à 120 avec un suffixe M+. Animation plus rapide, carte plus propre et personne ne compte les zéros à vérifier.
Le par article Contexte colore juste cette carte Utile pour mettre en surbrillance une statistique de titre, ou sautez-la et laissez le style de boîte partagé gérer les quatre :
Choisissez les colonnes et la position du contenu #
Sous la liste des articles, Colonnes définit le nombre de compteurs partageant une ligne, avec une bascule réactive par appareil. Position du contenu place le titre par rapport au numéro : haut, gauche, droite ou bas La démo essaie 2 colonnes avec numéro et titre côte à côte, puis se recolle sur 4 colonnes empilées.
Réglez les icônes #
Le Paramètres d'icônes la section contrôle le bloc d'icônes sur chaque carte : Position de l'icône/de l'image (gauche, haut ou droite de la statistique), Taille de l'icône, et Cercle d'icônes ou taille de l'image pour le disque coloré derrière le glyphe La démo exécute des icônes de 30 pixels sur des cercles de 86 pixels.
Style les cartes #
Dans le Style onglet, Style de boîte à comptoir couvre le look de carte partagée : Couleur d'arrière-plan, Rembourrage, Marge, Type de frontière, Rayon Frontière, et Ombre de boîte. La démo atterrit sur des cartes rose tendre avec un remplissage et une marge de 20 pixels, qui séparent les quatre statistiques sans bordures dures.
Stylez les chiffres, les titres et les icônes #
Le Style de contenu section se divise en quatre groupes, un par élément sur la carte :
- Style d'icône : la couleur du glyphe et la couleur du cercle derrière elle La démo tourne les cercles en violet profond avec des icônes blanches.
- Style de numéro : couleur et typographie pour la statistique elle-même, le plus gros texte de la carte.
- Préfixe de numéro : sa propre couleur, typographie, taille et marge, de sorte qu'un symbole monétaire peut être plus petit que le nombre.
- Style de titre : couleur, typographie et marge de l'étiquette.
Le résultat sur la page #
Sur la page live les nombres montent de zéro au fur et à mesure que la section défile dans la vue, puis se fixent sur les valeurs finales Voici la bande finie :
Cas d'utilisation courants #
- Bandes statistiques d'entreprise: clients servis, projets livrés, années d'activité.
- Sections de preuve SaaS: utilisateurs, disponibilité, intégrations.
- Numéros de portefeuille: campagnes en cours d'exécution, revenus générés, heures d'édition.
- Impact à but non lucratif: repas livrés, bénévoles, fonds récoltés.
- Cours et pages communautaires: étudiants, cours, avis.
Conseils pour de meilleurs compteurs #
- Utilisez des suffixes pour les grands nombres. Compter à 120 avec un suffixe M+ anime plus rapidement et lit plus proprement que compter à neuf chiffres.
- Gardez l'ensemble à trois ou quatre statistiques. Six compteurs s'affrontent ; quatre se font lire.
- Menez avec le chiffre le plus fort. Les visiteurs lisent de gauche à droite et peuvent ne pas terminer la rangée.
- Faites correspondre les cercles d'icônes à votre palette. La couleur du cercle est le choix de style le plus visible sur la carte ; le violet sur rose de la démo fonctionne car les deux proviennent d'une seule palette.
- Vérifiez le nombre de colonnes mobiles. Quatre colonnes sur un téléphone pressent les chiffres ; le contrôle réactif Columns le corrige en un clic.
Tutoriel Vidéo #
Si vous souhaitez voir le widget Counter Up en action, cette vidéo parcourt la configuration complète, du premier élément au groupe de statistiques animées sur la page live :
Foire aux questions #
Qu'est-ce que le widget Counter Up dans Master Addons ?
Il s'agit d'un widget Elementor pour les sections de statistiques animées Chaque élément contient un nombre qui compte à partir de zéro sur le défilement, plus un préfixe, un suffixe, un titre et une icône ou une image facultative. Les colonnes, le dimensionnement des icônes et le style des cartes sont partagés sur l'ensemble.
Comment afficher 120 M+ au lieu de 1200000000 ?
Définissez le nombre sur 120 et le suffixe du nombre sur M+. Le compteur anime sur 120 et affiche 120 M+. Il en va de même pour les milliers K+ et les valeurs décimales comme 5,5 avec un suffixe K+.
Chaque compteur peut-il avoir sa propre icône et sa propre couleur ?
Oui. Chaque élément choisit sa propre icône ou image via le contrôle Type, et chaque élément a sa propre couleur d'arrière-plan La taille partagée des icones, la taille du cercle et le style des cartes proviennent des paramètres d'icônes et de l'onglet Style.
Quand commence l'animation de comptage ?
Les nombres s'animent lorsque le widget défile dans la fenêtre, en comptant de zéro à la valeur que vous définissez Les visiteurs arrivant dans la section voient le compte à rebours jouer une fois.
Puis-je modifier le nombre de compteurs assis d'affilée ?
Oui. La liste déroulante Colonnes dans Contrer le contenu définit le nombre de lignes et comporte une bascule réactive, de sorte qu'une bande de bureau à quatre colonnes peut tomber à deux colonnes sur les tablettes et une sur les téléphones.
Envelopper #
Le widget Counter Up transforme les nombres unis en une bande de statistiques qui se déplace : icônes par élément, préfixes et suffixes, colonnes partagées et style de carte, et une animation de décompte qui attire exactement le regard une fois Parcourir l'ensemble complet de Widgets et extensions Master Addons pour voir ce qui est expédié d'autre avec le plugin, et vérifier le page de tarification pour les extras Pro comme les motifs.
