Générateur de section hero (haut de page)

Générateur de section hero (haut de page): à quoi ça sert

La section hero est le premier écran du site, où la personne décide en quelques secondes si elle continue. Elle doit avoir une promesse claire, une courte explication et une action principale.

Le générateur compose le hero avec une image de fond et une couche sombre réglable pour garder le texte lisible, ou avec texte et image côte à côte, un titre de taille fluide, un bouton principal et un secondaire. L’image est insérée en img avec fetchpriority=high et sans chargement différé, car c’est normalement le plus gros élément du premier écran (LCP).

Mode d’emploi

1. Écrivez le titre, le sous-titre et les boutons.
2. Choisissez l’image, la mise en page et les couleurs.
3. Copiez le code et collez-le en haut de la page.

Quand l’utiliser

• Page d’accueil d’un commerce local.
• Landing page de campagne.
• Page de lancement.

Questions fréquentes

Que mettre dans le hero ?

Le résultat que le client veut, en une phrase (le titre), la façon dont vous le livrez (le sous-titre) et une seule action principale, comme « Demander un devis sur WhatsApp ». Un second bouton discret est facultatif. Tout doit tenir dans le premier écran, sans avoir à faire défiler.

Comment l’image évite-t-elle de ralentir le site ?

L’image du hero est généralement le plus gros élément du premier écran, ce que Google mesure comme LCP. Le code utilise une balise img (et non background-image), avec fetchpriority=high et sans loading=lazy, pour que le navigateur la télécharge en premier. Utilisez l’image en WebP et à la bonne taille.

Et le texte par-dessus la photo ?

La couche sombre (overlay) au-dessus de l’image garantit le contraste du texte blanc sur n’importe quelle photo. Réglez l’opacité jusqu’à ce que le texte soit facile à lire ; 45 % à 60 % suffit en général.

Vraiment gratuit ?

Oui, 100 % gratuit. Sans inscription, sans abonnement et sans limite d’utilisation. Tous les outils de Tools123 sont gratuits.

Outils similaires