Qu'est-ce qu'une bannière de héros ?
Une bannière principale est une grande section visuelle placée en haut d'une page web, comportant généralement un titre, une image ou une vidéo de fond et un bouton d'appel à l'action.
À propos de l'élément Bannière du héros
L' Élément de bannière de héros vous permet de concevoir une section frappante sur toute la largeur en haut de votre page Web qui capte l'attention des visiteurs avec des visuels époustouflants. De plus, vous pouvez superposer des éléments tels que des titres, des blocs de texte et des CTA pour rendre votre bannière encore plus attrayante.
Comment créer une bannière principale sur Shopify avec GemPages
Suivez ces étapes pour ajouter un élément Hero Banner à votre page créée avec GemPages.
- Extrait du Tableau de bord GemPages, localisez la page cible pour ouvrir l'éditeur.
- Dans l' Barre latérale de gauche, naviguez jusqu'à Médiathèque section et faites glisser et déposez le Bannière de héros élément à l'endroit souhaité.
- (Facultatif) Faites glisser d'autres éléments (par exemple, titre, bouton, etc.) sur la bannière pour plus d'impact.
- Cliquez sur la bannière Hero pour afficher son panneau de configuration, qui comprend Paramètres Avancé onglets.
Configurer l'onglet Paramètres
Mise En Page
Choisissez la mise en page et l'alignement du contenu :
- Position horizontale:Gauche, Centre ou Droite
- Position verticale: Haut, Centre, Bas ou Étendu (remplit toute la hauteur)
Présentation
Vous pouvez définir l'arrière-plan de la bannière en utilisant l'une des trois sources suivantes :
- Couleur
- Image(s)
- Vidéo
Fond de couleur
Sélectionnez une couleur dans la palette ou entrez un code hexadécimal dans la case pour définir votre couleur d'arrière-plan préférée pour la bannière.
Arrière-plan de l'image
Il existe trois options pour modifier la source de l'image de la bannière :
- Télécharger image:Cette option vous permet de sélectionner une image depuis votre ordinateur à télécharger.
- Entrée de lien: Cette option vous permet de saisir le lien de l'image pour modifier la source de l'image de la bannière du héros.
- Parcourir la galerie:Vous pouvez choisir une image dans la galerie, qui contient toutes vos images téléchargées.
Astuce: Pour un affichage optimal, vous pouvez vous référer à l'info-bulle affichée dans le Image(s) onglet, sous le Source de la bannière section, pour trouver les dimensions les plus optimales* pour l'image téléchargée dans la bannière Hero :
| Bureau | 1920 × 800 px |
| Mobile | 375 × 200 px ou 375 × 400 px |
| Tablettes | 1024 × 500 px |
Pour concevoir votre bannière Hero sur différents écrans, consultez cet article.
Fond vidéo
Lors de la configuration d'un arrière-plan vidéo pour votre bannière, vous pouvez choisir l'une des sources vidéo suivantes :
YouTube: Vous pouvez utiliser une vidéo YouTube comme arrière-plan. Cette option est compatible avec les vidéos courtes et les vidéos YouTube standard, vous offrant ainsi une grande flexibilité dans le choix de votre contenu.
Pour que GemPages puisse afficher correctement la vidéo, nous vous recommandons de fournir ses dimensions. Ces informations permettent à GemPages de calculer le niveau de zoom et de garantir que la vidéo s'intègre parfaitement à la bannière. Les dimensions vidéo les plus courantes sont :
- 1600:900
- 400:300
- 2100:900
- 100:100
- 900:1600
Hébergement vidéo : Si vous préférez héberger vous-même la vidéo, choisissez l'option « Hébergement vidéo ». Téléchargez votre vidéo sur Shopify, puis collez le lien de la vidéo dans le champ prévu à cet effet. Lien champ à utiliser comme arrière-plan.
Remarque : Veuillez noter que le résultat doit être vérifié sur la page en direct. Pour obtenir des instructions détaillées sur la mise en ligne de la vidéo sur Shopify, veuillez consulter cet article.
Allume le « Vidéo en boucle » basculer pour que la vidéo redémarre depuis le début une fois qu'elle atteint la fin.
Recouvrir
Cliquez à nouveau sur Afficher pluspuis frappe Ajouter ... configurer:
- Couleur: Choisissez une couleur de superposition
- Opacité: Ajuster la transparence (valeurs inférieures = plus transparent)
Taille
Choisissez l'échelle de la bannière :
- Comme source de bannière: Ajustement automatique en fonction des dimensions de l'image
- Encadrement Sur Mesure:Régler manuellement la largeur et la hauteur
Menu
Configurer:
- Largeur: Définir la largeur maximale du contenu interne
- Rembourrage:Ajouter un espacement à l'intérieur de la bannière
- Aligner: Aligner le contenu horizontalement (gauche, centre, droite)
Forme
Personnalisez la forme en utilisant :
- Frontière: Ajouter des styles de bordure
- CORNER: Ajuster la rondeur des coins
- Shadow: Appliquer des effets d'ombre pour la profondeur
Effect
- Effet de survol : Ajouter un style de survol interactif
- Défilement parallaxe (pour l'image uniquement) : ajoute de la profondeur avec un mouvement en couches lorsque les utilisateurs font défiler
Lien
Une fois que vous avez activé cette option, vous pouvez configurer la section Lien :
Après le clic : Choisissez dans la liste déroulante ce qui se passe après que les visiteurs ont cliqué sur votre bannière héros : ouvrir la page, faire défiler jusqu'à, ouvrir une fenêtre contextuelle, envoyer un e-mail ou passer un appel téléphonique.
Par exemple, si vous choisissez le Faites défiler jusqu'à option, cliquez sur le Ajouter ... pour sélectionner la section cible dans la liste.
Le SEO
Dans la section SEO, vous pouvez ajouter le texte alternatif de l'image et le titre de l'image pour améliorer le référencement de la page.
Aligner
Alignez la section Bannière du héros elle-même : Gauche, , ou Droite.
Configurer l'onglet Avancé
Pour une personnalisation plus avancée, veuillez accéder au Avancé onglet et suivez les instructions dans cet article.
Questions fréquentes
1. Comment ajouter du texte à une image à l’aide de l’élément Bannière Héros ?
Après avoir ajouté la bannière principale à votre page, glissez-déposez simplement un élément de titre ou de texte sur la bannière. Vous pouvez ensuite modifier le texte, ajuster son style et le positionner où vous le souhaitez sur l'arrière-plan de l'image.
2. Puis-je utiliser un arrière-plan vidéo dans la bannière Hero ?
Oui. Vous pouvez utiliser un lien YouTube ou une vidéo hébergée sur Shopify. Collez simplement le lien dans les paramètres de source vidéo. Vous pouvez également activer l'option « Vidéo en boucle » pour une lecture continue.
3. Puis-je créer un diaporama avec l'élément Hero Banner ?
L'élément Hero Banner est également utilisé pour concevoir un diaporama sur votre page Web. En mélangeant les Bannière de héros grâce à la fonction Carousel Grâce à cet élément, vous pouvez facilement créer un diaporama impressionnant qui captera l'attention de vos clients. Pour savoir comment procéder, consultez cette vidéo pédagogique.
4. Pourquoi mon texte ou mon bouton ne s'affiche-t-il pas sur mobile ?
Assurez-vous que l'élément n'est pas masqué sur mobile. Dans l'onglet Avancé, vérifiez les paramètres de visibilité pour confirmer qu'il est activé sur toutes les tailles d'écran.
5. Comment aligner le texte ou le bouton à l'intérieur de la bannière Hero ?
Utilisez le bouton Menu > Aligner pour positionner les éléments à gauche, au centre ou à droite. Vous pouvez également utiliser le Rembourrage Largeur commandes pour un placement précis.
6. Comment rendre ma page d’accueil plein écran pour les visiteurs ?
7. Pourquoi ma bannière de héros apparaît-elle plus haut ou au mauvais endroit sur la page ?
8. Comment ajouter un texte alternatif à une bannière de héros ?
Pour ajouter un texte alternatif à une bannière principale, cliquez sur l'élément Bannière principale pour ouvrir son panneau de paramètres. Sous le Le SEO Dans cette section, saisissez votre texte. Texte alternatif de l'image Ce texte alternatif contribue à améliorer l'accessibilité et le référencement naturel en décrivant l'image de la bannière aux moteurs de recherche et aux lecteurs d'écran.
Merci pour vos commentaires