2.9 Créer un compte à rebours avec Countdown

Date de mise à jour : 1/10/2025

Créer un compte à rebours avec Countdown

Suivez Nous !

TABLE DES MATIÈRES

👉 Regarde le tuto complet directement ici ⬇️

Points clés de la vidéo

Dans ce tutoriel, vous allez découvrir comment utiliser le widget Countdown de Spectra.

Ce bloc permet d’ajouter un compte à rebours dynamique sur votre site WordPress, un outil particulièrement utile pour :

  • Annoncer un événement (examen, webinaire, ouverture d’un site, lancement produit).
  • Créer de l’urgence marketing lors d’une offre promotionnelle.
  • Donner un repère clair aux visiteurs sur une échéance importante.

👉 Dans le cadre de l’épreuve E5B du BTS NDRC, ce widget peut être utilisé pour montrer votre capacité à créer un site professionnel avec des fonctionnalités engageantes et pertinentes.

1. Ajouter le widget Countdown

  1. Ouvrez la page que vous souhaitez modifier.
  2. Cliquez sur + Ajouter un bloc (Spectra).
  3. Sélectionnez le widget Countdown et glissez-déposez-le dans votre page.

Le compte à rebours apparaît immédiatement : vous pouvez le configurer selon vos besoins.

2. Régler la date et l’heure

Dans l’onglet Général :

  • Date : choisissez la date cible via la liste ou directement dans le calendrier.
  • Heure : définissez l’heure de fin et précisez AM ou PM.
  • Unités affichées : affichez ou masquez les jours, heures, minutes ou secondes.

👉 Exemple : pour un examen prévu le 10 septembre à 9h, vous pouvez paramétrer un compte à rebours précis jusqu’à ce jour et cette heure.

3. Personnaliser les labels et séparateurs

Dans l’onglet Label :

  • Traduisez les unités (jours, heures, minutes, secondes).
  • Choisissez le style du séparateur : slash (/), point, ligne verticale (|), ou laisser par défaut.

Cette étape est importante pour que le widget soit lisible et adapté à votre audience francophone.

4. Enregistrer et tester

Une fois vos réglages terminés :

  • Cliquez sur Publier ou Mettre à jour.
  • Prévisualisez le compte à rebours pour vérifier qu’il s’affiche correctement et qu’il est responsive sur mobile.

👉 Résultat : vous avez un widget clair, moderne et engageant, prêt à informer ou motiver vos visiteurs.


FAQ – Compte à rebours WordPress avec Spectra

1. À quoi sert un compte à rebours sur un site WordPress ?

Il sert à créer un sentiment d’urgence ou à informer d’une échéance importante. Il est souvent utilisé pour les promotions, événements, lancements ou examens.

2. Est-ce que le widget Countdown continue à fonctionner après avoir quitté la page ?

Oui, il se met à jour en temps réel côté navigateur et affichera toujours le temps restant quand l’utilisateur revient.

3. Puis-je personnaliser le design du compte à rebours ?

Oui, vous pouvez changer les couleurs, polices, taille et style dans les réglages Spectra pour l’adapter à la charte graphique du site.

4. Peut-on afficher plusieurs comptes à rebours sur une même page ?

Oui, il suffit d’ajouter plusieurs widgets Countdown, chacun configuré avec sa propre date et heure.

5. Que se passe-t-il lorsque le compte à rebours arrive à zéro ?

Par défaut, il reste affiché à zéro. Si vous souhaitez déclencher une action (ex. : affichage d’un message ou redirection), il faudra utiliser un plugin complémentaire.

📌 Conseils pour l’examen (E5B)

  • Utilisez le compte à rebours pour illustrer un événement concret lié au cas pratique (ex. : ouverture d’un point de vente, lancement d’une campagne).
  • Traduisez systématiquement les labels pour éviter un mélange anglais/français.
  • Testez l’affichage sur mobile pour vérifier que le compte à rebours reste lisible.

⚠️ Erreurs à éviter

  • Oublier de traduire les labels → vos visiteurs verront “days / hours” au lieu de “jours / heures”.
  • Mettre un compte à rebours trop petit → difficilement lisible.
  • Ne pas tester la date/heure → le compte à rebours peut afficher zéro trop tôt si la configuration est incorrecte.
  • Surcharger la page → le compte à rebours doit être mis en valeur mais pas noyer le contenu principal.

✅ Checklist révision rapide

  • Widget Countdown ajouté.
  • Date et heure correctement configurées.
  • Labels traduits en français.
  • Séparateurs choisis et testés.
  • Affichage vérifié sur PC, tablette et mobile.

📚 Envie d’aller plus loin ? Découvrez notre guide complet BTS NDRC E5B 2025-2026 – Formation WordPress BTS NDRC 2025 pour maîtriser toutes les compétences de l’épreuve !

🎥 Retrouvez tous nos tutos en vidéo sur la playlist YouTube dédiée !

Révise malin pour ton BTS NDRC

Service de Marketing Digital Performant pour TPE et PME

Partager

Une question ?

photo-profil-Daniel-FERRAS

Daniel FERRAS

Responsable technique

Contactez nous pour obtenir une démo, une demande de devis ou de support.

Un membre de notre équipe vous recontacte sous 24 h