Tutorial
Indietro

Come impostare il tuo header


Ciao e benvenuto nel tuo back office GoodBarber!

Oggi imposteremo l'intestazione o logo e titolo della tua applicazione.
Questa è la parte superiore dell'app, che è sempre visibile e accessibile da tutte le sezioni.
L'header ha 4 scopi: 
- Mostrare l'identità della tua app
- Dare un titolo a una sezione
- Visualizzare le scorciatoie
- Navigare nell'apo

Andiamo subito al menu La mia applicazione > Design > Design generale. 
Clicco su Logo e Titolo.
Qui posso inserire il nome della mia app in formato testo o aggiungere un logo. 
Voglio qualcosa di molto "brandizzato" quindi aggiungerò un logo.
È già pronto, devo solo caricarlo.
Ecco fatto!

Ora scelgo l'allineamento del logo a destra, o centrato. 
Facile, vero?

Vuoi saperne di più? Lo sapevo! 
Puoi andare oltre nella personalizzazione dell'header attivando il menu Avanzato qui.
Lì, ora ho molte più opzioni.

Posso cambiare il colore dello sfondo, la barra di separazione, aggiungere immagini di sfondo.
Posso anche aggiungere dei link al mio header.
Sto lavorando sull'app Freyja spa, è un'azienda locale.
Quindi aggiungerò un link alla tessera di socio qui. Clicco su Aggiungi Azione, scelgo l'icona, imposto i colori per il mio collegamento. Perfetto. 

Per la versione PWA, è possibile scegliere di visualizzare il titolo del collegamento su tablet e desktop. 
Aggiungo anche un link alla carta fedeltà in modo che i miei utenti possano accedere facilmente ai loro premi.
Ultimo parametro, gli altri elementi dell’header.
Qui si tratta delle icone posteriori che verranno visualizzate nell'header mentre l'utente sta navigando nell'app.
Ho messo il video sulle modalità di navigazione nella barra delle informazioni ;)
Faccio un'anteprima.
Ecco fatto! 

Ti mostro il risultato finale.
Ora sai come personalizzare l'Header della tua app. 
A presto per un nuovo tutorial! 

 

 

Video simili