Comment écrire une hero section qui convertit vraiment
Le hero décide en 5 secondes si le visiteur reste. Voici la méthode pour écrire le titre, le sous-titre et le CTA qui fonctionnent ensemble.
- Type
- Guide
- Lecture
- 8 min
- Étapes
- 6
- Mis à jour
- mai 2026
Les 6 étapes
- 01
Trouver l'angle de la promesse
Avant de chercher la formulation, choisissez l'angle. Il en existe quatre principaux : résultat ("Doublez vos signups en 30 jours"), processus ("Lancez votre SaaS sans coder"), audience ("Le CRM pensé pour les agences"), opposition ("Marre des Notion à 50 onglets ?"). Chaque angle convient à un stade de marché différent. Pour un produit nouveau, l'angle audience qualifie mieux. Pour un produit mature dans une catégorie connue, l'angle résultat se démarque. L'erreur classique est de vouloir cumuler tous les angles dans un seul hero : on dilue le message et on perd l'attention.
TipSi vous hésitez, commencez par l'angle audience. Il qualifie le visiteur immédiatement et réduit le bounce sur les visiteurs hors cible.
- 02
Écrire le titre en moins de 12 mots
Le H1 doit tenir en moins de 12 mots, idéalement 6 à 8. Au-delà, l'œil décroche, surtout sur mobile. Bannissez les mots vides : "solution", "plateforme", "ecosystème", "expérience". Préférez les verbes concrets : créer, lancer, doubler, automatiser, supprimer. Évitez les superlatifs creux ("la meilleure", "leader") qui sonnent faux. Si votre titre contient le mot "AI" ou "IA", vérifiez qu'il apporte une info utile au visiteur — sinon, c'est du buzzword. Bon : "Générez un site SaaS en 5 minutes". Mauvais : "La plateforme IA next-gen pour le digital".
TipLisez le titre à haute voix. S'il sonne comme une diapo PowerPoint corporate, recommencez. Il doit sonner comme une vraie phrase dite par un humain.
- 03
Écrire le sous-titre qui qualifie
Le sous-titre n'est pas une répétition du titre. Son rôle : qualifier la promesse (pour qui, dans quel contexte, avec quel mécanisme). Format : 12 à 25 mots, une phrase. Si le titre est le "quoi", le sous-titre est le "pour qui et comment". Exemple — titre : "Lancez votre landing en 24h". Sous-titre : "Le pipeline Eufya génère 4 variantes scorées par un rubric sectoriel, puis exporte un site HTML ou React prêt à déployer." Le sous-titre fait office de preuve de plausibilité : pourquoi croire à la promesse du titre ?
TipLe sous-titre doit pouvoir être lu en 3 secondes. S'il a deux phrases, coupez la deuxième et mettez-la ailleurs.
- 04
Choisir un seul CTA primaire
Un seul CTA primaire dans le hero. Un. Pas deux. Si vous mettez "Essai gratuit" et "Voir la démo", vous obtenez moins de clics sur les deux que si vous aviez mis un seul bouton. La psychologie est claire : le choix paralyse. Le CTA secondaire (lien texte, pas bouton) peut exister pour ceux qui ne sont pas prêts ("En savoir plus" qui scroll). Le label du bouton : verbe d'action + objet concret. "Commencer", "S'inscrire", "Lancer mon projet". Évitez "Soumettre", "Cliquez ici", "Découvrir". Le verbe doit refléter l'engagement réel.
TipSi votre produit demande un essai sans CB, dites-le dans le micro-texte sous le bouton ("Gratuit, sans carte bancaire"). Ce micro-texte augmente le taux de clic.
- 05
Ajouter une preuve visible
Sous le CTA ou en parallèle, ajoutez UNE preuve sociale concrète : logo de clients connus, chiffre vérifiable ("3 500 sites lancés"), citation client courte avec nom et photo, ou rating si pertinent (G2, Capterra, Trustpilot). La preuve doit être réelle — la charte Eufya interdit les faux logos, les chiffres fabriqués et les testimonials inventés. Si vous démarrez et n'avez pas de clients, optez pour de la preuve indirecte : ancienneté de l'équipe, presse (si réelle), tech stack reconnaissable. Ne pas mettre de preuve est mieux que mettre de la fausse preuve.
TipUne preuve concrète bat dix preuves vagues. "Utilisé par 12 fondateurs YC" est plus puissant que "des milliers d'utilisateurs".
- 06
Designer le hero avec air
Un hero qui convertit respire. Marge généreuse au-dessus du titre (au moins 80px desktop, 48px mobile), espace entre titre et sous-titre (24px), entre sous-titre et CTA (32px). Le visuel à droite (si présent) doit être lié à la promesse, pas une stock photo générique. Si vous n'avez pas de visuel pertinent, mieux vaut un hero text-only centré avec un dégradé subtil ou une illustration abstraite que la photo d'une équipe générique. Le hero doit tenir above the fold sur 1366x768 (laptop standard) et 375x667 (mobile).
TipTestez votre hero en réduisant la fenêtre à 1366px. Si le CTA tombe en dessous du fold, retravaillez l'espacement ou la taille des éléments.
La règle des 5 secondes
Un visiteur décide en 5 secondes s'il reste ou part. Pendant ces 5 secondes, il cherche à répondre à trois questions : qu'est-ce que c'est, pour qui c'est, est-ce que c'est crédible. Si votre hero ne répond pas aux trois, il a échoué. Faites le test : montrez votre hero à quelqu'un pendant 5 secondes, cachez l'écran, demandez-lui de résumer ce qu'il a vu. S'il bafouille, retravaillez.
Le piège : croire que le hero doit "tout" expliquer. Non. Il doit donner envie de scroller. Le reste de la page fait le travail détaillé. Un hero qui en dit trop est aussi mauvais qu'un hero qui en dit trop peu — il sature et perd l'attention.
Hero text-only vs hero avec visuel
Hero text-only : marche bien pour les produits abstraits (SaaS B2B, services), quand vous n'avez pas encore de bons visuels produit, ou pour un effet éditorial premium. Hero avec visuel : marche bien pour le e-commerce, les apps mobiles (mockup), les produits physiques. Le visuel doit montrer le résultat ou l'objet, pas un avatar souriant générique.
Une troisième voie sous-utilisée : le hero avec animation produit (loop de 3-5 secondes montrant l'usage). Coûte plus cher à produire mais convertit mieux pour les outils où le "wow" est dans l'usage. Eufya teste les 3 formats dans Hero Lab et compare les scores.
Erreurs classiques sur le hero
Les patterns à éviter, observés en audit sur des centaines de landings. Premier : le titre qui ne dit rien ("Bienvenue sur notre plateforme"). Deuxième : le titre qui répète le nom du produit ("Acme — la solution Acme pour les pros"). Troisième : le sous-titre qui empile 4 features. Quatrième : 3 CTA visuellement équivalents qui paralysent le visiteur. Cinquième : la stock photo de poignée de main ou de cerveau lumineux qui sent l'IA générique. Sixième : un autoplay vidéo avec son qui fait fuir.
La correction est souvent radicale : enlever, simplifier, ne garder qu'une promesse, un verbe, un bouton. Le hero qui convertit est presque toujours plus simple que celui qu'on avait au départ.
Pièges à éviter
- Mettre le nom du produit dans le H1 — gardez-le pour le logo, le H1 sert à la promesse.
- Empiler 3 CTA équivalents — gardez-en un seul primaire et un lien texte secondaire.
- Sous-titre qui répète le titre en plus long — il doit qualifier, pas répéter.
- Stock photo générique (poignée de main, cerveau, équipe heureuse) — supprimez et restez text-only.
- Titre rempli de buzzwords ("révolutionnaire", "next-gen", "ecosystème") — remplacez par des verbes d'action concrets.
- Preuve sociale inventée — préférez aucune preuve à une fausse preuve, c'est la charte anti-slop.
- Hero qui dépasse le fold — si le CTA n'est pas visible sur 1366x768, retravaillez les tailles.
Questions fréquentes
Appliquer ce guide avec Eufya
Si ce guide vous a aidé : 3 crédits gratuits à l'inscription. Le pipeline Eufya applique ces principes automatiquement, Hero Lab + section plan + quality gates.