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 il pannello Design e gli stili di sezione per regolare i colori per il testo, le linee e le aree di sfondo del tuo 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 nel pannello Design 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 singola 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.

Modificare i colori del sito

Per modificare tutti i colori del sito, scegli una tavolozza di colori:

  1. Nella scheda Menu Home, clicca su Design, quindi su Colori.
  2. Clicca su Modifica accanto a Tavolozza per scegliere una tavolozza di colori.
  3. Clicca su Save (Salva) in alto nel pannello.

color_palette_-_click_edit.png

Scegli tra alcuni tipi di tavolozze di colori:

  • Tavolozze impostate da designer - Scegli tra una serie di tavolozze preimpostate di colori complementari.
  • Da immagine... - Carica un'immagine per creare una tavolozza basata sui colori principali dell'immagine.
  • Da colore... - Scegli un colore primario per la tavolozza utilizzando il selettore di colore.
  • Colori personalizzati - Scegli un colore per ogni parte della tavolozza utilizzando il selettore di colore.

La tavolozza dei colori crea i diversi temi di colore per le sezioni della pagina. Per vedere quale tema sta usando una sezione:

  1. Nella scheda Menu Home, clicca su Design, quindi su Colori.
  2. Clicca su Temi sezione.
  3. Scorri l'anteprima del tuo sito ed esamina le etichette del tema sezione in ogni sezione.

Modificare i colori della sezione

Dopo aver impostato i colori a livello di sito, puoi modificare il tema colore di qualsiasi sezione per darle un aspetto diverso:

  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, seleziona un tema.
  5. Passa il mouse su Fatto nell'editor di pagina e clicca su Salva.

section_editor.png

Scegli un tema:

  • Minimale - Il testo e le intestazioni sono in bianco o in nero e altri colori si applicano allo sfondo e agli elementi più piccoli del sito.
  • Grassetto - 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.
  • Accento - Il colore sul lato sinistro della tavolozza si applica allo sfondo (scuro ) o al testo (chiaro ) 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.

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. Nella scheda Menu Home, clicca su Design, quindi su Colori.
  2. Clicca su Temi sezione.
  3. Clicca sull'icona della matita accanto al tema che desideri modificare.
  4. 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.
  5. Utilizza il cursore di opacità per modificare la trasparenza.
  6. 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.
  7. Fai clic 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, vedrai tutte le opzioni di colore del blog anche se stai modificando una Pagina di layout.
  • Se una sezione ha un'immagine o un video di sfondo, utilizza il tweak Sovrapposizione sfondo per impostare l'opacità del colore di sovrapposizione. Se la sezione utilizza un colore di sfondo anziché un'immagine o un video, utilizza Sfondo sezione per impostare il colore.

Queste aree del tuo sito hanno regole leggermente diverse per il tema della sezione:

  • Per trovare il tema cromatico della pagina di ricerca incorporata, chiudi l'anteprima della pagina e apri la pagina di ricerca, quindi apri il pannello Temi sezione e cerca l'etichetta del tema. 
  • Per trovare il tema cromatico della pagina 404, chiudere l'anteprima e passare a una pagina che non esiste aggiungendo una stringa di lettere alla fine del dominio, ad esempio /xyz. Da lì, aprire il menu Temi sezione e cercare l'etichetta del tema. 
  • La barra degli annunci del sito riprende sempre il tema cromatico dell'intestazione . Se l'intestazione è trasparente, riprende il tema della sezione che segue.

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, clicca sul cerchio dei colori accanto al tweak che desideri modificare. Clicca sul cursore inferiore per selezionare un colore, quindi scegli una tonalità cliccando sul quadrato posizionato sopra.

pick_a_color.png

In alternativa, se conosci il valore del colore desiderato, puoi cliccare sul campo valore. Il campo valore accetta uno dei 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, il lato sinistro presenta una tinta molto leggera, mentre il lato destro aggiunge una tinta più scura. È possibile modificare solo la trasparenza dei colori della tavolozza.
  • Nella versione 7.0, il lato sinistro è completamente trasparente, mentre il lato destro è completamente opaco. 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. Nella scheda Menu Home, clicca su Design, quindi su Colori.
  2. Passa il mouse sul tema e fai clic sull'icona della matita.
  3. In In tutto il sito, clicca su Bordo inset e scegli un colore.
  4. Clicca sulla freccia Colori nella parte superiore per tornare al pannello Colori, quindi clicca su Salva per salvare le modifiche.

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 (versione 7.0)

Questo video si riferisce alla versione 7.0.

Questo articolo ti è stato utile?
Utenti che ritengono sia utile: 81 su 299