Banner

Link in evidenza

1. Documentazione Shopify su sezioni e blocchi
2. Documentazione di Company XYZ sull’utilizzo dei video
3. Documentazione di Company XYZ sulle icone
4. Documentazione di Company XYZ sulle impostazioni dei colori dei banner
5. Documentazione di Company XYZ sulle impostazioni del padding della sezione
6. Documentazione di Company XYZ sulle impostazioni degli sfondi delle sezioni
7. Documentazione di Company XYZ sulle impostazioni dei separatori
8. Documentazione di Company XYZ sulle impostazioni di visibilità
9. Documentazione di Company XYZ sulle impostazioni delle larghezze del layout
10. Documentazione Shopify sulla personalizzazione delle sezioni
11. Documentazione Shopify sull’editor del tema

Video utili

Video Shopify Academy: personalizzare il tuo negozio

Video Shopify Academy: personalizzare il tuo negozio

Usa Banner per creare una singola funzionalità promozionale con media stratificati, testo e una call to action opzionale. Funziona bene per sezioni hero, annunci, campagne stagionali e messaggi del brand, e può espandersi se il contenuto richiede più altezza di quella fornita dal rapporto selezionato. Per una panoramica più ampia, consulta documentazione Shopify sulle sezioni e i blocchi

Impostazioni principali

Le impostazioni principali di layout controllano la forma del banner su desktop e mobile. Scegli un rapporto d’aspetto fisso quando desideri una cornice visiva forte, oppure usa il rapporto predefinito quando la lunghezza del contenuto può cambiare e il banner deve adattarsi in modo più naturale.

Su mobile può essere usato un rapporto proprio, utile quando il ritaglio desktop appare troppo basso sui display più piccoli. Un rapporto mobile più alto spesso offre più spazio a testo, volti e dettagli del prodotto senza richiedere un’immagine separata.

Consiglio

Se parti importanti dello sfondo risultano compresse su mobile, prova un rapporto mobile più alto prima di sostituire l’asset.

Sfondo del banner

Questo gruppo controlla l’area di sfondo del banner, separata dallo sfondo della sezione esterna. Puoi usare un’immagine o un video e, facoltativamente, fornire media specifici per mobile quando la versione desktop non si ritaglia bene sui display più piccoli.

Il riempimento dell’immagine di sfondo determina se il media riempie l’area del banner o rimane completamente visibile all’interno di essa. Usa un approccio di riempimento quando il banner deve risultare immersivo, e un approccio contenuto quando è più importante preservare l’intera grafica rispetto alla copertura da bordo a bordo.

Se aggiungi contenuto in primo piano, ricorda che il banner può crescere in altezza per adattarsi. Quell’altezza extra può cambiare il ritaglio del media di sfondo.

Rivedi i banner con testo più lungo o con media aggiunti in primo piano sia su desktop sia su mobile, poiché l’altezza del contenuto può modificare in modo evidente il ritaglio dello sfondo.

Per gli sfondi video, mantieni le clip brevi e visivamente chiare in modo che il messaggio funzioni anche senza audio. Le indicazioni sui file video sono disponibili in documentazione Company XYZ su uso dei video.

Primo piano del banner

Questo gruppo controlla il contenuto sovrapposto allo sfondo. Puoi combinare un’icona, una didascalia, un titolo, testo di supporto e una singola azione principale, e qualsiasi contenuto vuoto rimane nascosto.

L’allineamento orizzontale e verticale aiuta a posizionare il messaggio all’interno del banner. L’allineamento in basso spesso si adatta ai banner centrati sull’immagine, mentre il posizionamento centrato di solito funziona meglio per messaggi promozionali semplici.

Scegli il tipo di titolo in base al ruolo del banner nella pagina. Usa un livello di titolo quando il banner introduce una sezione principale, e usa uno stile paragrafo quando il testo è più decorativo o ripetuto altrove.

Le impostazioni del pulsante controllano etichetta, icona, dimensione e layout. I pulsanti mobile a larghezza intera possono migliorare il comfort del tocco quando il banner funge da punto di ingresso principale.

Lo stile del link cambia quanta parte del banner è cliccabile. Gli stili a blocco intero possono rendere il banner più facile da usare, ma rimuovono i link dal testo del sottotitolo.

Attenzione

Se il sottotitolo contiene link di testo importanti, evita uno stile di link a blocco intero così che quei link restino utilizzabili.

Per le icone, puoi usare emoji o nomi di icone supportati. Le indicazioni sulle icone sono disponibili in documentazione Company XYZ su icone.

Media in primo piano del banner

Usa media in primo piano quando il banner ha bisogno di un livello visivo aggiuntivo come un logo, un badge, un ritaglio di prodotto o un’immagine secondaria. Questo media appare accanto al contenuto testuale anziché dietro di esso.

Lo stile dell’immagine aiuta il media a risultare più editoriale o più simile a un badge. Trattamenti arrotondati o circolari spesso si adattano a loghi e ritratti, mentre lo stile predefinito è di solito migliore per le immagini di prodotto.

La larghezza massima dell’immagine è lo strumento principale per mantenere il media proporzionato al testo. Se l’immagine inizia a dominare il banner, riduci la sua larghezza prima di accorciare il testo.

Puoi anche aggiungere un link all’immagine in primo piano. Questo è utile quando l’immagine rappresenta un brand, una collezione o un prodotto in evidenza e deve fungere da proprio punto di ingresso visivo.

Colori del banner

Queste impostazioni sostituiscono le normali scelte di colore del banner solo per questa sezione. Usale quando il banner necessita di una palette specifica per la campagna, di un contrasto testo più forte o di un trattamento overlay personalizzato.

Il colore e l’opacità dell’overlay sono particolarmente utili quando l’immagine o il video di sfondo sono visivamente ricchi. In molti casi, regolare l’overlay migliora la leggibilità in modo più pulito che cambiare ogni colore del testo.

Se usi sia un colore pieno sia un gradiente, il gradiente ha priorità dove applicabile. Lo stesso vale per i gradienti dell’overlay.

Le indicazioni sui colori per i banner sono disponibili in documentazione Company XYZ su Impostazioni colore banner.

Impostazioni standard della sezione

Impostazioni di padding

Impostazioni di padding controllano lo spazio sopra e sotto la sezione Banner. Usa uno spaziamento più ridotto quando il banner deve collegarsi da vicino ai contenuti vicini, e uno spaziamento più generoso quando deve distinguersi come momento in evidenza.

Poiché i banner sono spesso visivamente dominanti, piccole modifiche al padding possono avere un grande effetto sul ritmo della pagina. Controlla lo spazio sia su desktop sia su mobile.

Impostazioni dello sfondo sezione

Impostazioni dello sfondo sezione influenzano il contenitore esterno della sezione anziché il banner stesso. Questo è utile quando vuoi che il banner si trovi all’interno di un’area incorniciata più ampia o quando la sezione circostante ha bisogno di una propria immagine, video, colore o overlay.

Fai attenzione quando combini uno sfondo della sezione esterna con il media di sfondo del banner. Usarli entrambi può risultare eccessivo, a meno che tu non stia costruendo intenzionalmente un design stratificato o inserito.

Impostazioni dei separatori

Impostazioni dei separatori aggiungono una linea nella parte superiore o inferiore della sezione. Aiutano a definire il banner quando si trova tra sezioni con colori o spaziatura simili.

Mantieni i separatori discreti se il banner include già immagini forti, bordi o contrasto. Troppe linee visive possono rendere il layout pesante.

Impostazioni di visibilità

Impostazioni di visibilità ti consentono di mostrare o nascondere questa sezione in base alla dimensione del dispositivo. Questo è utile quando desideri un layout del banner separato per desktop e mobile.

Se crei versioni specifiche per dispositivo, mantieni coerenti messaggio e destinazione in modo che i visitatori non vedano promozioni diverse a seconda della dimensione dello schermo.

Impostazioni di larghezza

Impostazioni di larghezza controllano sia la larghezza del contenuto all’interno del banner sia la larghezza del contenitore della sezione. Usa la larghezza del contenuto per gestire la leggibilità, e la larghezza della sezione per decidere se il banner deve sembrare contenuto, a larghezza intera o da bordo a bordo.

Queste modifiche possono apparire diverse nell’editor rispetto alla pagina live, specialmente nei layout più ampi. Visualizza in anteprima gli aggiornamenti della larghezza nella vetrina prima di finalizzarli. Per i controlli dell’editor, vedi documentazione Shopify sulla personalizzazione delle sezioni e documentazione Shopify sull’editor del tema

Note sull’uso

1. Abbina il rapporto al messaggio. Usa rapporti fissi per campagne centrate sull’immagine, e usa il rapporto predefinito quando un testo più lungo o media aggiunti richiedono un’altezza flessibile.
2. Pianifica presto il ritaglio su mobile. Aggiungi un rapporto o un asset media specifico per mobile quando lo sfondo desktop nasconde punti focali importanti sui display più piccoli.
3. Rivedi entrambi i breakpoint. I controlli desktop e mobile possono produrre comportamenti diversi di allineamento, visibilità e media, quindi visualizza in anteprima il banner su entrambe le dimensioni del viewport prima della pubblicazione.
4. Usa gli overlay per la leggibilità. Regola il colore e l’opacità dell’overlay del banner prima di riscrivere il testo o cambiare più colori del testo.
5. Mantieni chiara l’azione. Usa un pulsante forte e scegli gli stili di link a blocco intero solo quando l’intero banner deve portare a una singola destinazione.
6. Visualizza in anteprima il comportamento reale della larghezza. Controlla la pagina live dopo aver modificato le impostazioni di larghezza o di sfondo, poiché le anteprime dell’editor possono sottostimare i cambiamenti di spaziatura e ritaglio.