Looking for an easy way to add number count animations to your WordPress website?
Animated counters are a great way to add interest and direction to your site. They illustrate important statistics, highlight accomplishments, and make your web page more engaging.
In this guide, I’ll show the best ways to add number count animations to WordPress without coding.
How to Add Number Count Animations in WordPress:
What Are Number Count Animations?
Number count animations show numbers increasing or decreasing in real-time. They’re commonly used on websites to highlight stats, milestones, or key numbers, drawing attention as the numbers count up or down to a set goal.
Vous pouvez utiliser les compteurs de nombres animés de différentes manières :
- Indiquez le nombre de vos clients
- Afficher le nombre de projets que vous avez menés à bien
- Présenter le nombre total d'abonnés au courrier électronique
- Célébrez votre nombre d'années d'activité
Statistics like this are effective social proof. Consumers generally find stats and figures trustworthy, which can help them convert quicker than usual.
À qui feriez-vous le plus confiance : à une marque qui compte 22 clients ou à une marque qui compte plus de 1 213 437 clients ?

With that being said, here are 2 easy ways to add number count animations to your WordPress website.
1. Add Number Count Animations with SeedProd
For the first method, I’ll show you how to add animated number counters to your WordPress site using SeedProd.

SeedProd est le meilleur constructeur de sites web et de pages d'atterrissage pour WordPress. Son éditeur visuel en direct vous permet de créer facilement tout type de mise en page WordPress sans code.
Vous pouvez utiliser SeedProd pour réaliser les opérations suivantes :
- Thèmes WordPress personnalisés
- Pages d'atterrissage à fort taux de conversion
- Pages à venir
- Écrans du mode maintenance
- Pages de connexion WordPress
- Conception de pages 404 personnalisées
- Pages de contenu telles que "à propos", "services" et "contact
- Et bien d'autres choses encore.
La mise en route est rapide et facile grâce à des kits complets de sites web et des modèles de pages d'atterrissage. De plus, vous pouvez personnaliser visuellement n'importe quel design avec des blocs WordPress tels que des compteurs numériques animés, des animations de texte, des boutons d'appel à l'action, des galeries réactives et des personnalisations en 1 clic.
Étape 1. Installer et activer SeedProd
First, go to the SeedProd pricing page and choose your plan. For this guide, we’ll use SeedProd Pro for its drag-and-drop WordPress Theme Builder.
Ensuite, connectez-vous au tableau de bord de votre compte et cliquez sur l'onglet Téléchargements. Sur cet écran, cliquez sur le bouton Télécharger le plugin SeedProd, et copiez votre clé de licence.

Allez maintenant sur votre site web WordPress et téléchargez le fichier .zip du plugin. Si vous avez besoin d'aide pour cette étape, suivez ces instructions sur l'installation et l'activation d'un plugin WordPress.
After installing and activating the plugin, go to SeedProd’s Settings and enter the license key you copied earlier.

Cliquez ensuite sur le bouton Vérifier la clé pour enregistrer les détails de votre licence.
Étape 2. Créer une mise en page WordPress
L'étape suivante consiste à créer une nouvelle mise en page dans WordPress. Vous pouvez le faire avec SeedProd en créant un nouveau thème WordPress à partir de zéro ou en créant une page d'atterrissage autonome.
Les deux méthodes utilisent le puissant constructeur de pages par glisser-déposer pour personnaliser votre design. Et vous pouvez utiliser le bloc compteur de SeedProd sur les thèmes et les pages d'atterrissage.
Pour vous aider à prendre votre décision, réfléchissez aux fonctionnalités que vous souhaitez pour votre site web.
Le constructeur de thèmes est un excellent choix pour créer un site web entièrement personnalisé à partir de zéro, sans code.

Cependant, si vous souhaitez conserver votre thème WordPress actuel et utiliser SeedProd pour créer des pages individuelles, le Landing Page Builder est votre meilleure solution.

Vous pouvez suivre ces tutoriels étape par étape pour chaque option :
Ces deux guides vous aideront à choisir un modèle et à comprendre l'éditeur visuel. Une fois que vous serez familiarisé avec son fonctionnement, revenez à l'étape 3 pour obtenir des instructions sur l'ajout du bloc Compteur à votre conception.
Remarque : nous utiliserons le Theme Builder avec le kit de site Web Headphone Shop pour ce tutoriel.
Etape 3. Ajouter le bloc compteur SeedProd
L'étape suivante consiste à ajouter le bloc Counter à votre page d'atterrissage ou au design de votre thème WordPress. Cliquez donc sur Modifier le design sur la page que vous souhaitez personnaliser pour l'ouvrir dans l'éditeur visuel.
Comme nous personnalisons un thème WordPress, nous commencerons par modifier le modèle de page d'accueil:

Lorsque vous ouvrez votre dessin ou modèle, vous voyez une mise en page similaire à la capture d'écran suivante :

Il comporte des blocs et des sections sur la gauche et un aperçu en direct de votre page sur le côté droit.
Vous pouvez cliquer n'importe où sur votre aperçu pour modifier le contenu et personnaliser n'importe quel élément du modèle.

Il est également très facile d'ajouter de nouveaux éléments à votre page par glisser-déposer. Nous allons vous montrer comment le faire avec le bloc Counter.
Dans le panneau de gauche, recherchez le bloc Counter et faites-le glisser sur votre design WordPress.

Une fois le bloc en place, vous pouvez cliquer dessus pour voir les différentes options de personnalisation.

Avec le bloc compteur, vous pouvez :
- Ajouter une valeur de comptage de départ et de fin
- Saisir le préfixe et le suffixe d'un numéro
- Définir la durée de l'animation
- Choisissez un séparateur de décimales ou d'espaces
- Ajouter un titre de compteur
- Modifier l'alignement sur les téléphones portables et les ordinateurs de bureau
Plus, clicking the Advanced tab offers even more settings for styling your counter. For instance, you can change the counter and title fonts and colors, add shadow effects, adjust the spacing, and select visibility options for mobile and desktop devices.

De plus, il n'est pas nécessaire d'utiliser des feuilles de style CSS, HTML, Jquery ou Javascript pour donner à votre compteur l'aspect que vous souhaitez. Il vous suffit de pointer et de cliquer pour styliser votre compteur numérique, et votre feuille de style se met à jour automatiquement.
Continuez à personnaliser votre page jusqu'à ce que vous soyez satisfait de son aspect. Cliquez ensuite sur le bouton Enregistrer dans le coin supérieur droit pour enregistrer vos personnalisations.

Étape 4. Publier vos compteurs de nombres animés
Après avoir ajouté vos compteurs de chiffres animés à votre page personnalisée et enregistré vos modifications, vous êtes prêt à les mettre en ligne pour les visiteurs de votre site web.
Si vous créez une page d'atterrissage autonome, il vous suffit de cliquer sur la flèche vers le bas du bouton Enregistrer et de sélectionner Publier. Mais si vous utilisez le concepteur de thèmes, il y a une étape supplémentaire.
Quittez le constructeur de pages en cliquant sur l'icône X, puis, à partir du tableau de bord du constructeur de thèmes, mettez l'interrupteur Enable SeedProd Theme sur la position "Yes".

Voilà, c'est fait ! Vous pouvez maintenant prévisualiser votre conception pour voir l'animation de votre compteur de numéros en action :

2. Add Number Count Animations Using Counter Number
If you’re not interested in using a drag-and-drop page builder to customize your WordPress site, there is another way to add number count animations to your site without writing code.
Dans ce cas, vous pouvez utiliser un plugin gratuit de compteur de nombres WordPress comme le plugin Counter Number de WPShopMart. Il vous permet d'ajouter des compteurs entièrement réactifs à votre site web pour afficher des statistiques sur les articles, les pages et les zones de la barre latérale.
Cette méthode n'inclut pas autant d'options de personnalisation que la précédente, mais c'est un moyen facile d'ajouter un simple compteur de chiffres animé à votre site web avec un shortcode.
Pour commencer, téléchargez, installez et activez le plugin Counter Number sur votre site WordPress.

Allez ensuite dans Numéros de compteur " Tous les compteurs dans votre zone d'administration WordPress, et cliquez sur le bouton Ajouter un nouveau compteur.

Sur l'écran suivant, vous verrez un simple créateur de compteur par glisser-déposer. Saisissez un titre pour votre compteur, puis faites défiler vers le bas jusqu'à la section Ajouter un numéro de compteur.
There are already 3 counters set up by default. We’ll delete 2 of them by clicking the trashcan icon, then edit the remaining counter.
Dans les paramètres du compteur, vous pouvez ajouter un titre, sélectionner une icône de compteur et saisir une valeur numérique.

Ensuite, dans la partie droite, vous pouvez modifier les éléments suivants :
- Couleur et taille de l'icône
- Couleur et taille du titre du compteur
- Numéro de compteur, couleur et taille
- Poids des polices
- Famille de polices

Vous pouvez également masquer l'icône du compteur si vous le souhaitez. Lorsque vous êtes satisfait de l'aspect de votre compteur, copiez le shortcode, puis cliquez sur Publier.

Maintenant que vous êtes prêt à ajouter votre compteur à un article ou une page, créez ou modifiez une page ou un article WordPress. Ensuite, trouvez la section de la page que vous voulez, et collez votre shortcode directement dans un nouveau bloc de paragraphe.

Enfin, cliquez sur Mettre à jour ou Publier. Lorsque vous prévisualisez votre page, le compteur de chiffres augmente automatiquement.

Et voilà !
Nous espérons que ce guide vous a aidé à trouver la meilleure méthode pour ajouter des compteurs de nombres animés à WordPress.
Prêt à créer des compteurs de chiffres personnalisés sans code ?
Vous pouvez également consulter les tutoriels WordPress suivants :
- Comment ajouter des heures d'ouverture à WordPress
- Comment atténuer une image d'arrière-plan sans CSS
- Comment ajouter des widgets Twitter à votre site WordPress
Merci de votre lecture ! Nous aimerions connaître votre avis, alors n'hésitez pas à laisser un commentaire pour nous faire part de vos questions et de vos réactions.
Vous pouvez également nous suivre sur YouTube, X (anciennement Twitter) et Facebook pour obtenir d'autres contenus utiles au développement de votre entreprise.
J'aimerais pouvoir déterminer si je veux que la décimale indique le millier ou le dixième. Par exemple, 1,400 million de dollars contre 1,4 million de dollars.
Cela dépend généralement de vos préférences personnelles, de Kimber, et de ce qui vous semble le plus logique pour vos utilisations. Personnellement, je suis partisan de 1,4 million de dollars, car c'est plus concis.