Avoir un Header Fixe dans votre application Bubble.io est un excellent moyen d'améliorer l'expérience utilisateur ainsi que le taux de conversion.
Avec cela, un utilisateur qui fait défiler votre site garde toujours votre header en vue, ce qui facilite non seulement la navigation mais augmente également votre CTR (Click Through Rate) si vous avez un CTA dans votre header.
Dans Bubble.io, créer un Header Fixe peut se faire assez facilement, et je vais vous montrer comment.
Qu'est-ce qu'un Header Fixe ?
Pour commencer, définissons ce qu'est un Header Fixe et à quoi il ressemble.
Un Header Fixe est un type de header qui NE défile PAS avec la page.
Contrairement à un header classique qui disparaît de votre écran lorsque vous faites défiler vers le bas, un Header Fixe reste visible en haut de votre page peu importe jusqu'où vous scrollez.
Un exemple de header classique (non fixe)
Un exemple de Header Fixe dans Bubble.io
Comment créer un Header Fixe dans Bubble.io ?
La méthode la plus simple et efficace pour créer un Header Fixe dans Bubble est d'utiliser un Floating Group.
Comme son nom l'indique, ce groupe est un type de conteneur qui a la capacité de flotter au-dessus (ou en dessous) des autres éléments de la page.
Et si vous regardez de plus près, c'est exactement ce que nous voulons réaliser dans notre cas.
Allons-y et créons notre header dans Bubble.
Comme vous pouvez le voir dans la capture d'écran ci-dessus, notre header n'est actuellement pas « fixe ».
C'est parce que notre élément est de type « Group » et ne flotte donc pas au-dessus des autres éléments.
Corrigeons cela en cliquant-droit sur l'élément, puis en cliquant sur "Remplacer le type d'élément" et en sélectionnant "Floating Group".
Bien sûr, si vous n'avez pas encore construit votre header, vous pouvez simplement glisser-déposer un élément Floating Group sur votre page et construire votre header à l'intérieur.
Ceci sert simplement à montrer que vous pouvez convertir un header classique en Header Fixe !
Par défaut, il devrait déjà être aligné en haut, mais si ce n'est pas le cas, n'oubliez pas de le modifier :
Maintenant, si vous prévisualisez la page, vous pouvez voir que l'élément doit flotter au-dessus des autres éléments.
N'oubliez pas de définir une couleur de fond pour votre header afin d'éviter qu'il ne se confonde avec les éléments en dessous, et surtout, n'oubliez pas de rajouter une marge haute à l'élément directement sous votre header.
Dans mon cas, une marge haute de 70px fonctionne parfaitement, mais n'hésitez pas à adapter cette valeur à votre cas particulier !
Et voilà !
Vous avez créé un Header Fixe incroyable pour votre application Bubble.io.
