Comment configurer votre header ?

Le header

Le header est la barre en haut de votre app. Il reste visible partout : il affiche l'identité de votre app, donne son titre à chaque section, accueille des raccourcis et aide vos utilisateurs à s'orienter.

Il se configure dans le menu « My App ».

Dans la structure de votre app, cliquez sur Header.

Hauteur du header

Choisissez d'abord la hauteur du header : Small, Medium ou Large.

Choisissez Medium… le header s'agrandit, avec le même titre ou logo.

Choisissez Large… vous pouvez alors ajouter une description courte. Saisissez-la ici… puis cliquez sur OK.

Elle s'affiche sous votre titre, dans le grand header.

Medium et Large s'appliquent aux sections de la navigation principale ; les autres pages restent en Small. Cette app garde Small.

Titre ou logo

Dans le bloc Logo, le nom de votre app s'affiche en texte ou en image. Pour changer le texte, saisissez votre titre… puis cliquez sur OK.

L'aperçu se met à jour aussitôt.

Cliquez sur la couleur, saisissez un code ou choisissez une teinte, puis cliquez sur Choose.

Le titre prend la nouvelle couleur.

Choisissez une police dans la liste… et l'aperçu l'affiche.

Réglez sa taille avec le curseur.

Le titre s'agrandit.

Pour afficher plutôt votre logo, cliquez sur Logo et choisissez une image d'au moins 800 × 200 pixels.

Votre logo prend la place du texte.

Placez-le à gauche, ou gardez-le centré.

Ici, il passe à gauche.

Choisissez ensuite ce qu'affiche le header : toujours votre logo, avec « Logo only », comme sur cette page… ou le nom de chaque section, avec « Section title ».

Boutons de navigation

À gauche du header se trouvent les boutons de navigation : le bouton Back, visible ici dans l'aperçu, et le bouton Menu si votre navigation en a un. Leur icône et leur couleur se règlent ici.

Par exemple, une nouvelle couleur pour le bouton Back… s'applique aussitôt.

Fond

Pour le fond, choisissez une couleur, ainsi que celle du bord inférieur.

Le header prend la nouvelle couleur de fond.

Avec le petit header, vous pouvez aussi utiliser une image de fond de 1242 × 192 pixels.

L'image remplit maintenant le header.

Pour la retirer, cliquez sur la corbeille de l'image… et confirmez.

Le header retrouve sa couleur de fond.

Effet au défilement

L'effet au défilement définit ce que fait le header quand on fait défiler la page : il reste en place ou se masque. Avec un header moyen ou grand, il peut aussi rétrécir.

Avec Hiding, le header s'efface quand la page défile.

Actions dans le header

À droite, les actions sont des raccourcis vers vos pages. Pour en ajouter une, cliquez sur « Add an action »… puis choisissez sa destination, ici la section Search.

Le nouveau raccourci apparaît dans le header, avec une icône par défaut.

Pour la changer, cliquez sur l'icône… cherchez dans la bibliothèque d'icônes et choisissez la loupe.

Le raccourci affiche maintenant une loupe. Vous pouvez aussi régler sa couleur ; sur tablette et ordinateur, il peut afficher un titre et, sur ordinateur, prendre la forme d'un bouton.

Le header affiche deux raccourcis ; les autres passent dans un menu supplémentaire.

Un header par section

Chaque section peut aussi avoir son propre header. Revenez à la structure… et cliquez sur une section.

Ouvrez Header… et choisissez « Modify the header of this section ».

Les réglages sont les mêmes que pour le header général. Ici, une autre couleur de fond… pour cette section uniquement.

Pour revenir au header général, cliquez sur la roue dentée… puis sur « Go back to default header », et confirmez.

La section reprend le header général.

Publier

Pour que vos utilisateurs voient ces changements, publiez la mise à jour de votre app depuis le menu Publish.