Tuto Webflow : Comment maintenir un élément sticky/collant ?

Bienvenue dans ce tutoriel où nous allons apprendre ensemble à créer un élément collant (sticky) sur Webflow. Que vous travailliez sur une fiche produit ou tout autre type de page, cette technique est idéale pour améliorer l'expérience utilisateur en maintenant certains éléments en vue pendant que l'utilisateur fait défiler la page. Suivez les étapes ci-dessous pour savoir comment procéder !

Qu'est-ce qu'un Élément Collant et Pourquoi l'Utiliser ?

Un élément collant sur une page web est un élément qui reste fixé à une position spécifique à l'écran lorsque vous faites défiler la page. Cela peut être particulièrement utile pour garder des informations importantes, comme les détails d'un produit ou un menu de navigation, constamment accessibles à l'utilisateur.

Étape 1 : Sélectionner l'Élément à Rendre Collant

Commençons par la partie droite de notre fiche produit. Repérez la div qui englobe le contenu informationnel du produit. C'est cet élément que nous allons rendre collant.

Étape 2 : Changer la Position de l'Élément

Une fois que vous avez sélectionné la div, changez sa position en "Sticky" (Collant). Pour ce faire, allez dans le panneau des styles et modifiez la propriété de position.

Étape 3 : Définir la Valeur "Top"

Après avoir changé la position de l'élément en "Sticky", il est nécessaire de définir une valeur pour "Top". Cette valeur détermine à quelle distance du haut de la page votre élément deviendra collant. Vous pouvez également utiliser la valeur "Bottom" si vous souhaitez que l'élément reste collé en bas de la page.

Par exemple, si vous définissez "Top" à 0 REM, l'élément collera directement en haut de la page lorsque vous ferez défiler. Si vous définissez une valeur plus élevée, comme 3 REM, il y aura un espace de 3 REM entre le haut de la page et votre élément lorsqu'il commencera à coller.

Étape 4 : Tester Votre Élément Collant

Après avoir défini la position et la valeur "Top" de votre élément, faites défiler la page pour vous assurer que tout fonctionne comme prévu. Vous devriez voir l'élément rester en place pendant que le reste de la page continue de défiler.

Étape 5 : Appliquer la Technique à d'Autres Éléments

Vous pouvez également appliquer cette technique à d'autres éléments de votre page, comme la barre de navigation. Dans ce cas, au lieu d'utiliser la position "Sticky", vous pouvez opter pour une position "Fixed" (Fixe). Cela rendra l'élément collant indépendamment de sa position dans le flux de la page.

Conclusion

Voilà, vous savez maintenant comment créer un élément collant sur Webflow ! Cette technique est un excellent moyen d'améliorer l'expérience utilisateur et de s'assurer que les informations clés restent toujours à portée de vue. N'hésitez pas à expérimenter avec différentes valeurs et éléments pour voir ce qui fonctionne le mieux pour votre design.

Si vous avez trouvé ce tutoriel utile, n'oubliez pas de mettre un like et de vous abonner à la chaîne pour ne rien manquer des prochaines leçons. À bientôt pour une nouvelle vidéo !