Arrière-plans

Définissez un arrière-plan sur n’importe quel écran via le panneau Fill dans les Screen settings. Chaque couche du panneau correspond à une couleur unie, un dégradé, une image ou une vidéo — et un écran peut en empiler plusieurs, ce qui permet de teinter une image ou une vidéo.

Un arrière-plan peut également servir d’image hero. Pour obtenir cet effet, placez votre contenu dans une feuille coulissante.

Image

Importez un fichier .JPG, .PNG ou .WEBP de 20 Mo maximum. L’image est redimensionnée pour couvrir l’intégralité de l’arrière-plan.

Pour changer l’image d’arrière-plan à l’exécution depuis le code de votre application, activez un ID média personnalisé.

Vidéo

Importez un fichier .MP4 ou .WEBM de 50 Mo maximum. L’aperçu affiche une image fixe, mais la vidéo est lue sur l’appareil à l’exécution.

Activez Loop pour répéter la vidéo en boucle.

Pour permuter la vidéo d’arrière-plan à l’exécution, activez un identifiant multimédia personnalisé.

Couleur unie

Saisissez une valeur hexadécimale à six chiffres, comme #FFFFFF, et réglez l’opacité de 0 à 100 %. Une valeur abrégée bloque la publication. Choisissez un style de couleur enregistré dans la palette pour appliquer la couleur de votre marque — l’arrière-plan suit automatiquement vos thèmes clair et sombre.

Dégradé

Créez un dégradé linéaire avec plusieurs points d’arrêt :

• Direction — faites pivoter le dégradé de 0 à 360°.
• Stops — faites glisser les points le long de la barre pour les repositionner. Cliquez sur un point pour modifier sa valeur hexadécimale à six chiffres et son opacité.
• Opacity — le curseur sur la ligne du calque ajuste tous les points simultanément, ce qui préserve la transition entre eux.

Utiliser un arrière-plan comme image hero

Dans les flows, vous créez une image hero à partir d’un arrière-plan d’écran et d’un Sliding sheet. Le sheet couvre la partie inférieure de l’écran et remonte par-dessus l’arrière-plan au fil du défilement.

1. Définissez le Fill de l’écran sur Image ou Video, et téléchargez l’image hero.

   

2. Ajoutez un Sliding sheet : > Layout > Sliding sheet.

3. Définissez la Start position de la feuille — la part de l’écran couverte par la feuille, mesurée depuis le bas. À la valeur par défaut de 55 %, le fond est visible sur les 45 % supérieurs.

4. Ajoutez votre contenu à l’intérieur du sheet.
5. Pour superposer un titre ou un logo sur l’image hero, ajoutez ces éléments en dehors du sheet. Ils s’affichent par-dessus l’arrière-plan de l’écran.
6. Modifiez la Start position pour redimensionner le sheet si nécessaire. Vous ne pouvez pas définir une hauteur absolue pour cet élément.

Teinter un arrière-plan

Le texte superposé à une image ou une vidéo n’est lisible que là où le média en dessous est suffisamment sombre. Pour uniformiser cette surface, empilez une couche semi-transparente sur le média :

1. Dans Screen settings, définissez la couche Fill sur votre image ou vidéo.
2. Pour ajouter une deuxième couche, cliquez sur à côté de Fill. La nouvelle couche apparaît en haut de la liste et se superpose au média.
3. Cliquez sur l’échantillon de couleur de la couche et sélectionnez Gradient . Pour assombrir uniquement le bord où se trouve votre texte, faites passer le dégradé d’un arrêt opaque sur ce bord à un arrêt transparent sur l’autre.
4. Pour régler l’intensité de la teinte, faites glisser le curseur sur la ligne de la couche.

Faites glisser un calque pour le déplacer dans la pile, et cliquez sur pour le supprimer.