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

Definire lo stile di navigazione

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.

All sites include options for changing the font, color, and size of your navigation's links. This guide explains how to customize your navigation on any site.

Prima di iniziare

Find the navigation style tweaks

The way that you change your navigation style depends on your site's version.

Navigation link styles are primarily set by your site's header. In the header editor, you can change:

  • The navigation layout
  • The navigation colors
  • The padding around text
  • Whether the navigation is fixed
  • 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.

Every template family has its own Site Styles, so there isn't one single rule for how to update your navigation links. Use these tips to find the style options your template supports:

  • To open Site Styles from the Home Menu, click Design, then Site Styles.
  • Scroll through the tweaks on the left and look for related tweaks. The tweaks usually include the word Navigation.
  • You can also hover over your site's navigation in the site preview on the right. When a blue highlighter box appears around it, click any navigation link. This helps filter out tweaks that don't affect the navigation links. When you're done, click Show All to go back to the main view.

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.

By default, your navigation font matches your site-wide font. To set a different font type or size for your navigation:

  1. Durante la modifica di una pagina, clicca sull'icona del pennello, quindi su Tipi di carattere.
  2. In Stili di testo globali, clicca su Assegna stili.
  3. Click Site Navigation.
  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. To change the size, click Size, then choose a preset Paragraph size, or choose Custom. To set a custom size, use the slider or manually enter a new rem value. Click Save to apply your changes.
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.

To change your navigation font, click the v icon next to the tweak name to open its drop-down menu. From here, you can change:

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

The way you change your navigation color depends on your site's version.

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

Change the layout and spacing

The way you change the navigation layout depends on your site's version.

Per modificare la posizione e la spaziatura dei link di navigazione, modifica l'intestazione del sito. Puoi anche personalizzare l'aspetto e il posizionamento dell'icona menu sui dispositivi mobili.

In some templates, you can change the position of the links. In Site Styles, look for tweaks called Navigation Position, Navigation Alignment, or something similar. To see what positions are available in your template, see the table below.

Tip: Some templates support fixed, or "sticky" navigation, that stays in the same position at the top of the browser while you scroll down the page.

Navigation display by template

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.

Here's how the Main Navigation displays on computers in these template families:

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

Horizontal, top center, can be split around the site title

Skye

Verticale, all'interno di una sovrapposizione

Supply

Verticale, barra laterale sinistra

Tremont

Horizontal, top left/right

Wells

Verticale, barra laterale sinistra

Wexley

Orizzontale, in alto a sinistra/centro/destra

York

Orizzontale, in alto a sinistra/centro/destra, può essere nascosto

Change link spacing

To change the space around navigation links, look for tweaks in Site Styles that change your header, banner, or navigation. While the tweaks vary by template, link spacing tweaks typically include words like Padding, Spacing, or Width.

Active and hover options (version 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 some templates, there are additional options for navigation links depending on if they've been clicked. This is sometimes called their "state" or "phase." While the tweaks vary by template, look for these words:

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

For help with your template, visit its template guide or list of Site Styles tweaks.

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.

The way that you style your mobile navigation depends on your site's version.

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:

  • L'icona del menu appare sempre su dispositivi mobili, anche se tutte le pagine si trovano nella sezione Non collegato.
  • 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.

In many cases, mobile navigation inherits styles from the computer display to keep your branding consistent. Some templates have advanced mobile style options, which give you a finer degree of control. To learn more, visit your template's guide.

To explore which tweaks affect your mobile navigation, open your navigation in phone view before opening Site Styles:

  1. Switch the Device View to phone.
  2. Click the navigation link (usually a ☰) so your mobile navigation appears.
  3. Nel Menu Home, clicca su Design, quindi su Stili sito. La navigazione mobile rimarrà aperta.
Tip: If you can’t see your navigation on mobile, ensure that you haven’t set your background or header color to the same color as your navigation text. The links may display over this color on mobile.

Menu icon or link design by template

Here's how the ☰ icon or Menu link displays in these template families:

Famiglia di modelli

Icon or link (Always shows on mobile)

Shows on computers...

Adirondack

☰ icon

  • In narrow browsers (640 px)
  • Per visualizzare sempre l'icona sui computer, seleziona Mostra sempre navigazione nella sezione Stili dei siti.

Avenue

Menu link

  • In narrow browsers (640 px)

Aviator

Menu link

  • In narrow browsers (640 px)

Bedford

☰ icon

  • Automatically when links won't fit
  • In narrow browsers (640 px)

Brine

☰ icon. Change the style with the Mobile: Menu Icon section in Site Styles.

  • In narrow browsers (640 px by default. Change this with the Mobile Breakpoint tweak.)

Farro

☰ icon

  • In narrow browsers (640 px)

Five

☰ icon

  • In narrow browsers (640 px)

Flatiron

Menu link

  • In narrow browsers (640 px)

Forte

☰ icon

  • In narrow browsers (768 px)

Galapagos

☰ icon

  • In narrow browsers (724 px)

Ishimoto

Menu link

  • In narrow browsers (800 px)

Momentum

☰ icon

  • In narrow browsers (736 px)

Montauk

Menu link

  • In narrow browsers (640 px)

Native

Menu link

  • In narrow browsers (640 px)

Pacific

☰ icon

  • In narrow browsers (768 px)
  • To always show the icon on computers, select Always Use Overlay Nav in Site Styles.

Skye

☰ icon

  • Always displays

Supply

☰ icon

  • In narrow browsers (1024 px)

Tremont

☰ icon

  • In narrow browsers (640 px)
  • Automatically when links won't fit
  • To always show the icon on computers, select Nav Style: Icon in Site Styles

Wells

Menu link

  • In narrow browsers (800 px)

Wexley

Menu link

  • In narrow browsers (640 px)

York

☰ icon

  • In narrow browsers (768 px)

Empty mobile navigation icons

In some templates, the icon always appears on mobile, even if all your pages are in the Not Linked section.

You can hide the menu icon in these template families:

  • Brine family
  • Farro family

Go to the Home Menu, click Design, then click Site Styles. Scroll to the Mobile: Menu Icon section and set the Menu Icon Position tweak to Hide.

In these template families, there isn't a built-in way to hide the mobile navigation icon:

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

Hide the collapsed menu on computers

To prevent the link or icon from showing on computers:

  • Keep navigation titles short.
  • Reduce the number of links in the menu. You can use folders to group related pages into drop-down menus, or, if your site is on version 7.0, move pages to Secondary or Footer Navigation.
  • 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...
Questo articolo ti è stato utile?
Utenti che ritengono sia utile: 75 su 473
Definire lo stile di navigazione