Comment contrôler l'affichage et la fermeture d'une bannière en utilisant le stockage local du navigateur dans Webflow ?
Introduction
| Élément | ID / Classe | Rôle |
|---|---|---|
| Bannière | id='banner' | Élément à afficher/cacher |
| Bouton fermeture | class='close-btn' | Déclenche la fermeture et le stockage |
| localStorage key | bannerClosed | Stocke l'état de fermeture |
Dans ce tutoriel, Sandro cofondateur de l'agence Webflow Gemeos vous montre comment contrôler l'affichage et la fermeture d'une bannière en utilisant le stockage local du navigateur dans Webflow.
Contrôler l'affichage et la fermeture d'une bannière publicitaire en utilisant le stockage local du navigateur permet d'améliorer l'expérience utilisateur. Cette technique permet d'éviter de réafficher la bannière à chaque visite, améliorant ainsi l'expérience de l'utilisateur en réduisant les interruptions et les distractions.
Voici comment faire :
1. Ajoutez l'ID "banner" à votre bannière
2. Ajoutez la classe "close-btn" à votre élément permettant de fermer votre bannière
3. Cachez votre bannière par défaut
Votre bannière doit être en position Display : None par défaut
4. Ajoutez ce code dans le <body> de votre page
5. Plus qu'à tester
bon à savoir
Heading
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
.avif)
Lorem ipsum
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
