Des sections hero qui captent l’attention immédiatement

La section hero est la première chose que voient les visiteurs en arrivant sur votre page. Selon les études, vous disposez d’environ trois secondes pour convaincre quelqu’un de rester : c’est pourquoi un haut de page bien pensé compte plus que presque tout autre élément de votre site. Ces 59 modèles de section hero vous font gagner du temps avec des mises en page éprouvées, qui allient visuels marquants, message clair et appels à l’action convaincants.

Choisir la bonne mise en page de hero

Le hero avec image plein écran produit l’impact visuel maximal et convient aux marques qui disposent de belles photos : pensez aux sites de restaurant qui mettent en avant leur plat signature, ou aux portfolios qui ouvrent sur un projet phare. Le hero scindé place le titre d’un côté et une image ou une illustration de l’autre : c’est la mise en page de référence pour les produits SaaS et les landing pages de startups. Le hero avec fond vidéo ajoute du mouvement et raconte une histoire, idéal pour les agences et les marques créatives. Le hero minimaliste, purement textuel, met le message au premier plan ; il a la faveur des designs minimalistes qui laissent la typographie faire le travail.

Bonnes pratiques pour un hero

Limitez votre titre à 10 mots et assurez-vous qu’il exprime un bénéfice clair. Placez votre appel à l’action principal en haut de page, bien contrasté : le visiteur ne doit jamais avoir à défiler pour trouver l’étape suivante. Préférez une seule image ou vidéo à un collage chargé. Gardez le texte lisible sur les fonds en ajoutant un voile, ou choisissez des modèles qui gèrent le contraste d’origine. Ajoutez un discret indicateur de défilement pour inviter à explorer la suite.

Côté performance

L’image du hero est généralement l’élément Largest Contentful Paint (LCP) de la page, ce qui la rend décisive pour les scores Core Web Vitals. Nos modèles utilisent des images responsive (srcset) au format WebP, le chargement différé pour les hero situés plus bas et des vidéos optimisées avec image d’attente, pour des temps de chargement courts. Associez votre hero à un en-tête de navigation léger au-dessus, et pensez à ajouter juste en dessous un bandeau de logos pour une preuve sociale immédiate.