Come impostare il tuo header

L'header

L'header è la barra in cima alla tua app. Resta visibile ovunque: mostra l'identità della tua app, dà un titolo a ogni sezione, ospita delle scorciatoie e aiuta i tuoi utenti a orientarsi.

Si configura nel menu «My App».

Nella struttura della tua app, clicca su Header.

Altezza dell'header

Per prima cosa, scegli l'altezza dell'header: Small, Medium o Large.

Scegli Medium… e l'header diventa più alto, con lo stesso titolo o logo.

Scegli Large… e puoi aggiungere una breve descrizione. Scrivila qui… e clicca su OK.

Compare sotto il tuo titolo, nell'header grande.

Medium e Large valgono per le sezioni della tua navigazione principale; le altre pagine usano sempre Small. Questa app resta su Small.

Titolo o logo

Nel blocco Logo, il nome della tua app compare come testo o come immagine. Per cambiare il testo, scrivi il tuo titolo… e clicca su OK.

L'anteprima si aggiorna subito.

Per cambiare il colore, clicca sul colore, inserisci un codice o scegline uno, poi clicca su Choose.

Il titolo cambia colore.

Scegli un font dall'elenco… e l'anteprima lo mostra.

Regola la dimensione con il cursore.

Il titolo si ingrandisce.

Se preferisci mostrare il tuo logo, clicca su Logo e scegli un'immagine di almeno 800 × 200 pixel.

Il tuo logo prende il posto del testo.

Posizionalo a sinistra o lascialo centrato.

Qui si sposta a sinistra.

Poi scegli cosa mostra l'header durante la navigazione: sempre il tuo logo, con «Logo only», come in questa pagina… oppure il nome di ogni sezione, con «Section title».

Pulsanti di navigazione

A sinistra dell'header ci sono i pulsanti di navigazione: il pulsante Back, qui nell'anteprima, e il pulsante Menu, se la tua navigazione lo prevede. Qui ne imposti l'icona e il colore.

Per esempio, un nuovo colore per il pulsante Back… si vede subito.

Sfondo

Per lo sfondo, scegli un colore, e anche quello del bordo inferiore.

Lo sfondo dell'header cambia colore.

Con l'header piccolo, puoi anche usare un'immagine di sfondo di 1242 × 192 pixel.

Ora l'immagine riempie l'header.

Per rimuovere l'immagine, clicca sull'icona del cestino… e conferma.

L'header ritrova il suo colore di sfondo.

Effetto di scorrimento

L'effetto di scorrimento definisce cosa fa l'header quando si scorre verso il basso: resta fisso o si nasconde. Se è medio o grande, può anche rimpicciolirsi.

Con Hiding, l'header scivola via mentre la pagina scorre.

Azioni nell'header

A destra, le azioni sono scorciatoie alle pagine che scegli. Per aggiungerne una, clicca su «Add an action»… poi scegli la destinazione, qui la sezione Search.

La nuova scorciatoia compare nell'header, con un'icona predefinita.

Per cambiarla, clicca sull'icona… cerca nella libreria di icone e scegli la lente d'ingrandimento.

Ora la scorciatoia mostra una lente d'ingrandimento. Puoi anche impostarne il colore; su tablet e desktop può mostrare un titolo e, su desktop, apparire come pulsante.

L'header mostra due scorciatoie; le altre finiscono in un menu aggiuntivo.

Un header per sezione

Ogni sezione può anche avere un proprio header. Torna alla struttura… e clicca su una sezione.

Apri Header… e scegli «Modify the header of this section».

Si configura come l'header generale. Qui, un colore di sfondo diverso… solo per questa sezione.

Per tornare all'header generale, clicca sull'ingranaggio… poi su «Go back to default header» e conferma.

La sezione torna a usare l'header generale.

Pubblicazione

Perché i tuoi utenti vedano le modifiche, pubblica l'aggiornamento della tua app dal menu Publish.