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

Your site header is where your navigation and title or logo display. The header looks the same throughout your site and plays a big role in how visitors navigate and interact with your content. It's positioned at the top of most templates.

Questa guida mostra degli esempi di diverse funzionalità di intestazione e fornisce i link alle informazioni su come aggiungerle e definirne lo stile. Trovi le informazioni relative all'intestazione del tuo modello nella sua guida Struttura e stile.

header-example.png

Questa guida si riferisce alla versione 7.0. Per creare l'intestazione di un sito nella versione 7.1, consulta le opzioni di stile e design per la versione 7.1.

Header features

You can add these header features on any template, though the placement and design options vary.

Branding features

  • Logo - Replace your site title with a logo image to represent your brand and help visitors navigate to your homepage. To learn more, visit Adding a site logo.
  • Shopping cart - Shows the number of items in a customer's cart and leads to their cart and checkout page. To learn more, visit Adding products to your store.
  • Site title - Like a logo image, the site title helps visitors navigate to your homepage. To learn more, visit Adding a site title.

Navigation features

Additional features in some templates

These special header features are available in some templates.

Navigation features

  • Fixed header - Fixed headers stay in the same position at the top of the browser while you scroll down the page. See the information below.
  • Navigation overlay - In the Skye template family, when you click the ☰, it opens an overlay with your navigation links. Some mobile sites have an overlay.
  • Secondary navigation - A second set of navigation links in the header, which you can give a separate style. To learn more, visit Secondary and Footer navigation.

Branding and contact features

  • Business Information - Contact information from Business Information Settings can display in the header in some templates.
  • Icone social - Le icone social incoraggiano i visitatori a seguirti e a connettersi con te sui social media. Per maggiori informazioni, visita Aggiungere icone social.
  • Tag line - A short piece of text that tells visitors what your site is about. To learn more, visit Adding a tag line.

Design features

  • Background color - The header can have a different background color from the rest of your site in some templates.
  • Banner image or video - A banner image or video can display behind the header content in some templates.
  • Blocks area - Add custom content, like images, forms, and text, in some templates.
  • Buttons - A button creates a clear call to action. To learn more, visit Adding buttons to headers.
  • Search bar - Search fields help visitors find content on your site. In some templates, you can display a search bar in the header. To learn more, visit Adding search to your site.

Esempi

The examples in this section show header features in different templates to help inspire you as you design your site.

Questo esempio di Brine ha molti elementi dell'intestazione:

labeled-brine.png

Wells displays header content in a sidebar:

wells-labeled.png

In the Skye family, the header content appears in an overlay when you click the menu icon:

labeled-skye.png

Questo esempio di Flatiron mostra un'intestazione fissa, e un menu a discesa creato da una cartella:

fixed-nav-supply.gif

Fixed headers

Fixed, or “sticky,” navigation stays in the same position at the top of the browser while you scroll down the page.

Usa la tabella per vedere quali di queste famiglie di modelli supportano le intestazioni fisse.

  • Except where noted, fixed headers display all your site's header elements (such as site title or logo and navigation links).
  • Navigation can't be fixed on mobile devices in many templates, to preserve space on smaller screens. In some cases, the navigation may be fixed on larger mobile devices, such as tablets.
Modello Computer Dispositivo mobile

Adirondack

In Stili sito, seleziona Mostra sempre nav.

When you scroll down, the header collapses and the site title replaces the logo. Learn more.

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

Sidebar, always fixed

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)

Template header feature cheatsheet

To find template-specific information for each header feature, use the links in the table below.

Background color

Available in some templates

Banner image or video

Available in some templates

Blocks area

Available in some templates

Business Information

Available in some templates

Pulsanti

Available in some templates

Fixed header

Available in some templates

Cartelle Always available, but display varies by template
Logo

Always available, but display varies by template

Main Navigation links

Always available, but display varies by template

Navigation overlay 

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

Search bar

Available in some templates

Secondary navigation

Available in some templates
Carrello Always available, but some templates have styling options

Site title

Always available, but display varies by template

Icone social

Disponibili in alcuni modelli

Tag line

Available in some templates

Create a page without a header

To add a page on your site where the header doesn't display, consider adding a Cover Page. Cover Pages have pre-styled layouts and don't include the site title, logo, navigation, and other header elements.

To learn more, visit Using Cover Pages.

cover_page_preview.png

Questo articolo ti è stato utile?
Utenti che ritengono sia utile: 10 su 26