Schemi di colori

Diverse sezioni del tema, come Rich text, Banner immagine ed Elenco delle collezioni, ti permettono di selezionare uno schema di colori da applicare alla sezione dai colori che hai configurato nelle impostazioni del tema. Il tema ha uno schema di colori predefinito, che però può essere modificato in qualsiasi momento nell'editor del tema; se aggiungi i colori del tuo brand, garantirai un'applicazione coesiva della palette di colori in tutto il negozio online.

Impostazioni del colore

Lo sfondo e la spaziatura delle immagini possono essere impostati nell'editor del tema. Utilizza il menu a discesa per scegliere tra Elemento in risalto 1, Gradiente Elemento in risalto 1, Elemento in risalto 2, Gradiente Elemento in risalto 2, Sfondo 1, Gradiente Sfondo 1, Sfondo 2, Gradiente Sfondo 2 o Inverso. Puoi visualizzare in anteprima le combinazioni di colori selezionate nel pannello di anteprima dell'editor del tema.

Impostazione Descrizione
Testo Il colore può essere applicato alla sezione o al blocco di testo.
Elemento in risalto 1 Il colore può essere applicato ai pulsanti di impatto e agli sfondi di alcune sezioni.
Gradiente Elemento in risalto 1 Seleziona un gradiente preimpostato o utilizza il selettore di gradiente per personalizzare il gradiente dell'elemento in risalto.
Elemento in risalto 2 Il colore può essere applicato ai pulsanti di impatto e agli sfondi di alcune sezioni.
Gradiente Elemento in risalto 2 Seleziona un gradiente preimpostato o utilizza il selettore di gradiente per personalizzare il gradiente dell'elemento in risalto.
Sfondo 1 Il colore può essere applicato ai pulsanti di impatto e agli sfondi di alcune sezioni.
Gradiente Sfondo 1 Seleziona un gradiente preimpostato o utilizza il selettore di gradiente per personalizzare il gradiente di sfondo.
Sfondo 2 Il colore può essere applicato ai pulsanti di impatto e agli sfondi di alcune sezioni.
Gradiente Sfondo 2 Seleziona un gradiente preimpostato o utilizza il selettore di gradiente per personalizzare il gradiente di sfondo.
Inverso Il colore può essere applicato ai pulsanti di impatto e agli sfondi di alcune sezioni. Utilizza Sfondo 1 come colore del testo e il colore del testo come colore di sfondo.

Alcune delle impostazioni che ti permettono di scegliere uno schema di colori ti consentono anche di utilizzare i gradienti. Ad esempio, in Dawn, puoi configurare gradienti dei colori del tuo brand e utilizzarli al posto delle opzioni standard di colore di Elemento in risalto e di Sfondo.

Gestione dello schema di colori

Lo schema di colori del negozio viene impostato nelle impostazioni del tema.

  1. Clicca su Impostazioni tema in fondo alla sidebar.
  2. Clicca su Colori.
  3. Per modificare un colore del tema, cliccaci sopra e utilizza il selettore di colori oppure inserisci il valore del nuovo colore nel campo di testo.
  4. Clicca su Salva.

Per i colori a tinta unita, scegli il nuovo colore utilizzando il selettore di colori oppure inserisci il valore del colore nel campo di testo. Il campo accetta i nomi dei colore (ad esempio, red, black, blue), RGB o i valori di colore esadecimali.

Gradienti

Puoi configurare un gradiente di colore in Dawn per ottenere opzioni di sfondo visivamente interessanti. L'impostazione color_background viene utilizzata per personalizzare le proprietà CSS dello sfondo.

Il selettore di gradiente ti consente di selezionare colori, stile, angolo, posizione e opacità del gradiente. Le opzioni selezionate vengono visualizzate in anteprima in tempo reale nell'editor del tema. Puoi anche creare uno sfondo con gradiente utilizzando il codice CSS, che include uno strumento di verifica della convalida.

Configurazione delle sfumature

  1. Clicca su Impostazioni tema.
  2. Clicca su Colori.
  3. Seleziona una delle opzioni di gradiente.

    Se precedentemente non hai configurato un gradiente, verranno visualizzate diverse opzioni preimpostate tra cui scegliere; seleziona un gradiente preimpostato per aprire il pannello delle opzioni.

    Se hai già configurato un gradiente, cliccando su un'opzione di gradiente si aprirà direttamente il pannello delle opzioni.

  4. Seleziona le opzioni di gradiente:

  • Puoi scegliere tra un gradiente lineare o radiale. Utilizza i pulsanti per selezionare lo stile di gradiente che preferisci.
  • L'angolo della sfumatura può essere impostato con le frecce verso l'alto e il basso. Cliccando sui simboli, la percentuale dell'angolo aumenta o diminuisce di 5.
  • Usa il cursore per selezionare la posizione del gradiente o inserisci un valore numerico nel campo.
  • Puoi inserire il codice esadecimale di un colore specifico o utilizzare il cursore del colore per scegliere una tonalità. I colori selezionati di recente vengono visualizzati nella parte inferiore del pannello delle opzioni di gradiente.
  • Se desideri che il gradiente sia opaco, utilizza il cursore a destra per selezionarne la trasparenza. Puoi anche inserire una percentuale nel campo accanto al codice colore esadecimale.
  1. Clicca su Salva.

Selettore di gradiente nell'editor del tema

Utilizzo di CSS per la configurazione dei gradienti

La maggior parte dei valori delle proprietà CSS background può essere utilizzata per impostare un colore di sfondo. Puoi utilizzare questo campo per i colori a tinta unita (ad esempio, i codici #000000, black, rgb(0,0,0,0), rgba(0,0,0,0), hsl(0, 0%, 0%) e hsla(0, 0%, 0%, 1) produrranno tutti uno sfondo nero a tinta unita) oppure per i gradienti (ad esempio, inserendo linear-gradient(red, green), radial-gradient(red, green) o conic-gradient(red, green)). I gradienti possono anche essere ripetuti.

Procedura:

  1. Clicca su Impostazioni tema.
  2. Clicca su Colori.
  3. Clicca sul gradiente che desideri modificare.
  4. Clicca sulla freccia accanto a Gradiente e seleziona CSS.
  5. Nel campo Codice CSS digita o incolla il codice del gradiente. L'anteprima dell'editor del tema mostra il gradiente nella posizione corretta.
  6. Clicca su Salva.
    Campo Codice CSS del gradiente nell'editor del tema

Rimozione di un gradiente

Per reimpostare o rimuovere un gradiente:

  1. Clicca su Impostazioni tema.
  2. Clicca su Colori.
  3. Clicca sul gradiente che desideri modificare.
  4. Clicca su Rimuovi gradiente.
  5. Clicca su Salva.

Sei pronto per iniziare a vendere con Shopify?

Provalo, è gratis