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

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 ?

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.

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

Menu de gauche Réglages > Maintenance Mode

• Cliquer sur Enable Maintenance mode pour activer l’affichage de la page maintenance

• Compléter :
  • Le titre affiché sur la page (Header Text)
  • Le texte de la page (Content)

• Compléter le texte de réassurance contre le spam par exemple : Votre adresse est confidentielle et ne sera jamais communiquée.

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

• Bouton Select pour charger les 3 visuels :
  (ou cliquer sur Remove pour les supprimer)

   

  • Logo
  • Favicon
  • Visuel de fond

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

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)

• Bouton Save Changes

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)

• Copier le code

Email dans le menu de gauche

• Coller le code
• Bouton Save Api key

• Sélectionner 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

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

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)

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

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

Le référencement

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

Voici ma page de test 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

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.

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

• Expérimente sur ton site WordPress en local
• Personnalise tes pages avec Elementor
• Trouve les images et vidéos gratuites de ton site [Débutant]
• Réalise ton mockup gratuitement en 3 minutes

Retrouve tous les articles pour Créer seul ton site

Pour trouver l’inspiration :

• 75 superbes exemples de pages par Conseils Marketing
• L’art de faire une page « en construction » design et efficace par La Veilleuse Graphique
• 55 pages efficaces par Template Monster
• Une collection de 45 pages par UCreative

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