La navigazione del sito è un insieme di link che indirizzano i visitatori ai contenuti del tuo sito. Generalmente, la navigazione viene visualizzata nella parte superiore del sito, sebbene alcuni modelli nella versione 7.0 supportino la navigazione nei piè di pagina o nelle barre laterali.
Tutti i siti includono opzioni per modificare il tipo di carattere, il colore e le dimensioni dei link di navigazione. Questa guida spiega come personalizzare la navigazione in qualunque sito.
Prima di iniziare
- Aggiungi collegamenti alla tua navigazione inserendo pagine nel pannello Pagine. Le pagine nella sezione Non collegato non saranno visualizzate.
- Modifica il testo di un link aggiornando il relativo Titolo di navigazione in Impostazioni pagina.
- Per modificare l'ordine dei link nel menu, trascina e rilascia le pagine nel pannello Pagine.
Trovare i tweak di stile della navigazione
Il modo in cui puoi modificare lo stile della navigazione dipende dalla versione del sito.
Gli stili dei link di navigazione sono impostati principalmente dall'intestazione del tuo sito. Nell'editor dell'intestazione, puoi modificare:
- Il layout di navigazione
- I colori della navigazione
- La spaziatura del link di navigazione
- Il padding intorno al testo
- La posizione fissa o meno della navigazione
- La visualizzazione della navigazione sui computer rispetto ai dispositivi mobili
Puoi inoltre utilizzare le opzioni in Stili sito per modificare tipi di carattere e dimensioni. Per maggiori informazioni, consulta le sezioni seguenti.
Ogni famiglia di modelli ha i propri Stili sito, pertanto non esiste un'unica regola per aggiornare i link di navigazione. Utilizza questi suggerimenti per trovare le opzioni di stile supportate dal tuo modello:
- Per aprire gli stili del sito dal Menu Home, clicca su Design e poi su Stili sito.
- Scorri i tweak a sinistra e cerca quelli correlati. I tweak di solito includono la parola Navigazione.
- Puoi anche passare il mouse sulla navigazione del tuo sito nell'anteprima sulla destra. Quando intorno alla navigazione appaiono delle caselle di evidenziazione blu, clicca su un link di navigazione. Questo aiuta a escludere i tweak che non interessano i link di navigazione. Quando hai finito, clicca su Mostra tutto per tornare alla vista principale.
Ecco un esempio di ciò che appare nel modello Thorne, che fa parte della Brine family:
Modificare tipo di carattere e dimensioni
Il modo in cui puoi modificare il tipo di carattere della navigazione dipende dalla versione del sito.
Per impostazione predefinita, il tipo di carattere della navigazione corrisponde al tipo di carattere del sito. Per impostare un altro tipo di carattere o una dimensione diversa per la navigazione:
- Durante la modifica di una pagina, clicca sull'icona del pennello, quindi su Tipi di carattere.
- In Stili di testo globali, clicca su Assegna stili.
- Clicca su Navigazione sito.
- Per modificare il tipo di carattere, clicca su Stile, quindi scegli Personalizzato. Scegli una nuova famiglia di tipi di carattere, spessore, stile e altri dettagli. Clicca su Salva per applicare le modifiche.
- Per modificare la dimensione, clicca su Dimensione, quindi scegli una dimensione di Paragrafo preimpostata oppure scegli Personalizzata. Per impostare una dimensione personalizzata, utilizza il cursore o inserisci manualmente un nuovo valore rem. Clicca su Salva per applicare le modifiche.
Suggerimento: per scoprire come la versione 7.1 utilizza i valori rem per le dimensioni del tipo di carattere, visita Modificare il tipo di carattere.
Per modificare il tipo di carattere della navigazione, clicca sull'icona v accanto al nome del tweak per aprire il relativo menu a discesa. Da qui puoi modificare:
- Nomi dei tipi di carattere
- Stile
- Taglia
- Altezza della riga
- Spaziatura tra le lettere
Per maggiori informazioni, visita Modificare i tipi di carattere.
Modificare il colore.
Il modo in cui puoi modificare il colore della navigazione dipende dalla versione del sito.
Per modificare i colori dei link di navigazione, modifica il tema colore della sezione intestazione. Puoi inoltre modificare il tema colore dell'intestazione in sovrapposizione su dispositivi mobili.
Dopo aver impostato un tema colore, puoi ulteriormente personalizzare il tema impostando colori specifici per i link di navigazione.
Per modificare i colori dei link di navigazione, clicca su un tweak di colore in Stili sito. Scegli un nuovo colore cliccando su un colore nella parte superiore del selettore, quindi seleziona una sfumatura all'interno del quadrato. Puoi anche inserire un valore specifico nel campo di testo. Per maggiori informazioni, consulta Modificare i colori o la guida al modello del tuo sito.
Modificare layout e spaziatura
Il modo in cui puoi modificare il layout di navigazione dipende dalla versione del sito.
Per modificare la posizione e la spaziatura dei link di navigazione, modifica la modalità di visualizzazione dell'intestazione del sito sui computer. Puoi anche personalizzare l'aspetto e il posizionamento dell'icona menu sui dispositivi mobili.
In alcuni modelli, puoi modificare la posizione dei link. In Stili sito, cerca i tweak denominati Posizione navigazione, Allineamento navigazione o qualcosa di simile. Per scoprire le posizioni disponibili nel tuo modello, consulta la tabella seguente.
Suggerimento: alcuni modelli supportano la navigazione fissa o "adesiva", che rimane nella stessa posizione nella parte superiore del browser mentre scorri la pagina verso il basso.
Visualizzazione della navigazione in base al modello
Il layout della navigazione del sito dipende dal modello e viene visualizzato in modo diverso sui dispositivi mobili. Sui dispositivi mobili più grandi, come i tablet, possono essere visualizzati gli stili per computer.
Ecco come la Navigazione principale viene visualizzata sui computer nelle seguenti famiglie di modelli:
|
Modello |
Layout |
|
Adirondack |
Orizzontale, in alto al centro |
|
Avenue |
Orizzontale, in alto a sinistra/centro/destra |
|
Aviator |
Verticale, in alto a sinistra (Biglietto da visita/Offset); o orizzontale, in alto al centro (Poster) |
|
Bedford |
Orizzontale, in alto a destra |
|
Brine |
Orizzontale, in alto a sinistra/centro/destra, può essere nascosto. Nel pannello Pagine, è chiamato Navigazione principale. |
|
Farro |
Orizzontale, in alto a sinistra/centro/destra, può essere nascosto |
|
Five |
Verticale, nella barra laterale (Posizione di navigazione superiore: nessuna); o orizzontale in alto a sinistra/centro/destra (Sopra il Banner, Sotto il Banner) |
|
Flatiron |
Orizzontale, in alto a sinistra |
|
Forte |
Orizzontale, in alto a destra |
|
Galapagos |
Orizzontale, in alto al centro |
|
Ishimoto |
Orizzontale, in alto a sinistra/centro/destra |
|
Momentum |
Orizzontale, nella barra di navigazione |
|
Montauk |
Orizzontale, in alto a sinistra/centro/destra |
|
Native |
Orizzontale, in alto al centro |
|
Pacific |
Orizzontale, in alto al centro, può essere suddivisa intorno al titolo del sito |
|
Skye |
Verticale, all'interno di una sovrapposizione |
|
Supply |
Verticale, barra laterale sinistra |
|
Tremont |
Orizzontale, in alto a sinistra/destra |
|
Wells |
Verticale, barra laterale sinistra |
|
Wexley |
Orizzontale, in alto a sinistra/centro/destra |
|
York |
Orizzontale, in alto a sinistra/centro/destra, può essere nascosto |
Modificare la spaziatura dei link
Per modificare lo spazio intorno ai link di navigazione, cerca i tweak in Stili sito che modificano l'intestazione, il banner o la navigazione. Anche se i tweak variano a seconda del modello, i tweak di spaziatura dei link in genere includono parole come Padding, Spaziatura o Larghezza.
Opzioni Attivi e Al passaggio del mouse (versione 7.0)
Nella versione 7.1 non è possibile impostare colori diversi per i link di navigazione al passaggio del mouse e attivi. I link attivi sono sempre sottolineati.
In alcuni modelli, sono presenti opzioni aggiuntive per i link di navigazione, a seconda che siano stati cliccati. Questo viene talvolta definito come il loro "stato" o "fase". Anche se i tweak variano in base al modello, puoi cercare queste parole:
- Al passaggio del mouse - Il link cambia quando un visitatore passa sopra con il mouse.
- Attivi - Quando un visitatore visita una pagina nella tua navigazione, il suo link cambia stile.
Per assistenza con il tuo modello, visita la relativa guida al modello.
Suggerimento: i Link di navigazione esterni non mostreranno gli stili attivi, anche se si collegano a una pagina del tuo sito.
Navigazione su dispositivi mobili
Sui dispositivi mobili, i link della Navigazione principale si comprimono dietro un link Menu o un'icona ☰ (nota anche come icona "hamburger "). Un visitatore può cliccare o toccare questo elemento per visualizzare il menu completo. Questo facilita l'usabilità e mantiene il sito mobile-friendly.
Il link o l'icona possono essere visualizzati anche sui browser dei computer a seconda delle dimensioni del browser del visitatore, del numero di link presenti nel menu o della lunghezza dei titoli di navigazione.
Il modo in cui puoi modificare lo stile della tua navigazione mobile dipende dalla versione del sito.
Per definire lo stile della navigazione su dispositivi mobili, modifica l'intestazione del sito. Nell'editor dell'intestazione, clicca sull'icona Dispositivo mobile per impostare stili specifici per i dispositivi mobili, inclusi il layout e il tipo di icona menu.
Ricorda:
- I pulsanti di intestazione vengono sempre visualizzati con i link di navigazione dietro il link Menu o l'icona ☰.
- Non è possibile modificare la dimensione del carattere di navigazione sui dispositivi mobili.
- Non è possibile fare in modo che l'icona menu appaia sempre su un computer.
- L'icona del menu non verrà visualizzata se tutte le pagine si trovano nella sezione Navigazione nascosta. Se l'icona del menu continua a essere visualizzata anche senza pagine nella navigazione, disabilita il login all'account cliente nell'intestazione.
In molti casi, la navigazione mobile segue gli stili della visualizzazione su computer per mantenere il branding coerente. Alcuni modelli dispongono di opzioni avanzate di stile su dispositivi mobili, che offrono un miglior livello di controllo. Per maggiori informazioni, consulta la guida del modello.
Per scoprire quali tweak influenzano la navigazione mobile, apri la navigazione nella vista telefono prima di aprire Stili sito:
- Cambia la Vista dispositivo impostandola su Telefono.
- Clicca sul link di navigazione (di solito un ☰) in modo da far apparire la navigazione mobile.
- Nel Menu Home, clicca su Design, quindi su Stili sito. La navigazione mobile rimarrà aperta.
Suggerimento: se non riesci a visualizzare la tua navigazione mobile, assicurati di non aver impostato il colore dello sfondo o dell'intestazione sullo stesso colore del testo di navigazione. I link possono essere visualizzati su questo colore sul cellulare.
Design dell'icona o del link Menu per modello
Ecco come appare l'icona ☰ o il link Menu nelle seguenti famiglie di modelli:
|
Famiglia di modelli |
Icona o link (appare sempre su dispositivi mobili) |
Su computer appare... |
|
Adirondack |
Icona ☰ |
|
|
Avenue |
Link Menu |
|
|
Aviator |
Link Menu |
|
|
Bedford |
Icona ☰ |
|
|
Brine |
Icona ☰. Modifica lo stile con la sezione Dispositivi mobili: icona menu in Stili sito. |
|
|
Farro |
Icona ☰ |
|
|
Five |
Icona ☰ |
|
|
Flatiron |
Link Menu |
|
|
Forte |
Icona ☰ |
|
|
Galapagos |
Icona ☰ |
|
|
Ishimoto |
Link Menu |
|
|
Momentum |
Icona ☰ |
|
|
Montauk |
Link Menu |
|
|
Native |
Link Menu |
|
|
Pacific |
Icona ☰ |
|
|
Skye |
Icona ☰ |
|
|
Supply |
Icona ☰ |
|
|
Tremont |
Icona ☰ |
|
|
Wells |
Link Menu |
|
|
Wexley |
Link Menu |
|
|
York |
Icona ☰ |
|
Icone di navigazione mobile vuota
In alcuni modelli, l'icona appare sempre sui dispositivi mobili, anche se tutte le pagine si trovano nella sezione Navigazione nascosta.
Puoi nascondere l'icona Menu nelle seguenti famiglie di modelli:
- Brine family
- Farro family
Vai al menu Home, clicca su Design, quindi su Stili sito. Scorri fino alla sezione Dispositivi mobili: icona menu e imposta il tweak Posizione icona menu su Nascondi.
In queste famiglie di modelli, non esiste un sistema integrato per nascondere l'icona di navigazione mobile:
- Bedford
- Forte
- Galapagos
- Montauk
- Wells
- York
Suggerimento: puoi nascondere l'icona di navigazione su dispositivi mobili aggiungendo codice personalizzato. Per maggiori informazioni, vedi questo post nello Squarespace Forum.
Nota: le personalizzazioni del codice non rientrano nell'ambito della nostra assistenza. Ciò significa che non possiamo fornire assistenza in relazione alla configurazione o alla risoluzione dei problemi.
Nascondi il menu compresso su computer
Per impedire la visualizzazione del link o dell'icona su computer:
- Mantieni i titoli della navigazione brevi.
- Riduci il numero di link presenti nel menu. Puoi utilizzare delle cartelle per raggruppare le pagine correlate in menu a discesa oppure, se il sito si trova nella versione 7.0, spostare le pagine nella Navigazione secondaria o nel piè di pagina.
- Se il tuo sito è nella versione 7.0, passa a un modello diverso. Clicca sulla scheda Versione 7.0 qui sopra, quindi esplora le opzioni Su computer appare...