4 Construire une page avec Divi - Cours de Communication

Chapitre 09 : Concevoir et créer un site internet

Construire une page BatiPro avec le constructeur Divi 🧱

Dans cette activité, vous allez créer une page complète BatiPro en utilisant uniquement le thème Divi et le constructeur de page Divi, sans importer de layout tout fait. L’objectif est de comprendre la logique des modules (blocs Divi) et de construire une page claire, efficace et professionnelle.

Objectif de la page que vous allez créer

Créer une page intitulée “Maisons individuelles BatiPro” qui présente :

Une section d’accueil avec un slogan et un bouton.
Une présentation des prestations principales (3 blocs “services”).
Une section “Réalisations” avec quelques photos.
Une section “Pourquoi choisir BatiPro ?” avec arguments.
Un bloc d’appel à l’action (demander un devis / contact).

Vous utiliserez uniquement quelques modules Divi fondamentaux : Titre, Texte, Image, Bouton, Blurb (icône + texte) et éventuellement Formulaire de contact.

1. Créer la page et activer le constructeur Divi

Chemin : Pages → Ajouter

Donnez le titre “Maisons individuelles BatiPro”.
Enregistrez la page en brouillon.
Cliquez sur Utiliser le Divi Builder, puis choisissez l’option “Construire depuis zéro” (pas de layout pré-construit).

Pourquoi “construire depuis zéro” ?

Pour comprendre comment une page se construit brique par brique : sections, lignes, colonnes, modules.
Pour ne pas être “prisonnier” d’un design pré-fait : vous apprenez à penser la structure d’une page web.
C’est exactement ce que fait un intégrateur web lorsqu’il doit créer une page sur mesure pour un client.

2. La structure globale à reproduire

Votre page devra suivre cette structure :

Section 1 : Hero / Accroche + bouton
Section 2 : Nos prestations (3 colonnes)
Section 3 : Nos réalisations
Section 4 : Pourquoi choisir BatiPro ?
Section 5 : Appel à l’action (devis / contact)

Modules Divi à utiliser (au moins)

Section	Modules principaux	Rôle du module
Hero	Titre, Texte, Bouton, Image (ou arrière-plan)	Accrocher le visiteur et lui donner une première action à faire.
Prestations	Blurb (ou Icône + Texte)	Présenter clairement 3 services principaux de BatiPro.
Réalisations	Image (ou Galerie)	Montrer des exemples de maisons construites.
Pourquoi nous choisir	Texte / Liste à puces	Mettre en avant les arguments commerciaux.
CTA final	Texte, Bouton (ou Formulaire)	Inciter à demander un devis ou à contacter l’entreprise.

3. Section 1 : Hero “Maisons individuelles BatiPro”

Créez une section plein écran ou au moins une grande section en haut de page avec un fond clair (ou une image légère).

Ajoutez une ligne avec deux colonnes (par exemple 2/3 – 1/3).
Dans la colonne de gauche :
- Module Titre : “Construisez votre maison individuelle avec BatiPro”.
- Module Texte : quelques phrases pour présenter l’offre (zone de chalandise, type de maisons, accompagnement…).
- Module Bouton : “Demander un devis gratuit”. Lien vers la page Contact.
Dans la colonne de droite :
- Module Image : photo d’une maison BatiPro (ou image cohérente).

Pourquoi cette section est essentielle ?

C’est la première impression : le visiteur doit comprendre immédiatement ce que propose BatiPro.
Le bouton permet de proposer une action claire dès le début (“Demander un devis”).
SEO : le titre et le texte du haut de page peuvent contenir des mots-clés importants (“maison individuelle”, “constructeur”, “Montpellier”…).

4. Section 2 : Nos prestations (3 colonnes)

Créez une nouvelle section avec une ligne en 3 colonnes. Utilisez le module “Blurb” (Icône + Titre + Texte) dans chaque colonne.

Colonne 1 : Blurb “Maisons contemporaines”
- Icône (maison moderne).
- Texte explicatif (style, avantages, personnalisation).
Colonne 2 : Blurb “Maisons traditionnelles”
- Icône (maison classique).
- Texte explicatif (aspect, matériaux, intégration locale…).
Colonne 3 : Blurb “Extension / rénovation”
- Icône (outil / marteau / plan).
- Texte explicatif (agrandissement, rénovation énergétique…).

Intérêt du module Blurb

Associe icône + titre + texte : lecture rapide + détail disponible.
Permet de mettre en avant les 3 grandes offres de BatiPro de manière claire.
UX : les personnes balayent rapidement la section et comprennent en quelques secondes ce qui est proposé.

5. Section 3 : Nos réalisations

Créez une section avec un titre (“Nos réalisations près de Montpellier”) et ajoutez :

Soit un module Galerie (si disponible),
Soit une ligne avec plusieurs modules Image côte à côte.

Ce que doit montrer cette section

Quelques photos de maisons terminées, de chantiers, d’intérieurs.
Des textes ALT descriptifs pour chaque image (accessibilité + SEO image).

Pourquoi montrer des réalisations ?

Preuve concrète de l’expérience de BatiPro.
Donne confiance aux prospects : ils voient ce que l’entreprise est capable de faire.
Possibilité d’ajouter plus tard des cas clients ou des témoignages.

6. Section 4 : Pourquoi choisir BatiPro ?

Ajoutez une section avec :

Un module Titre : “Pourquoi choisir BatiPro pour votre maison individuelle ?”.
Un module Texte sous forme de liste à puces :
- Accompagnement de A à Z (permis de construire, plans, suivi de chantier).
- Respect des délais et du budget.
- Matériaux de qualité, conformes aux normes.
- Implantation locale : bonne connaissance du terrain et des règles d’urbanisme.

Intérêt marketing de cette section

Traduire la proposition de valeur de BatiPro en arguments clairs.
Aider le client à comprendre en quoi BatiPro se différencie des concurrents.
Préparer le visiteur à passer à l’action (demander un devis).

7. Section 5 : Appel à l’action (Contact / Devis)

Créez une dernière section avec un fond légèrement contrasté (mais lisible) et :

Un module Titre : “Parlons de votre projet de maison”.
Un module Texte : une ou deux phrases rassurantes (devis gratuit, prise de rendez-vous sans engagement…).
Au choix :
- Un module Bouton vers la page “Contact”.
- OU un module Formulaire de contact simple (nom, email, message).

Pourquoi cette section est stratégique ?

C’est la section qui transforme un simple visiteur en prospect (il laisse ses coordonnées).
Le bouton ou le formulaire doivent être clairs, visibles, accessibles.
Vous travaillez la notion de call-to-action (CTA), centrale en communication digitale.

8. Vérifier la qualité de votre page Divi

Checklist finale

SEO :
- La page a un titre SEO et une méta-description (via Yoast ou autre).
- Les textes contiennent des mots-clés liés au cas (maison individuelle, constructeur, Montpellier…).
Accessibilité :
- Les images ont des ALT décrivant la maison ou la scène.
- Les boutons ont des textes explicites (“Demander un devis”, “Nous contacter”).
- Les contrastes restent lisibles (éviter texte gris clair sur fond blanc, par exemple).
Éco-conception :
- Pas de vidéos lourdes inutiles.
- Images compressées (poids raisonnable).
- Sections et modules inutiles supprimés.

Ce que vous avez appris avec cette page

Utiliser les modules principaux de Divi (Titre, Texte, Image, Bouton, Blurb, Formulaire…).
Structurer une page pour un vrai besoin client (présenter une offre BatiPro).
Relier design, UX, SEO, accessibilité et sobriété numérique.