La section hero de votre page d'accueil avec 4 variantes et des blocs flexibles.
Banner (Hero)
La section Banner est la première impression de votre boutique. Elle affiche une image ou vidéo en plein écran avec du contenu superposé. C'est généralement la première section de votre homepage.
Les 4 variantes
La section Banner propose 4 modes d'affichage. Vous choisissez la variante dans le setting Layout de la section.
Hero
Le mode classique : une image ou vidéo en plein écran avec le contenu texte superposé.
C'est le mode le plus utilisé pour les homepages. L'overlay sombre rend le texte lisible sur n'importe quelle image.
Split
L'image occupe une moitié de l'écran, le contenu texte l'autre moitié. Parfait pour du storytelling.
Stacked
Le contenu est empilé verticalement : texte au-dessus ou en-dessous de l'image.
Flexible Columns
Mode avancé avec 2 ou 3 colonnes dont vous contrôlez la largeur individuellement. Idéal pour des layouts créatifs.
Image & Vidéo
Image de fond
Vous pouvez définir une image desktop et une image mobile séparément.
Vidéo de fond
À la place d'une image, vous pouvez utiliser une vidéo qui tourne en boucle silencieusement en arrière-plan.
Hauteur
La hauteur détermine l'espace vertical que la banner occupe :
| Option | Hauteur approximative | Usage recommandé |
|---|---|---|
| Small | ~30vh | Pages intérieures, banners secondaires |
| Medium | ~50vh | Usage polyvalent |
| Large | ~70vh | Homepages, pages de marque |
| Full screen | 100vh | Impact maximum, homepage principale |
| Adapt | S'adapte au ratio de l'image | Quand l'image doit être affichée sans recadrage |
Overlay
L'overlay est un voile sombre semi-transparent par-dessus l'image qui améliore la lisibilité du texte.
Position du contenu
Vous contrôlez où le texte se positionne dans la banner avec un système de grille 3×3 (haut/centre/bas × gauche/centre/droite). La position est configurable séparément pour desktop et mobile, ce qui permet d'optimiser chaque expérience.
Bord courbe
L'option Curved media edge ajoute un bord arrondi en bas de l'image, créant une transition douce vers la section suivante.
Les blocs
Les blocs sont les éléments de contenu que vous ajoutez dans la banner. Glissez-déposez pour réorganiser.
Heading (titre)
Le titre principal de votre banner. Choisissez le niveau (H1, H2) et la taille.
Text (paragraphe)
Texte descriptif sous le titre. Gardez-le court : 1-2 phrases maximum.
Button (CTA)
Bouton d'appel à l'action. Choisissez parmi les 3 styles de boutons du thème et définissez le lien.
Timer (compte à rebours)
Affiche un compteur à rebours directement dans la banner. Utilise la date du timer global ou une date personnalisée.
Icon List
Liste d'icônes avec texte court. Parfait pour les arguments de vente (livraison gratuite, garantie, etc).
Featured Product
Un mini formulaire produit intégré directement dans la banner. Le visiteur peut ajouter au panier sans quitter la section.
Subheading
Petit texte au-dessus du titre principal, souvent en majuscules. Ex: "NOUVEAU", "EXCLUSIF", "ÉDITION LIMITÉE".
Exemples de configurations
Homepage classique
- Variante : Hero
- Hauteur : Full screen
- Overlay : 35%
- Blocs : Subheading + Heading + Text + Button
- Résultat : Impact maximum, le visiteur est immergé
Promo avec urgence
- Variante : Hero
- Hauteur : Medium
- Palette : Accent (fond vif)
- Blocs : Heading + Timer + Button
- Résultat : Crée de l'urgence avec le countdown
Storytelling produit
- Variante : Split
- Blocs : Subheading + Heading + Text + Button + Icon List
- Résultat : Le visiteur comprend le produit et ses bénéfices
Prochaines étapes
- Configurez votre Slideshow si vous préférez une rotation de messages
- Explorez les séparateurs SVG pour des transitions fluides entre sections
- Consultez le guide Construire une homepage qui convertit pour voir comment intégrer le banner dans votre page d'accueil
- Découvrez la section Statement pour un message fort et épuré sans image de fond