À propos de la section Parallax et de l'élément Parallax de la bannière Hero de GemPages
Une section de parallaxe est une technique de conception dans laquelle l'arrière-plan se déplace à une vitesse ou une direction différente de celle du contenu au premier plan, créant une illusion de profondeur et de mouvement subtil lors du défilement.
Cet effet améliore non seulement l’attrait visuel, mais offre également des avantages en termes d’optimisation du taux de conversion (CRO) en rendant l’expérience utilisateur plus immersive et engageante.
Dans GemPages Editor v7, vous pouvez concevoir votre section de parallaxe en un clin d'œil à l'aide des Bannière de héros Parallax .
Comment ajouter une bannière Hero Parallax à votre page ?
Explorons comment ajouter une bannière Hero Parallax à votre page à l'aide de GemPages et personnalisez-la à votre façon.
- Depuis votre interface administrateur Shopify, accédez à Tableau de bord GemPages > Pages.
- Localisez la page cible ou cliquez dessus Commencer à partir de zéro pour ouvrir l'éditeur.
- Dans la barre latérale gauche, recherchez « hero banner parallax », puis faites glisser et déposez l’élément à votre position préférée sur la page.
Configurer l'onglet Paramètres
Cliquez sur l'élément pour ouvrir ses paramètres. Dans le Paramètres onglet, vous pouvez configurer :
Mise En Page
GemPages propose 12 mises en page pour la parallaxe de votre bannière principale. Choisissez celle qui vous convient dans le panneau ou saisissez le ratio manuellement.
Présentation
Définissez l’arrière-plan de l’élément, notamment :
- Couleur : Choisissez parmi l'échantillon de couleurs, entrez un code couleur ou utilisez le sélecteur de couleurs pour définir la couleur d'arrière-plan.
- Image: Vous pouvez télécharger une nouvelle image ou parcourir votre galerie.
- Vidéo: Utilisez une vidéo YouTube ou sélectionnez Hébergement vidéo pour définir un arrière-plan vidéo pour votre élément.
Taille
Personnalisez la taille de l'élément ou appuyez sur le bouton Comme source de bannière pour ajuster automatiquement la largeur et la hauteur de la parallaxe de la bannière du héros.
Menu
Ajustez la largeur, le remplissage et l'alignement du contenu de l'élément dans cette section.
Forme
En vertu des Normes sur l’information et les communications, les organismes doivent rendre leurs sites et applications Web accessibles. Ils y parviennent en conformant leurs sites Web au niveau AA des Web Content Accessibility Guidelines (WCAG). Forme section, vous pouvez ajouter une bordure, ajuster le rayon des coins et ajouter un effet d'ombre pour votre section héros.
Effect
Pour ajouter un effet de survol, cliquez sur le Effect pour développer le panneau. De là, vous pouvez modifier l'opacité de la superposition et changer sa couleur pour une meilleure visibilité.
Lien
Activez cette section et choisissez une action après que les utilisateurs ont cliqué sur votre bannière de héros dans la liste déroulante :
- Ouvrir la page
- Faites défiler jusqu'à
- Ouvrir une fenêtre contextuelle
- Envoyer un mail
- Faire un appel téléphonique
Par exemple, si vous choisissez le Ouvrir la page Vous pouvez insérer un lien vers une page ou sélectionner une page dans la liste. Ensuite, définissez Ouvrez un nouvel onglet Lien suivant = Oui/Non comme vous préférez.
Le SEO
Pour améliorer le référencement de votre page, vous devez ajouter le texte alternatif et le titre de l'image dans ce Le SEO .
Aligner
Alignements disponibles que vous pouvez choisir pour votre élément : aligné à gauche, aligné au centre et aligné à droite.
Configurer l'onglet Avancé
Pour une personnalisation plus avancée, accédez à l'onglet Avancé et suivez les instructions cet article.
Merci pour vos commentaires