Tout le monde et leur grand-mère sont désormais conscients de l’économie de l’attention. Vous savez que votre site Web a peu de temps pour attirer l’attention et que chaque once de celui-ci doit être utilisée aussi efficacement que possible. Habituellement, cela signifie fournir des informations de manière très efficace, en utilisant des éléments textuels et visuels de votre sac d’outils de communication.
Mais que diriez-vous d’ajouter des chiffres à ce sac ? Pourquoi ne pas montrer combien de clients votre entreprise a eu, ou combien de projets réussis vous avez menés à bien, ou sur combien de marchés nationaux différents vous avez établi une présence ? Ces chiffres ne seront pas seulement impressionnants tout en occupant peu d’espace sur votre site Web, mais ils transmettront également des informations précieuses de manière efficace.
Parce que nous pensons que les compteurs peuvent être des éléments incroyablement précieux dans les sites Web, nous nous sommes assurés de les inclure dans notre plugin Qi Addons for Elementor. C’est la plus grande collection gratuite d’addons Elementor que vous trouverez dans un seul plugin – il y a soixante addons là-dedans. Notre widget de compteurs est en bonne compagnie avec des widgets qui aident à tout, de l’ajout de boîtes de message à la création d’un texte de sélection.
Pour l’instant, cependant, restons-en avec les compteurs. Nous vous montrerons comment créer quatre compteurs pour votre site Web, et si cela vous donne des idées pour créer vos propres compteurs, c’est encore mieux.! Si vous préférez regarder une vidéo plutôt que lire, vous pouvez retrouver toutes ces informations dans un didacticiel vidéo.
Alors, commençons! Voici ce que nous allons couvrir :
La première chose que vous devez savoir sur l’ajout des compteurs dans WordPress à l’aide de notre widget Elementor est que vous aurez également besoin Constructeur de site Web Elementor pour que ça marche. Si vous n’y êtes pas déjà, rendez-vous sur le tableau de bord de votre site Web, accédez à Plugins > Ajouter un nouveau, recherchez Elementor, installez-le et activez-le.
Vous pouvez utiliser la version gratuite ou la version Pro – c’est à vous de décider, car notre plugin fonctionne avec les deux. Et en parlant de notre plugin, Modules complémentaires Qi pour Elementor, vous devez également le rechercher, l’installer et l’activer.
Votre prochaine étape serait de créer une page ou une publication où vous souhaitez ajouter les compteurs ou ouvrir des publications ou des pages existantes où vous pensez qu’un compteur ou quelques-uns auraient l’air bien. Pour cette démonstration, nous avons travaillé sur un nouveau canevas sous la forme d’un nouveau post, et nous avons choisi de créer une section de quatre colonnes pour les débutants, car nous prévoyions d’ajouter quatre compteurs.
Avec les colonnes en place, la prochaine chose à faire est de trouver le widget – la fonction de recherche dans le menu des éléments de gauche servira parfaitement pour cela. Taper « compteurs » – pas « compteur », car cela fera apparaître un autre widget – et faire glisser le widget vers la colonne libre la plus proche pour obtenir le bon résultat.
Vous ne devriez pas vous soucier de remplir les colonnes restantes. C’est parfois une bonne idée de faire la plupart du style sur l’un des compteurs, puis de le copier dans d’autres colonnes et de modifier son contenu. Cela peut vous faire gagner du temps sur des projets plus exigeants, et cela fonctionne parfaitement tant que vous prévoyez d’avoir l’apparence de vos comptoirs quelque peu uniforme. Comme vous le verrez plus tard, nous avons d’abord effectué les modifications et les styles sur un compteur, puis nous avons copié et modifié le contenu des colonnes restantes.
Le contenu que vous verrez lorsque vous ajouterez le widget pour la première fois n’est là que pour l’affichage, vous voudrez donc probablement le modifier en premier. Les options générales que vous verrez dans l’onglet Contenu sont l’endroit où vous pouvez faire toutes sortes de choses utiles liées au contenu, du choix du chiffre de début et de fin de votre compteur, à la définition des étapes entre les chiffres, en activant les icônes et les séparateurs. , et enfin en éditant le titre et le texte du compteur.
Pour créer nos compteurs, nous avons fait quelques choix de contenu. D’une part, nous avons décidé de ne pas commencer le décompte à zéro – nous avons choisi 45. Pour le chiffre de fin, nous avons choisi 52. Nous avons également modifié le titre et le texte, pour lui donner un sens.
Avant de passer à la stylisation de ce compteur, vous devez prendre note de l’icône, du séparateur et des options associées sous les options générales. Ceux-ci vous permettent d’ajouter une icône à votre numéro et un séparateur entre le numéro et le texte. Vous devrez activer les deux dans les options générales si vous souhaitez les utiliser – nous avons opté contre eux, du moins pour le moment.
En passant aux options de style dans l’onglet Style, vous trouverez une myriade d’options qui dictent l’apparence du contenu de vos compteurs. Vous pouvez modifier son alignement, jouer avec la typographie et les couleurs ou le chiffre, le titre et le texte, et même définir un arrière-plan pour le chiffre et choisir sa couleur et son rayon.
La première chose que nous avons faite ici a été de nous assurer que notre chiffre ressemble exactement à ce que nous voulions. Pour commencer, nous sommes allés dans Digit Typography et avons changé la police en DM Sans. Ensuite, nous y ajoutons du poids – en le faisant passer à 500.
Ensuite, nous avons changé la couleur des chiffres en #1e1e1e. Nous avons décidé de ne pas ajouter d’arrière-plan ou d’ajouter l’effet de trait de chiffre – ce qui ferait de notre chiffre un contour – et nous avons décidé de corriger le style de la balise de titre et du contenu. Pour le titre, nous avons changé la police en DM Sans. Nous avons basculé l’option Transformer dans la typographie du titre sur Normal, car nous ne voulions pas utiliser de majuscules. Nous avons modifié la taille du titre à 20 pixels, son poids à 500 et la hauteur de ligne à 26 pixels. La couleur a été fixée à #1e1e1e.
Pour le texte, nous avons changé la couleur en #1e1e1e, la police en DM Sans, la taille en 17 pixels et la hauteur du lien en 26. Nous n’avons pas modifié le poids car la valeur par défaut est d’environ 400, ce que nous voulions.
Les options de style d’espacement sont utiles lorsque vous souhaitez définir les marges et le remplissage du texte pour vos compteurs. Le seul changement que nous avons fait ici était de définir la marge du titre en haut à 10 pixels, ce qui le rend un peu plus petit que la valeur par défaut.
Comme nous n’avons pas ajouté de séparateur ou d’icône de séparateur, nous n’avons rien à faire dans les options de style de séparateur. Si vous choisissez d’ajouter un séparateur, ces options vous permettront de modifier la couleur, le style de bordure, les marges, la largeur et l’épaisseur du séparateur. Vous aurez également quelques options pour l’icône de séparation, couvrant la couleur, la taille de la police et les marges.
Après avoir stylisé le premier compteur, il est temps d’en faire trois autres copies. Nous l’avons fait simplement en cliquant avec le bouton droit sur le compteur et en choisissant Dupliquer, et nous l’avons répété jusqu’à ce que nous ayons suffisamment de compteurs pour nos colonnes.
Nous n’avons modifié aucune des options de style dans les nouveaux compteurs. Le plus gros ajout était l’astérisque que nous avons ajouté au troisième compteur. Dans l’onglet Contenu, nous sommes allés dans les options d’icône, avons choisi l’icône en forme d’astérisque et défini sa taille sur 15 pixels.
Le reste des changements était plus régulier. Nous n’avons changé que le contenu – le deuxième compteur a obtenu un chiffre de début de 260 et un chiffre de fin de 269. Le troisième est passé de 72 à 89 aux étapes 5, et le compteur final a obtenu un chiffre de début de 93 et un chiffre de fin de 102. Tous les nouveaux compteurs ont une nouvelle copie. Voilà à quoi ressemblait le résultat.
Finissons-en !
Lorsque vous avez un site Web, le bon sens dit que tout élément qui peut vous aider à faire passer votre message plus facilement et plus efficacement est un élément que vous devriez accueillir. Si vous pensez que l’ajout de compteurs peut être un moyen utile de présenter les réalisations, les ressources ou les capacités de votre entreprise, notre widget Compteurs sera là, attendant de vous aider à éblouir vos visiteurs avec des chiffres impressionnants.
Soutenez notre effort ❤️
Si vous avez apprécié cet article, pensez à laisser un pourboire pour nous aider à continuer à publier du contenu de qualité.
