Headers

L'header è la parte del tuo sito che contiene il logo e la navigazione. Puoi controllarne lo stile in tantissimi modi, così da creare un header accattivante.

Nell'Editor 2.0, l'header predefinito offre layout già pronti, così si riduce il rischio di modifiche accidentali. Puoi scegliere layout con azioni limitate, per lavorare in modo mirato ed efficiente. C'è anche un'opzione di modifica avanzata per chi vuole personalizzare di più: aggiungere widget o elementi extra, inserire sezioni vuote o predisegnate e salvare sezioni di header da riutilizzare. Per maggiori informazioni, consulta «Advanced Header Editing».

Nascondere o mostrare l'header (Classic Editor)

Per nascondere una testata:

1. Passa il mouse sulla parte inferiore dell'header e fai clic su Testata.
2. Fai clic su Nascondi l'intestazione della pagina e scegli il dispositivo su cui vuoi nascondere l'header.

Per mostrare di nuovo l'header:

1. Nel pannello laterale, fai clic sull'icona Mostra su questo dispositivo.
2. Fai clic sull'icona nascondi del footer e scegli Sì per mostrare di nuovo l'header.

Nascondere o mostrare l'header (Editor 2.0)

Puoi nascondere l'header su tutte le pagine o solo su alcune.

Per nascondere l'header:

1. Fai clic destro sull'header per aprire il menu contestuale.
2. Scegli Nascondi su questo dispositivo, poi Solo da questa pagina o Da tutte le pagine.

Per mostrare di nuovo l'header:

1. Nel pannello laterale, fai clic su Livelli.
2. Individua il tuo header nel pannello e fai clic sull'icona dell'occhio barrato accanto a esso.

Header ridotto (Classic Editor)

L'header ridotto è una versione più piccola dell'header del sito. Ti permette di tenere fisse le informazioni di navigazione importanti senza distrarre chi scorre la pagina e senza occupare troppo spazio. Funziona come un header fisso, ma riduce le dimensioni dei logo e dell'header in generale. È particolarmente utile nei siti con header grandi e in quelli pensati per lunghi scorrimenti.

Nota: l'header ridotto è disponibile su desktop e, su tablet, solo quando si usa il layout di header con barra superiore.

Per attivare un header ridotto:

1. Passa il mouse sull'header, fai clic su Testata e poi su Modifica design.
2. Nella scheda Intestazione a larghezza variabile, fai clic sull'opzione Abilita la riduzione dell'intestazione. Hai le seguenti opzioni:
   • Mostra solo la barra di navigazione. Mostra solo la riga con la navigazione quando la testata si riduce. Questa funzione si applica solo se la testata ha più di una riga.
   • Colore di sfondo. Cambia il colore di sfondo dell'header ridotto. Tieni presente che il colore di sfondo della riga prevale su quello della testata ridotta.
   • Più colori per l'intestazione durante lo scorrimento. Definisci i colori del testo, del link selezionato e dello stato hover, delle icone, del testo dei pulsanti e altro.
   • Dimensioni del logo. Cambia la dimensione a cui si riduce il logo o l'immagine quando la testata si riduce (di base 66%).
   • Cambia il logo sullo scroll. Scegli un logo da mostrare durante lo scorrimento.
   • Spaziatura dell'intestazione. Regola la spaziatura interna superiore e inferiore dell'header ridotto. Puoi cambiare lo spazio dell'header per ogni dispositivo.

Una volta attivata la testata ridotta, succede quanto segue:

• Lo spazio dell'header porta a 0 la spaziatura interna superiore e inferiore e il margine. Questo non vale per le righe all'interno della testata.
• Le immagini nell'header si riducono alla percentuale indicata nella barra della dimensione del logo (di base 66%).
• Per gestire i template con un valore di altezza minima nella testata, l'altezza minima dell'header viene impostata su auto.
• Se ci sono righe vuote con colonne, le colonne occupano tutto lo spazio della riga.
• Le proprietà di design prevalgono su quelle dell'header ridotto. Ad esempio, se imposti uno sfondo di riga nell'header, quello sfondo si mostra sopra lo sfondo dell'header ridotto.
• Le righe vuote vengono mostrate nell'header ridotto.
• Se non vedi la testata ridotta, forse non hai abbastanza righe nel sito per poter scorrere verso il basso e attivarlo. Se la pagina ha una sola riga, il sito non scorre.

Widget compatibili con gli header ridotti

Non tutti i widget sono compatibili e compaiono nell'header ridotto. Se nell'header hai un widget non compatibile, al suo posto compare una colonna vuota. Non puoi modificare i widget mentre l'header è ridotto.

I seguenti widget sono compatibili e si mostrano in un header ridotto:

• Navigation
• Social Icons
• Pulsante Click to Call
• Pulsante Click to Email
• vCita
• Immagini e logo
• Widget paragrafo
• Widget titolo
• Pulsanti

Header fissi

Un header fisso diventa statico e resta al suo posto mentre scorri le pagine del tuo sito.

Nota: su mobile gli header sono sempre fissi di base.

Per attivare un header fisso:

1. Passa il mouse sull'header, fai clic su Testata e poi su Modifica design.
2. Nella scheda Contenuto, scegli Imposta come testata fissa. Se l'header fisso non è disponibile, devi disattivare l'opzione Intestazione a larghezza variabile nella scheda Intestazione a larghezza variabile.

Layout della testata

Puoi scegliere tra vari layout di header flessibili e predisegnati. Se passi a uno di questi, non potrai più tornare a un header fisso: potrai solo passare tra gli altri layout flessibili. Inoltre, cambiare layout rimuove il contenuto presente nella sezione dell'header. Ti consigliamo di creare un backup prima di cambiare layout.

Per cambiare il layout dell'header:

1. Passa il mouse sull'header e fai clic su Testata.
2. Nella scheda Design, scegli un nuovo layout di header. Se stai passando a un header fisso, devi prima disattivare l'opzione Intestazione a larghezza variabile nella scheda Intestazione a larghezza variabile.

Design della testata

Per aprire il menu di design dell'header, passa il mouse sull'header, fai clic su Testata e poi sulla scheda Design.

• Layout: esplora le opzioni di layout che abbinano in modo coerente gli stili di navigazione superiore e a hamburger su tutte le dimensioni dello schermo. I layout predefiniti hanno funzioni limitate, ma l'opzione di modifica avanzata aggiunge flessibilità.
• Spacing: imposta margini e spaziatura interna; le modifiche su desktop influiscono sulle altre dimensioni dello schermo se il loro spazio non è stato modificato.
• Background: scegli il colore o l'immagine di sfondo, aggiungi bordi o ombre e vedi le modifiche riflesse senza problemi su tutte le dimensioni dello schermo.
• Position: attiva un header fisso con modifiche in base allo scorrimento. Attivare l'header fisso su una qualsiasi dimensione dello schermo influisce sul comportamento nelle altre.

Logo della testata

Se l'header contiene una sola immagine, il logo del sito viene mantenuto quando passi da un layout di header a un altro. Se le immagini sono più di una, o se il logo è testuale, l'immagine del logo resta come nel layout.

Tieni presente che gli header dei diversi dispositivi non sono collegati: se aggiungi un logo su desktop, non viene aggiunto in automatico agli altri tipi di dispositivo. L'unica eccezione è che, se su tablet usi il layout di header con barra superiore, questo eredita le modifiche al logo fatte su desktop.

Se elimini il logo, riaggiungi l'immagine trascinando di nuovo l'elemento immagine nell'header e imposta il link in modo che riporti alla homepage.

Header e menu espandibile

Puoi aggiungere un menu espandibile ai tuoi siti desktop e tablet, così è facile creare siti moderni con grande libertà di design. Scegli tra vari layout di menu espandibile e personalizzali come vuoi, aggiungendo widget, righe e colonne.

Il layout di menu espandibile per mobile offre più personalizzazione e un modo per mostrare widget nell'header e un menu sempre visibile.

Puoi cambiare il layout dell'header con uno predefinito che include pulsanti, click to call, icone social e altro. Puoi aggiungere qualsiasi widget al menu espandibile dal pannello dei widget.

Header e menu espandibile su desktop e tablet

Per selezionare e configurare un layout di header e menu espandibile per desktop e tablet:

1. Nel pannello laterale, fai clic su Livelli.
2. Fai clic su Layout sito.
3. Nella sezione Desktop, scegli il layout Menu espandibile.
4. Nella sezione Tablet, scegli il layout Menu espandibile.
5. Dopo aver scelto il layout di menu espandibile, nell'header del tuo sito compare un'icona a hamburger. Fai clic su di essa per vedere il menu espandibile.
6. Nella scheda Layout, fai clic sul layout esistente per scegliere un layout di menu.
7. Nella scheda Stile hai le seguenti opzioni:
   • Enter from. Scegli Top o Lato.
   • Effetto di ingresso. Scegli Copertina o Push.
   • Width. Muovi il cursore per impostare la larghezza del menu espandibile quando è aperto. La larghezza è definita in percentuale per adattarsi a tutte le dimensioni dello schermo.
   • Background. Configura il colore o l'immagine di sfondo.
   • Close icon color. Scegli un colore per l'icona di chiusura e per il suo sfondo.
8. Nella scheda Spaziatura, cambia la spaziatura interna.

Il menu espandibile può avere fino a 3 righe, ognuna del tutto personalizzabile. Se desktop e tablet hanno lo stesso layout del sito (entrambi espandibili o entrambi con barra superiore), tutte le personalizzazioni sono uguali per i due. Se sono diversi, devi definire ogni dispositivo separatamente.

Per modificare la posizione del menu espandibile nell'header:

1. Passa il mouse sull'header, fai clic su Testata e poi scegli Modifica design.
2. Nella sezione Layout, fai clic su Sinistra o Destra.

Header e menu espandibile su mobile

Per selezionare e configurare un layout di header e menu espandibile per mobile:

1. Passa il mouse sull'header, fai clic sull'etichetta Testata e poi scegli Modifica design.
2. Nella scheda Layout, fai clic sul layout esistente per scegliere un layout di menu. L'header mobile offre layout che mostrano widget come link social, numeri di telefono e altro. I layout di header sono fissi, quindi non puoi aggiungere widget nuovi, ma puoi modificarli o rimuoverli.
3. Fai clic su Sinistra o Destra per la posizione dell'icona del menu.
4. Se non l'hai già fatto, apri il menu nella vista mobile. Così si apre l'editor del menu e puoi modificare il menu espandibile.
5. Nella scheda Layout, fai clic sul layout esistente per scegliere un layout di menu. Il menu espandibile offre diversi layout che possono mostrare i link social, le informazioni di contatto e altro. Puoi aggiungere qualsiasi widget al menu espandibile, aggiungere colonne e disporle una accanto all'altra o una sopra l'altra. Attenzione però: quando passi da un layout a un altro, viene eliminato tutto il contenuto che avevi aggiunto al menu e restano solo i widget del layout scelto.
6. Nella scheda Stile hai le seguenti opzioni:
   • Enter from. Scegli Top o Lato. Con Top, muovi il cursore dell'altezza. Con Lato, quello della larghezza.
   • Effetto di ingresso. Scegli Copertina o Push.

Nota: non è possibile aggiungere widget ulteriori all'header mobile.

Mostrare gli elementi dell'header sopra l'immagine hero

Per mostrare gli elementi dell'header sopra le immagini hero, passa il mouse sull'header, fai clic su Testata, poi sulla scheda Design e infine su Sovrapporre la prima riga. Così le tue immagini hero guadagnano visibilità ed è più facile creare siti belli e moderni.

Tieni presente quanto segue:

• Per l'header. Imposta il colore di sfondo su trasparente o su un colore con opacità.
• Per la prima riga. Usa una spaziatura interna superiore uguale o simile all'altezza dell'header.

Nota: per dare più flessibilità, questa impostazione si applica solo alla pagina corrente. Per attivarla su altre pagine, vai su ognuna e segui i passaggi qui sopra.