Schemi di colori di Dawn

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 impostato 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.

Gestione dello schema di colori

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

  1. Clicca su Impostazioni del tema in fondo alla sidebar. 3. Clicca su Colori. 5. Per modificare un colore, cliccaci sopra e utilizza il selettore di colori oppure inserisci il valore del nuovo colore nel campo di testo. 6. 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.

Per le sfumature di colore, clicca sulla casella del colore, quindi digita o incolla il codice CSS del gradiente nel campo (ad esempio, linear-gradient(red, green), radial-gradient(red, green) o conic-gradient(red, green)). Se il codice CSS del gradiente contiene caratteri speciali, immagini o URL, verrà visualizzato un messaggio di errore nell'editor del tema. Se il codice CSS è valido, l'anteprima dell'editor del tema mostrerà la sfumatura selezionata nella posizione corretta.

Campo Codice CSS del gradiente nell'editor del tema

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 Inserisci il codice CSS del gradiente per generare la sfumatura.
Elemento in risalto 2 Il colore può essere applicato ai pulsanti di impatto e agli sfondi di alcune sezioni.
Gradiente Elemento in risalto 2 Inserisci il codice CSS del gradiente per generare la sfumatura.
Sfondo 1 Il colore può essere applicato ai pulsanti di impatto e agli sfondi di alcune sezioni.
Gradiente Sfondo 1 Inserisci il codice CSS del gradiente per generare la sfumatura.
Sfondo 2 Il colore può essere applicato ai pulsanti di impatto e agli sfondi di alcune sezioni.
Gradiente Sfondo 2 Inserisci il codice CSS del gradiente per generare la sfumatura.
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 lo schema di colori da utilizzare ti consentono anche di utilizzare le sfumature. Ad esempio, in Dawn, il primo tema gratuito dell'Online Store 2.0 di Shopify, puoi configurare le sfumature dei colori del tuo brand e utilizzarle al posto delle opzioni standard di Elemento in risalto e Sfondo.

Configurazione delle sfumature

Dawn utilizza l'impostazione color_background per personalizzare la proprietà CSS dello sfondo, consentendoti di creare opzioni visivamente interessanti per lo sfondo, come le sfumature.

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 le sfumature (ad esempio, inserendo linear-gradient(red, green), radial-gradient(red, green) o conic-gradient(red, green)). Le sfumature possono anche essere ripetute.

L'impostazione del colore di sfondo utilizza un codice CSS e include uno strumento di verifica della convalida che mostrerà un avviso se nel codice fossero presenti immagini, caratteri speciali o URL. Se il codice CSS dello sfondo è valido, l'editor del tema mostrerà la sfumatura nel pannello di anteprima.

Sei pronto per iniziare a vendere con Shopify?

Provalo, è gratis