Dans cet article, nous allons voir comment créer un beau dégradé de texte dans votre application Bubble, en moins de 2 minutes.

Après cela, vous pourrez créer un dégradé de texte comme celui-ci :

Activation de l'ID HTML dans votre application Bubble

Avant toute chose, vous devez vous assurer que l'option pour exposer l'ID des éléments est activée dans votre application.

Pour cela, rendez-vous dans Paramètres --> Général et trouvez l'option suivante :

"Expose the option to add an ID attribute to HTML elements"

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

Une fois cette case cochée, vous verrez ce champ lorsque vous cliquez sur vos éléments dans l'Éditeur Bubble :

Configurer notre dégradé

Ensuite, nous allons ajouter un peu de code !

Mais ne vous inquiétez pas, ce sera très simple !

Positionner un élément HTML dans votre application

Ajoutez un élément HTML dans votre application.

Attention, cet élément doit rester sur la page pour que le code fonctionne, donc ne décochez pas la case "This element is visible on page load".

Si vous voulez le cacher, réglez simplement sa taille à 1x1 pixel.

Une fois que cet élément est ajouté à votre page, collez ce code à l'intérieur :

<style>
#gradient-text { 
        background: linear-gradient(to right, #17233E, #4262FF); 
        -webkit-background-clip: text; 
        -webkit-text-fill-color: transparent;
    }
</style>

Définir l'ID de votre texte

Vous vous souvenez de l'option que nous avons cochée tout à l'heure ? Il est temps de l'utiliser !

Dans le code que nous avons collé, vous pouvez voir cette partie 👉 #gradient-text

C'est ainsi que notre code HTML sait sur quels éléments il doit s'appliquer.

Pour que le dégradé soit appliqué sur un texte, vous devez alors définir l'ID de l'élément texte concerné avec la même valeur que celle utilisée dans le code HTML (dans ce cas, gradient-text).

Vous devriez avoir quelque chose qui ressemble à ceci :

Modifier les couleurs du dégradé

Maintenant que tout est en place, vous devriez voir votre texte avec un dégradé en mode Preview !

Pour personnaliser les couleurs de ce dégradé, il vous suffit de remplacer les codes hexadécimaux contenus dans l'élément HTML.

Vous pouvez également personnaliser le type de dégradé (par exemple en radial) ou la direction en modifiant les attributs dans l'élément HTML.

Conclusion

Voilà, c'est tout !

Vous savez maintenant comment créer un dégradé de texte dans Bubble.

Une fois que votre élément HTML est placé sur une page, il suffit de définir l'ID de l'élément texte pour qu'il corresponde à celui de l'élément HTML, et votre texte apparaîtra avec ce dégradé.