Creare l'intestazione di un sito

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

Non è possibile creare intestazioni specifiche a seconda della pagina o rimuovere elementi in determinate pagine.

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.

Suggerimento: per modificare i link di navigazione, aggiungi, modifica, elimina o riorganizza le pagine 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.

Impostare gli stili globali

Per impostare gli stili dell'intestazione a livello di sito:

1. Clicca su Modifica nell'angolo in alto a sinistra dell'anteprima del tuo sito.
2. Passa il mouse sull'intestazione e clicca su Modifica intestazione sito. Verrà visualizzata la scheda Globali.
3. Per modificare il titolo del sito o aggiungere un'immagine del logo, clicca su Titolo del sito e logo. I loghi vengono visualizzati al posto del titolo del sito. Anche se utilizzi un logo, aggiungi anche un 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. Per aggiungere o nascondere un pulsante, delle icone social, un'icona del carrello o un login agli account cliente, clicca su Elementi.
5. Per aggiungere stili di sfondo dell'intestazione, clicca su Stile. Scopri di più sulle opzioni qui sotto.
6. Per mantenere l'intestazione fissa nella parte superiore del sito, attiva l'opzione Posizione fissa. Quando l'intestazione è fissa, imposta lo stile di intestazione Fisso su Base (appare sempre nella parte superiore del sito) o Scorri indietro (appare nella parte superiore del sito quando si scorre verso l'alto). Le intestazioni fisse di entrambi i tipi possono espandersi o contrarsi leggermente durante lo scorrimento, a seconda del dispositivo.
7. Clicca su un punto qualsiasi al di fuori dell'editor, quindi clicca su Salva per salvare il lavoro e continuare ad apportare modifiche, oppure Esci e poi 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. Passa il mouse sull'intestazione e clicca su Modifica intestazione sito. Clicca sull'icona Computer.
3. Per modificare il layout, clicca su Layout intestazione. Scorri per rivedere tutte le opzioni di layout e clicca su una di esse per visualizzarla 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 gli elementi.

Impostare il layout e gli stili per i dispositivi mobili

1. Clicca sull'icona Dispositivi mobili. L'anteprima del sito passa automaticamente alla vista dispositivo mobile.
2. Per modificare il layout, clicca su Layout intestazione. Scorri per rivedere tutte le opzioni di layout e clicca su una di esse per visualizzarla in anteprima sul tuo sito.
3. Per modificare la modalità di visualizzazione del menu quando i link vengono espansi, clicca su Menu in sovrapposizione. Puoi inoltre impostare la spaziatura dei link e scegliere un tema cromatico. Utilizza i tweak sotto Sovrapposizione menu per impostare il link, il pulsante, il testo del pulsante e i colori di sfondo specifici per dispositivi mobili.
4. Per modificare la modalità di visualizzazione del menu quando il menu è compresso, scegli un'icona Menu.
5. Clicca su un punto qualsiasi al di fuori dell'editor, quindi clicca su Salva per salvare il lavoro e continuare ad apportare modifiche, oppure Esci e poi 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: i menu a discesa delle cartelle su un computer corrispondono al colore di sfondo dell'intestazione.

Per aggiungere uno stile di sfondo:

1. Apri le impostazioni globali dell'intestazione.
2. Clicca su Stile.
3. Clicca sul menu a discesa nella parte superiore dell'editor per scegliere uno sfondo. Scegli tra Tinta unita, Sfumato, Tema o Dinamico. Scopri di più su ciascuna opzione qui sotto.
4. A seconda dello stile scelto, personalizza le altre impostazioni visualizzate, che potrebbero includere colori, un effetto di sfocatura, bordi o ombreggiatura.
5. Clicca su un punto qualsiasi al di fuori dell'editor, quindi clicca su Salva per salvare il lavoro e continuare ad apportare modifiche, oppure Esci e poi Salva per chiudere l'editor.

Opzioni di stile

Scegli tra queste opzioni di stile dello sfondo:

• Tinta unita - Scegli uno sfondo in tinta unita. Scegli i colori di sfondo e di navigazione dalla tavolozza del tuo sito oppure scegli colori personalizzati.
• Sfumato - Scegli un colore sfumato, che digrada da scuro a chiaro a partire dalla parte superiore dell'intestazione. Scegli i colori di sfondo e di navigazione dalla tavolozza del tuo sito oppure scegli colori personalizzati.
• Tema - Abbina il colore di sfondo a uno dei temi cromatici del tuo sito.
• Dinamico - Rendi lo sfondo trasparente. L'intestazione si sovrappone alla prima sezione della pagina e mostra il colore o l'immagine di sfondo della prima sezione. Questo comportamento può variare da pagina a pagina a seconda che la prima sezione utilizzi stili specifici o abbia un'immagine di sfondo.

Ricorda:

• Quando lo sfondo è impostato su Tinta unita o Tema, l'intestazione si sovrappone alla prima sezione della pagina. Se la prima sezione ha un'immagine di sfondo, l'intestazione copre parte dell'immagine.
• L'intestazione sarà a tinta unita se la prima sezione è una sezione blog, galleria, negozio o eventi.
• Quando lo sfondo è impostato su Dinamico e la prima sezione della pagina è una sezione galleria, l'intestazione non sarà trasparente sulle immagini della galleria. L'intestazione mostra invece il colore di sfondo della sezione galleria.

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 il contenuto di sfondo. Gli sfondi sfocati sono più evidenti quando l'opacità è inferiore al 90%. Alcuni browser, tra cui Firefox, non supportano sfondi sfocati.
• 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.
• 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.

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.

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
Cartelle	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 template
Navigazione secondaria	Disponibile in alcuni template
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 template
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.