Le bloc Compteur vous permet d'afficher des compteurs numériques animés qui comptent à partir d'une valeur de départ jusqu'à un nombre final. Ce bloc est parfait pour présenter des statistiques impressionnantes, des étapes importantes et des réalisations de manière accrocheuse qui capte l'attention des visiteurs.
Que vous souhaitiez mettre en avant des années d'activité, des clients servis, des projets réalisés ou toute autre métrique, le bloc Compteur donne vie à vos chiffres avec une animation de comptage fluide qui se déclenche lorsque les visiteurs font défiler le bloc dans leur champ de vision.
Ajouter le bloc Compteur à vos pages
Suivez ces étapes pour ajouter un bloc Compteur à votre page SeedProd :
Étape 1 : Ajouter le bloc
Sous Design > Blocs, faites glisser le bloc Compteur dans la section souhaitée de votre page.
Faites glisser le bloc Compteur depuis le panneau Blocs et déposez-le dans la section de page souhaitée.
Étape 2 : Configurer les paramètres de contenu
Une fois ajouté, cliquez sur le bloc Compteur pour ouvrir ses paramètres. Dans l'onglet Contenu, vous pouvez configurer les valeurs du compteur, le comportement de l'animation et l'étiquette.
Valeurs du compteur :
- Nombre de départ : Définissez le nombre à partir duquel le compteur commence à compter lorsque l'animation se déclenche. Généralement défini sur 0, mais vous pouvez commencer à partir de n'importe quelle valeur pour créer un effet de comptage partiel.
- Nombre de fin : Définissez le nombre final jusqu'auquel le compteur comptera. C'est la statistique ou la réalisation principale que vous souhaitez afficher.
- Préfixe du nombre : Ajoutez un texte ou un symbole qui apparaît avant le nombre, tel qu'un symbole de devise (par exemple, $) ou un signe plus.
- Suffixe du nombre : Ajoutez un texte ou un symbole qui apparaît après le nombre, tel qu'un signe de pourcentage (%), un signe plus (+), ou une unité comme « K ».
Paramètres d'animation :
- Durée de l'animation : Contrôlez combien de temps (en millisecondes) l'animation de comptage prend pour se terminer. Une durée plus longue crée un effet de comptage plus lent et plus spectaculaire.
- Séparateur de milliers : Choisissez d'afficher ou non un séparateur de milliers dans le nombre (par exemple, 1 000 au lieu de 1000) pour une meilleure lisibilité.
- Séparateur : Sélectionnez le caractère utilisé comme séparateur de milliers, tel qu'une virgule ou un point, pour correspondre à vos préférences de formatage régionales.
Étiquette :
- Titre : Ajoutez une étiquette descriptive qui apparaît sous le nombre pour expliquer ce que représente la statistique (par exemple, « Clients satisfaits », « Projets réalisés », « Années d'expérience »).
Configurez vos valeurs de compteur, la durée de l'animation, le séparateur de milliers et l'étiquette de titre dans l'onglet Contenu.
Étape 3 : Personnaliser le design
Dans l'onglet Avancé, vous pouvez personnaliser l'apparence visuelle de votre bloc Compteur.
Typographie du nombre :
- Couleur du nombre : Définissez la couleur du nombre du compteur pour qu'elle corresponde à votre marque ou à la conception de votre page.
- Police : Choisissez la famille de polices pour le nombre du compteur.
- Taille de la police : Définissez la taille du nombre sur les appareils de bureau, tablettes et mobiles.
- Graisse de la police : Contrôlez si le nombre apparaît en gras ou avec une graisse plus légère
- Hauteur de ligne : Ajustez l'espacement vertical du texte du nombre
- Espacement des lettres : Affinez l'espacement horizontal entre les caractères du nombre
- Alignement du nombre : Alignez le nombre du compteur à gauche, au centre ou à droite
- Ombre du nombre : Ajoutez une ombre portée au texte du nombre avec des contrôles pour la couleur, le décalage horizontal/vertical, le flou et l'étalement
Typographie du titre :
- Couleur du titre : Définissez la couleur de l'étiquette descriptive sous le compteur
- Police : Choisissez la famille de polices pour l'étiquette du titre
- Taille de la police : Définissez la taille du titre sur les points d'arrêt bureau, tablette et mobile
- Graisse de la police : Contrôlez la graisse du texte du titre
- Hauteur de ligne : Ajustez l'espacement du texte du titre
- Espacement des lettres : Affinez l'espacement des caractères dans le titre
- Alignement du titre : Alignez l'étiquette du titre à gauche, au centre ou à droite
- Ombre du titre : Ajoutez une ombre portée au texte du titre avec des contrôles pour la couleur, le décalage, le flou et l'étalement
Espacement :
- Marge : Contrôlez l'espacement extérieur autour de votre bloc Compteur (Haut, Droite, Bas, Gauche). Cela détermine l'espace entre le compteur et les éléments environnants
- Rembourrage : Ajustez l'espacement intérieur de votre bloc Compteur (Haut, Droite, Bas, Gauche). Cela crée un espace entre le contenu du compteur et les bords du bloc
Attributs :
- ID CSS : Affiche l'identifiant unique généré automatiquement pour votre bloc Compteur. Cet ID est créé automatiquement par SeedProd pour un style personnalisé ou un ciblage JavaScript
- Classe personnalisée : Ajoutez des classes CSS personnalisées pour appliquer des styles spécifiques de votre thème ou de votre CSS personnalisé
- Attributs personnalisés : Ajoutez des attributs HTML à l'élément enveloppant du compteur. Entrez chaque attribut sur une nouvelle ligne en utilisant le format : nom-attribut|valeur (par exemple, data-counter|true)
Visibilité de l'appareil :
- Masquer sur ordinateur : Masquez le bloc Compteur sur les écrans d'ordinateur
- Masquer sur tablette : Masquez le bloc Compteur sur les appareils tablettes
- Masquer sur mobile : Masquez le bloc Compteur sur les appareils mobiles
Effets d'animation :
- Animation d'entrée : Choisissez parmi divers effets d'animation qui se jouent lorsque le bloc Compteur apparaît à la vue. Les options incluent Rebond, Fondu, Zoom, Rotation, et bien d'autres. Associer une animation d'entrée à l'effet de comptage crée une expérience très engageante pour les visiteurs
Utilisez l'onglet Avancé pour contrôler la typographie, les couleurs, les ombres, l'espacement et la visibilité de votre bloc Compteur.
Étape 4 : Enregistrez vos modifications
Une fois que vous avez terminé de configurer le bloc Compteur et de personnaliser son apparence, assurez-vous de sauvegarder votre travail.
Vous avez ajouté avec succès un bloc Compteur à votre page ! Les compteurs animés sont un moyen éprouvé d'établir la confiance et la crédibilité en mettant en avant vos chiffres les plus impressionnants. Expérimentez avec différents formats de nombres, préfixes, suffixes et styles de typographie pour créer des compteurs qui reflètent parfaitement votre marque et rendent vos statistiques impossibles à ignorer.