Dernières nouvelles de SeedProd

Tutoriels, astuces et ressources WordPress pour développer votre activité

Comment créer des compteurs de nombres animés sur WordPress

How to Add an Animated Number Counter in WordPress (2 Easy Ways) 

Écrit par : avatar de l'auteur Stacey Corrin
avatar de l'auteur Stacey Corrin
Stacey écrit sur WordPress et le marketing numérique depuis plus de 10 ans et sur d'autres sujets depuis bien plus longtemps. Parallèlement, elle est fascinée par la conception de sites web, l'expérience utilisateur et le référencement.
     Reviewed By : avatar de l'évaluateur Turner John
avatar de l'évaluateur Turner John
John Turner est le cofondateur de SeedProd. Il a plus de 20 ans d'expérience dans le domaine des affaires et du développement et ses plugins ont été téléchargés plus de 25 millions de fois.

Want to show off your stats, milestones, or achievements in a more eye-catching way?

With an animated number counter, you can highlight things like total customers, email subscribers, or years in business, and catch your visitors’ attention as the numbers count up in real-time.

In this guide, I’ll show you how to add an animated number counter in WordPress using two tools that don’t require any code.

Quick Summary: How to Add an Animated Number Counter in WordPress

Method 1: Use SeedProd’s Counter Block
Best for full visual control. You can drag and drop animated number counters into any page without writing code.

Method 2: Use the Counter Number Plugin
Best for quick setup with a free plugin. Add animated stat counters using shortcodes in posts, pages, or sidebars.

You can use both methods to show:

  • Total customers
  • Projects completed
  • Email subscribers
  • Years in business

What Are Number Count Animations?

A number count animation is a visual effect that makes numbers count up (or down) in real time. You’ve probably seen them used to highlight stats like total sales, happy customers, or completed projects.

These animated counters help draw attention to key facts, and they’re perfect for building trust. Real numbers feel solid. They show your growth, your reach, and what you’ve already achieved.

Here are a few examples:

  • Show the number of customers you’ve helped
  • Highlight how many projects you’ve finished
  • Display your total email subscribers
  • Celebrate years in business or awards earned

Used well, animated number counters act like a quiet signal: “This business knows what it’s doing.”

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 WordPress website builder (en anglais)

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 :

Getting started is quick and easy with full website kits and landing page templates. Plus, you can customize any design visually with WordPress blocks like animated number counters, text animations, call-to-action buttons, responsive galleries, and 1-click customizations.

É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.

téléchargez seedprod 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.

entrez votre clé de licence

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.

Fichiers de modèles du constructeur de thèmes Seedprod

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.

créer une nouvelle page d'atterrissage

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:

Editer le modèle de page d'accueil SeedProd

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

SeedProd : constructeur de pages par glisser-déposer

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.

Modifier visuellement les éléments de conception

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.

SeedProd Bloc de comptage

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

Réglages du bloc compteur

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.

Options de personnalisation avancée du bloc compteur

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.

Enregistrer les modifications

É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".

activer le thème seedprod

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

Number count animations example

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. 

Installer le plugin WordPress counter number

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.

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.

Modifier les paramètres du compteur

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
Options de personnalisation du compteur

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.

Number counter animation shortcode

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.

Coller le shortcode du compteur de nombre dans la page WordPress

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

WordPress number count animations example

FAQs About WordPress Animated Number Counters

Can I add multiple counters on one page?
Yes! Both SeedProd and Counter Number let you add as many animated counters as you want — side by side or in different sections.
Why isn’t my animation working?
The most common causes are plugin conflicts, caching issues, or missing animation settings. Try disabling other plugins, clearing your cache, or double-checking your counter block settings.
Can I control the animation speed?
Yes. Most tools let you set how fast the number counts using a duration setting (in seconds). For example, you can make it complete in 1 second or slow it down to 5 seconds for dramatic effect.

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 :

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.

avatar de l'auteur
Stacey Corrin Rédacteur
Stacey écrit sur WordPress et le marketing numérique depuis plus de 10 ans et sur d'autres sujets depuis bien plus longtemps. Parallèlement, elle est fascinée par la conception de sites web, l'expérience utilisateur et le référencement.

Divulgation : Notre contenu est soutenu par les lecteurs. Cela signifie que si vous cliquez sur certains de nos liens, il se peut que nous recevions une commission. Nous ne recommandons que des produits dont nous pensons qu'ils apporteront une valeur ajoutée à nos lecteurs.

Commentaires

  1. 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.

    1. 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.

Les commentaires sont fermés.