Nota: Sebbene le nostre guide più popolari siano state tradotte in italiano, alcune guide sono disponibili solo in inglese.

Creare l'intestazione di un 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 e non è possibile crearne una personalizzata a seconda della pagina.

Version_7.1_site_header.png

Creare un'intestazione

Se il tuo sito è nella versione 7.0, l'intestazione fa parte del modello del sito. Vai alla sezione delle caratteristiche della versione 7.0 qui sotto 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 intestazione fissa su Base (appare sempre nella parte superiore del sito) o Scorri indietro (appare nella parte superiore del sito quando si scorre verso l'alto). 
  7. Clicca su un punto all'esterno dell'editor, quindi passa il mouse su Fine e clicca su Salva

Impostare i layout per computer e dispositivi mobili

Per impostare la modalità di visualizzazione dell'intestazione sui computer e sui dispositivi mobili: 

  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. Clicca sull'icona Desktop
  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.
  6. Clicca sull'icona Dispositivi mobili. L'anteprima del sito passerà automaticamente alla vista dispositivo mobile. 
  7. 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.
  8. 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 colore. Utilizza i tweak sotto Sovrapposizione menu per impostare il link, il pulsante e i colori di sfondo specifici per dispositivi mobili.  
  9. Per modificare la modalità di visualizzazione del menu quando il menu è compresso, scegli un'icona Menu.
  10. Clicca su un punto all'esterno dell'editor, quindi passa il mouse su Fine e clicca su Salva.

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. Fai clic su Titolo sito mobile, quindi fai clic sui menu a discesa per scegliere lo stile e la dimensione del carattere. 

Per maggiori informazioni, visita Modificare i tipi di carattere.

Guarda un video - Crea un'intestazione

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. Per salvare le modifiche, clicca su un punto all'esterno dell'editor, quindi passa il mouse su Fine e clicca su Salva.

Opzioni di stile

Scegli tra queste opzioni di stile dello sfondo:

  • Tinta unita - Scegli uno sfondo a 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 colore 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 Internet Explorer e 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

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

Disponibili 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.

Questo articolo ti è stato utile?
Utenti che ritengono sia utile: 27 su 201
Creare l'intestazione di un sito