Definire lo stile di navigazione

Personalizza il tipo di carattere, il colore e le dimensioni dei link di navigazione del tuo sito.

Ultimo aggiornamento 16 febbraio 2025

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

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, apri il pannello Design, quindi fai clic 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:

thorne_site_styles.gif

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:

  1. Durante la modifica di una pagina, apri Stili sito, quindi fai clic su  >  accanto a Tipi di carattere.
  2. Clicca su Assegna stili.
  3. Clicca su Navigazione sito.
  4. 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.
  5. 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.

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 e dallo stile dell'intestazione.

Stili di intestazione tinta unita e sfumati Stili di intestazione a tema e dinamici
  1. Durante la modifica di una pagina, apri l'editor dell'intestazione
  2. Nell'editor dell'intestazione, clicca su Stile.
  3. Clicca su Colore della navigazione per modificare il colore dei collegamenti di navigazione e delle icone social integrate.
  1. Durante la modifica di una pagina, apri Stili sito, quindi fai clic su > accanto a Colori.
  2. Fai clic sull'icona a forma di matita sulla combinazione di colori selezionata per l'intestazione del sito.
  3. Modifica il tweak Link di navigazione.
  4. Clicca su Salva per salvare il lavoro e continuare ad apportare modifiche, oppure clicca su Esci e poi su Salva per chiudere l'editor.

Puoi inoltre modificare il tema colore dell'intestazione in sovrapposizione su dispositivi mobili.

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.

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)

Accesso a questa funzionalità

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.

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.
  • Per rimuovere l'icona del menu dall'intestazione, assicurati che tutte le pagine si trovino nella sezione Non collegato e disattiva tutti gli elementi dell'intestazione , tranne il carrello della spesa. L'attivazione del carrello non fa apparire l'icona del menu.

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:

  1. Cambia la Vista dispositivo impostandola su Telefono.
  2. Clicca sul link di navigazione (di solito un ☰) in modo da far apparire la navigazione mobile.
  3. Nel menu Home, clicca su Sito web, poi su Progettazione e infine su Stili sito. La navigazione mobile rimarrà aperta.

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 ☰

  • Nei browser stretti (640 px)
  • Per visualizzare sempre l'icona sui computer, seleziona Mostra sempre navigazione nella sezione Stili dei siti.

Avenue

Link Menu

  • Nei browser stretti (640 px)

Aviator

Link Menu

  • Nei browser stretti (640 px)

Bedford

Icona ☰

  • Automaticamente quando i link non si adattano
  • Nei browser stretti (640 px)

Brine

Icona ☰. Modifica lo stile con la sezione Dispositivi mobili: icona menu in Stili sito.

  • Nei browser stretti (640 px per impostazione predefinita. Modifica questa impostazione con il tweak Punto di interruzione su dispositivi mobili.)

Farro

Icona ☰

  • Nei browser stretti (640 px)

Five

Icona ☰

  • Nei browser stretti (640 px)

Flatiron

Link Menu

  • Nei browser stretti (640 px)

Forte

Icona ☰

  • Nei browser stretti (768 px)

Galapagos

Icona ☰

  • Nei browser stretti (724 px)

Ishimoto

Link Menu

  • Nei browser stretti (800 px)

Momentum

Icona ☰

  • Nei browser stretti (736 px)

Montauk

Link Menu

  • Nei browser stretti (640 px)

Native

Link Menu

  • Nei browser stretti (640 px)

Pacific

Icona ☰

  • Nei browser stretti (768 px)
  • Per mostrare sempre l'icona sui computer, seleziona Usa sempre navigazione sovrapposta in Stili sito.

Skye

Icona ☰

  • Appare sempre

Supply

Icona ☰

  • Nei browser stretti (1024 px)

Tremont

Icona ☰

  • Nei browser stretti (640 px)
  • Automaticamente quando i link non si adattano
  • Per mostrare sempre l'icona sui computer, seleziona Stile navigazione: icona in Stili sito

Wells

Link Menu

  • Nei browser stretti (800 px)

Wexley

Link Menu

  • Nei browser stretti (640 px)

York

Icona ☰

  • Nei browser stretti (768 px)

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

Apri il pannello Design, quindi fai clic su Stili sito. Scorri la sezione Mobile: Icona menu e imposta la modifica 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

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:

Footer Image
  • Ricevi assistenza dalla nostra community

  • Ricevi assistenza dalla nostra community in merito alle personalizzazioni avanzate.

  • Affidati a uno Squarespace Expert

  • Fatti notare online con l'aiuto di un designer o di uno sviluppatore esperto.