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

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

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)
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.

Comment créer une page de lancement pendant la création de son site.

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.

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

Retrouve tous les articles pour Créer seul ton site

bannière de la newsletter de pour pas un rond version bleu-vert

Pour trouver l’inspiration :

Crée gratuitement la page de lancement de ton site et collecte des e-mails. #blog #site #wordpress

Résumé
Crée une page de lancement quand tu prépares ton site [tuto]
Article
Crée une page de lancement quand tu prépares ton site [tuto]
Description
Crée une page de lancement personnalisée aux couleurs de ta marque. Tu as tout le temps de peaufiner ton site et de collecter des e-mails.
Auteur
Publié par
pour pas un rond
Logo

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

  1. 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?

    1. 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

Laisser un commentaire

You have to agree to the comment policy.