Le bloc Compte à rebours vous permet d'ajouter des chronomètres animés à vos pages sans avoir besoin de code personnalisé ou de plugins. Que vous créiez de l'anticipation pour le lancement d'un produit, une vente flash ou un événement en direct, le bloc Compte à rebours crée un sentiment d'urgence convaincant qui incite les visiteurs à agir.
Vous pouvez choisir entre un compte à rebours à date fixe qui se termine à un moment précis, ou un minuteur permanent qui se réinitialise pour chaque visiteur — offrant une expérience d'urgence personnalisée et toujours active, peu importe quand quelqu'un arrive sur votre page.
Ajouter le bloc Compte à rebours à vos pages
Suivez ces étapes pour ajouter un bloc Compte à rebours à votre page SeedProd :
Étape 1 : Ajouter le bloc
Sous Design > Blocs, faites glisser le bloc Compte à rebours dans la section souhaitée de votre page.
Faites glisser le bloc Compte à rebours 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 Compte à rebours pour ouvrir ses paramètres. Dans l'onglet Contenu, choisissez votre type de minuteur et configurez son comportement et ses étiquettes.
Type de minuteur :
- Compte à rebours Date/Heure : Compte à rebours jusqu'à une date et une heure fixes. Idéal pour les lancements de produits, les ventes flash ou les événements avec une date de fin spécifique — tous les visiteurs voient le même minuteur, quelle que soit leur heure d'arrivée.
- Minuteur Visiteur (Permanent) : Compte à rebours à partir d'une durée définie qui se réinitialise pour chaque nouveau visiteur. Utilise des cookies pour maintenir la cohérence lors des actualisations de page, donnant à chaque visiteur l'impression que l'offre est limitée dans le temps personnellement.
Le compte à rebours Date/Heure vous permet de cibler une date et une heure de fin spécifiques pour votre minuteur.
Le minuteur Visiteur (Permanent) réinitialise la durée du compte à rebours pour chaque nouveau visiteur à l'aide de cookies.
Paramètres du minuteur :
- Date et heure de fin : (Date/Heure uniquement) Définissez la date et l'heure exactes auxquelles le compte à rebours expire.
- Fuseau horaire : (Date/Heure uniquement) Choisissez le fuseau horaire de l'heure de fin pour garantir l'exactitude pour votre public cible.
- Heures / Minutes / Secondes : (Permanent uniquement) Définissez la durée du compte à rebours que chaque visiteur verra à son arrivée.
- Taille : Définissez la taille globale du chronomètre — Minuscule, Petit, Moyen ou Grand.
Action à l'expiration :
- Afficher un message : Affichez un message personnalisé une fois que le minuteur atteint zéro, tel qu'un avis « offre expirée » ou un message de remerciement.
- Redirection : Envoyez automatiquement les visiteurs vers une autre page lorsque le compte à rebours se termine, telle qu'une page de paiement ou une page de destination post-vente.
- Redémarrer : (Permanent uniquement) Redémarrez le minuteur depuis le début une fois qu'il atteint zéro.
Choisissez ce qui se passe lorsque le minuteur atteint zéro — affichez un message personnalisé, redirigez les visiteurs vers une autre URL ou redémarrez le minuteur.
Personnaliser les étiquettes :
- Étiquette Jour : Personnalisez le texte affiché sous l'unité des jours (par défaut : « Jours »).
- Étiquette Heure : Personnalisez le texte affiché sous l'unité des heures (par défaut : « Heures »).
- Libellé des minutes : Personnalisez le texte affiché sous l'unité des minutes (par défaut : « Minutes »)
- Libellé des secondes : Personnalisez le texte affiché sous l'unité des secondes (par défaut : « Secondes »)
Étape 3 : Choisir un style de modèle
Dans l'onglet Modèles, vous pouvez choisir parmi des styles de compte à rebours prédéfinis pour modifier rapidement l'apparence générale de votre minuteur sans ajuster les paramètres individuels.
- Modèles prédéfinis : Choisissez parmi une variété de conceptions prêtes à l'emploi, chacune avec des palettes de couleurs, des styles de boîte et des mises en page uniques. Cliquez sur n'importe quel modèle pour l'appliquer instantanément à votre bloc Compte à rebours.
Parcourez et appliquez des styles de compte à rebours prédéfinis à partir de l'onglet Modèles.
Étape 4 : Personnaliser la conception
Dans l'onglet Avancé, vous pouvez personnaliser entièrement l'apparence visuelle et la mise en page de votre bloc Compte à rebours.
Styles :
- Typographie : Cliquez sur Modifier pour ouvrir le panneau de typographie complet. Contrôlez la famille de polices, la taille (bureau, tablette et mobile), l'épaisseur de la police, l'italique, le soulignement, la casse, la hauteur de ligne et l'espacement des lettres pour le texte du compte à rebours.
- Couleur de surbrillance : Définissez la couleur d'arrière-plan des boîtes d'unités de temps individuelles.
- Couleur du libellé : Définissez la couleur des libellés Jours, Heures, Minutes et Secondes sous chaque nombre.
- Espace entre : Contrôlez l'écart entre chaque boîte d'unité de temps à l'aide d'un curseur.
- Rayon de bordure : Arrondissez les coins des boîtes d'unités de temps à l'aide d'un curseur.
- Ombre : Ajoutez une ombre aux boîtes de compte à rebours. Choisissez parmi les tailles prédéfinies : Aucune, Cheveu, Petite, Moyenne, Grande, Très grande, 2x très grande ou Personnalisée.
Espacement :
- Marge : Contrôlez l'espacement extérieur autour de votre bloc Compte à rebours (Haut, Droite, Bas, Gauche). Cela détermine l'espace qui apparaît entre le minuteur et les éléments environnants.
- Rembourrage : Ajustez l'espacement intérieur de votre bloc Compte à rebours (Haut, Droite, Bas, Gauche). Cela crée un espace de respiration entre le minuteur et les bords du bloc.
Attributs :
- ID CSS : Affiche l'identifiant unique généré automatiquement pour votre bloc Compte à rebours. 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 tous les attributs HTML à l'élément conteneur du compte à rebours. Entrez chaque attribut sur une nouvelle ligne en utilisant le format : nom-attribut|valeur (par exemple, data-timer|true).
Visibilité de l'appareil :
- Masquer sur ordinateur : Masquez le bloc Compte à rebours sur les écrans d'ordinateur.
- Masquer sur tablette : Masquez le bloc Compte à rebours sur les appareils tablettes.
- Masquer sur mobile : Masquez le bloc Compte à rebours sur les appareils mobiles.
Effets d'animation :
- Animation d'entrée : Choisissez parmi divers effets d'animation qui s'affichent lorsque le bloc Compte à rebours défile dans la vue. Les options incluent Rebond, Fondu, Zoom avant, Rotation avant, et bien d'autres. Une animation d'entrée attire immédiatement l'attention sur votre minuteur dès que les visiteurs le rencontrent.
Utilisez l'onglet Avancé pour contrôler les styles, les espacements, les attributs, la visibilité des appareils et les animations d'entrée de votre bloc Compte à rebours.
Étape 5 : Enregistrer vos modifications
Une fois que vous avez terminé de configurer le bloc Compte à rebours et de personnaliser son apparence, assurez-vous d'enregistrer votre travail.
Vous avez ajouté avec succès un bloc Compte à rebours à votre page ! Les chronomètres sont l'un des outils les plus efficaces pour générer des conversions, que vous fassiez la promotion d'une offre à durée limitée, d'un lancement de produit ou d'un événement à venir. Expérimentez avec les types de chronomètres, les modèles et les actions d'expiration pour créer une expérience qui maintient les visiteurs engagés et motivés à agir.