Personalizziamo l’header

Nel tutorial precedente abbiamo visto cosa sono gli Schemi colore e come possono esserci utili per creare la giusta combinazione cromatica per il nostro sito. In questo tutorial esploriamo le opzioni per organizzare la testata.

Enfold ci da anche la possibilità di controllare in che posizione visualizzare il logo, il menu di navigazione oppure attivare un ulteriore menu in alto. Portati alla voce Enfold child ed entra nella sezione Menu principale.

Personalizziamo Header di Enfold

In basso trovi le voci Generale, Menu Burger/Mobile e Stile Menu Burger/Mobile. Dal menu Generale puoi decidere come visualizzare le voci del menu sui computer desktop e scegliere tra Visualizza come testo oppure Visualizza come Icona. Selezionando una delle voci vedrai l’anteprima in tempo reale in alto alla pagina.

Clicca questo pulsante se decidi di acquistare il Tema Enfold.

Grazie mille

L’opzione Visualizza come testo è quella attualmente attiva e fa comparire un menu di navigazione classico come quello che puoi vedere sul sito. La scelta di un menu come icona invece mostra una piccola icona cosiddetta hamburger, usata solitamente sui dispositivi mobili.

Personalizziamo Header di Enfold

Puoi attivare o disattivare il motore di ricerca interno al sito rappresentato dall’icona lente d’ingrandimento. In Menu Burger/Mobile, puoi gestire il menu di navigazione da visualizzare sui dispositivi mobili. Ad esempio puoi personalizzare la grandezza dell’icona hamburger, mostrare le voci del sotto menu con un click o al passaggio del mouse, ecc.

Personalizziamo Header di Enfold

Infine in Stile sovrapposizione Menu puoi scegliere tra classica, senza bordi oppure overlay. Se scegliessi overlay, ad esempio, il menu di navigazione per mobile si presenterebbe come nell’immagine.

Personalizziamo Header di Enfold

Stile Menu Burger/Mobile è l’ultima voce del menu da dove impostare un colore all’icona hamburger e definire una larghezza del menu a comparsa chiamato Flyout. Adesso passiamo a vedere l’Header, ovvero l’intestazione del template, cliccando la voce Intestazione.

Personalizziamo Header di Enfold

Puoi ad esempio scegliere tra Logo a sinistra e menu a destra, in Dimensioni del Titolo la dimensione per la testata tra sottile e grande o assegnare un valore personalizzato in pixel.

Infine, in Stile Header scegliere tra Default con i bordi, Minimal ecc. Alla voce Titolo testata e breadcrumbs puoi attivare o disattivare il titolo della pagina e le cosiddette “briciole di pane” che servono all’utente ad orientarsi nelle pagine. Ti consigliamo di scegliere Visualizza titolo e breadcrumbs perché, questa opzione, può essere gestita direttamente nelle singole pagine, come vedremo successivamente.

Ora passiamo al sotto menu Comportamento Titolo. La prima opzione Titolo in evidenza permette di fissare la testata in alto nel momento in cui si scorre la pagina. La seconda opzione, Restringimento testata, riduce l’altezza della testata allo scorrimento della pagina.

Personalizziamo Header di Enfold

Abbiamo poi Distacco della top bar che, se spuntata, rimarrà anch’essa visibile allo scorrimento della pagina. Lasciare il logo e il menu in grado di adattarsi alla finestra del browser, fa si che il logo e il menu di navigazione si adattino alla finestra del browser.

Nel sotto menu Elementi aggiuntivi, puoi decidere se attivare o meno le icone social nella top bar, attivare un menu secondario nella testata e alla voce Testata numero di telefono inserire un contatto telefonico e visualizzarlo nella parte destra o sinistra.

Personalizziamo Header di Enfold

Infine in Opzioni di trasparenza è possibile cambiare il logo nel caso in cui avessi scelto una testata trasparente nelle opzioni di pagina, ma questo lo vedremo nel dettaglio più avanti.

Commenti

Per qualsiasi dubbio o domanda, scrivi un commento qui sotto.