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.
Su questa pagina
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.
- Dal pannello di controllo Shopify vai a Negozio online > Temi.
- Trova il tema che desideri modificare e clicca su Personalizza.
- Dall'app di Shopify, tocca Negozio.
- Nella sezione Canali di vendita, tocca Negozio online.
- Tocca Gestisci temi.
- Trova il tema che desideri modificare e tocca Personalizza.
- Tocca Modifica.
- Dall'app di Shopify, tocca Negozio.
- Nella sezione Canali di vendita, tocca Negozio online.
- Tocca Gestisci temi.
- Trova il tema che desideri modificare e tocca Personalizza.
- Tocca Modifica.
- Clicca su Impostazioni tema.
- Clicca su Colori.
- 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.
- 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
- Dal pannello di controllo Shopify vai a Negozio online > Temi.
- Trova il tema che desideri modificare e clicca su Personalizza.
- Dall'app di Shopify, tocca Negozio.
- Nella sezione Canali di vendita, tocca Negozio online.
- Tocca Gestisci temi.
- Trova il tema che desideri modificare e tocca Personalizza.
- Tocca Modifica.
- Dall'app di Shopify, tocca Negozio.
- Nella sezione Canali di vendita, tocca Negozio online.
- Tocca Gestisci temi.
- Trova il tema che desideri modificare e tocca Personalizza.
- Tocca Modifica.
- Clicca su Impostazioni tema.
- Clicca su Colori.
Seleziona una delle opzioni di gradiente.
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.
- Clicca su Salva.
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:
- Dal pannello di controllo Shopify vai a Negozio online > Temi.
- Trova il tema che desideri modificare e clicca su Personalizza.
- Dall'app di Shopify, tocca Negozio.
- Nella sezione Canali di vendita, tocca Negozio online.
- Tocca Gestisci temi.
- Trova il tema che desideri modificare e tocca Personalizza.
- Tocca Modifica.
- Dall'app di Shopify, tocca Negozio.
- Nella sezione Canali di vendita, tocca Negozio online.
- Tocca Gestisci temi.
- Trova il tema che desideri modificare e tocca Personalizza.
- Tocca Modifica.
- Clicca su Impostazioni tema.
- Clicca su Colori.
- Clicca sul gradiente che desideri modificare.
- Clicca sulla freccia accanto a Gradiente e seleziona CSS.
- Nel campo Codice CSS digita o incolla il codice del gradiente. L'anteprima dell'editor del tema mostra il gradiente nella posizione corretta.
- Clicca su Salva.
Rimozione di un gradiente
Per reimpostare o rimuovere un gradiente:
- Dal pannello di controllo Shopify vai a Negozio online > Temi.
- Trova il tema che desideri modificare e clicca su Personalizza.
- Dall'app di Shopify, tocca Negozio.
- Nella sezione Canali di vendita, tocca Negozio online.
- Tocca Gestisci temi.
- Trova il tema che desideri modificare e tocca Personalizza.
- Tocca Modifica.
- Dall'app di Shopify, tocca Negozio.
- Nella sezione Canali di vendita, tocca Negozio online.
- Tocca Gestisci temi.
- Trova il tema che desideri modificare e tocca Personalizza.
- Tocca Modifica.
- Clicca su Impostazioni tema.
- Clicca su Colori.
- Clicca sul gradiente che desideri modificare.
- Clicca su Rimuovi gradiente.
- Clicca su Salva.