Hero

Link in evidenza

1. Documentazione Shopify su sezioni e blocchi
2. Documentazione Company XYZ sull’uso dei video
3. Documentazione Company XYZ sulle impostazioni dei colori
4. Documentazione Company XYZ sul blocco Heading
5. Documentazione Company XYZ sul blocco Rich text
6. Documentazione Company XYZ sul blocco Button
7. Documentazione Company XYZ sul blocco Breadcrumbs
8. Documentazione Company XYZ sul blocco Icon with text
9. Documentazione Company XYZ sul blocco Image
10. Documentazione Company XYZ sul blocco Search
11. Documentazione Company XYZ sul blocco Separator
12. Documentazione Company XYZ sul blocco Share/print UI
13. Documentazione Company XYZ sul blocco Video
14. Documentazione Shopify sull’editor del tema
15. Documentazione Company XYZ sulle impostazioni del padding della sezione
16. Documentazione Company XYZ sulle impostazioni dei separatori
17. Documentazione Company XYZ sulle impostazioni di visibilità
18. Documentazione 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 è una sezione banner flessibile basata su blocchi, progettata per introdurre le pagine in modo efficace. Puoi combinare contenuti, azioni, elementi di utilità e media, quindi definire la presentazione complessiva con immagini a livello di sezione, colori di overlay, spaziatura e controlli di larghezza. Per una panoramica più ampia su come è organizzato il contenuto modificabile del tema, consulta documentazione Shopify sulle sezioni e i blocchi

Impostazioni delle immagini

Questo gruppo controlla il trattamento visivo principale dell’hero. Puoi posizionare l’immagine in evidenza dietro il contenuto, collocarla a sinistra o a destra, oppure rimuovere del tutto le immagini della sezione quando i blocchi devono gestire il layout da soli.

Una immagine separata per dispositivi mobili aiuta a preservare la composizione su schermi più piccoli. Se non ne aggiungi una, su mobile viene utilizzata l’immagine in evidenza principale.

Puoi anche usare un video in evidenza per una presentazione più immersiva. Poiché viene riprodotto automaticamente senza audio, funziona meglio come supporto visivo ambientale anziché come contenuto che dipende dall’audio. Per indicazioni sui video, consulta documentazione Company XYZ su uso dei video.

Se il testo si trova sopra contenuti immagine o video, usa le impostazioni dell’overlay per proteggere la leggibilità. I media ricchi in genere richiedono un overlay più forte rispetto a immagini semplici o a basso contrasto.

Impostazioni dei colori

Queste impostazioni sostituiscono solo per questa sezione le scelte di colore più ampie. Usale quando l’hero necessita di un trattamento proprio per icona, titolo, testo o overlay senza influire sul resto della pagina.

Colore, sfumatura e opacità dell’overlay sono i controlli più importanti quando il contenuto appare sopra i media. Aumenta l’intensità dell’overlay quando il messaggio risulta difficile da leggere, e riducila quando i media devono rimanere più visibili. Per il comportamento condiviso dei colori, consulta documentazione Company XYZ su Impostazioni colore.

Tipi di blocco supportati

1. Breadcrumbs
2. Button
3. Heading
4. Icon with text
5. Image
6. Rich text
7. Search
8. Separator
9. Share/print UI
10. Video

Tipi di blocco

Intestazione

Usa il blocco Heading per il messaggio principale dell’hero o per un titolo di supporto. Include livello dell’intestazione, allineamento, icona opzionale e controlli colore a livello di blocco. Consulta documentazione Company XYZ sul blocco Heading.

Mantieni il testo breve e diretto. Nella maggior parte delle pagine, un titolo ben visibile abbinato a un blocco di testo breve è più facile da leggere rispetto a più titoli grandi sovrapposti.

Attenzione

Evita di usare più intestazioni H1 nella stessa pagina. Riserva il livello di intestazione più alto al titolo principale della pagina, quando necessario.

Testo ricco

Usa Rich text per testi di supporto, brevi introduzioni, testo con link o contenuti esplicativi concisi sotto il titolo principale. Consulta documentazione Company XYZ sul blocco Testo ricco.

In un hero, di solito funzionano meglio paragrafi brevi. Se aggiungi un colore di sfondo al blocco, verifica che resti bilanciato rispetto ai media e all’overlay della sezione.

Pulsante

Usa i blocchi Button per le azioni principali, come fare acquisti, consultare una collezione o proseguire più in profondità nella pagina. Puoi controllare stile, disposizione dell’icona, allineamento e comportamento della larghezza su mobile. Consulta documentazione Company XYZ sul blocco Pulsante.

La maggior parte dei layout hero funziona meglio con un’unica azione dominante. Aggiungi pulsanti extra solo quando supportano un percorso secondario chiaro.

Breadcrumbs

Breadcrumbs aiutano i visitatori a capire la propria posizione all’interno di strutture di pagina più profonde. In questa sezione, di solito si collocano sopra il messaggio principale e forniscono contesto senza dominare il layout. Consulta documentazione Company XYZ sul blocco Breadcrumbs.

Usa il link genitore opzionale quando il percorso predefinito necessita di una gerarchia più chiara. Mantieni uno stile sobrio in modo che il messaggio dell’hero resti il punto focale.

Icona con testo

Usa Icon with text per brevi punti di valore, elementi di fiducia o evidenziazioni concise. Consulta documentazione Company XYZ sul blocco Icona con testo.

Questi blocchi funzionano meglio quando ogni elemento ha una lunghezza e un tono simili. Mantieni il testo breve così che il gruppo resti facile da scorrere.

Immagine

Il blocco Image aggiunge media autonomi all’interno del flusso dei contenuti, separati dall’immagine in evidenza a livello di sezione. È utile per loghi, ritagli di prodotto, immagini di campagna o visual di supporto. Consulta documentazione Company XYZ sul blocco Immagine.

Usa le opzioni di rapporto d’aspetto, larghezza massima, didascalia e overlay per far sembrare l’immagine intenzionale all’interno dell’hero. Se utilizzi già media forti a livello di sezione, evita di aggiungere un’altra immagine che competa per l’attenzione.

Ricerca

Il blocco Search trasforma l’hero in un punto di ingresso incentrato sulla ricerca. Funziona particolarmente bene per cataloghi ampi, pagine di assistenza o homepage in cui i visitatori iniziano spesso cercando. Consulta documentazione Company XYZ sul blocco Ricerca.

Questo blocco include anche le proprie impostazioni di contenuto in stile banner e di presentazione dei risultati, quindi può diventare l’elemento focale principale. Mantieni minimo il contenuto dell’hero vicino quando la ricerca è l’attività principale.

Nota

I risultati predittivi si applicano solo quando la configurazione richiesta per la ricerca predittiva è attiva. Se tale configurazione non è presente, le opzioni di visualizzazione correlate non influiranno sull’esperienza.

Separatore

Usa i blocchi Separator per aggiungere respiro tra gli elementi dell’hero. Sono utili quando serve più spazio interno senza modificare il padding superiore e inferiore complessivo della sezione. Consulta documentazione Company XYZ sul blocco Separatore.

Anche all’altezza minima rimane un piccolo spazio tra gli elementi. Usa questo blocco per una separazione intenzionale invece di cercare di creare una pila senza spazi.

UI condividi/stampa

Questo blocco aggiunge azioni compatte di condivisione e stampa vicino alla parte superiore della pagina. È particolarmente utile in layout editoriali, guide o orientati all’utilità, dove queste azioni sono importanti fin dall’inizio. Consulta documentazione Company XYZ sul blocco UI condividi/stampa.

Posizionalo dove risulti disponibile ma non distraente. Deve supportare l’hero, non competere con la call to action principale.

Video

Il blocco Video inserisce il video direttamente nel flusso dei blocchi, il che è utile quando il video stesso fa parte del messaggio anziché essere solo un trattamento di sfondo. Supporta didascalie, overlay, comportamento di autoplay, immagini poster, limiti di larghezza e rapporti d’aspetto reattivi. Consulta documentazione Company XYZ sul blocco Video.

In genere, in questo spazio funzionano meglio clip brevi. Se usi autoplay o overlay, verifica sia lo stato in pausa sia quello in riproduzione in modo che didascalie e controlli restino chiari.

Impostazioni standard della sezione

Per i controlli dell’editor che si applicano a tutte le sezioni, consulta documentazione Shopify sull’editor del tema

Impostazioni di padding

Impostazioni di padding controllano lo spazio sopra e sotto il contenuto dell’hero su desktop e mobile. In questa sezione, il padding influisce molto su quanto l’hero appaia prominente e immersivo prima che i visitatori raggiungano la sezione successiva.

Usa più padding quando l’hero deve dare una sensazione più orientata alla campagna o più spaziosa. Riducilo quando il contenuto è breve o quando vuoi un accesso più rapido alla pagina sottostante.

Impostazioni dei separatori

Impostazioni dei separatori aggiungono linee opzionali al bordo superiore o inferiore della sezione. Aiutano a definire l’hero in modo più chiaro quando le sezioni adiacenti hanno colori o peso visivo simili.

Se lasci trasparente il colore del separatore, viene usato il comportamento standard del colore del bordo. I separatori discreti di solito funzionano meglio quando l’hero ha già immagini forti o contrasto elevato.

Impostazioni di visibilità

Impostazioni di visibilità ti consentono di nascondere la sezione su desktop o su mobile. È utile quando desideri layout diversi per l’inizio della pagina in base alle dimensioni dello schermo.

Usalo con attenzione se crei versioni alternative dello stesso messaggio. L’obiettivo è adattare il layout, non duplicare contenuti inutilmente.

Impostazioni di larghezza

Impostazioni di larghezza controllano la larghezza massima del contenuto e la larghezza esterna della sezione. In Hero, questo influisce sia sulla leggibilità del testo sia su quanto ampia appare l’eventuale gestione dello sfondo.

La larghezza del contenuto è il principale controllo di leggibilità. La larghezza della sezione è più importante quando si usano media di sfondo o quando vuoi che il contenitore dell’hero sembri più contenuto o più ampio.

Note sull’uso

1. Mantieni il messaggio focalizzato. Usa un titolo chiaro, testo di supporto breve e un’azione principale così che l’hero sia facile da capire a colpo d’occhio.
2. Scegli intenzionalmente il posizionamento dei media. I media di sfondo si adattano a visual atmosferici, mentre il posizionamento a sinistra o a destra funziona meglio quando l’immagine ha bisogno di più spazio dedicato.
3. Pianifica separatamente per mobile. Aggiungi un’immagine specifica per dispositivi mobili quando il ritaglio desktop non si adatta bene, e rivedi larghezza e allineamento dei pulsanti su schermi più piccoli.
4. Controlla entrambi gli stati per la ricerca. L’hero può apparire diverso prima e dopo una query, quindi verifica lo stato vuoto e lo stato con query digitata per confermare che il contenuto giusto resti in evidenza.
5. Verifica il comportamento responsive. I controlli desktop e mobile possono modificare allineamento, visibilità e presentazione dei media, quindi anteprima entrambi i viewport prima della pubblicazione.
6. Proteggi il contrasto del testo. Regola colore e opacità dell’overlay prima di cambiare tutti i colori del contenuto, soprattutto quando usi immagini ricche o video con autoplay.
7. Anteprima le modifiche alla larghezza sulla pagina live. I layout wide e full-bleed possono sembrare molto diversi fuori dall’editor, soprattutto quando l’hero si trova all’inizio di una pagina.