Banner

Link in evidenza

1. Documentazione Company XYZ sul blocco Banner
2. documentazione Shopify sulle sezioni e i blocchi
3. Documentazione Company XYZ sull’utilizzo dei video
4. Documentazione Company XYZ sulle icone
5. Documentazione Company XYZ sulle impostazioni dei colori del banner
6. Documentazione Company XYZ sulle impostazioni di visibilità
7. documentazione Shopify sull’editor del tema

Video utili

Video di Shopify Academy: personalizzare il tuo negozio

Video di Shopify Academy: personalizzare il tuo negozio

Utilizzate il blocco Banner per creare qualsiasi cosa, da una semplice striscia di annuncio a una promozione più visiva con media di sfondo, testo sovrapposto e una chiara call to action. Supporta media separati per mobile, immagini in primo piano opzionali e controllo dei colori per blocco, così potete adattare ogni banner al messaggio che deve comunicare. Per un riferimento a livello di campo, consultate la documentazione Company XYZ sul blocco Banner.

Per una panoramica più ampia sul funzionamento dei blocchi nell’editor, consultate la documentazione Shopify su sezioni e blocchi

Impostazioni principali

Iniziate scegliendo il rapporto d’aspetto del banner. I rapporti fissi sono utili quando desiderate una forma più curata e guidata dall’immagine, mentre Default funziona meglio quando è il contenuto stesso a determinare l’altezza.

Potete impostare un rapporto separato per mobile se la forma desktop sembra troppo alta, troppo bassa o troppo compressa su schermi più piccoli. Se il rapporto mobile rimane su Default, segue l’impostazione del rapporto principale.

Nota

Il blocco si espande se il suo contenuto necessita di più spazio di quanto consenta il rapporto selezionato. Questo aiuta a evitare che testo e pulsanti vengano tagliati.

Sfondo banner

Questo gruppo controlla il trattamento dello sfondo del banner. Usatelo per aggiungere il livello visivo principale dietro il contenuto in primo piano.

Potete usare un’immagine o un video, con versioni separate per mobile quando necessario. Questo è particolarmente utile quando il materiale grafico desktop viene ritagliato in modo poco armonioso su schermi più piccoli o quando desiderate una composizione mobile più leggera e più focalizzata.

L’adattamento dell’immagine di sfondo controlla come i media immagine riempiono l’area del banner. Cover è di solito la scelta migliore per immagini immersive, mentre Contain è preferibile quando è necessario mantenere visibile l’intera immagine.

Evitate di inserire testo essenziale o dettagli del prodotto all’interno della grafica di sfondo, a meno che non abbiate verificato come viene ritagliata sia su desktop sia su mobile.

Se usate un video, mantenetelo breve e visivamente semplice, così il contenuto in primo piano resta leggibile. Per indicazioni sui file e consigli pratici di configurazione, consultate using video.

Primo piano banner

Questo gruppo controlla il contenuto mostrato sopra lo sfondo. Qualsiasi campo lasciato vuoto resta nascosto, il che rende facile mantenere il blocco essenziale.

Usate l’allineamento orizzontale e verticale per posizionare il contenuto nel punto più naturale all’interno del banner. I layout centrati sono in genere adatti a messaggi semplici, mentre i layout allineati in basso o ai bordi spesso funzionano meglio per promozioni guidate dall’immagine.

Potete combinare un’icona, una didascalia, un titolo e un sottotitolo per creare una gerarchia chiara dei contenuti. Per i campi icona, potete inserire un’emoji o il nome di un’icona; consultate la guida alle icone per l’uso supportato.

Scegliete il tipo di titolo in base al ruolo del banner nella pagina. Un livello di titolo più forte è adatto a un messaggio promozionale principale, mentre uno stile di testo più leggero è migliore quando il banner è più di supporto che dominante.

Le impostazioni del pulsante controllano l’azione principale del banner, inclusi testo, trattamento dell’icona, dimensione e layout. Un pulsante mobile a larghezza piena può migliorare la facilità di tocco quando il banner è incentrato soprattutto sull’azione.

Lo stile del link modifica quanto il banner diventa cliccabile. Un link su tutto il blocco può rendere i banner promozionali più facili da utilizzare, ma influisce sui link all’interno dell’area di testo.

Attenzione

Gli stili di link su tutto il blocco rimuovono i link dal testo del sottotitolo. Usateli solo quando l’intero banner deve puntare a una sola destinazione.

Aprite i link in una nuova scheda solo quando questo comportamento supporta chiaramente il percorso del cliente, ad esempio collegando a una campagna esterna o a una risorsa di supporto.

Media in primo piano del banner

Usate i media in primo piano quando desiderate visualizzare un’immagine aggiuntiva insieme al testo, come un logo, un badge, il ritaglio di un prodotto o una grafica di campagna. Questa soluzione funziona bene quando lo sfondo è più atmosferico e l’immagine promozionale deve rimanere nitida e controllata.

Lo stile dell’immagine vi aiuta ad adattare il trattamento visivo al resto del banner. L’impostazione della larghezza vi consente di mantenere l’immagine discreta o di renderla più dominante, e impostandola a 0 le permette di estendersi su tutto lo spazio disponibile.

Potete anche aggiungere un link all’immagine in primo piano. Se il blocco ha già un pulsante principale forte o uno stile di link su tutto il blocco, mantenete semplice il comportamento di clic, così l’azione principale resta evidente.

Colori banner

Queste impostazioni sostituiscono il trattamento di colore predefinito del banner solo per questo blocco. Usatele quando un banner necessita di uno stile specifico per la campagna, di un contrasto più forte o di un trattamento overlay personalizzato. Per i dettagli sulle impostazioni, consultate la documentazione Company XYZ sulle impostazioni dei colori del banner.

Potete regolare i colori di sfondo, bordo, titolo, icona, sottotitolo, testo e overlay, incluse le opzioni sfumatura. Nella maggior parte dei casi, la decisione più importante è stabilire se il contenuto in primo piano rimane leggibile sopra il media di sfondo scelto.

L’opacità dell’overlay è particolarmente utile quando l’immagine o il video di sfondo sono ricchi di elementi. Un overlay leggermente più intenso spesso migliora la leggibilità in modo più pulito rispetto alla modifica aggressiva di ogni colore del testo.

Impostazioni standard del blocco

Impostazioni di visibilità

Usate i controlli di visibilità per mostrare il blocco su tutti i dispositivi, solo su desktop o solo su mobile. Questo è utile quando desiderate layout o grafiche del banner separati per diverse dimensioni dello schermo. Per i dettagli sulle impostazioni, consultate la documentazione Company XYZ sulle impostazioni di visibilità.

Se create versioni separate per desktop e mobile, mantenete allineati il messaggio e la destinazione, così i clienti non incontrano promozioni in conflitto. Per le basi dell’editor, consultate la documentazione Shopify sull’editor del tema

Note sull’uso

1. Scegliete il rapporto in base allo scopo. Usate un rapporto fisso per promozioni visive e una configurazione più flessibile quando il banner contiene testo più lungo o più elementi di contenuto.
2. Pianificate separatamente i media per mobile. Aggiungete immagini o video specifici per mobile quando lo sfondo desktop viene ritagliato male o risulta troppo carico su schermi più piccoli.
3. Mantenete una sola azione principale. Usate pulsanti, media in primo piano collegati e link su tutto il blocco con attenzione, così il banner mantiene un solo percorso di clic chiaro.
4. Date priorità alla leggibilità. Regolate insieme l’intensità dell’overlay e i colori del testo finché il messaggio resta facile da leggere su tutti i media di sfondo.
5. Usate in modo intenzionale la visibilità per dispositivo. Create banner separati per desktop e mobile solo quando il layout o la grafica devono davvero cambiare.
6. Controllate entrambe le viewport. Verificate allineamento, ritaglio dei media e visibilità dei controlli su desktop e mobile prima della pubblicazione, perché ogni layout può comportarsi in modo diverso.
7. Preservate, quando possibile, lo stile di fallback. Lasciate i campi colore non impostati quando volete che il banner erediti l’aspetto circostante; usate colori espliciti, sfumature o override dei media solo quando il banner deve distinguersi.
8. Mantenete leggibili gli stati del modulo. Se il banner include input del cliente, assicuratevi che gli stati vuoto, inviato, di convalida e di errore restino facili da leggere sopra il media scelto.