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 le funzionalità aggiuntive, 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

Guarda un video

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.

Tip: To change the navigation links, add, edit, delete, or rearrange pages in the Pages panel.

As you build your header, you can set site-wide styles and choose how the header looks on both computers and mobile devices.

Set global styles

To set your site-wide header styles:

  1. Clicca su Modifica nell'angolo in alto a sinistra dell'anteprima del tuo sito.
  2. Hover over the header and click Edit Site Header. This opens the Global tab. 
  3. To edit your site title or add a logo image, click Site Title & Logo. Logos appear in place of your site title. If you use a logo, add a site title too. Search engines use the title for search results and browser tabs, unless you add a separate SEO title.
  4. Per aggiungere un pulsante, delle icone social o un'icona del carrello, clicca su Elementi.
  5. To change the header colors, click Colors.
  6. To keep the header fixed at the top of your site, switch the Fixed Position toggle on. When the header is fixed, set the Fixed Header Style to Basic (always appears at the top of the site) or Scroll Back (appears at the top of the site when scrolling up). 
  7. Click anywhere outside the editor, then hover over Done and click Save

Set computer and mobile layouts

To set how the header appears on computers and on mobile devices: 

  1. Clicca su Modifica nell'angolo in alto a sinistra dell'anteprima del tuo sito.
  2. Hover over the header and click Edit Site Header. Click the Desktop icon. 
  3. To change the layout, click Header Layout. Scroll to see all layout options and click one to preview it on your site.
  4. To set the width of the header content, click Full or Inset
  5. Use the sliders to change the padding and spacing between elements.
  6. Click the Mobile icon. Your site preview will automatically switch to mobile view. 
  7. To change the layout, click Header Layout. Scroll to see all layout options and click one to preview it on your site.
  8. To change how your menu appears when the links are expanded, click Overlay Menu
  9. To change how your menu appears when the menu is collapsed, choose a Menu Icon
  10. Click anywhere outside the editor, then hover over Done and click Save.

Sfondo intestazione

If your site is on version 7.0, your header background depends on your site's template. Skip to the 7.0 features section below to learn more.

Puoi impostare lo sfondo dell'intestazione su trasparente o tinta unita. I menu a tendina delle cartelle combaciano con il colore di sfondo dell'intestazione.

Rendere lo sfondo trasparente

To make the header background transparent:

  1. Open the Global header settings.
  2. Click Colors.
  3. Switch the Transparent toggle on.

Quando questa funzione è attiva, l'intestazione si sovrappone alla prima sezione della pagina e mostra lo sfondo o l'immagine della prima sezione. Questo comportamento può variare in base alla pagina, a seconda che la prima sezione utilizzi stili specifici o abbia un'immagine di sfondo.

Nota: se la prima sezione della pagina è una sezione galleria impostata su Smarginatura completa, l'intestazione non sarà trasparente sulle immagini della galleria. Al contrario, l'intestazione mostra il colore di sfondo della prima sezione. 

Rendere lo sfondo colorato

To make the header background a solid color:

  1. Open the Global header settings.
  2. Click Colors.
  3. Switch the Transparent toggle off, then choose a color theme.

Quando la funzione Trasparente è disattivata, l'intestazione si sovrappone alla prima sezione della pagina. Se la prima sezione ha un'immagine di sfondo, l'intestazione ne copre una parte.

Per ulteriori informazioni sui colori di sfondo della sezione, visita Modifica dei colori.

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

Banner image or video

Disponibile in alcuni template

Blocks area

Disponibili in alcuni modelli

Informazioni aziendali

Disponibili in alcuni modelli

Pulsanti

Disponibili in alcuni modelli

Fixed header

Disponibili in alcuni modelli

Cartelle Sempre disponibile, tuttavia la visualizzazione varia in base al modello
Logo

Always available, but display varies by template

Main Navigation links

Always available, but display varies by template

Overlay navigazione 

Available in the Skye template family (Some mobile sites have an overlay)

Barra di ricerca

Disponibile in alcuni template

Navigazione secondaria

Disponibile in alcuni template
Carrello Always available, but some templates have styling options

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 vedere quali modelli supportano intestazioni fisse e come vengono visualizzate su un computer o un dispositivo mobile.

  • Except where noted, fixed headers display all your site's header elements (such as site title or logo and navigation links).
  • 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.

Not fixed

Avenue

Not fixed

Not fixed

Aviator

Navigation links only 

In Stili sito, utilizza Layout Pagina informazioni per selezionare Offset o Biglietto da visita.

Not fixed

Bedford

Index Pages only

L'intestazione riappare in una posizione fissa dopo aver scorso la prima sezione.

Not fixed

Brine

Not fixed

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

Not fixed

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

Not fixed

Not fixed

Flatiron

In Stili sito, seleziona Posizione intestazione: fissa.

Not fixed

Forte

Not fixed

Not fixed

Galapagos

Not fixed

Not fixed

Ishimoto

Not fixed

Not fixed

Momentum

Always fixed

Always fixed

Montauk

Not fixed Not fixed

Native

Not fixed Not fixed

Pacific

Navigation links only, and only on Index Pages set as the 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.

Not fixed

Skye

Always fixed

Can be transparent

Always fixed

Supply

Barra laterale, fissa (scorre se il contenuto è più lungo della finestra del browser)

Not fixed

Tremont

Not fixed

Not fixed

Wells

Barra laterale, sempre fissa

Not fixed

Wexley

Not fixed

Not fixed

York

Not fixed

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: 19 su 94