Impostazioni dell’header

Link in evidenza

1. Documentazione Company XYZ sulle icone
2. Documentazione Shopify su sezioni e blocchi
3. Documentazione Shopify sull’editor del tema

Video utili

Video di Shopify Academy: personalizzare il tuo negozio

Video di Shopify Academy: personalizzare il tuo negozio

Usa queste impostazioni per creare un’introduzione chiara alle aree di contenuto del tema. Un header ben strutturato aiuta i visitatori a capire cosa viene dopo, migliora la scansione dei contenuti e dà ai contenuti importanti un’introduzione visiva e semantica più incisiva. Per una panoramica più ampia di come sono organizzati i contenuti del tema, consulta la documentazione Shopify su sezioni e blocchi

Contenuto dell’header

Questo gruppo controlla la struttura testuale nella parte superiore di un’area di contenuto: allineamento, un’icona opzionale, una didascalia, il titolo principale e il testo di supporto. Gli header più efficaci generalmente rimangono focalizzati, con ogni elemento che svolge un ruolo distinto invece di ripetere lo stesso messaggio.

Scegli l’allineamento del testo in base allo stile dei contenuti circostanti. L’allineamento centrato è adatto ai layout promozionali o editoriali, mentre l’allineamento a sinistra è solitamente più facile da leggere quando includi un testo di supporto più lungo.

Il campo dell’icona accetta un’emoji o il nome di un’icona. Usalo quando un rapido riferimento visivo aiuta a inquadrare il messaggio, ad esempio per evidenziare una funzionalità o indicare un tema del contenuto. Se l’icona appare più decorativa che informativa, lasciala vuota per ottenere un risultato più pulito. Per indicazioni sulla denominazione delle icone, consulta Icone.

Usa la didascalia del titolo come breve etichetta sopra il titolo principale. È ideale per fornire un contesto sintetico, ad esempio una categoria, una campagna o il tema del contenuto.

Il titolo principale dovrebbe comunicare il messaggio primario. Mantienilo specifico e descrittivo, in modo che sia utile sia ai visitatori sia alla struttura della pagina. Il tipo di titolo consente di scegliere quanto debba essere evidente e strutturale.

Scegli i livelli dei titoli in base alla struttura della pagina, non solo all’aspetto. Riserva i titoli di livello più alto ai titoli più importanti, così la pagina rimane ben organizzata.

Usa il sottotitolo per fornire un breve contesto di supporto, una proposta di valore o una spiegazione sintetica. Se il titolo è già sufficientemente esplicativo, un sottotitolo conciso funzionerà generalmente meglio di un paragrafo lungo.

Azione del pulsante

Puoi aggiungere un pulsante opzionale quando l’header deve guidare verso un passaggio successivo chiaro. È utile quando il contenuto introduce qualcosa di concreto, ad esempio la consultazione di contenuti, l’approfondimento o l’apertura di una destinazione in evidenza. Per i dettagli sulla configurazione nell’editor, consulta la documentazione Shopify sull’editor del tema

Aggiungi insieme il testo del pulsante e un link, così l’azione risulta completa e chiara. Se includi un’icona nel pulsante, dovrebbe supportare l’etichetta anziché sostituirla. Il campo dell’icona accetta emoji o nomi di icone; per indicazioni sulla denominazione, consulta Icone.

Lo stile del pulsante controlla il peso visivo dell’azione. Gli stili più marcati funzionano bene quando il pulsante rappresenta il passaggio successivo principale, mentre gli stili più leggeri aiutano a mantenere l’attenzione sui contenuti.

Il layout del pulsante controlla se l’icona appare accanto all’etichetta o da sola. È preferibile usare i pulsanti con la sola icona nei casi in cui l’azione sia inequivocabile dal contesto circostante.

Attenzione

I pulsanti con la sola icona possono essere facili da non notare o da fraintendere. Nella maggior parte dei casi, una breve etichetta testuale crea un’azione più chiara e intuitiva.

Puoi posizionare il pulsante sopra o sotto il contenuto testuale, con una posizione mobile separata, se necessario. In questo modo è più facile mantenere equilibrato il layout desktop, offrendo al contempo ai visitatori da dispositivi mobili un flusso di lettura più scorrevole.

Attiva l’opzione del pulsante mobile a larghezza intera quando vuoi che l’azione risalti più chiaramente sugli schermi più piccoli. È particolarmente utile quando toccare il pulsante rappresenta l’obiettivo principale.

L’apertura di un link in una nuova scheda è generalmente preferibile per le destinazioni esterne o nei casi in cui non vuoi che i visitatori perdano il punto in cui si trovano. Per la navigazione ordinaria, rimanere nella stessa scheda è spesso più naturale.

Note sull’uso

1. Mantieni il messaggio focalizzato. Usa insieme titolo, didascalia e sottotitolo per introdurre un’unica idea chiara, invece di ripetere lo stesso testo in più campi.
2. Adatta la gerarchia all’importanza. Scegli un tipo di titolo adatto alla struttura della pagina, così i contenuti importanti risaltano senza indebolire l’ordine complessivo dei titoli.
3. Usa le icone in modo intenzionale. Aggiungi icone solo quando aiutano i visitatori a identificare più rapidamente il contenuto o l’azione.
4. Rendi esplicite le azioni dei pulsanti. Abbina un testo chiaro del pulsante a un link pertinente ed evita di affidarti solo a un’icona, a meno che l’azione non sia evidente.
5. Controlla la visualizzazione su dispositivi mobili. Verifica l’allineamento, la posizione del pulsante e il comportamento a larghezza intera sugli schermi più piccoli, così l’header rimane facile da leggere e utilizzare.
6. Esamina i layout di entrambe le modalità di visualizzazione. Se usi controlli separati per desktop e dispositivi mobili, controlla entrambe le dimensioni per assicurarti che allineamento, visibilità e comportamento dei contenuti multimediali risultino ancora intenzionali.
7. Mantieni mirate le sostituzioni. Lascia i valori dello stile predefinito quando vuoi che l’header si integri nell’area circostante; usa colori o contenuti multimediali espliciti solo quando vuoi che l’header si distingua.