Section hero : réussir la première impression de votre site 🦸

La section hero est la toute première section d'une page, celle que le visiteur voit avant de faire défiler. En quelques secondes, elle doit dire ce que vous proposez, à qui, et quoi faire ensuite.

En bref : une bonne section hero contient un titre clair (votre H1), une phrase de promesse, un bouton d'action et un visuel. Sur Wix Studio, on la construit avec une grille de section et une pile de textes, puis on l'adapte à la tablette et au mobile.

Qu'est-ce qu'une section hero ?

Le terme vient de l'anglais « hero image », la grande image d'en-tête des sites. Aujourd'hui, la section hero désigne toute la zone d'accueil au-dessus de la ligne de flottaison (la partie visible sans défiler), juste sous le header.

Elle ne sert pas seulement à faire joli : c'est elle qui décide si le visiteur reste ou repart.

Que mettre dans une section hero ?

Pour aller plus loin sur chaque brique : les textes, les boutons et les images dans Wix Studio.

Les formats de section hero les plus courants

• Texte à gauche, image à droite : le plus lisible, parfait pour un site vitrine.

• Image ou vidéo en fond, texte par-dessus : impactant, mais attention au contraste du texte.

• Hero typographique : un grand titre et peu d'images, pour un rendu très moderne.

• Hero avec formulaire : pour une landing page qui doit générer des contacts.

Créer une section hero sur Wix Studio

1. Ajoutez une section en haut de la page : une section prédesignée (panneau Ajouter des éléments, rubrique des sections) ou une section vide.

2. Découpez-la en 2 cellules via la grille de section, ou utilisez une grille CSS pour plus de liberté sur mobile.

3. Dans la cellule de gauche, ajoutez le titre, le sous-titre et le bouton, puis regroupez-les dans une pile.

4. Dans la cellule de droite, ajoutez l'image et étirez-la pour remplir la cellule.

5. Réglez la hauteur et les marges intérieures de la section dans l'Inspecteur.

6. Renommez la section « Hero » dans le panneau des calques pour vous y retrouver.

💡 Vous voulez un header transparent posé sur votre hero ? Choisissez pour le header un effet de défilement avec recouvrement de la section suivante. La marche à suivre est dans la fiche header.

Une section hero responsive et rapide

• Sur mobile, passez les deux colonnes en une seule, texte en premier, et réduisez la taille du titre.

• Masquez une vidéo lourde sur mobile (clic droit, puis Masquer sur ce breakpoint) et remplacez-la par une image.

• Optimisez l'image : c'est souvent le plus gros élément visible au chargement, celui que mesure l'indicateur LCP des Core Web Vitals.

• Animations : une entrée discrète suffit, voir les animations Wix Studio.

Mon avis de webdesigner sur la section hero

C'est la section qui mérite le plus de soin, et paradoxalement celle où l'on voit le plus d'erreurs : un slogan poétique qui ne dit pas ce que fait l'entreprise, trois boutons qui se font concurrence, une vidéo qui met du temps à charger.

Faites un test simple : montrez votre hero 5 secondes à quelqu'un qui ne vous connaît pas. S'il ne sait pas dire ce que vous proposez, réécrivez le titre. Côté SEO, gardez un seul H1 par page, placé dans la hero (voir les balises Hn). Et si vous voulez une page d'accueil pensée pour convertir, voyez mon offre de création de site vitrine.

Questions fréquentes sur la section hero

Quelle hauteur pour une section hero ?

Il n'y a pas de règle unique. Sur ordinateur, le titre et le bouton doivent être visibles sans défiler. Sur mobile, évitez une hero qui occupe tout l'écran sans montrer le bouton.

Faut-il mettre le H1 dans la section hero ?

Oui, dans la grande majorité des cas : le titre principal de la page se trouve naturellement dans la hero. Un seul H1 par page.

Une vidéo en fond de hero, bonne idée ?

Oui si elle est courte, légère et sans son. Prévoyez une image à la place sur mobile pour ne pas ralentir le chargement.

À propos de l’auteur Alexandre Cottret, webdesigner freelance et fondateur de Trend Design, certifié Wix Partner Legend et Wix Studio. Plus de 150 sites créés depuis 2021, 5/5 sur Malt (93 avis).

Sources : Wix : ajouter et gérer des sections, Wix : designer sur tous les breakpoints.