Élément collant Retour en haut

Qu'est-ce que Sticky Back to Top ?

L' Collant Retour en haut L'élément est un bouton flottant conçu pour améliorer la navigation sur votre site web. Lorsque les visiteurs font défiler la page vers le bas, ce bouton leur permet à retour en haut en un seul clic instantanément.

Cet élément est particulièrement utile pour les longues pages avec un contenu étendu, car il permet de réduire l'effort de l'utilisateur et d'améliorer l'engagement global.

Comment ajouter l'élément Sticky Back to Top ?

Suivez les étapes ci-dessous pour glisser-déposer un élément « Retour en haut » fixe dans votre page à l’aide de GemPages Editor v7 :

• Connectez-vous à votre Administrateur Shopify > Générateur de pages GemPages application> Pages.
• Cliquez sur la page où vous souhaitez ajouter l'élément « Retour en haut » fixe pour accéder à l'éditeur.
• Dans la barre latérale gauche, recherchez cet élément et faites-le glisser vers la position souhaitée sur votre page.

• Localisez l'élément pour ouvrir ses paramètres pour une personnalisation supplémentaire.

Configurer l'onglet Paramètres

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). Paramètres onglet, vous pouvez configurer la visibilité de l'icône comme vous le souhaitez :

Taille

Largeur Hauteur: Définissez les dimensions du bouton pour vous assurer qu'il est visible mais pas gênant.

Rembourrage: Ajustez l'espacement interne du bouton pour un meilleur alignement du texte ou des icônes.

Par exempleNous définissons la largeur à 100 % (plein écran) et la hauteur à Auto. Le bouton « Retour en haut » s'affichera en plein écran. 

Présentation

Définissez une couleur unie/dégradée ou une image comme arrière-plan.

• Couleur : Saisissez le code couleur, choisissez dans la liste « couleurs récentes »/« suggérées pour vous » ou utilisez le sélecteur de couleurs pour définir la couleur d'arrière-plan.

• Image: Téléchargez une nouvelle image ou choisissez-en une dans la bibliothèque pour la définir comme arrière-plan.

Forme

Personnalisez la forme en utilisant :

• Frontière: Sélectionnez les styles de bordure (ligne/tiret/point) et modifiez la couleur et l'épaisseur de la bordure pour les aligner sur la conception de votre marque.

• Coin: Ajustez le rayon des coins pour une meilleure visibilité.

• Ombre: Appliquez des effets d’ombre pour plus de profondeur.

Icône

Activer/désactiver la visibilité des icônes. Vous pouvez la désactiver pour afficher uniquement du texte.

Si activé:

• Choisissez l'icône: Sélectionnez une icône dans la bibliothèque qui correspond au thème de votre site ou téléchargez une icône personnalisée (fichier SVG uniquement).
• Poste: Décidez si le bouton apparaît sur le à gauche or bien côté de l'écran.
• espacement: Ajustez la distance entre le bouton et les bords de l'écran pour un placement précis.

Texte

Si vous incluez du texte dans le bouton, vous pouvez le styliser en fonction de votre image de marque :

• Styles:Sélectionnez parmi les styles de titre pour plus de visibilité.
• Fonte:Choisissez une famille de polices qui correspond à la typographie de votre magasin.
• Taille: Ajustez la taille du texte pour plus de visibilité.
• Gras/Italique/Soulignement:Ajoutez de l’emphase à ces styles de texte.
• Poids de polices:Contrôlez l'épaisseur du texte.
• Hauteur de ligne: Ajustez l'espacement entre les lignes pour le texte multiligne.
• L'espacement des lettres: Ajustez l'espace entre les caractères individuels pour plus de lisibilité.
• Transformez: Formater le texte en majuscule, minuscule, ou capitaliser chaque mot.

Effect

Personnaliser l'apparence du bouton dans les états de survol :

• Couleur de fond:Choisissez des couleurs distinctes pour chaque état afin d’améliorer le retour visuel.
• Image: L'arrière-plan du bouton se transforme en image lors du survol.
• Couleur du texte: Définissez une couleur de texte lisible qui complète l’arrière-plan.
• Frontière: Définissez la largeur, le style et la couleur de la bordure pour délimiter le bouton.
• CORNER: Ajustez la rondeur des coins du bouton pour un look moderne ou classique.
• Shadow:Ajoutez un effet d’ombre pour créer de la profondeur et faire ressortir le bouton.

Lien

Comme il s'agit d'un bouton de retour en haut, l'action après clic est définie sur Faites défiler jusqu'à Top par défaut. Vous pouvez donc l'ignorer. Lien .

Aligner

Si la largeur du bouton = Ajuster le contenu (Auto), choisissez comment le bouton est aligné :

• Gauche:Alignez le bouton sur le bord gauche.
• : Centrer le bouton dans le bouton.
• Des:Alignez le bouton sur le bord droit.

Configurer l'onglet Avancé

Pour une personnalisation plus avancée, accédez à l'onglet Avancé et suivez les instructions cet article.