Flouter des éléments dans une application est une excellente manière simple et compréhensible pour indiquer à l'utilisateur qu'une information ne lui est pas accessible.

Cela peut être une bonne indication montrant que cette information n'est pas disponible avec un certain plan, mais qu'elle peut être consultée en passant à un plan supérieur.

Dans cet article, nous allons voir comment flouter facilement des éléments comme le Texte et les Images en seulement quelques minutes.

Étape 1 : Construire notre interface

Commençons par l’indispensable :

Si ce n'est pas déjà fait, commencez par construire votre interface ainsi que les éléments que vous souhaitez flouter.

Pour gagner du temps, j'ai récupéré la carte de profil ci-dessous que j'ai juste à copier-coller dans mon application.

Étape 2 : Exposer l'ID HTML de nos éléments

Si ce n'est pas votre premier tutoriel, vous avez probablement déjà fait cette étape. Sinon, voici ce qu'il faut faire :

Rendez-vous dans les Paramètres de votre application puis dans l'onglet Général. En bas de cette page, vous trouverez l'option « Exposer l'option pour ajouter un attribut ID aux éléments HTML ».

Si cette option n'est pas cochée, cochez-la !

Une fois cette étape réalisée, vous verrez un nouvel input dans le panneau des propriétés de chacun de vos éléments.

Étape 3 : Comment flouter des éléments Texte ?

Pour flouter des éléments dans Bubble, vous aurez probablement besoin de flouter deux types d’éléments : les Textes et les Images.

Le processus est différent pour chacun. Flouter les éléments Texte est assez simple puisque cela ne nécessite que de l’HTML.

Pour les images en revanche, nous aurons besoin de CSS. Mais ne vous inquiétez pas, je vous guide.

Commençons par flouter nos éléments Texte !

Ajouter un ID au texte que vous souhaitez flouter

Commencez par localiser tous les Text que vous voulez flouter et modifiez leur attribut ID. Vous pouvez mettre n'importe quelle valeur, mais dans ce tutoriel, je l'ai défini à "blurred".

Si vous devez flouter plusieurs éléments Texte, attribuez-leur tous le même ID et ils seront floutés simultanément.

Ajouter notre code HTML pour flouter les textes

Dernière étape pour flouter nos éléments, il faut ajouter ce code à votre application :

<style>
#YOUR-TEXT-ID { 
    color : transparent !important; 
    text-shadow: 0 0 10px rgba(0,0,0,0.9) !important;
}
</style>

Note importante : Veillez à remplacer YOUR-TEXT-ID par la valeur réelle de l'attribut ID de votre élément.

Vous avez plusieurs options pour ajouter ce code dans votre application :

1. Ajouter un élément HTML sur votre page et y coller ce code.

2. Ajouter ce code dans l’en-tête de votre Application (Paramètres → SEO/Meta tags → Scripts / Meta tags in header)

3. Ajouter ce code dans l’en-tête de cette page.

Ces trois options fonctionnent de la même façon. Cependant, si vous souhaitez flouter plusieurs éléments sur plusieurs pages, je vous recommande de placer ce code dans l’en-tête de votre Application pour ne le coller qu’une seule fois.

Il vous suffit maintenant de cliquer sur Aperçu, et votre texte est flouté !

Étape 4 : Comment flouter des images dans Bubble ?

Installer le plugin Classify (gratuit)

Maintenant que nous savons flouter les éléments Texte, passons aux images !

Comme indiqué précédemment, le procédé est différent pour les images. Nous allons devoir utiliser du CSS.

La première étape sera donc d'installer le plugin Classify.

C'est un plugin gratuit qui permet d'utiliser du CSS personnalisé dans votre application.

Si vous ne l'avez pas encore installé, faites-le dès maintenant.

Donner une classe CSS à vos images

Une fois Classify installé, nous allons attribuer une classe CSS à nos images.

En résumé, c'est ce qui nous permettra de cibler l'élément à flouter.

Pour cela, il suffit de coller ce code dans l'attribut ID des images à flouter :

{addClass: "YOUR-CLASS"}

Bien sûr, remplacez "YOUR-CLASS" par le nom réel de votre classe (en gardant les guillemets autour).

Ajouter notre code à l'application

Vient maintenant l'étape finale : ajouter notre code dans l'application !

C'est simple et similaire à la méthode utilisée pour les éléments Texte.

Choisissez simplement où vous souhaitez coller le code, puis collez ce qui suit :

<style>
    .YOUR-CLASS img { 
        filter: blur(5px); /* Ajustez le niveau de flou selon vos besoins */
    }
</style>

Encore une fois, remplacez YOUR-CLASS par le nom réel de votre classe (sans guillemets cette fois).

Cliquez sur Aperçu, et voilà, vous avez flouté vos images et vos textes !

Considérations importantes de sécurité !

Lorsque vous floutez des éléments dans Bubble, gardez bien à l'esprit que CE N'EST PAS une méthode sécurisée pour cacher des informations.

Même floutées, les informations peuvent être accessibles simplement en faisant un clic droit puis en inspectant l'élément.

Pour garantir la sécurité de vos informations, affichez un contenu de substitution par défaut lorsque l'information est floutée, et ne remplacez ce contenu que lorsque l’élément doit être affiché !

Si vous cherchez des ressources pour sécuriser davantage votre application, je vous recommande le travail de Flusk. Ils proposent une fiche pratique gratuite que vous pouvez consulter !