Les groupes fixes sont un excellent ajout à tout design.

Ils permettent de faire en sorte qu'un élément « colle » dans un groupe et, bien utilisés, ils apportent une touche remarquable à votre application Bubble.

De plus, ils améliorent l'expérience utilisateur en maintenant des éléments comme un bouton toujours accessibles pour votre utilisateur.

Dans cet article, vous apprendrez comment créer ce type de section fixe dans Bubble en moins de 2 minutes, et sans aucun plugin !

Étape 1 : Construire nos groupes dans Bubble

Commençons par créer nos groupes. Dans cet exemple, nous allons créer la section fonctionnelle suivante.

Copiez donc cet élément et collez-le dans votre application pour débuter rapidement.

Vous pouvez prévisualiser ce composant ici :

Feature Section 9

Cette structure d'élément est la suivante :

• Le layout du conteneur est réglé sur « Row »

• À l'intérieur du conteneur, il y a un conteneur à gauche avec un bouton CTA, et un autre à droite contenant toutes les cartes présentant les fonctionnalités.

‍

Les groupes « Left » et « Right » sont des groupes simples, rien de particulier à leur sujet.

Étape 2 : Exposer les attributs ID HTML pour notre groupe fixe

Pour continuer, il est essentiel de vérifier que la fonctionnalité pour afficher les IDs d'éléments est activée dans votre application.

Nous l'avons déjà évoqué dans des tutoriels précédents, mais voici un rappel :

Pour activer cette fonctionnalité, rendez-vous dans Paramètres, puis sélectionnez Général. Cherchez ensuite l'option intitulée « Expose the option to add an ID attribute to HTML elements. »

Cela vous permettra de définir un ID HTML personnalisé à vos éléments, afin de pouvoir les cibler avec un code dans un élément HTML plus tard.

Une fois cette case cochée, vous verrez un nouveau champ dans le panneau Apparence de vos éléments :

Étape 3 : Assigner un ID à notre groupe fixe

Maintenant, attribuez un ID au groupe que vous souhaitez rendre fixe.

Dans notre exemple, l'ID de notre groupe est « sticky » :

Étape 4 : Intégrer le code HTML pour un groupe fixe efficace dans Bubble.io

La dernière étape de ce tutoriel est d'ajouter ce code dans votre page :

<style>
#sticky {
    position: sticky;
    top: 40px;
}
</style>

Note importante : Si vous n'avez pas défini « sticky » comme ID pour votre groupe, pensez à modifier ce nom dans le code (remplacez #sticky par #your-id).

Par défaut, nous fixons la marge sticky à 40px dans notre code, mais n'hésitez pas à modifier cette valeur pour l'adapter au mieux à votre cas d'usage et au design de votre application !

Comment ajouter ce code HTML à votre application ?

Pour ajouter ce code à votre application, vous pouvez :

• Le coller dans un élément HTML que vous placerez sur votre page

• Le coller dans l'en-tête de la page

• Le coller dans l'en-tête de votre application (Paramètres --> SEO/Metatags --> Script/Meta tags in header)

Conclusion

Voilà, c'est prêt !

Vous devriez maintenant obtenir ce résultat (ou un résultat similaire) dans votre application :

Si vous souhaitez réutiliser ce même code pour un autre élément, il vous suffit de modifier l'attribut ID de ce dernier pour qu'il corresponde à celui utilisé dans le code HTML.