Definisci lo stile del menu e di altri elementi che appaiono nella parte superiore di ogni pagina del tuo sito.

L'intestazione del sito è la sezione dedicata alla visualizzazione della navigazione e del titolo o del logo; è identica in tutto il sito e riveste un ruolo importante sul modo in cui i visitatori navigano e interagiscono con i tuoi contenuti. È posizionata nella parte superiore del sito.

Questa guida descrive come creare l'intestazione del sito e mostrarne altre funzionalità, come l'icona del carrello della spesa, le icone dei social o il pulsante Call-to-Action. L'intestazione è identica in tutte le pagine del sito

Nota: non è possibile creare intestazioni specifiche a seconda della pagina o rimuovere elementi in determinate pagine. Tuttavia, se il tuo sito è associato alla Versione 7.1, puoi nascondere l'intestazione in pagine specifiche.

Guarda un video - Crea un'intestazione

Creare un'intestazione

Se il tuo sito è nella versione 7.0, l'intestazione fa parte del modello del sito. Vai alla sezione delle caratteristiche 7.0, riportata di seguito, per maggiori informazioni.

Quando si crea il sito, l'intestazione può già contenere il titolo del sito, i link di navigazione o altri elementi, in base al design selezionato.

Link di navigazione

Per modificare i collegamenti di navigazione, aggiungere, modificare o eliminare pagine nel pannello Pagine. Per riorganizzare i collegamenti:

1. Clicca su Modifica nell'angolo in alto a sinistra dell'anteprima del tuo sito.
2. Posiziona il mouse sull'intestazione e clicca su Modifica intestazione sito.
3. Clicca sui collegamenti di navigazione, quindi clicca sull'icona della matita.
4. Clicca e trascina i link di navigazione per disporli nell'ordine desiderato.

Tieni presente che se riorganizzi i link qui li riordini anche nel pannello Pagine.

Quando crei l'intestazione, puoi impostare stili a livello di sito e scegliere l'aspetto dell'intestazione su computer e dispositivi mobili.

Personalizzare l'intestazione per tutto il sito

Per personalizzare l'intestazione a livello di sito:

1. Clicca su Modifica nell'angolo in alto a sinistra dell'anteprima del tuo sito.
2. Posiziona il mouse sull'intestazione e clicca su Modifica intestazione sito.
3. Per modificare il titolo del sito o aggiungere un'immagine del logo, clicca sul titolo del sito o sul logo, quindi sull'icona della matita . I loghi appaiono al posto del titolo del sito. Se utilizzi un logo, assicurati di aggiungere anche il titolo del sito. I motori di ricerca utilizzano il titolo per i risultati di ricerca e le schede del browser, a meno che non si aggiunga un titolo SEO separato.
4. Una volta terminata la modifica del titolo e del logo del sito, clicca su un punto qualsiasi al di fuori dell'editor per continuare a modificare l'intestazione del sito.
5. Per aggiungere o nascondere un pulsante, le icone social, l'icona del carrello, il login di un account cliente o un'opzione di lingua, clicca su Aggiungi elementi, quindi disattiva o attiva le apposite opzioni.Clicca su un punto qualsiasi al di fuori dell'editor per continuare a modificare l'intestazione del sito.
6. Clicca su Salva per salvare il lavoro e continuare ad apportare modifiche, oppure clicca su Esci e poi su Salva per chiudere l'editor.

Impostare il layout del computer

Per impostare la visualizzazione dell'intestazione sui computer:

1. Clicca su Modifica nell'angolo in alto a sinistra dell'anteprima del tuo sito.
2. Posiziona il mouse sull'intestazione e clicca su Modifica intestazione sito. Per assicurarti di trovarti nella visualizzazione desktop, clicca sull'icona Computer nell'angolo in alto a destra
3. Per modificare il layout, clicca su Modifica design. Clicca sul layout attuale per rivedere tutte le opzioni. Clicca su un layout per visualizzarlo in anteprima sul tuo sito.
4. Per impostare la larghezza del contenuto dell'intestazione, clicca su Massima o Inset.
5. Utilizza i cursori per modificare il padding e la spaziatura tra link, icone social ed elementi.
6. Scegli tra i seguenti effetti e tieni presente che le modifiche apportate saranno disponibili sia su computer che su dispositivi mobili:
   • Ombreggiatura - Attiva l'opzione Ombreggiatura per aggiungere un effetto ombra intorno all'intestazione. Usa le impostazioni visualizzate per scegliere il colore, l'espansione, la distanza e aggiungere un effetto di sfocatura. 
   • Bordo - Attiva l'opzione Bordo per aggiungere un bordo intorno all'intestazione. Usa le impostazioni visualizzate per scegliere il colore, la posizione e lo spessore della linea.
7. Per aggiungere gli stili di sfondo dell'intestazione, clicca su Modifica design, quindi sulla scheda Colore. Le modifiche apportate saranno disponibili sia per i computer che per i dispositivi mobili. Maggiori informazioni sulle opzioni qui di seguito.
8. Per mantenere l'intestazione fissa nella parte superiore del sito, clicca sulla scheda Progettazione e attiva l'opzione Posizione fissa. Quando l'intestazione è fissa, puoi impostarne lo stile su Base (appare sempre nella parte superiore del sito) o Scorri indietro (appare nella parte superiore del sito quando si scorre verso l'alto). A seconda del dispositivo, le intestazioni fisse di entrambi i tipi possono espandersi o contrarsi leggermente durante lo scorrimento. Le modifiche apportate qui si applicano sia agli schermi dei computer che a quelli dei dispositivi mobili.

Impostare il layout e gli stili per i dispositivi mobili

1. Per passare alla visualizzazione per dispositivi mobili, clicca sull'icona Dispositivi mobili nell'angolo superiore destro dello schermo. L'anteprima del sito passa automaticamente alla visualizzazione per dispositivi mobili.
2. Per modificare il layout, clicca su Modifica design. Clicca sul layout attuale per rivedere tutte le opzioni. Clicca su un layout per visualizzarlo in anteprima sul tuo sito.
3. Scegli tra i seguenti effetti e tieni presente che le modifiche apportate saranno disponibili sia su computer che su dispositivi mobili:
   • Ombreggiatura - Attiva l'opzione Ombreggiatura per aggiungere un effetto ombra intorno all'intestazione. Usa le impostazioni visualizzate per scegliere il colore, l'espansione, la distanza e aggiungere un effetto di sfocatura. 
   • Bordo - Attiva l'opzione Bordo per aggiungere un bordo intorno all'intestazione. Usa le impostazioni visualizzate per scegliere il colore, la posizione e lo spessore della linea.
4. Per mantenere l'intestazione fissa nella parte superiore del sito, clicca sulla scheda Progettazione e attiva l'opzione Posizione fissa. Quando l'intestazione è fissa, puoi impostarne lo stile su Base (appare sempre nella parte superiore del sito) o Scorri indietro (appare nella parte superiore del sito quando si scorre verso l'alto). A seconda del dispositivo, le intestazioni fisse di entrambi i tipi possono espandersi o contrarsi leggermente durante lo scorrimento. Le modifiche apportate qui si applicano sia agli schermi dei computer che a quelli dei dispositivi mobili.
5. Per aggiungere gli stili di sfondo dell'intestazione, clicca su Modifica design, quindi sulla scheda Colore. Le modifiche apportate saranno disponibili sia per i computer che per i dispositivi mobili. Maggiori informazioni sulle opzioni qui di seguito.
6. Per modificare l'aspetto del menu quando i collegamenti sono espansi, clicca su Visualizza menu, quindi su Modifica design. Hai la possibilità di impostare l'allineamento, la spaziatura dei collegamenti e scegliere un tema cromatico. Usa le modifiche in Sovrapposizione menu per impostare i colori dei link, dei pulsanti, del testo e dello sfondo specifici per i dispositivi mobili.
7. Per modificare la modalità di visualizzazione del menu quando il menu è compresso, scegli un'icona Menu.
8. Clicca su Salva per salvare il lavoro e continuare ad apportare modifiche, oppure clicca su Esci e poi su Salva per chiudere l'editor.

Suggerimento: aggiungi un'immagine del logo separata per l'intestazione del sito per dispositivi mobili, in modo da creare un look esclusivo per i visitatori che utilizzano il cellulare. Per saperne di più, visita Aggiungere un logo al tuo sito.

Per impostare il carattere e la dimensione del titolo del sito sui dispositivi mobili:

1. Apri Stili sito.
2. Clicca su Tipi di carattere, quindi su Assegna stili.
3. Clicca su Titolo sito mobile, quindi clicca sui menu a discesa per scegliere lo stile e la dimensione del carattere.

Per maggiori informazioni, visita Modificare i tipi di carattere.

Stili di sfondo dell'intestazione

Se il tuo sito è nella versione 7.0, lo sfondo dell'intestazione dipende dal modello del sito. Vai alla sezione delle caratteristiche 7.0, riportata di seguito, per maggiori informazioni.

Puoi aggiungere stili di sfondo all'intestazione per conferirle un aspetto più incisivo rispetto al resto dei tuoi contenuti o integrarla meglio con il resto del branding del tuo sito.

Suggerimento: lo sfondo del menu a discesa su un computer corrisponde al colore di sfondo dell'intestazione.

Per aggiungere uno stile di sfondo:

1. Clicca su Modifica nell'angolo in alto a sinistra dell'anteprima del tuo sito.
2. Posiziona il mouse sull'intestazione e clicca su Modifica intestazione sito.
3. Clicca su Modifica design, quindi sulla scheda Colore.
4. Seleziona uno stile di sfondo dal menu a discesa nella parte superiore dell'editor. Scegli tra Solido, Gradiente o Adattivo. Per saperne di più su ciascuna opzione, leggi di seguito.
5. A seconda dello stile scelto, è possibile personalizzare le impostazioni dello stile di sfondo, come i colori, gli effetti di sfocatura e l'opacità.
6. Clicca su Salva per salvare il lavoro e continuare ad apportare modifiche, oppure clicca su Esci e poi su Salva per chiudere l'editor.

Opzioni di stile

Scegli tra queste opzioni di stile dello sfondo:

• Solido - Scegli uno sfondo a tinta unita. È possibile scegliere colori personalizzati, utilizzare la tavolozza del sito o abbinarli a una delle combinazioni di colori del sito.
• Sfumato - L'intestazione si sovrappone alla prima sezione della pagina. Scegli un colore che sfuma sullo sfondo della prima sezione. Scegli i colori di sfondo e di navigazione dalla palette del tuo sito o scegli dei colori personalizzati.
• Adattivo - Rendi lo sfondo trasparente. L'intestazione si sovrappone alla prima sezione della pagina e mostra lo sfondo della prima sezione. Questo comportamento può variare in base alla pagina, a seconda che la prima sezione utilizzi stili specifici o abbia un'immagine di sfondo.

Ricorda:

• Quando lo sfondo è impostato su Tinta unita, l'intestazione si sovrappone alla prima sezione della pagina. Se la prima sezione contiene un'immagine o un video di sfondo, l'intestazione ne copre una parte.
• Quando lo sfondo è impostato su Adattivo o Sfumato e la prima sezione della pagina è una sezione di layout intelligente, blog, eventi, galleria o negozio , l'intestazione non sarà trasparente su nessuna immagine. Al contrario, l'intestazione mostra il colore di sfondo della prima sezione.

Altre opzioni di stile

A seconda dell'effetto di sfondo scelto, l'editor potrebbe mostrare anche le seguenti opzioni di stile:

• Opacità - Utilizza il cursore per modificare la trasparenza del colore.
• Sfocatura sfondo - Attiva l'opzione Sfocatura sfondo per sfocare qualsiasi contenuto sullo sfondo. Gli sfondi sfocati sono più evidenti quando l'opacità è inferiore al 90%.

Nota: alcuni browser, tra cui Firefox, non supportano gli sfondi sfocati.

Guarda un video - Stili di intestazione

Aggiungere un pulsante a un'intestazione

L'aggiunta di un pulsante a un'intestazione mette in evidenza la Call-to-Action, incoraggiando i visitatori a cliccare immediatamente. Le opzioni dipendono dalla versione del tuo sito.

Nascondi l'intestazione

Per attirare l'attenzione sui tuoi contenuti o per incoraggiare i tuoi visitatori a effettuare un'azione, puoi nascondere l'intestazione in alcune pagine.

La possibilità di nascondere l'intestazione è disponibile solo per le pagine vuote e le pagine di layout, nonché per le pagine vuote e le pagine di layout dei siti per i membri. Le pagine di raccolta come blog, negozio, portfolio ed eventi non dispongono di questa opzione.

Per nascondere l'intestazione:

1. Apri il pannello Pagine.
2. Passa il mouse sul titolo di una pagina, quindi fai clic su accanto al titolo.
3. Fai clic su Navigazione nella scheda delle impostazioni della pagina.
4. Usa gli interruttori per disattivare Mostra intestazione.

Ripeti questi passaggi per ogni pagina in cui desideri nascondere l'intestazione. 

Funzionalità dell'intestazione nella versione 7.0

Nella versione 7.0, l'intestazione del sito appare ancora su ogni pagina e include gli stessi elementi della versione 7.1, tuttavia lo stile dipende dal modello del sito. È possibile trovare altre informazioni sull'intestazione del modello nella guida ai modelli relativa.

Alcuni modelli presentano caratteristiche speciali nell'intestazione. Utilizza i link nella tabella per maggiori informazioni:

Funzionalità	Disponibilità
Colore di sfondo	Disponibili in alcuni modelli
Video o immagine banner	Disponibile in alcuni modelli
Area blocchi	Disponibili in alcuni modelli
Informazioni aziendali	Disponibili in alcuni modelli
Pulsanti	Disponibile in alcuni modelli
Intestazione fissa	Disponibili in alcuni modelli
Menu a discesa	Sempre disponibile, tuttavia la visualizzazione varia in base al modello
Logo	Sempre disponibile, tuttavia la visualizzazione varia in base al modello
Link della Navigazione principale	Sempre disponibile, tuttavia la visualizzazione varia in base al modello
Overlay navigazione	Disponibile nella famiglia di modelli Skye (Alcuni siti mobili hanno una sovrapposizione)
Barra di ricerca	Disponibile in alcuni modelli
Navigazione secondaria	Disponibile in alcuni modelli
Carrello	Sempre disponibile, ma alcuni modelli hanno opzioni di stile
Titolo Sito	Sempre disponibile, tuttavia la visualizzazione varia in base al modello
Icone social	Disponibile in alcuni modelli
Tagline	Disponibili in alcuni modelli

Intestazioni fisse nella versione 7.0

Nella versione 7.0, alcuni modelli supportano intestazioni fisse. La navigazione fissa o “adesiva” rimane nella stessa posizione nella parte superiore del browser mentre scorri verso il basso la pagina. Utilizza la tabella riportata di seguito per rivedere quali modelli supportano intestazioni fisse e come vengono visualizzate su un computer o un dispositivo mobile.

• Salvo dove indicato, le intestazioni fisse mostrano tutti gli elementi dell'intestazione del sito (ad esempio il titolo o il logo del sito e i link di navigazione).
• Per risparmiare spazio su schermi più piccoli, in molti modelli la navigazione non può essere fissa su dispositivi mobili. In alcuni casi, su dispositivi mobili più grandi, come i tablet, la navigazione può essere fissa.

Modello	Computer	Mobile
Adirondack	In Stili sito, seleziona Mostra sempre nav. Quando scorri verso il basso, l'intestazione si comprime e il titolo del sito sostituisce il logo. Maggiori informazioni.	Non fissa
Avenue	Non fissa	Non fissa
Aviator	Solo link di navigazione In Stili sito, utilizza Layout Pagina informazioni per selezionare Offset o Biglietto da visita.	Non fissa
Bedford	Solo Pagine Indice L'intestazione riappare in una posizione fissa dopo aver scorso la prima sezione.	Non fissa
Brine	Non fissa	La barra superiore per dispositivi mobili può essere fissa (Parte superiore fissa su mobile). La barra per dispositivi mobili inferiore è sempre fissa. Scegli cosa visualizzare in ciascuna.
Farro	Non fissa	La barra superiore per dispositivi mobili può essere fissa (Parte superiore fissa su mobile). La barra per dispositivi mobili inferiore è sempre fissa. Scegli cosa visualizzare in ciascuna.
Five	Non fissa	Non fissa
Flatiron	In Stili sito, seleziona Posizione intestazione: fissa.	Non fissa
Forte	Non fissa	Non fissa
Galapagos	Non fissa	Non fissa
Ishimoto	Non fissa	Non fissa
Momentum	Sempre fissa	Sempre fissa
Montauk	Non fissa	Non fissa
Native	Non fissa	Non fissa
Pacific	Solo link di navigazione e solo su Pagine Indice impostate come homepage. In Stili sito, seleziona Indice con nav. a scorrimento: mostra su scorrimento. La navigazione riappare in una posizione fissa dopo aver scorso la prima sezione.	Non fissa
Skye	Sempre fissa Può essere trasparente	Sempre fissa
Supply	Barra laterale, fissa (scorre se il contenuto è più lungo della finestra del browser)	Non fissa
Tremont	Non fissa	Non fissa
Wells	Barra laterale, sempre fissa	Non fissa
Wexley	Non fissa	Non fissa
York	Non fissa	La barra mobile può essere fissata (Posizione della barra mobile: parte superiore fissa o parte inferiore fissa)

Intestazioni di pagina nella versione 7.0

Nella versione 7.0, alcuni modelli supportano le intestazioni di pagina. Queste sono aree di contenuti specifiche per pagina, che vengono visualizzate sopra il contenuto principale della pagina.

Le intestazioni di pagina sono disponibili nelle seguenti famiglie di modelli:

• Avenue
• Brine (denominate aree di Introduzione)
• Farro (denominate aree di Introduzione)
• Five
• Wexley
• York

Per modificare l'intestazione di pagina:

1. Passa il mouse sulla parte superiore della pagina e clicca su Modifica.
2. Utilizza i i blocchi per aggiungere contenuti come testo e immagini.
3. Clicca su Save (Salva) per pubblicare le modifiche.

Le intestazioni di pagina sono separate dal contenuto principale della pagina. Non è possibile spostare i blocchi dall'intestazione di pagina ad altre aree di contenuti della pagina.