Sommaire
Templates Notion pour marketeurs à 5 pattes
Négliger la section hero de son site web ou de sa landing page, c’est un peu comme arriver en pyj à un entretien d’embauche.
C’est LE moment où il faut faire bonne impression. Et il ne faut pas se planter.
Dans cet article, tu découvriras ce qu’est, au juste, une section hero. Mais surtout, plein d’exemples pour t’inspirer.
Qu’est ce que le hero d’une page web ?
Définition
Le hero ou hero header, c’est la première section que voit un visiteur en arrivant sur une page web. Elle doit être très soignée et convaincre au premier coup d’oeil.
La ligne de flottaison
La section hero, c’est tout ce qui se situe au dessus de la ligne de flottaison, c’est à dire avant de scroller. Et ce, sur mobile ou desktop.
Que mettre dans une section hero ?
Voici les principaux éléments qu’on peut trouver dans une section hero :
- Un titre ou accroche
- Un sous-titre
- Un bouton d’action (ou CTA)
- Un formulaire
- Des éléments de preuve sociale (une note, des logos de clients, des chiffres qui en jettent)
- Un visuel qui permet de comprendre le bénéfice du produit
Ça, c’est pour les grandes lignes, mais dans la pratique, le hero peut varier du tout au tout selon l’objectif de la page, sa cible, son niveau de maturité, le positionnement ou le branding de la marque etc.
Plus tu vas réfléchir en amont à ta stratégie et aux meilleurs éléments à placer sur ton hero, plus il sera impactant. Et ça, ça commence dès le brief.
Si tu veux te lancer dans un brief de qualité, jette un oeil à ces +50 Questions Pour Un Brief de Landing Page Parfait.
Mais, revenons à nos moutons : voici sans plus attendre quelques exemples de sections hero pour t’inspirer.
Exemples de sections hero efficaces et créatives
1. Claap
Sur la section hero de Claap, on aime :
- Le copywriting souligne le désir du prospect : conclure des deals.
- Le label ProductHunt “Product of the week” donne de la crédibilité
- Les trois éléments de réassurance anéantissent les objections potentielles :
- Objection : Je ne suis pas encore assez convaincu·e pour raquer
- Réassurance : Essai gratuit de 14 jours
- Objection : Je ne suis pas sûr·e que l’outil me convienne
- Réassurance : Essai gratuit de 14 jours
- Objection : Je n’ai pas le temps d'apprendre à dompter un nouvel outil
- Réassurance : Utilisable en 5 minutes
2. Cassettine
Sur ce hero header estival, on adore :
- L'UX et son curseur funky
- Les couleurs fraîches qui donnent le ton d'un branding différenciant
- Le copywriting épuré qui incite à scroller pour découvrir le produit
3. JungleScoot
- La possibilité pour le visiteur de choisir la raison de sa visite pour le rediriger vers le parcours le plus adapté à son besoin
- Des visuels qui parlent à la cible (ecommerçants), en leur montrant des éléments familiers : avis clients, ventes, graphiques...
- Le bandeau qui met en avant une promo de façon non-intrusive pour l'utilisateur
4. les others
- L'aperçu des précédentes éditions qui permet de capter la direction artistique du média en un coup d'oeil
- Le message 'frais de port offerts' en superposition qui réduit les frictions
5. Hero simple avec Optin pour un lancement
- Une seule action possible : entrer son adresse email. L'idéal pour une page de capture simple et efficace qui se concentre sur un objectif : recueillir des adresses email.
6. Tailwind
- Un look and feel frais et ultra propre (en même temps c'est leur job !)
- Le copywriting qui met en avant le bénéfice number one : la rapidité
- Le double CTA pour s'adapter aux différents besoins de la cible et la rediriger efficacement
7. Wix e-commerce
- La preuve sociale forte : "Rejoignez plus de 700 000 boutiques en ligne"
- L'élément de réassurance, placé juste en dessous du bouton d'action
- La superposition de visuels qui sortent du cadre pour donner de la profondeur
8. Phénix
- Le visuel, qui permet de se projeter et d'expliciter la solution
- La tonalité fun qui fonctionne, même pour une cible B2B
9. Marque e-commerce fictive
- Le call to action qui demande juste une adresse email pour réduire les frictions
10. Duck English
- Un branding différenciant, qui casse les codes boring des cours de langues
- Une UX fun et interactive qui fait apparaître des mots clés quand l'utilisateur réalise l'action de cliquer sur le bouton 'Click on me', malin
Pssst ! Si tu es arrivé·e jusqu’ici, c’est sans doute que tu as encore un petit creux.
Voici mes sites préférés pour dénicher des inspirations de landing page vraiment coolos.
Un template Notion pour stocker toutes tes inspirations de sections
Tous ces exemples de sections hero sont extraits du template Notion la Banque d’Inspiration.
C’est un système que j’ai créé pour rassembler au même endroit toutes les pépites croisées sur le web, et les filtrer par sections.
Ce template me permet de retrouver facilement mes idées préférées, au moment ou j’en ai besoin.
PS : Il contient déjà +70 exemples, pour les principales sections qu’on trouve sur n’importe quelle page page — site web, landing page, page de vente… :
- Bénéfices
- Comment ça marche ?
- CTA (Appel à l’action)
- Douleurs
- Étude de cas
- FAQ
- Footer
- Formulaire
- Garantie
- Header/Navbar
- Hero
- Offre/pricing
- Page entière
- Précisions sur la cible
- Storytelling/À propos
- Témoignages, preuves, crédibilité & arguments d’autorité
