Comment créer une page Coming soon ou une page de maintenance sur WordPress ?


Aujourd’hui, je vous propose de découvrir un plugin WordPress très utile si vous avez besoin de mettre votre blog en maintenance ou si vous préparez le lancement de votre futur blog. Il s’agit de Coming Soon Page & Maintenance Mode.

Le plugin va créer une page entièrement personnalisable qui sera affichée aux visiteurs du site pendant que vous travaillez dessus. En tant qu’administrateur, vous pourrez continuer à visiter votre blog normalement sans voir la page de maintenance.

Blog en chantier : créez une page Coming Soon ou une page de maintenance !
Blog en chantier : créez une page Coming Soon ou une page de maintenance !

Installer le plugin Coming Soon Page & Maintenance Mode

Allez dans le menu Extensions > Ajouter de votre blog WordPress et recherchez le plugin Coming Soon Page & Maintenance Mode by SeedProd. À l’heure où j’écris l’article, il a été installé sur plus de 300 000 blogs et recueille une note de 5/5.

Vous pouvez ensuite l’activer. Le fait d’activer le plugin ne met pas automatiquement le blog en maintenance donc vous pouvez faire vos réglages en toute tranquillité avant d’activer le mode maintenance proprement dit.

Vous pouvez à tout instant retrouver la rubrique de paramétrage du plugin depuis le menu Réglages > Page Coming Soon & Mode Maintenance de votre blog WordPress.

Activer le plugin Coming Soon Page & Maintenance Mode
Activer le plugin Coming Soon Page & Maintenance Mode

La version gratuite du plugin comporte quatre onglets, le quatrième permettant d’obtenir un aperçu de votre page de maintenance.

L’onglet Contenu

Comme son nom l’indique, il vous permet de définir le contenu de votre page de maintenance. Vous pouvez d’abord choisir entre le mode « Coming Soon » et le mode « Maintenance ».

Dans le premier cas, ça va permettre au moteur de recherche de repérer votre site même s’il n’est pas encore ouvert au public. Dans le second cas, ça signalera au moteur de recherche que votre site est temporairement indisponible, ce qui est le cas lors d’une opération de maintenance.

Activer le plugin
Activer le plugin

Plus bas, vous pouvez afficher un logo, un texte d’entête qui apparaîtra comme gros titre de la page et un message. Vous pouvez personnaliser le code de ce message pour y inclure les éléments de votre choix. Par exemple, avant l’ouverture de mon blog voyage, j’avais mis le formulaire d’inscription à ma newsletter à cet endroit.

Vous pouvez aussi définir si vous affichez les crédits du créateur du plugin ou pas.

Contenu de la page Coming Soon
Contenu de la page Coming Soon

Toujours dans cet onglet contenu, vous disposez d’options complémentaires : définir la favicon de la page maintenance, qui s’affichera dans l’onglet du navigateur ; définir le titre et la méta description qui s’afficheront dans les résultats de recherche Google ; entrer un code Google Analytics afin de suivre le trafic sur votre page d’attente ou de maintenance.

Options de la page de maintenance
Options de la page de maintenance

L’onglet Design

Il vous permet de définir l’apparence de votre page Coming Soon ou de maintenance. Le plugin étant entièrement traduit en français, les options sont plutôt faciles à prendre en main. Vous pouvez choisir une couleur d’arrière-plan, importer une image, faire en sorte qu’elle soit responsive pour un affichage optimal sur les mobiles et tablettes, assombrir légèrement l’arrière-plan pour que le texte ressorte mieux ou encore définir de manière très précise la position de l’arrière-plan (fixe ou pas, centré ou pas, etc).

Apparence de la page de maintenance
Apparence de la page de maintenance

Par défaut, le contenu ne s’affiche pas sur toute la largeur de la page mais sur une largeur maximale de 600 pixels quand le lecteur est sur un ordinateur. Si vous voulez modifier cette valeur par défaut, c’est possible.

Enfin, vous pouvez choisir les couleurs du texte, des liens, du gros titre de la page ou encore la police d’écriture et entrer du code CSS personnalisé pour un paramétrage encore plus fin du rendu de votre page. Je précise au passage que les polices d’écriture proposées sur la version gratuite sont des polices Web de base sans particularité (ce ne sont pas des polices Google par exemple).

L’onglet Avancé

Il vous offre des options complémentaires destinées aux utilisateurs experts.

Vous pouvez par exemple charger des scripts dans le header ou dans le pied de page du site ou encore créer votre propre code HTML pour remplacer le code par défaut de la page. Dans mon cas, comme la page Coming soon du blog comportait le formulaire d’inscription à la newsletter, j’avais ajouté dans l’en-tête de la page les scripts permettant à la newsletter de fonctionner.

L'onglet Avancé du plugin de maintenance
L’onglet Avancé du plugin de maintenance

Informations utiles

Une fois que vous avez fait tous vos réglages, vous pouvez cliquer sur l’onglet « Aperçu » pour visualiser la page. La mienne était assez simple :

Page Coming Soon sur le blog
Page Coming Soon sur le blog

Quand le mode Maintenance ou Coming soon est activé, les visiteurs du blog sont automatiquement dirigés vers cette page quand ils essaient de consulter vos contenus. Quant à vous, si vous êtes connecté à l’administration du blog, vous pouvez consulter le site de manière totalement normale.

Il faut néanmoins savoir que si vous utilisez un plugin de cache, il peut perturber l’affichage de la page de maintenance : soit vous allez voir la page de maintenance alors que vous êtes connecté à l’administration ; soit vos lecteurs vont continuer à voir votre site normalement alors qu’il est en mode maintenance. Dans ce cas, il suffit de désactiver temporairement le plugin de cache le temps d’effectuer votre opération de maintenance. Vous pourrez sans problème le réactiver à la fin.

N’oubliez pas de désactiver le mode Maintenance ou Coming Soon une fois que votre blog est fin prêt ! On a vite fait de l’oublier puisqu’en tant qu’administrateur, on peut consulter son blog normalement. Néanmoins, quand le blog est en maintenance, vous verrez un bouton rouge en haut à droite de l’administration histoire de vous rappeler que les internautes ne peuvent pas accéder à tout le contenu !

Mode Coming Soon activé
Mode Coming Soon activé

A quoi sert une page Coming Soon ou une page de maintenance ?

Ce type de plugin est particulièrement pratique…

  • Quand vous voulez commencer à promouvoir votre blog avant son lancement : vous pouvez déjà recueillir des abonnés à votre newsletter, créer des liens vers votre blog alors qu’il n’existe pas encore. Les visiteurs tomberont sur une page Coming Soon esthétique.
  • Quand vous souhaitez réaliser tranquillement des mises à jour : il est parfois difficile de laisser son blog ouvert au public quand on effectue une très grosse mise à jour, le plugin de maintenance permet alors de fermer temporairement son blog pour travailler sans pression.
  • Quand vous souhaitez communiquer avec vos lecteurs sur une maintenance en cours : la vie d’un blog peut être ponctuée de grands changements, par exemple la mise en place d’un nouveau thème, d’une nouvelle page d’accueil ou la réorganisation des contenus. Grâce à un plugin comme Coming Soon Page & Maintenance Mode by SeedProd, vous pouvez informer les visiteurs en temps réel. Par exemple, dans le champ « Message » de l’onglet Contenu, vous pouvez expliquer ce que vous êtes en train de faire et à quelle heure votre blog sera à nouveau disponible.

La version payante du plugin

Elle permet d’aller encore plus loin dans la personnalisation (elle intègre par exemple les Google Fonts), d’utiliser des slideshows ou un arrière-plan vidéo.

Elle propose des options beaucoup plus poussées pour la capture d’adresses e-mail, est compatible avec le plugin multilingue WPML et permet d’utiliser des shortcodes sur la page de maintenance, d’afficher une barre de progression ou un compteur…

Vous pouvez consulter un comparatif complet entre la version gratuite et la version payante sur le site de SeedProd.

Racontez-moi ! Est-ce que vous avez ouvert votre blog tout de suite après l’installation ou est-ce que vous l’avez laissé en maintenance un moment avant de l’ouvrir au public ? Est-ce qu’il vous arrive de faire de grosses opérations de maintenance ?

Thèmes : Maintenance WordPress 

Poster un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

28 commentaires sur “Comment créer une page Coming soon ou une page de maintenance sur WordPress ?

  • Stef

    Bonsoir Marlène, merci beaucoup pour ces explications. Je travaille au lancement de mon blog et je rencontre 2 problèmes :
    1. je n’arrive pas à saisir de texte dans l’onglet contenu (même en mode texte), le curseur n’apparaît pas
    2. j’ai installé contactform 7 pour y insérer un formulaire d’inscription mais je ne vois pas comment l’intégrer dans cette page coming soon.

    Merci beaucoup de votre aide, Stef

    Répondre à Stef
    • Marlène

      Hello Stef, si le champ contenu ne fonctionne pas, c’est peut-être lié à une incompatibilité avec un autre plugin utilisé sur le blog.

      On peut intégrer un formulaire en passant cette zone contenu en mode HTML et en copiant le formulaire HTML dedans (le support des shortcodes n’est assuré que par la version pro du plugin). Sinon, on peut coder une page HTML sur mesure dans l’onglet « Avancé », au niveau du code HTML personnalisé.

      Répondre à Marlène
    • Stef

      Bonsoir Marlène et merci beaucoup pour ces précisions !! Tout est clair, c’était effectivement un plugin d’emojis qui posait problème. Pour le code HTML, je vais passer à la version Pro je pense, ne sachant pas coder…Merci encore !

      Répondre à Stef
    • Marlène

      En fait, ton plugin de formulaire de contact te fournit peut-être un code HTML « prêt à l’emploi » vérifie ce point… car si c’est le cas, tu as juste à copier-coller le code en question dans la zone de contenu.

      Répondre à Marlène
  • Yousra

    Bonjour,
    Merci beaucoup pour cet article qui est très clair et utile !
    J’ai juste un petit soucis au niveau des CSS et des JS qui ne sont pas chargés et je ne vois pas d’où ça vient …
    J’ai rajouté mon propre code html et css aussi dans l’onglet « avancé ».

    Pourriez-vous m’aider pour savoir d’où ça pourrait venir s’il vous plaît ?

    Merci par avance ^^

    Répondre à Yousra
    • Marlène

      Bonjour Yousra, peut-être une histoire de cache (l’ancienne version de la page « mise en mémoire », qui fait que les changements ne s’affichent pas). Ça vaut le coup d’essayer de vider le cache sur le navigateur…

      Répondre à Marlène
    • Yousra

      C’est déjà fait :(
      À 3 reprises mais rien n’y fait …

      Répondre à Yousra
    • Marlène

      Et contacter le créateur du plugin via le forum de support ? Il a l’air de répondre aux questions des internautes donc peut-être qu’on lui a déjà signalé le même problème.

      Répondre à Marlène
    • Yousra

      Problème réglé en contactant le créateur SeedProd qui est très réactif, d’une aide très précieuse et très gentil de surcroît !

      Merci à vous aussi pour votre aide et votre travail !

      Excellent fin d’année et meilleurs voeux

      Répondre à Yousra
    • Marlène

      Merci Yousra, je vous souhaite aussi une très belle année 2018 ! Quel était le problème avec le plugin au final ?

      Répondre à Marlène
  • Tatiana

    Bonjour,

    J’ai réussi et j’ai intégré ma newsletter avec mailchimp. Sauf que on ne peut pas valider notre inscription a la newsletter, il ne se passe rien. Je ne sais pas où se trouve le script, ni quoi faire, je sèche.

    Help ?

    Répondre à Tatiana
    • Marlène

      Bonjour Tatiana, les scripts éventuels sont à récupérer sur le site de MailChimp, rubrique Lists puis Signup Forms. Il y a toutes sortes de formulaires à disposition, dont les « Embedded forms ». On peut ensuite récupérer le code de ces formulaires pour l’insérer où on le souhaite (pop-up, page de maintenance, etc). Je ne sais pas comment tu as intégré ta newsletter à l’heure actuelle mais il manque peut-être une étape.

      Répondre à Marlène
  • Muriel

    Bonjour Marlène, j’espère qu’il n’est pas trop tard pour poser une question !
    J’ai utilisé le mode coming soon pour remettre à jour mon site internet.
    Maintenant qu’il est prêt, je l’ai désactivé, et le site est à nouveau en ligne. Cependant, tout le travail que j’ai fait pour le SEO n’apparait pas (le titre n’est pas le bon) et le texte que j’avais mis pour le coming soon apparaît toujours dans la méta description (alors qu’un autre texte est prévu). Vu le temps que j’y ai passé, ça me décourage un peu. Avez-vous un conseil à me donner ?
    Merci beaucoup
    Muriel

    Répondre à Muriel
    • Marlène

      Bonjour Muriel, vous parlez de ce qui apparaît sur Google ? Pour que les changements soient pris en compte il faut attendre que le moteur de recherche repasse sur la page concernée.

      Répondre à Marlène
    • Muriel

      Oui, je parle en effet de ce qui apparaît sur Google. C’est donc normal et ça prend un peu de temps ?

      Répondre à Muriel
    • Marlène

      Oui c’est normal, tout dépend de la fréquence à laquelle Google passe sur la page, ça peut prendre quelques heures comme quelques semaines !

      Répondre à Marlène
    • Muriel

      Merci beaucoup !

      Répondre à Muriel
  • Alexandra

    Bonjour Marlène,

    Merci beaucoup pour cet article très instructif. Je suis parvenue à créer ma page « Coming soon » en suivant ce pas à pas, mais je souhaiterais y ajouter un formulaire d’inscription comme dans ton modèle. Comment procéder, sachant que je suis ultra débutante ;-).
    Grand merci.

    Belle journée

    Répondre à Alexandra
    • Marlène

      Hello, je n’ai pas de mode d’emploi à te donner car le code n’est jamais le même d’un formulaire à l’autre, il faut simplement l’intégrer dans l’onglet Contenu en utilisant l’éditeur « Texte » à la place de l’éditeur visuel.

      Répondre à Marlène
    • GhjuliaMaria

      Bonjour Marlène,

      Dans le même contexte que Alexandra, je voulais savoir ou trouver le code d’un formulaire ? C’est un plugin ou ça se trouve ailleurs et il faut juste copier le code dans l’onglet texte ?!
      Merci d’avance.

      Répondre à GhjuliaMaria
    • Marlène

      Bonjour ! On peut soit le coder soi-même, soit le récupérer effectivement depuis un plugin (le choix du plugin dépendant de l’objectif du formulaire !).

      Répondre à Marlène
    • GhjuliaMaria

      Merci beaucoup !
      J’ai trouvé sur un autre de tes articles comment faire ce que je souhaitais !

      Merci beaucoup pour ton blog sans lequel en tant que grande débutante je serai totalement perdue !

      Répondre à GhjuliaMaria
  • idrisse

    Félicitation pour votre site et l’aide apportée.

    Répondre à idrisse
  • Paulino

    Je suis sur Blogger.
    1- J’aimerais demander comment l’activer sur blogger ?
    2- Jaimerais aussi demander comment ajouter « Related Post » à blogger. J’ai essayé en vain beaucoup d’articles. Merci ! Bien à vous !

    Répondre à Paulino
    • Marlène

      Bonjour, c’est un plugin WordPress donc il ne peut pas être utilisé sur Blogger. Blogger ne permet pas l’installation de plugins. Je n’ai pas en projet de proposer un tutoriel sur les articles similaires pour Blogger dans l’immédiat.

      Répondre à Marlène
  • Sarah Conte Philly

    C’est exactement le plugin que j’ai utilisé! Il offre vraiment beaucoup de personnalisation pour la page coming soon mais j’avoue que comme l’intérêt n’est pas de la garder pour toujours, je préfère passer moyennement de temps à la personnaliser!

    Répondre à Sarah
    • Marlène

      Ah ça, je pense que ça dépendra des blogs :) Ceux qui veulent vraiment créer une stratégie de lancement et récolter des abonnés à leur newsletter avant l’ouverture ont tout intérêt à y passer un peu de temps pour que ce soit efficace par exemple !

      Répondre à Marlène
Si vous aimez les articles du site, n'hésitez pas à faire vos achats sur Amazon.fr via ce lien ; il me permettra de toucher une commission grâce au programme Partenaires Amazon EU.