Intestazione

Link in evidenza

1. Documentazione Company XYZ sulle impostazioni dell’header
2. Documentazione Company XYZ sulle impostazioni del padding della sezione
3. Documentazione Company XYZ sulle impostazioni dello sfondo della sezione
4. Documentazione Company XYZ sulle impostazioni dei separatori
5. Documentazione Company XYZ sulle impostazioni di visibilità
6. Documentazione Company XYZ sulle impostazioni delle larghezze del layout
7. Documentazione Shopify sulle sezioni e i blocchi
8. Documentazione Shopify sull’editor del tema

Video utili

Video Shopify Academy: personalizzare il proprio negozio

Video Shopify Academy: personalizzare il proprio negozio

Usa questa sezione per aggiungere un’intestazione stilizzata ovunque ti serva una pausa di contenuto più chiara, un’introduzione più incisiva o un semplice invito all’azione. È particolarmente utile nelle landing page e nei layout lunghi, dove la struttura delle intestazioni aiuta i visitatori a scansionare la pagina. Per una panoramica più ampia su come sono costruite le sezioni, vedi documentazione Shopify sulle sezioni e i blocchi

Usa solo un H1 in una pagina. Se la pagina ha già un titolo principale, scegli qui H2 o un livello inferiore.

Impostazioni di colore

Queste impostazioni sostituiscono i soliti colori del tema solo per quest’area dell’intestazione. Sono particolarmente utili quando la sezione si trova su uno sfondo personalizzato o richiede un contrasto più forte rispetto alla pagina circostante.

Regola insieme i colori dell’icona, del testo dell’intestazione e del sottotitolo, in modo che la sezione risulti intenzionale. Se usi colori più chiari o attenuati, visualizzali in anteprima su mobile oltre che su desktop, per assicurarti che il testo resti facilmente leggibile.

Impostazioni standard della sezione

Impostazioni dell’header

Impostazioni dell’header controllano il contenuto e il layout di questa sezione, inclusi allineamento, icona, didascalia, intestazione, sottotitolo e il pulsante opzionale. Usale per creare tutto, da un semplice titolo di sezione a un blocco introduttivo più promozionale. Per i dettagli di configurazione nell’editor, vedi documentazione Shopify sull’editor del tema

Scegli il tipo di intestazione in base alla struttura della pagina, non solo all’aspetto. Usa la didascalia per un breve contesto, il sottotitolo per un testo di supporto conciso e il pulsante solo quando c’è un chiaro passo successivo per il visitatore.

Se aggiungi un pulsante, presta attenzione alla sua posizione su desktop e su mobile. Spostarlo sotto il testo può creare un flusso di lettura più pulito, mentre un pulsante a tutta larghezza su mobile può rendere l’azione più facile da toccare.

Impostazioni di padding

Impostazioni di padding controllano lo spazio sopra e sotto l’intestazione. Usa più padding quando l’intestazione deve stare da sola e meno quando deve rimanere visivamente collegata ai contenuti vicini.

Avere spaziature diverse su desktop e su mobile può aiutare la sezione a risultare equilibrata su tutti i dispositivi. Se l’intestazione include un sottotitolo o un pulsante, lascia abbastanza spazio affinché il contenuto non risulti troppo compresso.

Impostazioni dello sfondo sezione

Impostazioni dello sfondo sezione ti consentono di posizionare l’intestazione su uno sfondo a colore, sfumatura, immagine o video. Questo può trasformare una semplice intestazione in un divisore visivo più forte o in un’introduzione in stile banner.

Gli overlay sono utili quando il testo si trova sopra i media e ha bisogno di un contrasto migliore. Poiché gli sfondi possono cambiare la percezione di spaziatura e larghezza, visualizza in anteprima la sezione su più formati di schermo prima di pubblicarla.

Attenzione

Immagini affollate o sfondi video possono rendere le intestazioni difficili da leggere. Se la chiarezza diminuisce, usa un overlay o passa a uno sfondo più semplice.

Impostazioni dei separatori

Impostazioni dei separatori aggiungono una linea sopra o sotto la sezione. Funzionano bene quando vuoi un confine di contenuto più pulito senza aggiungere altro testo o spazio extra.

Di solito un separatore semplice è sufficiente per le intestazioni. Se la pagina ha già divisioni visive marcate, usa i separatori con parsimonia per evitare confusione.

Impostazioni di visibilità

Impostazioni di visibilità controllano se questa intestazione appare su desktop, su mobile o su entrambi. È utile quando vuoi trattamenti di intestazione diversi per dimensioni di dispositivo diverse.

Se nascondi la sezione su un dispositivo, assicurati che i visitatori vedano comunque lì un’intestazione chiara e ogni contesto essenziale. Evita di usare le modifiche di visibilità in modi che interrompono la gerarchia dei contenuti della pagina.

Impostazioni di larghezza

Impostazioni di larghezza controllano la larghezza massima del contenuto e la larghezza della sezione stessa. Una larghezza del contenuto più ridotta spesso migliora la leggibilità, mentre una larghezza della sezione più ampia è più evidente quando usi uno sfondo.

Usa la larghezza del contenuto per mantenere confortevole la lettura delle righe dell’intestazione e del sottotitolo. Usa la larghezza della sezione quando vuoi che il trattamento dello sfondo resti contenuto o si estenda di più sulla pagina.

Nota

Le modifiche alla larghezza possono apparire diverse nell’editor rispetto alla pagina live. Controlla l’anteprima della pagina prima di finalizzarle.

Note sull’uso

1. Mantieni logici i livelli delle intestazioni. Usa H1 solo per il titolo principale della pagina e usa livelli inferiori per preservare una gerarchia dei contenuti chiara.
2. Separa il messaggio dai dettagli. Inserisci il punto principale nell’intestazione, usa la didascalia per un leggero contesto e mantieni il sottotitolo breve e di supporto.
3. Usa i pulsanti con intenzione. Aggiungi un pulsante solo quando l’intestazione deve portare a una chiara azione successiva e verifica la sua posizione su mobile prima di pubblicare.
4. Progetta prima di tutto per la leggibilità. Quando usi colori personalizzati o sfondi multimediali, controlla con attenzione il contrasto in modo che l’intestazione resti facile da leggere.
5. Bilancia insieme spaziatura e larghezza. Regola padding e larghezza come una coppia, in modo che la sezione non risulti né troppo compressa né scollegata dal contenuto circostante.
6. Rivedi entrambe le viste dispositivo. I controlli di desktop e mobile possono influire in modo diverso su allineamento, visibilità e comportamento dei media, quindi controlla la sezione in entrambe le viewport prima di pubblicare.
7. Considera le sostituzioni come un impegno più forte. I valori vuoti o con stile predefinito di solito mantengono lo stile circostante, mentre colori espliciti, sfumature o scelte multimediali rendono l’area dell’intestazione più indipendente.
8. Controlla la leggibilità dei media. Se usi media diversi per desktop e mobile, verifica ritaglio, caricamento, fallback e leggibilità del testo per ciascuna dimensione dello schermo.