Comment rendre un élément collant ?

Pourquoi rendre un élément collant ?

Les éléments collants peuvent améliorer l'expérience utilisateur en garder le contenu important visible lorsque les utilisateurs font défiler la page. 

Par exemple, lors de la conception d'un publireportage, vous souhaiterez peut-être une boîte d'appel à l'action ou un message clé pour rester visible pendant que l'utilisateur fait défiler, en veillant à ce qu'il soit toujours accessible.

Regardez la conception de la boîte CTA collante sur le côté droit de la page, qui reste fixe tandis que le contenu principal défile sur la gauche :

Cette approche garantit que les lecteurs peuvent interagir avec les CTA importants sans interruption, améliorant ainsi les taux de conversion et l’interaction globale des utilisateurs.

Dans GemPages, l'ajout d'un élément collant est simple et ne nécessite aucune connaissance en codage.

Comment rendre un élément collant dans GemPages

Étape 1 : sélectionnez votre élément

Choisissez l'élément que vous souhaitez garder visible pendant le défilement. Il peut s'agir d'un bouton, d'une bannière, etc.

Étape 2 : Accéder aux paramètres de position avancés

• Dans la barre latérale gauche de GemPages Editor, cliquez sur Paramètres.
• Accédez à la Avancé languette.

Étape 3 : Définir la position sur Collant

• Découvrez Poste option sous Paramètres avancés
• Changer la position de la valeur par défaut à gluantCette modification permet à l’élément de « coller » à sa position par rapport à la fenêtre d’affichage lorsque l’utilisateur le fait défiler.

Cas d'utilisation courants des éléments collants

Le positionnement fixe peut être appliqué à différents éléments selon la mise en page et vos objectifs de conversion. Voici quelques exemples d'utilisation courante des éléments fixes dans GemPages pour maintenir la visibilité du contenu important pendant le défilement.

Comment créer un bouton d'appel à l'action fixe

Si vous souhaitez que votre bouton d'appel à l'action reste visible pendant que les utilisateurs font défiler la page, vous pouvez rendre l'élément bouton collant à l'aide de la propriété `sticky`. Poste multiculturel.

Suivez les étapes de synthèse:

Étape 1 : Sélectionnez le Élément bouton tu veux rendre collant.

Étape 2 : Rendez-vous dans la section Avancé onglet dans la barre latérale gauche.

Étape 3 : Faites défiler jusqu'à la Poste .

Étape 4 : Mettez le Poste Option de gluant.

Une fois activé, le bouton CTA restera visible lorsque les visiteurs feront défiler la page, ce qui leur permettra d'agir plus facilement à tout moment.

Comment ajouter un CTA fixe sur mobile uniquement

Dans GemPages, lorsque vous définissez un bouton sur gluant Sur ordinateur, l'élément restera fixe, et sur mobile également. Cela est dû au fait que GemPages utilise responsive design, ce qui signifie que les paramètres de position s'appliquent par défaut à tous les appareils.

Cependant, si vous souhaitez que le bouton CTA soit fixe uniquement sur mobileVous pouvez créer une version mobile distincte du bouton et appliquer un positionnement fixe uniquement à cette version.

Suivez les étapes de synthèse:

Étape 1 : Dupliquez le bouton que vous souhaitez rendre fixe uniquement sur mobile.

Étape 2 : Sélectionnez le bouton d'origine, puis mettez à jour son Paramètres d'affichage à afficher sur Bureau uniquement et le cacher sur Mobile.

Étape 3 : Sélectionnez le bouton dupliqué, puis mettez à jour son Paramètres d'affichage à afficher sur Mobile (et le masquer sur le Bureau si nécessaire).

Étape 4 : Une fois le bouton dupliqué sélectionné, accédez à Avancé onglet. Faites défiler jusqu'à l'onglet. Poste section. Définissez le Poste Option de gluant.

Une fois la modification effectuée, ce comportement persistant s'appliquera uniquement à la version mobile du bouton, tandis que la version de bureau restera inchangée.

Comment créer une description de produit percutante

Les descriptions de produits fixes sont couramment utilisées sur les pages produits pour que les informations importantes (telles que les détails du produit, le prix ou les boutons « ajouter au panier ») restent visibles pendant que les clients font défiler les images ou les longues descriptions des produits.

Suivez les étapes de synthèse:

Étape 1 : Sélectionnez le éléments de description du produit.

Étape 2 : Rendez-vous dans la section Avancé onglet dans la barre latérale gauche.

Étape 3 : Faites défiler jusqu'à la Poste .

Étape 4 : Mettez le Poste Option de gluant.