Comment afficher une animation de compte numérique dans WordPress

Il y a de fortes chances que votre site Web ait des chiffres impressionnants à partager, tels que le nombre de clients, les années d'expérience, les projets réussis ou les prix remportés.

Le défi est de faire en sorte que les visiteurs remarquent et se soucient réellement de ces réalisations au lieu de les ignorer. C'est là que les compteurs de nombres animés excellent.

Lorsque vos statistiques comptent à partir de zéro à mesure que les visiteurs atteignent cette section, cela crée une mini-célébration de votre succès. Ce mouvement attire l'attention et rend vos réalisations plus significatives et dignes de confiance.

Grâce à notre expérience dans l'optimisation des sites WordPress pour un meilleur engagement, nous avons découvert qu'ajouter ces animations est plus facile que la plupart des gens ne le pensent.

Nous vous montrerons exactement comment les ajouter en utilisant 2 méthodes simples.

Avant d'ajouter une animation de compteur de nombres dans WordPress... 📊

Avant de plonger dans le « comment », examinons rapidement où ces compteurs animés fonctionnent le mieux sur votre site Web WordPress :

• Sections d'accueil héroïques pour présenter les principales réalisations
• Pages produits pour mettre en évidence les taux de satisfaction client
• Pages À propos pour afficher les étapes importantes de l'entreprise
• Pages de destination pour mettre l'accent sur la preuve sociale
• Sections de tarification pour montrer la base de clients ou les économies

D'après notre expérience, nous avons constaté que le placement stratégique est tout aussi important que l'animation elle-même. Par exemple, OptinMonster utilise efficacement un compteur de nombres pour afficher les sessions de visiteurs mensuelles optimisées, le plaçant juste là où les clients potentiels prennent leurs décisions.

L'ajout et la personnalisation d'un compteur de nombres dans WordPress nécessitent généralement de modifier le code. Cela peut être délicat pour les débutants qui ne savent pas comment écrire du code.

Cela dit, voyons comment vous pouvez afficher un compteur de nombres animé dans WordPress. Nous couvrirons 2 méthodes simples utilisant un constructeur de site Web premium et un plugin gratuit.

Vous pouvez cliquer sur les liens ci-dessous pour accéder à la section de votre choix :

• Option 1 : Créer une page de destination avec une animation de compteur de nombres à l'aide d'un constructeur de pages
• Option 2 : Ajouter une animation rapide de compteur de nombres à n'importe quelle page à l'aide d'un plugin
• Bonus : Ajouter un arrière-plan animé captivant 🌟

Option 1 : Créer une page de destination avec une animation de compteur de nombres à l'aide d'un constructeur de pages

Si vous créez une page de destination et que vous souhaitez un contrôle total sur l'apparence et le comportement de vos compteurs de nombres, un constructeur de pages est votre meilleure option.

Nous avons testé des dizaines de constructeurs de pages WordPress au fil des ans, et SeedProd se distingue constamment par ses options de personnalisation étendues, en particulier pour les éléments dynamiques tels que les compteurs numériques.

Pour plus d'informations, vous pouvez consulter notre avis détaillé sur SeedProd.

La première chose à faire est d'installer et d'activer SeedProd. Si vous avez besoin d'aide, veuillez consulter notre guide sur comment installer un plugin WordPress.

Après l'activation, SeedProd vous demandera d'entrer la clé de licence. Vous pouvez trouver la clé de licence dans votre espace client et dans l'e-mail de confirmation d'achat.

Ensuite, vous devrez vous rendre dans SeedProd » Pages de destination depuis votre panneau d'administration WordPress.

SeedProd vous permet de créer des pages de destination personnalisées de conception professionnelle, y compris une page 'Bientôt disponible', une page en mode maintenance, une page de connexion et une page 404.

Cliquez sur le bouton « Ajouter une nouvelle page de destination ».

Après cela, vous pouvez sélectionner un modèle SeedProd pour votre page de destination et afficher le compteur de nombres animé.

Survolez simplement un modèle et cliquez sur le bouton de coche orange.

Une fenêtre contextuelle va maintenant s'ouvrir. Entrez simplement un nom de page et une URL de page.

Après cela, cliquez sur le bouton « Enregistrer et commencer à modifier la page ».

Cela lancera le constructeur par glisser-déposer de SeedProd.

Ensuite, vous pouvez modifier votre modèle de page en ajoutant différents blocs ou en cliquant sur les éléments existants sur la page.

Pour ajouter un compte de nombres animé, faites simplement glisser le bloc Compteur du menu de gauche et déposez-le sur le modèle.

Après cela, vous pouvez sélectionner le bloc Compteur pour le personnaliser davantage.

Par exemple, il existe des options pour modifier les nombres de départ et de fin du compteur, entrer un préfixe et un suffixe de nombre, et modifier le titre.

Ensuite, vous pouvez passer à l'onglet « Avancé » sous les paramètres du bloc Compteur sur votre gauche.

Ici, vous trouverez plus d'options pour modifier le style, le schéma de couleurs, l'espacement, la police, et plus encore pour votre bloc Compteur.

Ensuite, cliquez sur le bouton « Enregistrer » en haut.

Vous pouvez maintenant choisir « Publier » dans le menu déroulant.

Pour voir le compteur de nombres animé en action, allez-y et visitez votre blog WordPress.

Voici à quoi cela ressemblait sur notre site de démonstration.

Option 2 : Ajouter une animation rapide de compteur de nombres à n'importe quelle page à l'aide d'un plugin

Parfois, un constructeur de pages peut être excessif lorsque tout ce dont vous avez besoin est un simple compteur de nombres. C'est là qu'intervient le plugin Counter Number. C'est une solution gratuite et légère qui fait une chose et la fait bien : vous permettre d'ajouter des animations de nombres n'importe où sur votre site à l'aide de simples shortcodes.

Tout d'abord, vous devrez installer et activer le plugin Counter Number. Pour plus de détails, veuillez consulter notre guide sur comment installer un plugin WordPress.

Après l'activation, vous pouvez aller dans Counter Numbers » All counters depuis votre tableau de bord WordPress et cliquer sur le bouton « Add New Counter ».

Après cela, vous pouvez entrer un titre pour votre compteur.

Dans la version gratuite, vous ne pouvez sélectionner que le modèle de conception simple.

Ensuite, vous pouvez ajouter les détails du compteur. Il existe des options pour modifier le titre du compteur, sélectionner une icône et entrer la valeur du compteur.

Vous pouvez ajouter autant de compteurs que vous le souhaitez en cliquant sur le bouton « Add New Counterbox » en bas.

En outre, vous bénéficiez de plus d'options de personnalisation depuis le panneau de droite.

Par exemple, le plugin vous permet de modifier la couleur du titre du compteur, la couleur du nombre, la taille de l'icône, la taille de la police, la police, et plus encore.

Après avoir effectué les modifications, faites défiler vers le haut et publiez votre compteur.

Ensuite, vous pouvez vous rendre dans Counter Numbers » All counters depuis votre tableau de bord WordPress.

Allez-y et copiez le shortcode du compteur. Il ressemblera à ceci :

[COUNTER_NUMBER id=41]

Ensuite, vous pouvez placer cet élément de design WordPress n'importe où sur votre site web, des articles aux pages en passant par les barres latérales.

Ajoutez simplement un nouvel article ou une nouvelle page, ou modifiez-en un existant. Une fois dans l'éditeur de contenu, cliquez simplement sur le signe « + » et ajoutez un bloc Shortcode.

Ensuite, vous pouvez coller le shortcode du compteur dans le bloc.

À partir de là, prévisualisez et publiez votre page ou votre article pour voir le compteur de chiffres animé en action.

Bonus : Ajouter un arrière-plan animé captivant 🌟

Après avoir amélioré votre site avec des compteurs de chiffres attrayants, nous vous recommandons d'élever son attrait visuel avec un arrière-plan animé.

Cet élément rend votre page plus interactive et capte l'attention de votre public dès son arrivée. De plus, il confère un aspect de haute qualité sans surcharger votre contenu.

Un moyen simple d'ajouter un arrière-plan animé consiste à utiliser la bibliothèque particle.js. Cette bibliothèque JavaScript légère permet des effets visuels époustouflants avec des particules personnalisables.

Vous pouvez ajuster leur taille, leur couleur, leur forme et leur mouvement, et ils répondent aux interactions de l'utilisateur comme les mouvements de la souris ou les clics.

Chez WPBeginner, nous avons trouvé la fonctionnalité d'arrière-plan à particules intégrée de SeedProd impressionnante. Avec SeedProd, l'intégration de particle.js à vos pages est facile et ne nécessite aucun codage.

Il offre divers styles d'animation, et vous pouvez créer des effets de particules personnalisés pour correspondre parfaitement à votre thème. Pour approfondir cette méthode, consultez notre guide détaillé sur comment ajouter un arrière-plan animé dans WordPress.

Nous espérons que cet article vous a aidé à apprendre comment afficher une animation de comptage de nombres dans WordPress. Vous pouvez également consulter notre tutoriel sur comment ajouter un arrière-plan animé dans WordPress et notre sélection d'experts des meilleurs constructeurs de thèmes WordPress pour concevoir votre thème parfait.

Si cet article vous a plu, abonnez-vous à notre chaîne YouTube pour des tutoriels vidéo WordPress. Vous pouvez également nous retrouver sur Twitter et Facebook.