Partie 3 – Construire une landing page avec Elementor (cas Batipro)
Dans cette partie, tu vas créer une vraie page utile pour Batipro : une landing page dont le but est de donner envie aux visiteurs de demander un devis. Tu vas la construire avec Elementor, un constructeur de page visuel très utilisé dans les agences et en entreprise.
À toi de jouer : l’objectif n’est pas juste “découvrir un outil”, mais de savoir construire une page de communication efficace pour une vraie TPE comme Batipro.
1. Objectifs de la partie
À la fin de cette partie, tu dois être capable de :
- expliquer ce qu’est une landing page et à quoi elle sert ;
- utiliser Elementor en comprenant la logique sections → colonnes → widgets ;
- organiser une page pour qu’elle soit centrée sur une action : ici, la demande de devis ;
- rédiger des contenus simples, rassurants et adaptés à une TPE du bâtiment ;
- produire une page qui a l’air professionnelle et crédible.
2. Avant de commencer
Dans les parties 1 et 2 du cours, tu as déjà créé plusieurs pages pour Batipro (accueil, services, contact…). Ces pages ne doivent pas être modifiées.
Pour cette partie, tu vas :
- créer une nouvelle page intitulée : « Devis gratuit » ;
- construire toute la mise en page avec Elementor ;
- rester cohérent avec le ton de Batipro : sérieux, simple, orienté client.
Conseil pratique : si tu as peur de “casser” le site, vérifie bien que tu es sur la page Devis gratuit avant de cliquer sur « Modifier avec Elementor ».
3. Mots-clés à connaître (définitions simples)
Landing page : page de site web qui a un objectif principal (par exemple : s’inscrire, acheter, demander un devis). Tout le contenu de la page est organisé pour pousser vers cette action.
CTA (Call To Action) : bouton ou lien qui invite clairement l’utilisateur à faire quelque chose (“Demander un devis”, “Nous contacter”, “Télécharger la brochure”…).
Conversion : quand un visiteur fait l’action que tu voulais (par exemple : il clique sur le bouton “Demander un devis” et envoie le formulaire). On dit qu’il est “converti” en prospect ou en client.
Section : grande bande horizontale qui structure la page dans Elementor. Colonne : découpe verticale dans une section. Widget : élément de contenu (titre, texte, image, bouton, etc.) que tu fais glisser dans une colonne.
4. La structure de la landing page Batipro
La landing page que tu vas construire est composée de 5 blocs. Chacun a un rôle précis dans la logique de communication.
| Bloc | Rôle dans la page | Contenu principal |
|---|---|---|
| Bloc 1 – En-tête (hero) | Dire tout de suite de quoi il s’agit et rassurer. | Titre fort + texte court + bouton “Demander un devis”. |
| Bloc 2 – Avantages | Montrer rapidement pourquoi Batipro est un bon choix. | 3 avantages clairs (rapidité, prix, proximité). |
| Bloc 3 – Services | Vérifier que Batipro répond bien aux besoins du client. | 3 grandes catégories de services, décrites simplement. |
| Bloc 4 – Pourquoi nous choisir ? | Renforcer la confiance, prouver le sérieux de l’entreprise. | Image + liste d’arguments (travaux garantis, suivi, etc.). |
| Bloc 5 – CTA final | Terminer sur une action claire à faire maintenant. | Titre, texte court et bouton “Demander mon devis maintenant”. |
Astuce : si tu es perdu pendant la construction, reviens à ce tableau et demande-toi : « À quel bloc je suis ? Quel est son rôle ? »
5. Bloc 1 – En-tête (hero)
But : capter l’attention et dire tout de suite ce que propose Batipro.
Dans Elementor :
- Créer une section avec 1 colonne ;
- ajouter un widget Titre (H1), un widget Texte et un widget Bouton ;
- centrer l’ensemble ou aligner à gauche selon la maquette choisie.
Texte conseillé :
- Titre : « Obtenez votre devis gratuit pour vos travaux de rénovation »
- Texte : « Batipro vous accompagne pour tous vos projets : rénovation complète, isolation, maçonnerie. Intervention rapide à Montpellier et alentours. »
- Bouton : « Demander un devis » (lien vers la page Contact que tu as déjà créée).
À surveiller : évite les titres trop longs ou flous. Un bon titre doit être compréhensible en 3 secondes.
6. Bloc 2 – Trois avantages qui rassurent
But : répondre aux questions que le client se pose avant même de lire tout le site.
Dans Elementor :
- Créer une nouvelle section avec 3 colonnes ;
- dans chaque colonne, ajouter un Titre + un Texte (tu peux ajouter une icône si tu veux).
Exemple d’avantages :
- Intervention rapide – « Déplacement sous 48h pour étudier votre projet. »
- Prix transparents – « Un devis clair, détaillé, sans mauvaise surprise. »
- Entreprise locale – « 15 ans d’expérience à Montpellier. »
Idée UX : chaque avantage doit être lisible en un coup d’œil. Évite les gros pavés de texte. Préfère 1 ligne de titre + 2–3 lignes de texte max.
7. Bloc 3 – Les services en bref
But : permettre au visiteur de vérifier rapidement si Batipro peut répondre à son besoin.
Dans Elementor :
- Créer une section avec un Titre et un court paragraphe d’introduction ;
- ajouter en dessous une nouvelle section à 3 colonnes pour les services.
Contenu possible :
- Rénovation complète – Petites et grandes rénovations pour appartements et maisons.
- Isolation & économies d’énergie – Isolation thermique performante pour réduire les factures.
- Maçonnerie & gros œuvre – Travaux structurels pour constructions et extensions.
Important : n’écris pas comme dans un manuel technique. Reste dans un langage simple, compréhensible pour un client qui ne connaît pas le bâtiment.
8. Bloc 4 – Pourquoi choisir Batipro ?
But : donner des preuves de sérieux et des éléments qui renforcent la confiance.
Dans Elementor :
- Créer une section à 2 colonnes ;
- colonne de gauche : un widget Image (chantier, équipe, maison rénovée…) ;
- colonne de droite : un Titre + une liste (widget Texte ou Liste d’icônes).
Proposition de contenu :
- Travaux garantis et assurés.
- Matériaux de qualité professionnelle.
- Accompagnement personnalisé.
- Suivi du chantier du début à la fin.
- Entreprise recommandée localement.
À retenir : ce bloc n’est pas là pour “vendre du rêve”, mais pour montrer que Batipro est fiable et organisée. Les arguments doivent être concrets.
9. Bloc 5 – Appel à l’action (CTA) final
But : terminer la page sur une action très claire à faire maintenant.
Dans Elementor :
- Créer une dernière section (tu peux choisir une couleur de fond différente pour la faire ressortir) ;
- ajouter un Titre, un court texte et un Bouton ;
- lier le bouton à la page Contact.
Exemple de contenu :
- Titre : « Prêt à lancer votre projet ? »
- Texte : « Contactez Batipro et recevez un devis précis sous 48h. »
- Bouton : « Demander mon devis maintenant »
Règle d’or : sur une landing page, il doit être évident ce qu’on attend de l’utilisateur. Si on hésite entre plusieurs actions, c’est que la page n’est pas assez claire.
10. Ce qu’il faut retenir
- Une landing page a un objectif unique : ici, obtenir une demande de devis.
- Elementor te permet de construire cette page sans coder, à condition de bien comprendre la logique sections → colonnes → widgets.
- La structure de la page suit une progression logique : présentation → avantages → services → preuves → action.
- Le texte doit être simple, rassurant et adapté au niveau de connaissance d’un client non spécialiste.
- Cette méthode de travail est réutilisable pour d’autres entreprises en stage ou en alternance (autres secteurs, autres sites sous Elementor).
Pour aller plus loin : une fois ta page construite, regarde son rendu sur mobile (icône “ordinateur / tablette / mobile” dans Elementor). L’expérience utilisateur doit être agréable aussi sur smartphone.