Vous souhaitez présenter vos statistiques, vos étapes ou vos réalisations de manière plus attrayante ?
Avec un compteur de chiffres animé, vous pouvez mettre en évidence des éléments tels que le nombre total de clients, d'abonnés à un service de courrier électronique ou d'années d'activité, et attirer l'attention de vos visiteurs au fur et à mesure que les chiffres s'affichent en temps réel.
Dans ce guide, je vous montrerai comment ajouter un compteur numérique 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 : Utilisez le Counter Block
Best de SeedProd pour un contrôle visuel total. Vous pouvez glisser et déposer des compteurs de chiffres animés dans n'importe quelle page sans écrire de code.
Méthode 2 : Utilisez le plugin Counter Number
Le meilleur pour une installation 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 montrer :
- Total des clients
- Projets achevés
- Abonnés par courriel
- Années d'activité
Qu'est-ce qu'une animation de comptage de nombres ?
Une animation de comptage de nombres est un effet visuel qui fait augmenter (ou diminuer) les nombres 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 achevés.
Ces compteurs animés permettent d'attirer l'attention sur des faits essentiels et sont parfaits pour instaurer la confiance. Les vrais chiffres sont solides. Ils montrent votre croissance, votre portée et ce que vous avez déjà accompli.
Voici quelques exemples :
- Indiquez le nombre de clients que vous avez aidés
- Mettez en évidence le nombre de projets que vous avez terminés
- Afficher le nombre total d'abonnés au courrier électronique
- Célébrer les années d'activité ou les récompenses obtenues
Bien utilisés, les compteurs de chiffres 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 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
Tout d'abord, allez sur la page de tarification de SeedProd et choisissez votre plan. Pour ce guide, nous utiliserons SeedProd Pro pour son constructeur de thème WordPress par glisser-déposer.
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.
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 plus tôt.
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
De plus, en cliquant sur l'onglet Avancé, vous disposez d'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.
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. Animations de comptage de nombres additionnés à l'aide d'un compteur de nombres
Si vous n'êtes pas intéressé par l'utilisation d'un constructeur de pages par glisser-déposer pour personnaliser votre site WordPress, il existe un autre moyen d'ajouter des animations de comptage de nombres à 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 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.
Il y a déjà 3 compteurs configurés par défaut. Nous allons en supprimer deux en cliquant sur l'icône de la corbeille, puis éditer le compteur restant.
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.
FAQs sur les compteurs de nombres animés WordPress
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
- Comment ajouter des animations de texte dans WordPress
- Les meilleurs plugins WordPress pour les sites web d'entreprises
Merci de votre lecture ! Nous aimerions connaître votre avis, alors n'hésitez pas à participer à la conversation sur YouTube, X et Facebook pour obtenir d'autres conseils et contenus utiles pour développer votre entreprise.
J'aimerais pouvoir déterminer si je veux que la décimale indique les milliers ou les dixièmes. 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.