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.
Résumé rapide : Comment ajouter un compteur de nombres animé dans WordPress
Méthode 1 : Utiliser le bloc Compteur de SeedProd
Idéal pour un contrôle visuel complet. Vous pouvez faire glisser et déposer des compteurs de nombres animés sur n'importe quelle page sans écrire de code.
Méthode 2 : Utiliser le plugin Compteur de nombres
Idéal pour une configuration rapide avec un plugin gratuit. Ajoutez des compteurs de statistiques animés à l'aide de shortcodes dans les articles, les pages ou les barres latérales.
Vous pouvez utiliser les deux méthodes pour afficher :
- Nombre total de clients
- Projets terminés
- Abonnés par e-mail
- Années d'activité
Que sont les animations de comptage de nombres ?
Une animation de comptage de nombres est un effet visuel qui fait compter les nombres (vers le haut ou vers le bas) en temps réel. Vous les avez probablement vues utilisées pour mettre en évidence des statistiques telles que le total des ventes, les clients satisfaits ou les projets terminés.
Ces compteurs animés aident à attirer l'attention sur des faits clés, et ils sont parfaits pour établir la confiance. Les nombres réels semblent solides. Ils montrent votre croissance, votre portée et ce que vous avez déjà accompli.
Voici quelques exemples :
- 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és, les compteurs de nombres animés agissent comme un signal discret : « Cette entreprise sait ce qu'elle fait. »
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 le meilleur constructeur de sites Web et de pages de destination par glisser-déposer 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 créer les éléments suivants :
- Thèmes WordPress personnalisés
- Pages de destination à forte conversion
- Pages "Coming soon"
- Écrans en mode maintenance
- Pages de connexion WordPress
- Conceptions de pages 404 personnalisées
- Pages de contenu comme à propos, services et contact
- Et bien plus encore.
Démarrer est rapide et facile avec des kits de site Web complets et des modèles de page de destination. De plus, vous pouvez personnaliser n'importe quel design visuellement avec des blocs WordPress comme 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, nous utiliserons 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 vos informations de 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 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 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 Landing Page Builder est votre meilleure solution.
Vous pouvez suivre ces tutoriels étape par étape pour chaque option :
Les deux guides vous guideront dans le choix d'un modèle et la compréhension de 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 design.
Remarque : Nous utiliserons 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.
Étant donné que nous personnalisons un thème WordPress, nous commencerons 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.
Il est également très facile d'ajouter de nouveaux éléments à votre page par glisser-déposer. Nous vous montrerons comment faire avec le bloc Compteur.
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 des options de visibilité pour les appareils mobiles et de bureau.
Le mieux est que cela ne nécessite aucun CSS, HTML, Jquery ou Javascript personnalisé pour que votre compteur ait l'apparence que vous souhaitez. Pointez et cliquez simplement 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 simplement sur la flèche vers le bas du 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 :
2. Ajouter des animations de comptage numérique à l'aide de Counter Number
Si vous n'êtes pas intéressé par l'utilisation d'un constructeur de page par glisser-déposer pour personnaliser votre site WordPress, 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 numérique pour 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 Numériques » 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. Nous allons en supprimer 2 en cliquant sur l’icône de la corbeille, puis modifier 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
Et voilà !
Nous espérons que ce guide vous a aidé à trouver la meilleure méthode pour ajouter des compteurs numériques animés à WordPress.
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.
J’aimerais pouvoir déterminer si je veux que la décimale représente les milliers ou les dixièmes. Par exemple, 1.400 M $ ou 1,4 M $
Cela dépend généralement de vos préférences personnelles, Kimber, et de ce qui vous semble le plus logique pour votre utilisation. Personnellement, je préfère 1,4 M $ car c’est plus concis.