Les chiffres convainquent plus vite que les phrases : notifications 5.5 K délivrées, vues vidéo 120 M. Le Widget Compteur dans Modules complémentaires principaux pour Elementor place ces statistiques dans une rangée de cartes qui comptent à partir de zéro lorsque la page se charge, 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 compte à partir de zéro lorsque la page se charge, 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+. La carte reste 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 (1, 2, 3, 4 ou 6), 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 en direct les nombres comptent à partir de zéro pendant environ deux secondes après le chargement de la page, puis se règlent 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+ indique plus propre que compter à neuf chiffres.
- Placez les compteurs en haut de la page. Le décompte s'exécute une fois lorsque la page se charge, de sorte que les compteurs bien en dessous du pli peuvent se terminer avant que quiconque ne leur fasse défiler la page.
- 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 lorsque la page se charge, 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 comptent de zéro à la valeur que vous définissez dès que la page se charge, sur environ deux secondes L'animation joue une fois et n'attend pas que le widget défile dans la vue.
Puis-je modifier le nombre de compteurs assis d'affilée ?
Oui. La liste déroulante Colonnes dans Contrat de comptage offre 1, 2, 3, 4 ou 6 colonnes avec 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.
En quoi Counter Up est-il différent du widget Elementor Counter ?
Compteur d'élémentor affiche un nombre par widget et vous permet de définir le nombre de départ, la durée et le séparateur de milliers, et il compte lorsque le nombre défile dans la vue Counter Up contient de nombreux compteurs dans un widget avec des icônes, un style de carte et 1, 2, 3, 4 ou 6 colonnes, et il compte une fois sur le chargement de la page.
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 Le Page produit de Counter Up le compare avec le widget Compteur d'éléments.
