Comment ajouter un compteur de nombres animé à WordPress (sans code) 

Vous voulez montrer vos statistiques, jalons ou réalisations d'une manière plus accrocheuse ?

Avec un compteur de nombres animé, vous pouvez mettre en évidence des éléments tels que le nombre total de clients, d'abonnés par e-mail ou d'années d'activité, et attirer l'attention de vos visiteurs pendant que les nombres s'incrémentent en temps réel.

Dans ce guide, je vais vous montrer comment ajouter un compteur de nombres animé dans WordPress en utilisant deux outils qui ne nécessitent aucun code.

Qu'est-ce qu'un compteur de nombres animé ?

Un compteur de nombres animé est un effet visuel où un nombre compte (vers le haut ou vers le bas) en temps réel, généralement pour mettre en évidence des statistiques telles que le nombre total de clients, de projets réalisés ou d'années d'activité.

Vous avez probablement vu cette animation de compteur sur les sites Web d'entreprises et d'agences, juste à côté des signaux de confiance comme les témoignages et les études de cas.

Les études sur l'attention et la conception Web montrent constamment que le mouvement attire le regard. Un compteur de statistiques qui s'anime à la vue est remarqué d'une manière qu'un nombre statique ne l'est pas. C'est la différence entre « 2 400 clients » assis sur la page et le regarder compter en direct.

Voici quelques exemples d'animations de nombres que vous pouvez utiliser :

• Afficher le nombre de clients que vous avez aidés
• Mettre en évidence le nombre de projets que vous avez terminés
• Afficher votre total d'abonnés par e-mail
• Célébrer les années d'activité ou les récompenses obtenues

Bien utilisé, un bloc de statistiques WordPress affichant vos chiffres réels agit comme un signal discret : « Cette entreprise sait ce qu'elle fait. »

Quelle méthode devriez-vous utiliser ?

Les deux méthodes ci-dessous ajoutent des animations de comptage animées à votre site sans code. Voici comment choisir :

Méthode	Idéal pour	Personnalisation
Bloc compteur SeedProd	Construction d'une nouvelle page ou d'un nouveau thème et vous souhaitez un contrôle visuel complet sur les polices, les couleurs, l'espacement et la mise en page mobile	Contrôle visuel complet, style avancé, sans code
Plugin Counter Number	Conserver votre thème existant et avoir juste besoin d'insérer un simple compteur de statistiques avec un code court	Style de base, basé sur un code court

1. Ajouter des animations de comptage de nombres avec SeedProd

Pour la première méthode, je vais vous montrer comment ajouter des compteurs de nombres animés à votre site WordPress en utilisant SeedProd.

SeedProd est un constructeur de sites Web par glisser-déposer pour WordPress qui vous permet de concevoir des sites complets, des pages de destination et des thèmes personnalisés sans code.

Vous pouvez ajouter le bloc Compteur à n'importe quelle page, page de destination ou thème personnalisé que vous créez avec SeedProd.

Les kits de site Web complets et les modèles de pages de destination vous permettent d'obtenir rapidement un design finalisé. De plus, vous pouvez personnaliser n'importe quel design visuellement avec des blocs WordPress tels que des compteurs de nombres 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

Tout d'abord, rendez-vous sur la page de tarification de SeedProd et choisissez votre plan. Pour ce guide, j'utiliserai SeedProd Pro pour son constructeur de thèmes WordPress par glisser-déposer.

Ensuite, connectez-vous à votre tableau de bord de 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.

Rendez-vous 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.

Après avoir installé et activé le plugin, allez dans les Paramètres de SeedProd et entrez la clé de licence que vous avez copiée précédemment.

Cliquez maintenant 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 de destination autonome.

Les deux utilisent l'éditeur visuel de SeedProd pour personnaliser votre design. Et vous pouvez utiliser le bloc Compteur de SeedProd sur les thèmes et les pages de destination.

Pour vous aider à décider, réfléchissez aux fonctionnalités que vous souhaitez que votre site Web ait.

Le Theme Builder est un excellent choix pour créer un design de site Web complet et 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 Constructeur de pages de destination est votre meilleure solution.

Besoin d'un guide ? Suivez l'un de ces guides pour configurer votre mise en page, puis revenez à l'étape 3 pour ajouter le bloc Compteur : Comment créer un thème WordPress personnalisé ou Comment créer une page de destination WordPress.

Remarque : J'utiliserai le Theme Builder avec le kit de site Web Headphone Shop pour ce tutoriel.

Étape 3. Ajouter le bloc Compteur SeedProd

L'étape suivante consiste à ajouter le bloc Compteur à votre page de destination ou à votre design de thème WordPress. Cliquez donc sur Modifier le design sur la page que vous souhaitez personnaliser pour l'ouvrir dans l'éditeur visuel.

Comme je personnalise un thème WordPress, je commencerai par modifier le modèle de la page d'accueil :

Lorsque vous ouvrirez votre design, vous verrez une mise en page similaire à la capture d'écran suivante :

Il y aura 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 lequel des éléments du modèle.

L'ajout de nouveaux éléments à votre page prend quelques secondes. Faites simplement glisser depuis le panneau de gauche et déposez-le là où vous le souhaitez.

Depuis le panneau de gauche, recherchez le bloc Compteur 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 début et de fin de comptage
• Entrer un préfixe et un suffixe numériques
• Définir la durée de l'animation
• Choisir un séparateur décimal ou d'espacement
• Ajouter un titre au compteur
• Modifier l'alignement sur mobile et sur ordinateur

De plus, cliquer sur l'onglet Avancé offre encore plus de paramètres pour styliser votre compteur. Par exemple, vous pouvez modifier les polices et les couleurs du compteur et du titre, ajouter des effets d'ombre, ajuster l'espacement et sélectionner les options de visibilité pour les appareils mobiles et de bureau.

Le meilleur, c'est qu'il ne nécessite pas de CSS, HTML, jQuery ou Javascript personnalisés pour que votre compteur ressemble exactement à ce que vous voulez. Pointez et cliquez 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 apparence. Cliquez ensuite sur le bouton Enregistrer dans le coin supérieur droit pour enregistrer vos personnalisations.

Étape 4. Publier vos compteurs numériques animés

Après avoir ajouté vos compteurs numériques animés à votre page personnalisée et enregistré vos modifications, vous êtes prêt à la rendre visible pour les visiteurs de votre site Web.

Si vous créez une page de destination autonome, cliquez sur la flèche vers le bas sur le bouton Enregistrer et sélectionnez Publier. Mais si vous utilisez le Theme Builder, il y a une étape supplémentaire.

Quittez le constructeur de page en cliquant sur l'icône X, puis depuis le tableau de bord du constructeur de thème, basculez le bouton Activer le thème SeedProd sur la position « Oui ».

C'est tout ! Vous pouvez maintenant prévisualiser votre design pour voir votre animation de compteur numérique en action :

Le meilleur endroit pour une animation de comptage est juste en dessous de votre section héroïque ou à côté d'un bloc de témoignages, là où la preuve sociale est la plus susceptible de pousser un visiteur à agir.

Un compteur indiquant « 2 400 clients servis » à côté d'un bouton d'appel à l'action surpasse systématiquement ce même CTA sans lui. Vos chiffres font déjà le travail pour votre entreprise, ils doivent juste apparaître sur la page.

2. Ajouter des animations de comptage numérique à l'aide de Counter Number

Si vous préférez ajouter un compteur sans constructeur de site Web complet, il existe un autre moyen d'ajouter des animations de comptage numérique à votre site sans écrire de 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 numériques sur les articles, les pages et les zones de la barre latérale.

Cette méthode n'offre pas autant d'options de personnalisation que la précédente, mais c'est un moyen simple d'ajouter un compteur numérique animé simple à votre site Web avec un shortcode.

Pour commencer, téléchargez, installez et activez le plugin Counter Number sur votre site WordPress.

Accédez ensuite à Compteurs de nombres » Tous les compteurs depuis votre zone d'administration WordPress, et cliquez sur le bouton Ajouter un nouveau compteur.

Sur l'écran suivant, vous verrez un simple constructeur de compteur par glisser-déposer. Entrez donc un titre pour votre compteur, puis faites défiler jusqu'à la section Ajouter un Compteur Numérique.

Il y a déjà 3 compteurs configurés par défaut. Supprimez-en 2 en cliquant sur l'icône de la corbeille, puis modifiez le compteur restant.

Dans les paramètres du compteur, vous pouvez ajouter un titre, sélectionner une icône de compteur et entrer une valeur numérique.

Ensuite, sur le côté droit, vous pouvez modifier les éléments suivants :

• Couleur et taille de l’icône
• Couleur et taille du titre du compteur
• Couleur et taille du nombre du compteur
• Graisse des polices
• Famille de polices

Vous pouvez également masquer l’icône du compteur si vous préférez. Lorsque vous êtes satisfait de l’apparence de votre compteur, copiez le shortcode, puis cliquez sur Publier.

Vous êtes maintenant prêt à ajouter votre compteur à un article ou une page. Créez ou modifiez donc un article ou une page WordPress. Trouvez ensuite la section de la page que vous souhaitez, 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 numérique augmentera automatiquement.

FAQ sur les compteurs numériques animés WordPress

De quel plan ai-je besoin pour utiliser le bloc Compteur dans SeedProd ?

Le bloc Compteur est un bloc PRO, disponible dans les plans Plus, Pro et Elite de SeedProd. La version gratuite de SeedProd n'inclut pas le bloc Compteur.

Si vous êtes sur le plan gratuit et que vous souhaitez des compteurs de statistiques animés, le plugin Counter Number (Méthode 2 ci-dessus) est une excellente alternative gratuite.

Puis-je ajouter un compteur animé à n'importe quelle page WordPress ou uniquement aux pages de destination ?

Avec SeedProd, vous pouvez ajouter le bloc Compteur à tout type de page, y compris les modèles de thème WordPress complets, les pages de destination, les pages "bientôt disponible" et les pages 404 personnalisées.

Avec le plugin Counter Number, vous pouvez ajouter votre compteur à n'importe quel article, page ou zone de widget en utilisant le shortcode qu'il génère.

Comment faire en sorte que le compteur de nombres ne s'anime que lorsqu'il défile dans la vue ?

Le bloc Compteur de SeedProd s'anime automatiquement lorsque le bloc entre dans le viewport. Il n'y a pas de paramètre supplémentaire à activer. Dès que la section défile dans la vue, l'animation de comptage commence.

Si votre compteur se déclenche avant d'être visible, il s'agit généralement d'un plugin de mise en cache qui efface le déclencheur de viewport. Essayez de vider le cache de votre site après la publication.

Le compteur animé fonctionne-t-il sur les appareils mobiles ?

Oui. Le bloc Compteur de SeedProd est entièrement réactif. Vous pouvez également définir des options d'alignement distinctes pour le mobile et le bureau directement dans le panneau des paramètres du bloc Compteur.

Le plugin Counter Number est également décrit comme entièrement réactif, bien qu'il offre moins de contrôles spécifiques aux appareils que SeedProd.

Puis-je utiliser le bloc Compteur de SeedProd sans construire un thème complet ?

Oui. Le bloc Compteur fonctionne sur les pages de destination autonomes de SeedProd, vous n'avez donc pas besoin d'utiliser le Theme Builder du tout.

Créez une nouvelle page de destination dans SeedProd, faites glisser le bloc Compteur sur la toile et publiez. Votre thème WordPress existant reste en place partout ailleurs sur votre site.

Vos statistiques méritent plus qu'un simple nombre statique sur la page. Avec l'une ou l'autre des méthodes ci-dessus, vous pouvez avoir un compteur animé fonctionnel en ligne en moins de 10 minutes.

Prêt à créer des compteurs numériques personnalisés sans code ?

Vous pourriez également aimer lire les tutoriels WordPress suivants :

• Comment ajouter les heures d'ouverture à WordPress
• Comment assombrir une image d’arrière-plan sans CSS
• Comment ajouter des widgets Twitter à votre site WordPress
• Comment ajouter des animations de texte dans WordPress
• Meilleurs plugins WordPress pour les sites Web d'entreprise

Merci de votre lecture ! Nous serions ravis d'entendre vos réflexions, alors n'hésitez pas à rejoindre la conversation sur YouTube, X et Facebook pour plus de conseils et de contenu utiles pour développer votre entreprise.