Scegli una palette di colori per il tuo sito, quindi applica colori specifici alle diverse sezioni di pagina.
Che tu preferisca un tema in bianco e nero o combinazioni di colori audaci, puoi utilizzare Stili sito e stili di sezione per modificare i colori del sito.
Questa guida offre una panoramica su come modificare i colori per i diversi elementi del sito.
Guarda un video
Prima di iniziare
- Le modifiche di colore apportate in Stili sito si applicano a tutto il sito. La modifica di un elemento di una pagina, ad esempio il Testo pulsante, comporta la modifica in tutte le aree che utilizzano quel tema (versione 7.1) o in tutte le pagine (versione 7.0).
- Nei Blocchi di testo della versione 7.1, puoi modificare il colore di una specifica parte di testo, ad esempio una singola lettera o parola in una frase. Per eseguire questa operazione nella versione 7.0 o in altre aree di testo, utilizza un Blocco Markdown.
- Se hai esperienza di codifica, puoi provare ad apportare modifiche di colore mirate con i CSS. Ricorda che il codice personalizzato non rientra nell'ambito della nostra assistenza.
- Se il sito è nella versione 7.0, la procedura da seguire per modificare i colori è diversa. Consulta la sezione seguente per i passaggi specifici.
- Per suggerimenti su come scegliere i colori migliori per il tuo sito, visita Scegliere i tipi di carattere e i colori più adatti.
Modificare i colori del sito
Per modificare tutti i colori del sito, scegli una tavolozza di colori:
- Durante la modifica di una pagina, clicca sull'icona del pennello nell'angolo in alto a destra, quindi clicca su Colori.
- Clicca su Modifica tavolozza per scegliere una nuova tavolozza di colori. Puoi scegliere tra questi tipi di tavolozze di colori:
- Preimpostate - Scegli tra una serie di tavolozze preimpostate di colori selezionati.
- Da immagine - Carica un'immagine per creare una tavolozza basata sui colori principali dell'immagine.
- Da colore - Scegli un colore primario utilizzando il selettore di colore e crea tavolozze abbinate a quel colore.
- Per salvare le modifiche, passa il mouse su Fatto nell'angolo in alto a sinistra dell'editor di pagina e clicca su Salva.
Ricorda:
- Tutte le tavolozze includono sempre il bianco e il nero, che vengono generalmente utilizzati per il testo.
- Quando generi una tavolozza da un'immagine, i colori vengono estratti dai tre colori predominanti dell'immagine.
- In qualsiasi tavolozza, puoi utilizzare l'editor di tavolozze per personalizzare ogni colore.
Modificare i colori della sezione
La tavolozza dei colori genera diversi temi di colore per le sezioni della pagina. Dopo aver impostato i colori a livello di sito, è possibile modificare il tema dei colori di qualsiasi sezione per conferirgli un aspetto peculiare.
Per verificare il tema utilizzato da una sezione:
- Durante la modifica di una pagina, clicca sull'icona del pennello, quindi su Colori.
- Scorri l'anteprima della tua pagina ed esamina le etichette del tema sezione in ogni sezione.
Nota: se vedi una casella vuota su una sezione, anziché un'etichetta del tema, il colore dell'Intestazione (Grande) è probabilmente impostato sullo stesso colore di quello dello Sfondo della sezione. Per visualizzare l'etichetta del tema, clicca sul tema che appare anche vuoto nel menu Colori, quindi modifica Intestazione (Grande) usando un nuovo colore. Per la procedura dettagliata, consulta la sezione seguente.
Per modificare il tema del colore di una sezione:
- Apri il pannello Pagine.
- Seleziona la pagina che desideri modificare e clicca su Modifica nell'angolo in alto a sinistra.
- Clicca su Modifica sezione o sull'icona della matita nella sezione che desideri modificare.
- Nella scheda Colori, clicca su un tema per applicarlo alla sezione.
- Le modifiche restano attive mentre modifichi altri contenuti della pagina. Per salvarle, passa il mouse su Fatto nell'angolo in alto a sinistra dell'editor di pagina e clicca su Salva.
Nota: la modifica del tema colore di una sezione ripristina tutti i colori per quella sezione, incluse eventuali modifiche al colore del testo apportate nella barra degli strumenti del Blocco di testo.
Tipi di temi
Il tipo di tema (1 o2) determina quale colore si applica al testo principale di una sezione e quale colore si applica agli altri elementi:
- Chiarissimo 1, Chiaro 1, Scuro 1 e Scurissimo 1 - Il testo e le intestazioni sono in nero o in bianco e gli altri colori si applicano allo sfondo e agli elementi più piccoli del sito.
- Chiarissimo 2, Chiaro 2, Scuro 2 e Scurissimo 2 - Il colore sul lato sinistro della tavolozza si applica a tutto il testo e alle intestazioni; gli altri colori si applicano allo sfondo e agli elementi più piccoli del sito.
- Brillante - Il colore sul lato sinistro della tavolozza si applica al testo (Brillante 1) o allo sfondo (Brillante 2) e gli altri colori si applicano allo sfondo e agli elementi più piccoli del sito.
In alcuni casi, i colori del testo e dei pulsanti sono bianchi o neri per opzione predefinita, per creare un contrasto migliore rispetto al colore di sfondo.
Temi per altre aree del sito
Segui gli step riportati di seguito per trovare i temi colore per queste aree del tuo sito:
- Barra degli annunci - La barra degli annunci riprende sempre il tema colore dell'intestazione.
- Pulsante menu in sovrapposizione su dispositivi mobili mobile - I colori di sovrapposizione su dispositivi mobili sono impostati nell'intestazione.
- Sfondo sezione - Apri il pannello Colori e cerca l'etichetta del tema, quindi clicca su quel tema per aprire tutti i colori. Cerca il colore accanto a Sfondo sezione.
- Pagine integrate: la pagina 404 predefinita, la pagina del carrello, la pagina di conferma d'ordine e la pagina di ricerca integrata utilizzano tutti il tema cromatico predefinito del modello.
Personalizzare i colori del tema
Puoi personalizzare ulteriormente qualsiasi tema impostando colori specifici per i diversi elementi del sito. Le modifiche apportate ai colori di un tema vengono applicate a tutte le aree del sito che utilizzano tale tema.
Per modificare un tema:
- Durante la modifica di una pagina, clicca sull'icona del pennello, quindi su Colori.
- Clicca sul tema che desideri modificare.
- Clicca sul tweak che desideri modificare, quindi scegli un nuovo colore. Puoi utilizzare un colore preimpostato dalla scheda Tavolozza oppure cliccare su Personalizza per utilizzare il selettore di colore. Potrebbe essere necessario scorrere per visualizzare tutti i tweak.
- Utilizza il cursore di opacità per modificare la trasparenza.
- Per annullare qualsiasi modifica prima di salvare, clicca sull'icona di annullamento nella parte superiore del pannello o clicca sul punto accanto a un tweak specifico.
Le modifiche restano attive mentre modifichi altri contenuti della pagina. Per salvarle, passa il mouse su Fatto nell'angolo in alto a sinistra dell'editor di pagina e clicca su Salva.
Mentre cambi i colori del tema, tieni a mente questi suggerimenti:
- Se non sei sicuro del tema da modificare, cerca l'etichetta del tema nell'area della pagina che desideri modificare.
- Il menu Modifica tema mostra tutti i possibili tweak di colore per il tuo sito, anche se la pagina che stai modificando non include tali elementi. Ad esempio, tutte le opzioni di colore del blog verranno visualizzate anche se stai modificando una Pagina di layout.
- Se una sezione dispone di un'immagine di sfondo, utilizza il tweak Sovrapposizione sfondo per impostare l'opacità del colore di sovrapposizione. Se la sezione utilizza un colore di sfondo o un video, utilizzare Sfondo sezione per impostare il colore di sfondo.
Il selettore di colore
Utilizza il selettore di colore per scegliere un colore personalizzato per un elemento del sito. Ogni tweak di colore ha un cerchio accanto all'etichetta. Questo cerchio mostra il colore attuale per un determinato elemento.
Per scegliere un nuovo colore, fai clic sul cerchio di colore accanto al tweak che desideri modificare. Fai clic sul cursore inferiore per selezionare un colore, quindi fai clic sul quadrato sopra per scegliere una tonalità.
Se conosci il valore del colore desiderato, puoi anche cliccare sul campo valore per modificarlo. Il campo valore accetta i seguenti formati:
- HEX - Esempio: #FFFFFF
- RGB o RGBa - Esempio: rgba (255, 0, 149, 1)
- HSL/HSLA - Esempio: hsla (325, 100%, 50%, 1)
- HTML (deve essere minuscolo) - Esempio: white (il linguaggio HTML accetta il nome dei colori solo in inglese)
Per informazioni su come trovare il valore di un colore specifico, puoi visitare siti esterni quali color-hex.com o imagecolorpicker.com.
Suggerimento: il campo valore si riempie automaticamente quando utilizzi il cursore del colore per trovare un colore. Puoi copiare e incollare questo codice per aggiungere lo stesso colore agli altri tweak nel tema.
Trasparenza
Per modificare la trasparenza di un colore, usa il cursore di opacità trascinando il cerchio sotto il selettore di colore. Il cursore di opacità è particolarmente utile per i colori di sovrapposizione, che vengono visualizzati sulle immagini.
- Nella versione 7.1 è possibile modificare solo la trasparenza dei colori della tavolozza.
- Nella versione 7.0 alcuni tweak di colore non includono un cursore di opacità.
Suggerimento: se usi il cursore di opacità per rendere trasparente lo sfondo di una sezione, potresti rendere visibile il colore di sfondo del tema colore predefinito del modello.
Modificare il colore del bordo inset
Quando una sezione ha un'immagine di sfondo, puoi visualizzare l'immagine in modalità Smarginatura completa o Inset.
- L'opzione Smarginatura completa estende le dimensioni dell'immagine da un margine della finestra del browser all'altro, per l'intera larghezza del tuo sito.
- Inset indenta leggermente l'immagine e crea un bordo attorno ad essa.
Quando l'immagine è impostata su Inset, puoi modificare il colore del bordo:
- Durante la modifica di una pagina, clicca sull'icona del pennello, quindi su Colori.
- Clicca sul tema colore per la sezione che desideri modificare.
- In In tutto il sito, clicca su Bordo inset e scegli un colore.
- Le modifiche restano attive mentre modifichi altri contenuti della pagina. Per salvarle, passa il mouse su Fatto nell'angolo in alto a sinistra dell'editor di pagina e clicca su Salva.
Modifica dei colori di sfondo dei blocchi
I colori di sfondo dei blocchi sono supportati solo sui siti della versione 7.1.
Alcuni blocchi includono una funzione di colore di sfondo. Questo è un ottimo modo per far risaltare un blocco o per rendere più visibili i blocchi sovrapposti in Editor fluido. Aggiungi colori di sfondo ai seguenti blocchi attivando l'interruttore Sfondo nella scheda Design del blocco:
- Blocchi a fisarmonica
- Blocchi Newsletter
- Blocchi Citazione
- Blocchi riepilogo
- Blocchi di testo
Lo sfondo è impostato dalla combinazione di colori della sezione. Per cambiare il colore di sfondo del blocco:
- Dopo aver abilitato uno sfondo a blocchi, fai clic sull'icona del pennello per aprire gli stili del sito, quindi fai clic su Colori.
- Passa il mouse sul tema cromatico usato nella sezione del sito e clicca sull'icona della matita.
- Trova il tweak Sfondo nelle impostazioni del blocco che desideri modificare, quindi clicca sul cerchio per modificare il colore.
- Dopo aver apportato le modifiche, passa il mouse su Fatto nell'angolo in alto a sinistra e clicca su Salva.
Tieni presente che il colore di Sfondo verrà applicato a tutti i blocchi dello stesso tipo nelle sezioni con lo stesso tema cromatico. Ad esempio, se imposti lo sfondo del blocco di testo su rosso nel tema Chiarissimo 1, tutti i blocchi di testo con sfondi abilitati nelle sezioni Chiarissimo 1 avranno sfondi rossi.
Temi colore predefiniti
Ogni modello in versione 7.1 ha un tema colore predefinito. Questo tema viene applicato automaticamente alle seguenti pagine integrate del sito:
- Schermata di accesso negato
- Pagina di ricerca integrata
- Pagina 404 predefinita
- Pagina di conferma dell'ordine
- Pagina del carrello
Non è possibile assegnare un tema diverso a queste aree del sito, ma si possono apportare modifiche al tema predefinito per personalizzarle. Per trovare il tema predefinito del tuo modello, apri la pagina 404 predefinita:
- Chiudi l'anteprima del sito.
- Passa a una pagina che non esiste aggiungendo una stringa di lettere alla fine del tuo dominio, ad esempio /xyz.
- Apri il pannello Stili sito.
- Fai clic su Colori e cerca l'etichetta del tema.
- Apporta le modifiche ai colori del tema, quindi passa il mouse su Fatto nell'angolo in alto a sinistra e clicca su Salva.
- Aggiorna la pagina 404 per rivedere le modifiche apportate.
Spazio tra sezione di pagina e piè di pagina
Nelle pagine con una sola sezione o pagine molto corte, potrebbe apparire uno spazio tra l'ultima sezione di pagina e il piè di pagina. Lo spazio segue il colore di sfondo sezione del tema predefinito.
Quando lo spazio è di un colore diverso, ad esempio quando la sezione e il piè di pagina utilizzano temi cromatici diversi da quelli predefiniti, potrebbe essere più evidente.
Per risolvere questo problema, imposta il colore di sfondo sezione del tema predefinito in modo che corrisponda al colore di sfondo sezione del tema della sezione di pagina o del piè di pagina.
Suggerimento: se fai corrispondere il colore di sfondo della sezione del tema predefinito con il colore di sfondo della pagina, quest'ultima apparirà coerente durante il caricamento. I colori di sfondo vengono caricati prima delle immagini.
Modificare i colori nella versione 7.0
Se il sito è nella versione 7.0, la procedura da seguire per modificare i colori è diversa.
Suggerimento: le Pagine di copertina hanno le proprie opzioni di stile.
Nel pannello Design, utilizza i tweak in Stili sito per impostare manualmente i colori del sito. I tweak di stile specifici dipendono dal modello del sito. Consulta le guide del tuo modello per maggiori dettagli sulla modifica dei colori del sito.
Per modificare i colori su un sito nella versione 7.0, per prima cosa vai a una pagina in cui desideri apportare modifiche. Alcuni tweak vengono visualizzati solo quando sei sulla pagina che andranno a modificare, pertanto spostandoti nella pagina da modificare farai in modo che vengano visualizzati i tweak corretti. Inoltre, puoi visualizzare in anteprima le modifiche di stile nella pagina selezionata mentre le apporti.
Per trovare opzioni di stile specifiche per un elemento nella pagina, clicca sull'elemento per vederlo in anteprima. Stili sito mostrerà solo i tweak di stile per quell'elemento e nasconderà il resto. Questa funzione è disponibile nella maggior parte dei modelli e delle aree del sito. Clicca su Mostra tutto per visualizzare nuovamente tutte le opzioni di stile disponibili per la pagina.
Per modificare i colori del sito:
- Apri il pannello Pagine e clicca su una pagina del blog che vuoi cambiare.
- Quando l'anteprima del sito mostra la pagina corretta, torna al Menu Home.
- Clicca su Design e poi su Stili sito.
- Scorri verso il basso per rivedere tutti i tweak disponibili sulla pagina che stai visualizzando. Clicca sul tweak che desideri modificare, quindi scegli un nuovo colore.
- Utilizza il cursore di opacità per modificare la trasparenza.
- Clicca in un punto qualsiasi all'esterno della finestra dei colori per chiudere il selettore di colore.
- Per annullare qualsiasi modifica prima di salvare, clicca sull'icona di annullamento nella parte superiore del pannello o clicca sul punto accanto a un tweak specifico.
- Clicca su Save (Salva) in alto nel pannello.
Modificare i colori di sfondo
Le seguenti famiglie di modelli dispongono di aree di sfondo personalizzabili:
| Famiglia di modelli | Aree di sfondo |
| Adirondack |
|
| Avenue |
|
| Aviator |
|
| Bedford |
|
| Brine |
|
| Farro |
|
| Five |
|
| Flatiron |
|
| Forte |
|
| Galapagos |
|
| Ishimoto |
|
| Momentum |
|
| Montauk |
|
| Native |
|
| Pacific |
|
| Skye |
|
| Supply |
|
| Tremont |
|
| Wells |
|
| Wexley |
|
| York |
|
Ricorda:
- I colori dello sfondo non verranno trasferite se cambi modello.
- Alcuni modelli supportano anche le immagini di sfondo.
- In alcuni modelli, un banner può essere visualizzato dietro l'intestazione.
- Quando sei connesso, lo sfondo apparirà bianco durante il caricamento di una pagina, indipendentemente dal colore selezionato in Stili sito. Tale effetto non è visibile ai visitatori.
Per maggiori informazioni, consulta la guida relativa al tuo modello.
Guarda un video
Questo video si riferisce alla versione 7.0.