Hero - Basic

Link in evidenza

1. Documentazione Shopify sulle sezioni e i blocchi
2. Documentazione Shopify sulla personalizzazione delle sezioni
3. Documentazione di Company XYZ sulle impostazioni dei colori
4. Documentazione di Company XYZ sulle impostazioni del padding della sezione
5. Documentazione di Company XYZ sulle impostazioni dei separatori
6. Documentazione di Company XYZ sulle impostazioni di visibilità
7. Documentazione di Company XYZ sulle impostazioni delle larghezze del layout

Video utili

Video Shopify Academy: personalizzare il proprio negozio

Video Shopify Academy: personalizzare il proprio negozio

Hero - Basic evidenzia il titolo della pagina e i dettagli di supporto principali nella parte superiore delle pagine articolo e blog. Può anche utilizzare l’immagine in evidenza quando è disponibile, rendendo più semplice creare un header visivo più incisivo senza aggiungere altri blocchi di contenuto. Per una panoramica su come sono organizzate le sezioni del tema, vedere documentazione Shopify su sezioni e blocchi

Impostazioni principali

Queste impostazioni definiscono la struttura generale dell’hero e stabiliscono quante informazioni di supporto compaiono attorno al titolo.

1. Posizionamento dell’immagine in evidenza definisce il tono visivo dell’header. Usate un’immagine di sfondo per un aspetto più immersivo, scegliete il posizionamento a sinistra o a destra quando desiderate una separazione più chiara tra immagine e testo, oppure rimuovete del tutto l’immagine per un layout editoriale più semplice.
2. Allineamento del testo influisce su quanto l’header risulta formale, d’impatto o leggibile. L’allineamento a sinistra è in genere il più facile da scansionare per i contenuti dell’articolo, mentre il testo centrato può funzionare bene per una presentazione più rifinita.
3. Dettagli della pagina consentono di mostrare o nascondere elementi come breadcrumb, autore, data, tag, condivisione e stampa. Abilitate solo i dettagli che aiutano i visitatori a comprendere o utilizzare la pagina, così l’header resta focalizzato.
4. Visualizzazione dell’estratto aggiunge un breve riepilogo quando il contenuto dell’estratto esiste. L’opzione espandibile è utile quando desiderate includere più contesto senza lasciare che un riepilogo lungo domini la parte superiore della pagina.

Se mostrate sia un estratto lungo sia diversi elementi di metadati, l’hero può diventare rapidamente affollato. Quando il titolo è già descrittivo, in genere un riepilogo più breve funziona meglio.

Impostazioni colore

Le impostazioni colore consentono di sostituire solo per questo hero il trattamento colore predefinito della sezione. Questo è particolarmente utile quando l’immagine in evidenza o il trattamento di sfondo richiedono un contrasto più forte rispetto al resto del design della pagina. Vedere documentazione Company XYZ sulle impostazioni colore.

1. Colori dell’intestazione e del testo dovrebbero essere regolati insieme, in modo che il titolo rimanga l’elemento più forte mentre i dettagli secondari restano leggibili.
2. Colore dell’icona aiuta elementi di utilità come le azioni di condivisione o stampa a rimanere visibili senza sovrastare il contenuto principale.
3. Colore dell’overlay, gradiente e opacità sono più importanti quando l’immagine in evidenza viene usata come sfondo. Usateli per migliorare la leggibilità mantenendo abbastanza dettaglio dell’immagine da supportare il design.

Consiglio

Iniziate impostando l’intensità dell’overlay prima di modificare i colori del testo. Nella maggior parte dei casi, un overlay ben bilanciato risolve i problemi di leggibilità in modo più pulito rispetto all’uso di colori del testo troppo chiari o troppo scuri.

Impostazioni standard della sezione

Se desiderate una panoramica più ampia dei controlli della sezione nell’editor del tema, vedere documentazione Shopify sulla personalizzazione delle sezioni

Impostazioni di padding

Impostazioni di padding controllano lo spazio sopra e sotto il contenuto dell’hero su desktop e mobile. Usate più padding quando la sezione include un’immagine di sfondo o un estratto, così l’header risulta intenzionale invece che compresso. Riducete il padding quando desiderate un header di pagina più compatto e più orientato all’utilità.

Impostazioni dei separatori

Impostazioni dei separatori consentono di aggiungere una linea sopra o sotto la sezione. In questo hero, i separatori funzionano bene quando desiderate una separazione più chiara tra l’header della pagina e il contenuto circostante. Se lasciate il colore del separatore trasparente, viene usato il comportamento predefinito del colore del bordo del tema.

Impostazioni di visibilità

Impostazioni di visibilità controllano se la sezione appare su desktop, su mobile o su entrambi. Questo può aiutare quando un header ricco di immagini risulta efficace su schermi più grandi ma troppo alto su quelli più piccoli. Assicuratevi che la pagina mantenga un contesto chiaro del titolo su qualsiasi dispositivo in cui l’hero è nascosto.

Impostazioni di larghezza

Impostazioni di larghezza controllano la larghezza massima del contenuto e la larghezza esterna della sezione stessa. Larghezze del contenuto più strette possono migliorare la leggibilità di titoli e estratti, mentre sezioni più larghe hanno un impatto più forte quando usate un’immagine di sfondo. Se possibile, controllate le modifiche alla larghezza nella visualizzazione della pagina live, poiché l’inquadratura dell’editor può far sembrare lo spazio diverso.

Note sull’uso

1. Scegliete intenzionalmente il posizionamento dell’immagine. Le immagini di sfondo creano una dichiarazione visiva più forte, mentre il posizionamento laterale o l’assenza di immagine mantengono il titolo e i dettagli più facili da scansionare.
2. Mantenete selettivi i dettagli di supporto. Mostrate solo i metadati e le azioni di utilità che aggiungono valore reale, così l’header non compete con il contenuto della pagina.
3. Usate gli estratti per il contesto, non per ripetere. Un buon estratto dovrebbe aggiungere un riepilogo utile invece di ribadire il titolo in forma più estesa.
4. Date priorità al contrasto. Quando usate un’immagine di sfondo, regolate insieme overlay e colori del testo, così l’intestazione resta facile da leggere su tutta l’area dell’immagine.
5. Rivedete attentamente il layout mobile. Controllate spaziatura, visibilità e lunghezza dell’estratto su schermi più piccoli, così l’header risulta equilibrato e non spinge troppo in basso il contenuto principale.
6. Confrontate entrambe le visualizzazioni. I controlli per desktop e mobile possono produrre allineamento, visibilità e comportamento dei media diversi, quindi rivedete l’hero su entrambe le dimensioni dello schermo prima della pubblicazione.
7. Usate con parsimonia le sostituzioni locali. Valori vuoti o in stile predefinito in genere preservano lo styling di fallback, mentre colori, gradienti o scelte multimediali espliciti fanno apparire questo hero più indipendente dal resto della pagina.