Un écran hero affiche une image ou une vidéo plein écran en haut, avec votre contenu sur un panneau en dessous. Pour en créer un, placez tout votre contenu sur un Sliding sheet, avec le hero en arrière-plan. Le panneau couvre la partie inférieure de l’écran et remonte sur le hero au fur et à mesure que l’utilisateur fait défiler.

Superposez votre contenu sur une image ou une vidéo hero

1. Ajoutez le hero comme arrière-plan de l’écran : dans les paramètres d’écran, définissez Fill sur une image ou une vidéo. La feuille couvre la partie inférieure de l’arrière-plan, choisissez donc une image ou une vidéo dont le sujet principal se trouve vers le haut.

   

2. Ouvrez le panneau Add element et sélectionnez Sliding sheet.

3. Placez le contenu de l’écran dans le sliding sheet — faites-le glisser dans le panneau Layers.

4. Pour garder le bouton d’achat visible, ajoutez-le à un pied de page. Le bouton restera en bas de l’écran pendant que le contenu défile.

5. Ajustez la Start position du sheet pour afficher davantage du hero ou davantage de votre contenu à l’ouverture de l’écran.

6. Pour voir comment le sheet se déplace sur le hero, faites défiler l’écran dans la zone d’aperçu.

7. Sélectionnez d’autres modèles dans la liste d’appareils et vérifiez la zone au-dessus du sheet. La Start position est un pourcentage de la hauteur de l’écran, donc cette zone est plus courte sur les téléphones petits.

Comment la feuille défile sur le héros

La position de départ est la position de la feuille à l’ouverture de l’écran. Par défaut, à 55 %, la feuille couvre les 55 % inférieurs de l’écran, et les utilisateurs voient le héros dans les 45 % supérieurs.

Si tout le contenu est visible à l’ouverture de l’écran, la feuille reste à sa position de départ. Sinon, les utilisateurs font défiler toute la feuille vers le haut sur le héros. Si le contenu est plus grand que l’écran, le haut de la feuille sort du champ de vue.

Pour que le contenu long reste défilable, dans les paramètres de l’écran, laissez le bouton Vertical scroll activé. Si vous le désactivez, la feuille reste à sa position initiale et coupe tout contenu qui ne tient pas dans l’espace disponible.

Pendant que la feuille se déplace, les utilisateurs voient ce qui suit :

• La feuille glisse par-dessus les éléments qui se trouvent en dehors d’elle, comme un logo ou un titre en haut de l’écran. Ces éléments se déplacent également vers le haut, mais plus lentement, ce qui donne une impression de profondeur (parallaxe). Sur Android, la parallaxe est disponible dans les applications Android natives et React Native avec le SDK Adapty v4.3.0 ou ultérieur. Dans les autres applications Android — ou avec des versions plus anciennes du SDK — l’effet n’est pas visible.
• Sur iOS, lorsque les utilisateurs font glisser la feuille en dessous de sa position de départ, les éléments situés en dehors de la feuille s’étirent.
• L’arrière-plan de l’écran ne bouge pas.

Ajouter un parallaxe au hero

Pour donner un effet de parallaxe au hero, ajoutez-le en tant qu’élément image ou vidéo en dehors de la feuille, plutôt que comme arrière-plan d’écran.

Par défaut, l’élément n’atteint pas les bords de l’écran. Le padding de l’écran insère l’élément de chaque côté, et avec Safe area activé, il commence sous la barre de statut.

1. Ouvrez le panneau Add element et faites glisser un élément Image ou Video dans la zone au-dessus de la feuille.
2. Pour que l’élément s’étende jusqu’à la feuille, réglez sa Width et sa Height sur Fill. Laissez le Content mode (Aspect pour une vidéo) sur Fill.
3. Pour que l’élément atteigne les bords gauche et droit de l’écran, ouvrez les paramètres d’écran. Sous Spacing, réglez les marges gauche et droite à 0. Si la feuille a des coins supérieurs carrés, réglez également la marge inférieure à 0 pour que l’élément rejoigne la feuille.
4. Pour que l’élément atteigne le bord supérieur de l’écran, sous la barre de statut, gardez-le comme premier élément en dehors de la feuille. Cliquez ensuite sur l’élément et, dans la section Position, cochez la case Ignore safe area.

Placer des éléments sur le hero

Pour placer un logo ou un titre sur un hero en arrière-plan, faites glisser l’élément dans la zone au-dessus de la feuille. Les éléments situés en dehors de la feuille s’empilent depuis le haut de l’écran, et tout ce qui dépasse cette zone est rogné. Pour les placer sur un élément image ou vidéo, définissez leur Position sur Absolute.

Pour qu’un bouton de fermeture reste visible pendant que les utilisateurs font défiler, ajoutez-le directement à l’écran et définissez sa Position sur Fixed. Vous ne pouvez pas sélectionner Fixed pour un élément situé à l’intérieur de la feuille.

Garder le bouton d’achat visible

Pour garder le bouton d’achat et les mentions légales visibles pendant que l’utilisateur fait défiler le contenu, placez-les dans un pied de page. Le pied de page se trouve à l’intérieur de la feuille.

Le pied de page reste en bas de l’écran, par-dessus la feuille. L’utilisateur peut faire défiler tout le contenu de la feuille et le voir au-dessus du pied de page.

Un pied de page à la racine de l’écran se présente de la même façon que dans la feuille.

Styliser la feuille

Vous stylisez la feuille comme n’importe quel autre conteneur. Les marges intérieures et les coins fonctionnent différemment :

• Marge de l’écran : La marge de l’écran s’applique uniquement aux éléments situés en dehors de la feuille, donc la feuille s’étend d’un bord à l’autre de l’écran.
• Marge de l’élément : Le Padding de la feuille maintient son contenu à l’écart des bords de l’écran.
• Coins : Les coins supérieurs arrondis soulèvent la feuille au-dessus de sa position initiale d’une hauteur égale au rayon des coins, ce qui fait apparaître le hero dans ceux-ci. Une feuille avec un remplissage vidéo ne se soulève pas, donc ses coins affichent l’arrière-plan de l’écran. Une feuille transparente ne se soulève que sur un arrière-plan d’écran d’une seule couleur unie.

Sliding sheet vs. Bottom Sheet

Les deux panneaux occupent la partie inférieure de l’écran. Choisissez celui qui correspond à votre besoin :

• Utilisez un Sliding sheet pour afficher le contenu principal de l’écran par-dessus un hero. La feuille est visible dès l’ouverture de l’écran et ne bouge que lorsque l’utilisateur fait défiler.
• Utilisez un Bottom Sheet pour du contenu qui apparaît à la demande, comme une liste de forfaits derrière un lien Show all plans. Vous l’affichez avec une action Show.