Impostazioni colore banner

Link in evidenza

1. documentazione Shopify sull’editor del tema
2. 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

Utilizzate questo gruppo di impostazioni per dare ai contenuti basati su banner un trattamento cromatico dedicato senza modificare il resto della tavolozza del tema. Questi controlli sostituiscono i colori predefiniti del tema per i banner, rendendoli utili per promozioni, annunci, contenuti hero e altre aree che richiedono un aspetto più distintivo. Per sapere dove vengono regolati questi impostazioni, consultate la documentazione Shopify sull’editor del tema. Per una panoramica più ampia su come sono կառուցite le aree banner, consultate la documentazione Shopify su sezioni e blocchi

Colori banner

I controlli colore principali definiscono la superficie del banner e il contenuto visualizzato su di essa. Potete definire l’aspetto generale con i colori di sfondo e bordo, quindi rifinire la gerarchia dei contenuti con colori separati per titoli, sottotitoli, testo e icone.

Per il risultato più pulito, scegliete prima il colore di sfondo e il colore principale del testo. Il colore del testo del banner funge da fallback per il contenuto testuale del banner quando non viene applicato un colore del testo più specifico, quindi è il punto di partenza migliore per stabilire un contrasto leggibile.

Create i colori del banner come un insieme, non un’impostazione alla volta. Se sfondo, testo, icone e bordi non condividono un chiaro schema di contrasto, il banner può risultare più difficile da leggere e meno intenzionale.

Gradienti e profondità visiva

Potete aggiungere un gradiente allo sfondo del banner quando un colore piatto sembra troppo semplice o pesante. Questa soluzione funziona bene per i banner che hanno bisogno di maggiore profondità visiva senza ricorrere a immagini aggiuntive.

Di solito un gradiente delicato appare più rifinito di uno molto marcato. Se il banner include già testo in grassetto, immagini forti o più livelli di contenuto, mantenere il gradiente discreto aiuta il messaggio a restare in primo piano.

Overlay e opacità

I controlli dell’overlay aggiungono uno strato colorato sopra l’area del banner, che può aiutare a separare il testo dallo sfondo. Questo è particolarmente utile quando il contenuto del banner si trova sopra immagini o altre superfici visivamente ricche.

I controlli di opacità dell’overlay determinano quanto diventa visibile quello strato. Un’impostazione di 0% rende l’overlay completamente trasparente, mentre l’impostazione di fallback usa l’opacità già definita nelle impostazioni del colore principali. Questo fallback è utile quando volete che gli overlay del banner restino allineati allo stile generale del sito.

Consiglio

Se il testo è difficile da leggere sopra un’immagine di sfondo, provate a rendere più forte l’overlay prima di modificare tutti i colori del testo. Un piccolo intervento sull’opacità spesso risolve la leggibilità in modo più pulito.

Bordi, icone e dettagli di supporto

I colori di bordo e delle icone aiutano a completare lo stile del banner, ma danno il meglio come accenti di supporto. Se sono troppo vicini allo sfondo, possono scomparire. Se sono molto più intensi del testo, possono distrarre dal messaggio principale.

Un buon approccio consiste nel mantenere i bordi discreti e usare il colore delle icone per supportare la gerarchia dei contenuti. Lasciate che titoli e azioni principali portino gran parte dell’enfasi visiva, a meno che il banner non debba essere guidato dalle icone.

Note sull’uso

1. Partite dal contrasto. Impostate prima lo sfondo e il colore principale del testo, così ogni altro colore del banner può essere regolato su una base leggibile.
2. Usate i gradienti con moderazione. Manteneteli discreti quando i banner includono già immagini forti, tipografia marcata o più livelli di contenuto.
3. Regolate gli overlay prima di riscrivere la tavolozza. Un overlay più forte spesso migliora la chiarezza del testo più rapidamente che cambiare diversi colori del testo e degli accenti.
4. Mantenete gli accenti secondari. I colori di bordo e delle icone devono rafforzare lo stile del banner senza diventare il punto focale principale.
5. Usate i fallback in modo intenzionale. I valori vuoti, trasparenti o dallo stile predefinito in genere mantengono lo stile circostante del banner, mentre colori e gradienti espliciti rendono l’area del banner più indipendente.