L’intestazione del sito è un blocco presente su tutte le pagine del sito. È sostanzialmente la prima cosa che un cliente nota quando cerca informazioni sul negozio, quindi è importante rendere l’intestazione visivamente accattivante e comoda per i visitatori del sito.

Puoi configurare la struttura e la visualizzazione di questo blocco in Sito web → Design → Editor di design → blocco Header.

La sezione delle impostazioni dell’intestazione contiene diverse schede in cui puoi configurare la disposizione degli elementi dell’interfaccia, il loro stile visivo e lo stile visivo dei blocchi dell’intestazione.

I badge della quantità indicano il numero di prodotti mostrati negli elementi dell’intestazione, come i preferiti, l’elenco di confronto e il carrello.
Nel pannello Stile dell’intestazione, puoi configurare lo sfondo dell’icona e il colore del numero visualizzato al suo interno.

Nella prima scheda Header Style, puoi fissare l’intestazione durante lo scorrimento selezionando la casella Sticky header.

Nell’immagine qui sotto puoi vedere una rappresentazione schematica dell’intestazione del sito in Cartum.

L’intestazione è composta da tre righe orizzontali, ciascuna contenente più sezioni.

Le sezioni occupano una determinata posizione nella riga e sono responsabili dell’allineamento dei componenti al loro interno.

Le righe superiore e inferiore contengono ciascuna tre sezioni. La riga principale contiene quattro sezioni, una delle quali è a doppia altezza, consentendo di disporre gli elementi su due righe.

Per comprendere meglio come appaiono le righe della struttura, forniamo un esempio di un’intestazione reale con una sovrapposizione schematica delle righe.

Per ogni riga dell’intestazione, puoi configurarne lo stile visivo: altezza, sfondo, colore degli elementi, padding, ecc. Tutte le impostazioni disponibili sono visibili nella scheda corrispondente.

Negli screenshot qui sotto puoi vedere le impostazioni dell’intestazione di uno dei design della nostra galleria di design. Lì puoi trovare anche altre opzioni di layout dell’intestazione.

Questa è la riga più ampia dell’intestazione, dove di solito si trovano elementi grandi — logo, orari di lavoro, blocco contatti, carrello, campo di ricerca, ecc.

Configurata in Design Editor → Header→ scheda Main section.

Configurata in Design Editor → Header → scheda Top section.

Configurata in Design Editor → Header → scheda Bottom section.

Puoi includere ed escludere gli elementi dell’interfaccia nell’intestazione, così come modificarne la posizione nell’intestazione in Design Editor → Header nella scheda Header layout.

Qui forniamo un esempio di posizionamento degli elementi che corrisponde all’intestazione dell’esempio. Alcuni elementi sono esclusi e non verranno visualizzati.

Gli elementi posizionati nella sezione doppia si allineeranno al margine sinistro e quelli inseriti in parti diverse della sezione doppia saranno disposti su due righe, una sotto l’altra.

Gli elementi in una singola sezione centrale si allineeranno al centro.

Se vuoi cambiare la posizione di un elemento specifico nell’intestazione, trascinalo semplicemente nella sezione desiderata e salva le modifiche.

Nel design editor puoi modificare lo stile di visualizzazione di un elemento. Per ciascun elemento dell’intestazione sono disponibili impostazioni aggiuntive, accessibili espandendo il relativo pannello.

Altri esempi di diversi layout dell’intestazione, design visivi delle righe e posizionamenti degli elementi sono disponibili nella nostra Galleria di design.

Tutti gli elementi disponibili dell’intestazione del sito:

La visualizzazione e la disposizione degli elementi nell’intestazione della versione mobile vengono configurate separatamente