Nota: Sebbene le nostre guide più popolari siano state tradotte in italiano, alcune guide sono disponibili solo in inglese.

Modificare i colori

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 testo, delle aree di sfondo e di altri elementi 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, comporterà la modifica in tutte le aree che utilizzano quel tema (versione 7.1) o in tutte le pagine (versione 7.0).
  • Per modificare il colore di una sezione di testo specifica, come una parola in una frase, 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:

  1. Durante la modifica di una pagina, clicca sull'icona del pennello nell'angolo in alto a destra, quindi clicca su Colori.
  2. 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.
  3. Per salvare le modifiche, passa il mouse su Fatto nell'angolo in alto a sinistra dell'editor di pagina e clicca su Salva.

colors_-_edit_palette.png

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:

  1. Durante la modifica di una pagina, clicca sull'icona del pennello, quindi su Colori.
  2. 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.

section_themes_on_preview.png

Per modificare il tema del colore di una sezione:

  1. Nel Menu Home, fai clic su Pagine.
  2. Seleziona la pagina che desideri modificare e clicca su Modifica nell'angolo in alto a sinistra.
  3. Clicca sull'icona della matita della sezione.
  4. Nella scheda Colori, clicca su un tema per applicarlo alla sezione.
  5. Le modifiche rimarranno attive mentre modifichi altri contenuti della pagina. Per salvare le modifiche, passa il mouse su Fatto nell'angolo in alto a sinistra dell'editor di pagina e clicca su Salva.

section_theme_editor.png

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 e 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 saranno 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.
  • Pagina di ricerca integrata - Chiudi l'anteprima della pagina e apri la pagina di ricerca aggiungendo /search alla fine del dominio, quindi apri il pannello Colori e cerca l'etichetta del tema.
  • Pagina 404 predefinita - Chiudi l'anteprima e passa a una pagina che non esiste aggiungendo una stringa di lettere alla fine del dominio, ad esempio /xyz. Da lì, apri il pannello Colori e cerca l'etichetta del tema.
  • 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.
  • Carrello - Apri la pagina del carrello aggiungendo /cart alla fine del dominio, quindi apri il pannello Colori e cerca l'etichetta del tema.

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 verranno applicate a tutte le aree del sito che utilizzano tale tema.

Per modificare un tema:

  1. Durante la modifica di una pagina, clicca sull'icona del pennello, quindi su Colori.
  2. Clicca sul tema che desideri modificare.
  3. 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.
  4. Utilizza il cursore di opacità per modificare la trasparenza.
  5. 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 rimarranno attive mentre modifichi altri contenuti della pagina. Per salvare le modifiche, 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à.

pick_a_color.png

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.

custom_color_value.png

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

adjust_the_opacity.png

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 Full Bleed 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:

  1. Durante la modifica di una pagina, clicca sull'icona del pennello, quindi su Colori.
  2. Clicca sul tema colore per la sezione che desideri modificare.
  3. In In tutto il sito, clicca su Bordo inset e scegli un colore.
  4. Le modifiche rimarranno attive mentre modifichi altri contenuti della pagina. Per salvare le modifiche, passa il mouse su Fatto nell'angolo in alto a sinistra dell'editor di pagina e clicca su Salva.

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 di un sito nella versione 7.0, per prima cosa vai a una pagina in cui desideri visualizzare le modifiche. Alcuni tweak vengono visualizzati solo quando sei sulla pagina che andranno a modificare, pertanto spostandoti nella pagina che stai modificando potrai vedere 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 per la pagina.

site_styles_-_show_all.png

Per modificare i colori del sito:

  1. Nel Menu Home, clicca su Pagine, quindi sulla pagina che desideri modificare.
  2. Quando l'anteprima del sito mostra la pagina corretta, torna al Menu Home.
  3. Clicca su Design e poi su Stili sito.
  4. Scorri verso il basso all'interno di Stili sito per vedere tutti i tweak disponibili sulla pagina che stai visualizzando. Clicca sul tweak che desideri modificare, quindi scegli un nuovo colore.
  5. Utilizza il cursore di opacità per modificare la trasparenza.
  6. Clicca in un punto qualsiasi all'esterno della finestra dei colori per chiudere il selettore di colore.
  7. 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.
  8. 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
  • Sito
  • Canvas
  • Barre di navigazione
  • Intestazione
Avenue
  • Sito
  • Canvas
Aviator
  • Sito
  • Canvas
  • Intestazione/Piè di pagina
Bedford
  • Sito
  • Intestazione
  • Pre-piè di pagina
  • Piè di pagina
Brine
  • Sito
  • Canvas
  • Bordo
  • Intestazione principale
  • Piè di pagina
  • Barre dispositivi mobili
Farro
  • Sito
  • Bordo
  • Intestazione
  • Piè di pagina
  • Barra dispositivi mobili
Five
  • Sito
  • Canvas
  • Bordo canvas
  • Intestazione
  • Navigazione
Flatiron
  • Sito
  • Intestazione/Piè di pagina
Forte
  • Sito
Galapagos
  • Sito
  • Intestazione
Ishimoto
  • Sito
  • Bordo pagina
Momentum
  • Sito
  • Canvas
  • Navigazione
Montauk
  • Sito
  • Canvas
Native
  • Sito
Pacific
  • Sito
  • Intestazione
  • Sezioni alternative indice
  • Pre-piè di pagina
  • Piè di pagina
Skye
  • Sito
Supply
  • Sito
  • Navigazione intestazione/barra laterale
Tremont
  • Sito
  • Overlay navigazione
  • Indice
Wells
  • Sito
Wexley
  • Sito
  • Navigazione dispositivi mobili
York
  • Sito
  • Banner

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 sarà visibile ai visitatori.

Per maggiori informazioni, consulta la guida relativa al tuo modello.

Guarda un video

Questo video si riferisce alla versione 7.0.

Questo articolo ti è stato utile?
Utenti che ritengono sia utile: 110 su 384