Comment ajouter un widget de compte à rebours dans WordPress (3 méthodes faciles)

Ajouter un compte à rebours à votre site WordPress peut le rendre plus attrayant. Que vous mettiez en avant le lancement d'un produit, que vous marquiez une date importante ou que vous créiez de l'anticipation pour un événement, un compte à rebours fait le travail efficacement.

Par exemple, nous avons utilisé des comptes à rebours sur nos sites Web pour mettre en évidence des ventes de produits, des offres du Black Friday, et plus encore.

En quelques étapes seulement, vous pouvez installer ce widget accrocheur sur votre site Web. Il attire non seulement l'attention, mais informe également votre public.

Dans cet article, vous apprendrez trois façons simples d'ajouter un compte à rebours à votre site WordPress. Même si vous n'êtes pas un expert en technologie, nous avons ce qu'il vous faut.

Quand et pourquoi utiliser un widget de compte à rebours ?

Les comptes à rebours sont polyvalents et peuvent être utilisés dans divers scénarios. Ils ajoutent de l'excitation et de l'urgence, encourageant les visiteurs à agir.

Lancement d'un nouveau site Web ? Un compte à rebours peut créer de l'anticipation et susciter l'enthousiasme. Vous affichez le compte à rebours sur une belle page « Prochainement » pour encourager les visiteurs à découvrir les dernières mises à jour.

Un autre excellent moment pour utiliser un compte à rebours est pour les ventes ou promotions à venir sur votre boutique en ligne. En affichant un compte à rebours, vous informez vos clients sur les offres à durée limitée, ce qui stimule les ventes et l'engagement.

Les comptes à rebours peuvent également être utiles pour les organisateurs d'événements. Qu'il s'agisse d'un webinaire, d'une conférence ou d'une réunion sociale, la mise en place d'un minuteur permet aux participants de savoir exactement quand l'événement aura lieu.

Lors de la maintenance de votre site web, les comptes à rebours sont également utiles. Ils permettent aux visiteurs de savoir quand le site sera à nouveau disponible, vous pouvez ainsi les tenir informés et réduire leur frustration.

Pour des utilisations à plus petite échelle, comme marquer une étape personnelle ou un anniversaire, les comptes à rebours ajoutent du style à votre site WordPress.

Désormais, vous pouvez afficher un compte à rebours dans vos articles, vos pages et votre zone de widget de barre latérale.

Les comptes à rebours peuvent également être ajoutés aux popups de type lightbox, aux barres flottantes, aux boîtes de défilement et à d'autres éléments de conception pour engager les visiteurs du site et les faire revenir sur votre site web.

Comme il existe de nombreux cas d'utilisation pour un compte à rebours, nous avons répertorié 3 méthodes différentes pour ajouter un widget de compte à rebours dans WordPress :

Tutoriel vidéo

S'abonner à WPBeginner

Si vous préférez des instructions écrites, continuez à lire.

Méthode 1 : Ajouter un widget de compte à rebours à l'aide du plugin Countdown Timer Ultimate (Gratuit)

Countdown Timer Ultimate est un plugin simple qui vous permet d'ajouter un compte à rebours basique à votre site web.

Dans ce tutoriel, nous utiliserons le plugin gratuit, car il dispose de tous les outils nécessaires pour créer un compte à rebours.

Pour commencer, la première chose à faire est d'installer et d'activer le plugin Countdown Timer Ultimate. Si vous avez besoin d'aide, vous pouvez consulter notre guide étape par étape sur comment installer un plugin WordPress.

Après l'activation, vous devrez vous rendre sur Countdown Timer » Add Timer depuis votre zone d'administration WordPress.

Sur cet écran, vous pouvez donner un titre à votre minuteur. Tapez simplement le titre que vous souhaitez dans le champ « Add New Timer ».

Après cela, vous pouvez faire défiler jusqu'à la section « Countdown Timer – Settings » pour définir la date et l'heure d'expiration de votre compte à rebours.

Une fois que vous avez localisé le champ « Date et heure d'expiration », sélectionnez la date dans le sélecteur de date. Ensuite, vous pouvez faire glisser les curseurs « Heure », « Minute » et « Seconde » pour ajuster l'heure d'expiration.

Cliquez simplement sur « Terminé » pour passer à l'étape suivante.

L'étape suivante consiste à définir l'étiquette du minuteur.

Pour afficher les indicateurs de jours, heures, minutes et secondes dans votre compte à rebours, cochez toutes les cases dans le champ « Étiquette du minuteur ».

Maintenant, faisons défiler la page et passons à l'onglet « Design » pour styliser le compte à rebours.

Dans la première section, « Paramètres de design », vous pouvez choisir un design et définir la taille du minuteur.

Malheureusement, les utilisateurs gratuits ne peuvent choisir que le design de minuteur « Style Cercle 1 ». Cependant, dans « Largeur du minuteur », nous pouvons définir la largeur de notre minuteur. Ici, nous la réglons sur 850 px.

Sous « Largeur du minuteur », vous trouverez la section « Paramètres du style du cercle ».

La première chose que vous voudrez faire est de choisir une animation. Vous avez deux options : « Lisse » et « Tics ».

Une fois que vous avez décidé de l'animation du minuteur, vous pouvez définir la largeur du premier plan et de l'arrière-plan du cercle en faisant glisser les curseurs.

Après cela, vous pouvez passer à la personnalisation des couleurs du compte à rebours.

Dans les « Paramètres des couleurs d'arrière-plan de l'horloge », vous pouvez ajuster la couleur de l'arrière-plan et modifier individuellement la couleur des jours, des heures, des minutes et des secondes.

Une fois que vous êtes satisfait des paramètres, cliquez sur le bouton « Publier ».

Afficher votre widget de compte à rebours dans WordPress

Maintenant que vous avez configuré votre widget de compte à rebours, il est temps de l'ajouter à votre site Web.

Tout d'abord, cliquez sur l'élément de menu « Compte à rebours » de votre site Web WordPress. Le minuteur que vous venez de créer sera répertorié dans le tableau « Compte à rebours ».

À côté de votre compte à rebours, vous verrez un shortcode que vous devez copier.

Après avoir copié le shortcode, vous voudrez ouvrir votre article ou votre page où vous souhaitez afficher le compte à rebours.

À partir d'ici, vous pouvez cliquer sur le bouton « + » pour ajouter le bloc Shortcode. Ensuite, collez simplement ce shortcode dans la zone de contenu de votre article ou page WordPress.

Ensuite, vous voudrez vous assurer de cliquer sur le bouton « Mettre à jour » ou « Publier » pour enregistrer vos modifications.

Vous pouvez maintenant visiter votre site Web pour voir le widget de compte à rebours en action.

Si vous utilisez un thème classique, vous pourrez peut-être également ajouter ce compte à rebours à la barre latérale de votre site.

Allez simplement à la page Apparence » Widgets. Ensuite, vous pouvez cliquer sur le bouton « + » dans la section « Barre latérale principale » et rechercher le bloc Shortcode.

Cliquez simplement dessus lorsqu'il apparaît et collez le shortcode du compte à rebours.

Une fois que vous avez terminé, n'oubliez pas de cliquer sur le bouton « Mettre à jour » pour conserver les paramètres de votre widget.

Vous pouvez maintenant visiter votre site pour voir le compte à rebours dans la barre latérale ou la zone prête pour les widgets.

Méthode 2 : Ajouter un widget de compte à rebours à l'aide d'OptinMonster (Recommandé)

OptinMonster est le meilleur plugin de popup WordPress du marché, mais il fait bien plus que de simples popups. Il vous aide à convertir les visiteurs du site qui abandonnent en abonnés et en clients.

En utilisant la fonctionnalité de compte à rebours d'OptinMonster, vous pouvez intégrer le compte à rebours dans une fenêtre contextuelle de type lightbox, un widget de barre latérale, une barre flottante ou tout autre type de campagne OptinMonster.

L'outil offre un moyen intelligent d'afficher un compte à rebours avec un beau design. Il vous permet même de créer des comptes à rebours perpétuels dans WordPress.

Un compte à rebours permanent démarre un compte à rebours pour chaque visiteur individuel. Ensuite, le minuteur commence lorsque la personne arrive sur votre site. Il est également appelé minuteur dynamique.

Tout d'abord, visitons le site web OptinMonster et inscrivons-nous à un plan qui répond à vos besoins.

Une fois cela fait, vous pouvez installer le plugin OptinMonster sur votre site WordPress. Pour plus de détails, consultez notre guide étape par étape sur comment installer un plugin WordPress.

Ce plugin connectera votre site WordPress à l'application OptinMonster. Après activation, vous pouvez cliquer sur le bouton « Connecter un compte existant » et suivre les instructions pour démarrer le processus d'intégration.

Après cela, une fenêtre contextuelle apparaîtra. Sélectionnez simplement l'adresse e-mail que vous avez utilisée pour vous inscrire à un compte OptinMonster et cliquez sur le bouton « Connecter à WordPress ».

Le plugin connectera maintenant votre site WordPress à votre compte OptinMonster.

Une fois connecté, vous pouvez commencer à créer une nouvelle campagne depuis votre tableau de bord OptinMonster. Rendez-vous simplement sur OptinMonster » Campagnes et cliquez sur le bouton « Créer votre première campagne ».

Le plugin offre une variété de types de campagnes et de modèles parmi lesquels choisir.

Vous pouvez utiliser n'importe quel type de campagne et y ajouter le compte à rebours. Pour ce tutoriel, nous utiliserons le type de campagne « Popup ». Ensuite, nous utiliserons le modèle « Obtenir un code de réduction ».

Une fenêtre contextuelle où vous devez nommer le modèle apparaîtra. Le nom est uniquement pour votre référence, vous pouvez donc utiliser ce que vous voulez.

Par exemple, nous avons nommé notre campagne « Compte à rebours ».

Une fois que vous avez fait cela, cliquez sur « Commencer la création ». OptinMonster vous redirigera alors vers l'interface de création.

À partir de là, explorons la section « Bloc » dans le panneau de gauche. Ensuite, faites simplement glisser le bloc « Compte à rebours » et déposez-le dans l'aperçu du panneau de droite lorsque vous le voyez.

Ensuite, vous pouvez sélectionner le « Type de compte à rebours » dans le champ déroulant du panneau latéral. Il existe deux options : « Statique » et « Dynamique ».

Maintenant, le choix entre les deux types dépend entièrement de votre objectif. Un minuteur statique, comme son nom l'indique, reste fixé à une seule date et heure de fin, ce qui le rend idéal pour des événements uniques comme le lancement d'un produit ou un webinaire.

Mais que faire si vous voulez créer un sentiment d'urgence récurrent ? C'est là que le minuteur dynamique s'avère utile.

Disons que votre boutique en ligne organise une vente flash chaque semaine. Un minuteur dynamique se réinitialisera automatiquement après chaque période de vente, ce qui peut être d'une grande aide.

Pour ce guide, nous allons créer un minuteur de compte à rebours dynamique pour promouvoir les ventes flash hebdomadaires.

Nous allons donc choisir « Dynamique » dans le menu déroulant et définir la date et l'heure d'expiration. Ensuite, vous voudrez peut-être également activer l'option « Suivi des conversions ? » pour recueillir des informations sur la campagne.

Si vous le souhaitez, vous pouvez personnaliser l'apparence du minuteur de compte à rebours.

Passez simplement à l'onglet « Avancé », et vous y trouverez des options de personnalisation pour modifier la couleur d'arrière-plan, les polices, les ombres, etc. du minuteur.

Une fois que tout est configuré, dirigez-vous vers l'onglet « Règles d'affichage ».

C'est là que vous contrôlez exactement quand et sur quelles pages votre popup apparaîtra. Le réglage par défaut est après 5 secondes sur chaque page, mais vous pouvez facilement le personnaliser pour répondre à vos besoins.

Alternativement, vous pouvez profiter du MonsterLink d'OptinMonster.

Cette fonctionnalité vous permet de déclencher l'apparition du pop-up lorsque les utilisateurs cliquent sur un lien ou un bouton de votre site. Ainsi, les visiteurs ont un contrôle direct sur le moment où ils souhaitent voir votre offre ou votre message.

Pour utiliser MonsterLink, vous devrez d'abord cliquer sur le menu déroulant « temps sur la page ». Ensuite, sélectionnez simplement « Quand (Déclencheurs) » puis « MonsterLink (Au clic) ».

Une fois ajouté, vous pouvez cliquer sur « Copier le code MonsterLink ». Vous en aurez besoin lors du processus d'intégration.

Ensuite, vous pouvez supprimer l'autre règle d'affichage en cliquant sur l'icône de corbeille.

Il est maintenant temps de publier la campagne avec le compte à rebours. Pour ce faire, passons à l'onglet « Publier ».

À partir d'ici, vous pouvez changer le statut de « Brouillon » à « Publier ». Après cela, cliquez simplement sur le bouton « Enregistrer » et quittez l'éditeur.

Vous serez ensuite redirigé vers une page OptinMonster, où vous devrez vérifier le statut de votre campagne.

Dans la section « Visibilité et statut », changez le statut « En attente » en « Publié ».

N'oubliez pas de cliquer sur le bouton vert « Enregistrer les modifications » pour vous assurer que vos changements sont sauvegardés.

Il ne reste plus qu'à ajouter le code MonsterLink à votre site WordPress.

Tout d'abord, ouvrez l'article ou la page où vous souhaitez afficher la campagne avec le compte à rebours.

Par exemple, nous allons ajouter la nôtre à la page « Galerie » de notre site de photographie de démonstration. Naviguons donc vers Pages » Toutes les pages et cliquons sur « Modifier » sur la page « Galerie ».

Dans l'éditeur de page, vous pouvez cliquer sur le bouton « + » et rechercher le bloc HTML personnalisé. Cliquez dessus pour l'ajouter à la page.

Dans le bloc « HTML personnalisé », collez simplement le code MonsterLink que vous avez copié précédemment.

Voici à quoi cela pourrait ressembler dans l'éditeur de blocs de la page :

Maintenant, l'appel à l'action « Abonnez-vous maintenant ! » pourrait ne pas convenir à l'objectif de la campagne.

Changeons-le donc en « Obtenez notre code promo limité », « Débloquez des réductions exclusives » ou quelque chose qui correspond mieux au contexte. Une fois terminé, vous pouvez « Mettre à jour » ou « Publier » la page.

Maintenant, si vous visitez la page, vous verrez MonsterLink en action.

Essayez simplement de cliquer dessus, et vous verrez la campagne apparaître avec le compte à rebours.

Voici à quoi cela ressemble sur notre page de démonstration « Galerie » :

Méthode 3 : Ajouter un widget de compte à rebours à l'aide de SeedProd

SeedProd est le meilleur constructeur de thèmes et de pages de destination pour WordPress.

Son constructeur par glisser-déposer vous permet de créer des pages de destination incroyables et d'ajouter un compte à rebours pour attirer l'attention de vos visiteurs.

Pour utiliser la fonctionnalité de compte à rebours, vous aurez besoin de SeedProd Pro. Avec le plan Pro, vous pouvez également accéder à différents modèles, blocs de page pour la personnalisation, intégrations de marketing par e-mail, et plus encore.

La première chose à faire est d'installer et d'activer le plugin SeedProd Pro sur votre site WordPress. Pour plus de détails, consultez notre guide étape par étape sur comment installer un plugin WordPress.

Après l'activation, vous pouvez aller dans SeedProd » Paramètres depuis votre tableau de bord WordPress pour ajouter et vérifier votre clé de licence. Vous pouvez obtenir cette clé dans votre compte SeedProd.

Après avoir saisi la clé de licence, vous pouvez cliquer sur le bouton « Vérifier la clé ».

Vous pouvez également installer SeedProd Pro manuellement. Avant de le faire, assurez-vous d'avoir téléchargé le fichier .zip de SeedProd Pro depuis votre compte SeedProd.

Ensuite, vous pouvez aller dans Plugins » Ajouter un nouveau plugin et cliquer sur le bouton « Télécharger un plugin » pour afficher l'option « Choisir un fichier ». Téléchargez le fichier .zip de SeedProd Pro.

Après cela, cliquez simplement sur le bouton « Installer maintenant ».

Maintenant, vous êtes prêt à créer une nouvelle page de destination. Pour commencer, vous voudrez naviguer vers SeedProd » Pages de destination.

SeedProd vous permet de configurer différents types de pages, y compris des pages « Bientôt disponible », des pages de panier WooCommerce personnalisées, des pages de connexion et des pages 404. Vous pouvez également créer d'autres pages de destination en cliquant sur le bouton « Ajouter une nouvelle page de destination », comme une page de remerciement ou une page d'inscription à un webinaire.

Pour ce tutoriel, nous utiliserons la page « Bientôt disponible ». C'est un excellent endroit pour ajouter un compte à rebours et rappeler à votre public un produit ou un événement à venir.

Cliquons sur le bouton « Configurer une page « Bientôt disponible » ».

Ensuite, vous sélectionnerez un modèle pour votre page de destination.

Bien qu'il existe une option pour créer une page à partir de zéro en utilisant un modèle vierge, nous vous recommandons d'utiliser un modèle, car cela vous fait gagner du temps et vous permet de modifier la conception comme vous le souhaitez.

Une fois que vous avez trouvé le modèle parfait, vous pouvez le survoler et cliquer sur le bouton « coche » pour l'utiliser.

Sur l'écran suivant, vous serez dirigé vers le constructeur de pages par glisser-déposer de SeedProd sous l'onglet « Conception ».

Ici, vous pouvez personnaliser la page de destination en ajoutant ou en supprimant des sections et des blocs. Vous pouvez également formater la mise en page.

Pour ajouter le compte à rebours, faites simplement défiler le panneau de gauche jusqu'à la section des blocs « Avancé ». Ensuite, faites glisser et déposez le bloc « Compte à rebours » n'importe où sur votre page de destination.

Une fois que vous avez ajouté le bloc de compte à rebours, personnalisons-le. Cliquez simplement dessus et vous verrez les options de personnalisation dans le panneau de gauche.

Il y a 3 onglets que vous pouvez consulter : « Contenu », « Modèles » et « Avancé ». Examinons-les un par un.

Dans l'onglet « Contenu », vous pouvez choisir un type de compte à rebours, définir la date et l'heure de fin, sélectionner un fuseau horaire, ajuster l'alignement du minuteur, et plus encore.

Passons maintenant à « Modèles ».

Ici, SeedProd vous permet de choisir parmi 5 styles de compte à rebours disponibles.

Enfin, l'onglet « Avancé » comporte plusieurs sections.

La section « Styles » vous permet de modifier les paramètres de typographie, les couleurs et les bordures du minuteur.

Ensuite, vous voudrez peut-être faire défiler l'onglet « Avancé » jusqu'à la section « Effets d'animation ».

Ici, vous pouvez appliquer une animation pour mettre en évidence le compte à rebours lorsque les visiteurs le voient. Cliquez simplement sur le menu déroulant et choisissez parmi les effets disponibles, tels que « Flash », « Pulse », « Swing », « Wobble », et plus encore.

Si vous souhaitez ajuster les autres éléments de la page de destination, tels que les textes ou les boutons de médias sociaux, vous pouvez cliquer dessus. Ensuite, SeedProd ouvrira les options de personnalisation.

Lorsque tout est configuré, cliquez sur l'onglet « Paramètres de la page » pour publier votre page de destination avec un compte à rebours.

La première chose que vous voudrez faire est de donner un titre à la page de destination. Par exemple, nous avons nommé notre page de destination « Bientôt disponible ».

Ensuite, vous pouvez changer le « Statut de la page » de « Brouillon » à « Publier ». Vous avez également la possibilité d'afficher ou de masquer le lien « Propulsé par SeedProd ».

Ensuite, examinons le « Contrôle d'accès » sous l'onglet « Paramètres de la page » et gérons qui peut voir votre page de destination.

Cette fonctionnalité est très utile si vous souhaitez que certaines personnes puissent contourner la page « Bientôt disponible » et travailler au développement de votre site web. SeedProd vous permet également d'inclure et d'exclure les URL sur lesquelles la page « Bientôt disponible » sera affichée.

Par défaut, la page sera visible sur l'ensemble du site web. Cependant, vous pouvez la modifier pour qu'elle s'affiche uniquement sur la page d'accueil ou sur des URL spécifiques.

Après cela, vous pouvez optimiser votre page pour les moteurs de recherche en accédant aux paramètres SEO.

SeedProd vous permet d'ajouter un titre SEO, une description, une favicon et une miniature pour les réseaux sociaux.

Si vous souhaitez ajouter des extraits de code à votre page de destination, rendez-vous dans la section « Scripts » des paramètres de la page. Ici, vous pouvez ajouter des scripts à l'en-tête, au corps et au pied de page de votre page.

Par exemple, vous pouvez ajouter le code de suivi Google Analytics dans le champ « Scripts d'en-tête » pour voir comment les gens utilisent votre page de destination.

Une fois que vous avez terminé, assurez-vous de cliquer sur le bouton « Enregistrer ». Vous pouvez également prévisualiser votre page de destination pour vous assurer que tout est correctement configuré.

Après cela, cliquez simplement sur le bouton « X » pour fermer l'éditeur SeedProd.

Maintenant, allons dans SeedProd » Pages de destination et changeons le statut de votre page « Bientôt disponible » à « Actif ».

C'est tout. Votre page de destination avec un compte à rebours sera en ligne.

Vous pouvez maintenant visiter votre site web pour voir le compte à rebours « Bientôt disponible » en action.

Nous espérons que cet article vous a aidé à apprendre comment ajouter un widget de compte à rebours dans WordPress. Ensuite, vous voudrez peut-être aussi consulter d'autres astuces de conception de sites Web sur comment ajouter un bandeau d'actualités défilant et comment ajouter des témoignages rotatifs dans WordPress.

Si cet article vous a plu, abonnez-vous à notre chaîne YouTube pour des tutoriels vidéo WordPress. Vous pouvez également nous retrouver sur Twitter et Facebook.