Heading

Link in evidenza

1. Documentazione Company XYZ sulle icone
2. Documentazione Company XYZ sulle impostazioni degli header
3. Documentazione Company XYZ sulle intestazioni
4. Documentazione Company XYZ sulle impostazioni dei colori
5. Documentazione Company XYZ sulle impostazioni di visibilità
6. Documentazione Shopify sulle sezioni e i blocchi

Video utili

Video di Shopify Academy: personalizzare il tuo negozio

Video di Shopify Academy: personalizzare il tuo negozio

Usi il blocco Heading per introdurre i contenuti, suddividere le pagine lunghe e creare una gerarchia di lettura più chiara. Combina un titolo, testo di supporto opzionale e un invito all’azione opzionale in un unico blocco flessibile.

Usate solo un H1 in una pagina. Per la maggior parte dei titoli nella pagina, scegliete H2 o un livello inferiore in modo che la struttura della pagina resti chiara e SEO-friendly.

Impostazioni dell’header

Queste impostazioni definiscono il messaggio e la gerarchia del blocco. Usatele per controllare l’allineamento, scegliere il livello di intestazione corretto, aggiungere testo di supporto e decidere se il blocco deve includere un pulsante. Per una panoramica più ampia sul funzionamento dei blocchi nell’editor del tema, consultate documentazione Shopify sulle sezioni e i blocchi

I risultati migliori di solito si ottengono assegnando a ogni livello di testo un ruolo distinto: una breve didascalia per il contesto, un’intestazione principale per il messaggio chiave e un sottotitolo per i dettagli aggiuntivi. Se il contenuto inizia a sembrare ripetitivo, rimuovete il livello meno importante invece di compilare tutti i campi.

I campi delle icone consentono di aggiungere un’emoji o un nome di icona per un maggiore rilievo visivo. Funziona meglio quando l’icona rafforza il significato dell’intestazione invece di avere una sola funzione decorativa. Per indicazioni sulle icone, consultate Icons.

Scegliete il tipo di intestazione in base alla posizione del blocco nella pagina, non solo alla dimensione visiva. Se avete bisogno di altri aiuti per decidere la struttura dell’intestazione, consultate Impostazioni dell’header e il riferimento Heading specifico del blocco.

Il pulsante è opzionale, ma utile quando l’intestazione introduce un passaggio successivo, come navigare, leggere di più o aprire una destinazione in evidenza. Gli stili pieni rendono l’azione più evidente, mentre gli stili semplici o più piccoli mantengono il focus sul contenuto dell’intestazione.

Il layout e la posizione del pulsante contano soprattutto quando lo spazio è ridotto. Su mobile, spostare il pulsante sotto il testo o renderlo a larghezza intera può migliorare la comodità di tocco e rendere il blocco più facile da scansionare.

Consiglio

Se usate un pulsante con sola icona, assicuratevi che l’icona comunichi chiaramente l’azione. Un’etichetta testuale breve è di solito più facile da capire a colpo d’occhio.

Impostazioni standard del blocco

Impostazioni di colore

Questi colori sovrascrivono lo stile predefinito del tema solo per questo blocco. Usateli quando l’intestazione richiede un contrasto più forte, un accento diverso o un trattamento del testo di supporto più morbido rispetto al contenuto circostante.

Date priorità alla leggibilità, soprattutto se il blocco appare su uno sfondo complesso o scuro. Le scelte vuote o in stile predefinito in genere preservano lo stile di fallback del tema, mentre colori o gradienti espliciti rendono il blocco più indipendente dal contenuto circostante.

Se volete più contesto sui controlli di colore condivisi, consultate Impostazioni di colore.

Impostazioni di visibilità

Usate i controlli di visibilità per mostrare il blocco su tutti i dispositivi oppure nasconderlo su desktop o mobile. È utile quando desiderate un trattamento dell’intestazione più breve, una posizione diversa del pulsante o una struttura dei contenuti più semplice sugli schermi più piccoli.

Nota

La visibilità specifica per dispositivo funziona meglio quando ogni versione ha uno scopo chiaro. Evitate di duplicare la stessa intestazione, a meno che i layout mobile e desktop non richiedano davvero trattamenti del contenuto diversi.

Esaminate sia la vista desktop sia quella mobile dopo aver apportato modifiche alla visibilità, poiché layout, allineamento e comportamento dei media possono differire tra le varie viewport.

Per maggiori informazioni sul comportamento condiviso della visibilità, consultate Impostazioni di visibilità.

Note sull’uso

1. Scegliete il livello di intestazione corretto. Abbinate il tipo di intestazione alla struttura della pagina e riservate H1 al titolo principale della pagina.
2. Mantenete ogni campo di testo con uno scopo preciso. Usate la didascalia, l’intestazione e il sottotitolo solo quando ciascuno aggiunge un valore distinto.
3. Rendete evidente l’azione del pulsante. Aggiungete un pulsante solo quando il blocco deve portare altrove e usate un testo conciso che dica ai visitatori cosa succede dopo.
4. Controllate entrambe le viewport. Esaminate i layout desktop e mobile dopo aver modificato allineamento, visibilità o posizione del pulsante, in modo che il blocco resti chiaro su ogni dimensione dello schermo.
5. Usate gli override in modo selettivo. Applicate colori personalizzati, gradienti o media specifici per dispositivo solo quando lo stile predefinito o il layout condiviso non sono più adatti al contenuto.
6. Mantenete leggibili i media. Se usate media separati per desktop e mobile, assicuratevi che il ritaglio e il comportamento di fallback continuino a supportare l’intestazione e l’eventuale testo sovrapposto.