Crée ta page de lancement et collecte des e-mails [tuto]

/

Visuel de l'article page Coming Soon

T Tu prépares ton site et tu n’as aucune envie que tes visiteurs te surprennent en plein travaux avec le tas de gravats au milieu du salon ?

chantier en cours

Tu vas créer ta page de lancement qui annoncera l’arrivée prochaine de ton site.

Personnaliser ton site et préparer une belle page d’accueil prend du temps. Tu t’assures que tout est parfait avant de lancer ton site.

L’extension Minimal Coming Soon & Maintenance Mode possède un nom trompeur. Elle est complète et possède, en version gratuite, de nombreuses possibilités de personnalisation.

De plus, tu peux collecter des e-mails et t’assurer des lecteurs dès la publication de ton premier article.

Les avantages de l’extension :

  • Une page personnalisée aux couleurs de ta marque
  • La collecte d’e-mail avec la version gratuite (ce qui est rarissime)
  • Une interface simple à utiliser

Les inconvénients

  • Seul MailChimp est proposé pour collecter des e-mails
  • L’interface est en anglais ce qui impose de traduire les messages

Cet article prend environ 5 minutes à lire. Si tu n’as pas le temps, tu peux l’épingler sur Pinterest pour le lire plus tard.

Crée gratuitement la page de lancement de ton site et collecte des e-mails. #blog #site #wordpress
picto articles débutants
Débutant

Tu n’es, bien évidemment, pas obligé de créer une page sophistiquée.

Tu peux réaliser une page avec ton logo et du texte sur un fond de couleur si tu ne consacres que quelques jours à la préparation de ton site.

Cela ne sert à rien de passer plus de temps sur la page de lancement que sur le site en lui même.

Si tu souhaites pouvoir expérimenter, tu peux développer ton site en local.

Débute avec Minimal Coming Soon

  • Installer et activer l’extension Minimal Coming Soon & Maintenance Mode Par WebFactory
icone de Minimal coming soon

Menu de gauche Réglages > Maintenance Mode

menu
  • Cliquer sur Enable Maintenance mode pour activer l’affichage de la page maintenance
activer le mode maintenance
  • Compléter :
    • Le titre affiché sur la page (Header Text)
    • Le texte de la page (Content)
titre texte page
  • Compléter le texte de réassurance contre le spam par exemple : Votre adresse est confidentielle et ne sera jamais communiquée.
texte anti-spam

Mise en page

Tu peux organiser les éléments comme tu le souhaites en les déplaçant en glisser-déposer.

  • Cliquer sur le crayon à coté du logo
disposition des éléments
  • Bouton Select pour charger les 3 visuels :
    (ou cliquer sur Remove pour les supprimer)

     

    • Logo
    • Favicon
    • Visuel de fond
visuels
  • Définir le positionnement :
    • Largeur du contenu en pixels (Content Width)
    • Couleur de fond en l’absence d’image de fond (Background Color)
    • Position du contenu (Content Position) :
      • Gauche
      • Centré
      • Droit
    • Alignement du contenu (Content Alignment)
positionnement

Mise en Forme du texte

  • Choisir ses réglages pour le texte :
    • Sélectionner sa police de titre (Header font)
    • Sélectionner sa police de texte (Content font)
    • Taille du titre (Header Text Size)
    • Taille de la police du texte (Content Text Size)
    • Couleur du titre (Header Text Color)
    • Couleur de la police du texte (Content Text Color)
    • Taille de la police de l’antispam (Antispam Text Size)
    • Couleur de la police de l’antispam (Antispam Text Color)
réglages de la police de texte
  • Bouton Save Changes
sauvegarde

La collecte d’e-mails

Tu retrouveras tout ce qu’il faut savoir sur MailChimp dans ce tutoriel détaillé.

  • Chercher sa clé dans Mailchimp (Flèche à coté du portrait > Extras > Api keys)
api
menu api dans MailChimp
  • Copier le code
clé api

Email dans le menu de gauche

  • Coller le code
  • Bouton Save Api key
renseigner la clé dans Minimal Soon
  • Sélectionner la newsletter
sélection de la newsletter
  • Traduire les messages de souscription :
    • L’adresse n’est pas valide. dans Message: No Email
    • Vous êtes déjà inscrit. dans Message: Already Subscribed
    • Une erreur est intervenue. dans Message: General Error
    • Merci de votre inscription. Nous restons en contact. dans Message: Successfully Subscribed
  • Bouton Save Changes
messages de gestion de la saisie de l'e-mail

Personnalise la zone de saisie

Menu > Form

  • Compléter les textes d’accompagnement de la collecte de l’e-mail avec par exemple :
    • Votre e-mail. dans Input Text
    • Je m’inscris dans Button Text
    • Je souhaite être averti de la sortie du site et recevoir la newsletter hebdomadaire. dans GDPR Consent Checkbox Text
formulaire

La mise en forme

  • Définir :
    • La couleur du texte saisi dans la zone de collecte (Input Text Color)
    • La couleur du texte du bouton (Button Text Color)
    • La couleur de la zone de collecte (Input Background Color)
    • La couleur du bouton(Button Background Color)
perso texte
  • La couleur de la zone de collecte quand elle est cliquée (Input Focus Background Color)
  • La couleur du bouton quand il est survolé (Button Hover Background Color)
  • La couleur de la bordure de la zone de collecte (Input Border Color)
  • La couleur de la bordure du bouton (Button Border Color)
  • La couleur de la bordure de la zone de collecte quand cliquée (Input Focus Border Color)
  • La couleur de la bordure du bouton quand il est survolé (Button Hover Border Color)
perso texte
  • La couleur du texte pré-inscrit dans la zone de collecte (Input Fields Placeholder Color)
  • La couleur de fond du message de succès (Success Message Background Color)
  • La couleur du texte du message de succès (Success Message Text Color)
  • La couleur de fond du message d’erreur (Error Message Background Color)
  • La couleur du texte du message d’erreur (Error Message Text Color)
perso texte fin

Le référencement

  • Compléter le titre de la page et la méta-description.
  • Bouton Save Changes
inscrire titre et méta

Voici ma page de test finalisée.

page de lancement finalisée

Il s’agit juste de te donner une idée du rendu.

Au lancement du site

Quand ton site sera fin prêt, tu désactive le mode maintenance dans le menu du haut

  • Cliquer sur Off
désactiver la maintenance

N’oublie pas de rediriger l’adresse de ta page de lancement vers ta page d’accueil.

Quand tu as réalisé une dernière vérification, tu peux supprimer l’extension.

Conclusion

Minimal Coming Soon & Maintenance Mode est parfaite pour lancer un site ou réaliser une grosse intervention.

Je la recommande particulièrement pour collecter de l’adresse e-mail combinée avec un bon lead magnet. Tu peux ainsi commencer en amont ta campagne de promotion sur les réseaux sociaux.

[tweetshare tweet= »Comment créer une page de lancement pendant la création de son site. » username= »pourpasunrond »]

Après, je dois avouer que je n’ai pas fait dans la finesse au moment du lancement de pour pas un rond. J’y suis allé en direct sans filet. Je m’excuse auprès des premiers visiteurs.

signature de Jean du site pour pas un rond

D’autres articles qui peuvent t’intéresser :

Retrouve tous les articles pour Créer seul ton site

Pour trouver l’inspiration :

bannière pour l'inscription à la newsletter
portrait jean

Je partage mes apprentissages et mes expériences depuis 2017 avec + de 100 tutoriels et ressources.

Tu devrais trouver ton bonheur pour créer ta marque, construire ton site puis le faire grandir et développer ton entreprise sur pour pas un rond.

Jean


6 réponses à “Crée ta page de lancement et collecte des e-mails [tuto]”

  1. Bonjour Jean,

    Merci pour ces infos mais je cherche à mettre une page de construction en ligne sans WordPress (sans CMS) possible ? juste une image en ligne.
    Je suis aussi chez o2switch

    Merci
    Frederic

    • Bonjour Frédéric,

      Tu peux créer une page HTML standard en partant d’un template pour gagner du temps mais je ne suis pas certain que cela soit plus rapide que l’installation de WordPress en automatique et de l’activation de l’extension si tu ne maîtrises pas.

      Magnifique journée,
      Jean

  2. bonjour
    peut on installer MailChimp
    lorsqu’on est sur son site WordPress
    en local ?

    merci
    cordialement

  3. Bonjour!
    Tout d’abord un grand merci pour votre site qui m’aide grandement à construire le mien..!
    J’ai installé cette extension, et configuré MailChimp en parallèle, mais le champ pour s’inscrire à la newsletter n’apparaît pas sur ma page de lancement. Auriez-vous une idée de ce qui pourrait bloquer svp?

    • Bonjour Mylène,

      Le champ apparaît sur le formulaire dès que tu as réalisé la liaison avec MailChimp.

      Elle se réalise en 2 étapes :
      – Tu copies ton code dans MailChimp API et valide avec le bouton Save API
      – Tu sélectionnes la liste que tu veux enrichir puis enregistre

      A bientôt,
      Jean

Répondre à youcef djira Annuler la réponse

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