Le bloc Compte à rebours vous permet d'ajouter des comptes à rebours animés à vos pages sans avoir besoin de code personnalisé ou de plugins. Que vous souhaitiez susciter l'intérêt 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 à passer à l'action.
Vous pouvez choisir entre un compte à rebours à date fixe qui se termine à un moment précis, ou un compte à rebours permanent qui se réinitialise pour chaque visiteur, offrant ainsi une expérience personnalisée et toujours active, quel que soit le moment où 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, glissez-déposez 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 la 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 minuterie et configurez son comportement et ses libellés.
Type de minuterie :
- Compte à rebours DateTime : 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 compte à rebours, quelle que soit l'heure à laquelle ils arrivent.
- Compteur de visiteurs (Evergreen) : 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 ainsi à chaque visiteur l'impression que l'offre est personnellement limitée dans le temps.
Le compte à rebours DateTime vous permet de définir une date et une heure de fin spécifiques pour votre minuterie.
Le Visitor Timer (Evergreen) réinitialise la durée du compte à rebours pour chaque nouveau visiteur à l'aide de cookies.
Réglages de la minuterie :
- Date et heure de fin : (Date et heure uniquement) Définissez la date et l'heure exactes auxquelles le compte à rebours expire.
- Fuseau horaire : (DateTime uniquement) Choisissez le fuseau horaire pour l'heure de fin afin de garantir la précision pour votre public cible.
- Heures / Minutes / Secondes : (Evergreen uniquement) Définissez la durée du compte à rebours que chaque visiteur verra lorsqu'il arrivera pour la première fois.
- Taille : définissez la taille globale du compte à rebours — Minuscule, Petite, Moyenne ou Grande.
Mesures à prendre à l'expiration :
- Afficher le message : affichez un message personnalisé une fois que le compte à rebours atteint zéro, tel que « offre expirée » ou un message de remerciement.
- Redirection : redirigez automatiquement les visiteurs vers une autre page à la fin du compte à rebours, par exemple vers une page de paiement ou une page d'atterrissage post-vente.
- Redémarrer : (Evergreen uniquement) Redémarrer le minuteur depuis le début une fois qu'il atteint zéro.
Choisissez ce qui se passe lorsque le minuteur arrive à zéro : afficher un message personnalisé, rediriger les visiteurs vers une autre URL ou redémarrer le minuteur.
Personnaliser les étiquettes :
- Étiquette du jour : personnalisez le texte affiché sous l'unité « jours » (par défaut : « Jours »).
- Étiquette Heures : personnalisez le texte affiché sous l'unité Heures (par défaut : « Heures »).
- Étiquette Minute : personnalisez le texte affiché sous l'unité de mesure des minutes (par défaut : « Minutes »).
- Deuxième étiquette : personnalisez le texte affiché sous l'unité des secondes (par défaut : « Secondes »).
Étape 3 : Choisissez 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 avoir à ajuster les paramètres individuels.
- Modèles prédéfinis : choisissez parmi une variété de designs prêts à l'emploi, chacun avec des combinaisons de couleurs, des styles de boîtes 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 : Personnalisez le design
Dans l'onglet Avancé, vous pouvez entièrement personnaliser l'apparence visuelle et la mise en page de votre bloc Compte à rebours.
Styles :
- Typographie : cliquez sur Modifier pour ouvrir le panneau complet de typographie. Contrôlez la famille de polices, la taille (ordinateur de 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 cases individuelles représentant les unités de temps.
- Couleur des étiquettes : définissez la couleur des étiquettes « Jours », « Heures », « Minutes » et « Secondes » sous chaque chiffre.
- Espace entre : contrôlez l'espace entre chaque case d'unité de temps à l'aide d'un curseur.
- Rayon de la bordure : arrondir les coins des cases des unités de temps à l'aide d'un curseur
- Ombre : ajoutez une ombre aux cases du compte à rebours. Choisissez parmi les tailles prédéfinies : Aucune, Très fine, Petite, Moyenne, Grande, Très grande, Très 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îtra entre le minuteur et les éléments environnants.
- Remplissage : ajustez l'espacement intérieur de votre bloc Compte à rebours (haut, droite, bas, gauche). Cela crée un espace entre le minuteur et les bords du bloc.
Attributs :
- ID CSS : affiche l'identifiant unique généré automatiquement pour votre bloc Countdown. Cet ID est créé automatiquement par SeedProd pour le personnalisation du style ou le ciblage JavaScript.
- Classe personnalisée : ajoutez des classes CSS personnalisées pour appliquer des styles spécifiques à partir de votre thème ou de votre CSS personnalisé.
- Attributs personnalisés : ajoutez n'importe quel attribut HTML à l'élément conteneur du compte à rebours. Entrez chaque attribut sur une nouvelle ligne en utilisant le format : nom-de-l'attribut|valeur (par exemple, data-timer|true)
Visibilité des appareils :
- Masquer sur le bureau : masquer le bloc Compte à rebours sur les écrans de bureau.
- Masquer sur tablette : masquer le bloc Compte à rebours sur les tablettes.
- Masquer sur mobile : masquer 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 apparaît à l'écran. Les options disponibles incluent Rebond, Fondu entrant, Zoom avant, Rotation et bien d'autres encore. Une animation d'entrée attire immédiatement l'attention sur votre minuteur dès que les visiteurs le voient apparaître.
Utilisez l'onglet Avancé pour contrôler les styles, l'espacement, les attributs, la visibilité des périphériques et les animations d'entrée pour votre bloc Compte à rebours.
Étape 5 : Enregistrez vos modifications
Une fois que vous avez terminé de configurer le bloc Compte à rebours et de personnaliser son apparence, veillez à enregistrer votre travail.
Vous avez ajouté avec succès un bloc Compte à rebours à votre page ! Les comptes à rebours 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, du lancement d'un produit ou d'un événement à venir. Testez différents types de compte à rebours, modèles et actions d'expiration pour créer une expérience qui captive les visiteurs et les incite à passer à l'action.