2.4Construire une page d'accueil attractive
L'essentiel en 30 secondes
- La page d'accueil a quelques secondes pour convaincre : un héros avec un titre fort, un sous-titre et un bouton d'action.
- Chaque section porte un seul message et guide vers l'objectif : qui je suis → ce que je propose → la preuve → l'action.
- Les motifs donnent une base professionnelle immédiate ; on les personnalise plutôt que de partir de zéro.
Mini-cas filé — l'accueil de l'atelier
La page d'accueil de l'Atelier Bahja doit séduire dès l'ouverture : montrer la beauté des céramiques, expliquer le travail artisanal et donner envie de visiter la boutique ou de contacter Hassan. Samir part d'un motif de héros, puis ajoute des sections dédiées aux collections, à la démarche et aux témoignages. Il évite d'étaler tout le site sur une seule page.
Suite du cas 2.3 — les zones sont prêtes, on construit la vitrine.
1. Le héros et la proposition de valeur
La section héros est la grande ouverture de la page : un titre accrocheur, un sous-titre qui précise l'offre et un bouton d'action visible, souvent sur une image de fond. En quelques secondes, le visiteur doit comprendre qui est l'atelier, ce qu'il propose et ce qu'il peut faire ensuite. C'est la partie la plus importante de la page.
La proposition de valeur doit être concrète : « Céramiques artisanales tournées à Casablanca » dit mieux que « Bienvenue sur notre site ». Samir évite les slogans vagues et les textes centrés sur l'entreprise : il parle de ce que le client obtient.
2. Structurer et convertir
Une page d'accueil efficace suit une progression : qui je suis, ce que je propose, la preuve (témoignages, chiffres, galerie), puis l'action. Chaque section porte une idée et se termine idéalement par un appel à l'action. On évite les liens dispersés : un objectif principal, quelques actions secondaires.
Les motifs (patterns) offrent des sections prêtes — héros, services, témoignages — que l'on personnalise. Samir les utilise comme base, remplace les textes et les images, puis vérifie la logique de haut en bas. Il publie et définit la page comme accueil (section 1.5).
🔎 Exemple concret — Composer l'accueil de l'atelier (cas Samir)
Héros : « Céramiques tournées à la main à Casablanca » + bouton « Découvrir les collections ».
Section 2 : trois collections (table, décoration, jardin).
Section 3 : la démarche artisanale en trois étapes.
Section 4 : témoignages de clients.
Section finale : « Visiter l'atelier » + contact.
→ Publier et définir comme page d'accueil.Résultat : un parcours fluide vers le contact ou la boutique.
Leçon : chaque section prépare l'action finale.
Vocabulaire de la section
- Section héros
- Grande section d'ouverture : titre, sous-titre, bouton d'action, souvent une image.
Exemple simple : le titre « Céramiques tournées à la main ».
Ce que ce n'est pas : ouvrir sur un simple logo sans message.
Réflexe : les 3 secondes décisives = héros.
- Appel à l'action (CTA)
- Bouton ou lien qui invite à agir : devis, achat, contact, visite.
Exemple simple : « Découvrir les collections ».
Ce que ce n'est pas : multiplier dix boutons concurrents.
Réflexe : un objectif principal, un CTA clair.
- Motif (pattern)
- Mise en page prête (héros, tarifs, témoignages) insérée puis personnalisée.
Exemple simple : un motif de témoignages adapté à l'atelier.
Ce que ce n'est pas : reconstruire chaque section à la main.
Réflexe : base pro = motif personnalisé.
- Proposition de valeur
- Ce qui doit être clair en haut de page : qui vous êtes, ce que vous apportez, à qui.
Exemple simple : artisanat local, pièces uniques, livraison soignée.
Ce que ce n'est pas : « Bienvenue sur notre site » comme seul message.
Réflexe : concret et tourné vers le client.
- Un message par section
- Principe : chaque section porte une seule idée, pas un fourre-tout.
Exemple simple : une section pour les collections, une pour la démarche.
Ce que ce n'est pas : mélanger collections, histoire et contact dans un seul bloc.
Réflexe : une idée, une section, une action.
En pratique — Composer une page d'accueil qui convertit
- Créez ou éditez la page d'accueil et insérez un motif de héros.
- Remplacez le titre par une proposition de valeur claire et ajoutez un bouton d'action.
- Ajoutez une section collections, une section preuve (témoignages) et une section contact.
- Relisez la progression de haut en bas, publiez et définissez la page comme accueil.
Script prêt à dire — expliquer la logique de l'accueil (25 s)
« En haut, le visiteur comprend tout de suite ce que vous faites et peut découvrir vos collections. Ensuite, je montre votre savoir-faire, des avis de clients, puis un bouton pour vous contacter. Chaque partie le rapproche de l'action. »
Montrer le parcours comme une histoire, pas comme une liste de blocs.
Modèle copier-coller — plan de la page d'accueil
HÉROS : titre _______________ / sous-titre _______________ / CTA _______________
SECTION 2 : collections / services
SECTION 3 : preuve (témoignages, chiffres)
SECTION 4 : démarche ou galerie
SECTION FINALE : CTA contact
OBJECTIF PRINCIPAL : _______________Vitrine artisan
Photos fortes, récit du savoir-faire, contact simple.
Boutique
Héros orienté produit, collections en avant, CTA boutique.
Service local
Zone d'intervention, horaires, bouton d'appel visibles.
Portfolio
Galerie en héros, études de cas, contact en fin de parcours.
✓ Bonnes pratiques
- Écrire la proposition de valeur avant de choisir les images.
- Un objectif principal, un CTA dominant.
- Partir d'un motif puis personnaliser.
✗ Pièges fréquents
- Tout étaler sur l'accueil sans hiérarchie.
- Multiplier les boutons concurrents.
- Écrire un slogan vague et centré sur soi.
Points clés à retenir
- Le héros dit qui, quoi, et quoi faire en 3 secondes.
- Chaque section porte un seul message.
- La progression mène à une action claire.
- Les motifs accélèrent la composition professionnelle.
Défi 48h — appliquez demain
Écrivez en une phrase la proposition de valeur d'un projet, puis composez un héros avec un bouton. Ajoutez trois sections maximum et vérifiez que chacune mène vers l'action. 30 minutes.
- Je rédige une proposition de valeur claire.
- Je compose un héros avec un appel à l'action.
- Je structure l'accueil en progression vers l'action.
Questions fréquentes
Combien de sections mettre sur la page d'accueil ?
Assez pour couvrir qui, quoi, preuve et action — souvent quatre à six. Au-delà, le visiteur se perd. Mieux vaut alléger et renvoyer vers des pages dédiées pour le détail.
Faut-il une image de fond dans le héros ?
Pas obligatoirement. Une belle photo métier aide, mais un fond uni avec un titre fort et un bouton peut être plus lisible et plus rapide. L'essentiel est la clarté du message et du contraste.
Comment définir cette page comme accueil ?
Dans Réglages → Lecture, choisissez « Une page statique » et sélectionnez la page composée. Si vous gardez un blog, désignez une autre page comme page des articles.
Que doit dire la section d'ouverture (héros) de la page d'accueil ?