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 tuo 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 apposito.  

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, clicca 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 di 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.

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, che mostra il colore attuale di quell'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 Border Insete 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 per visualizzare tutti i tweak disponibili nella pagina che stai visualizzando. Clicca sul tweak che desideri modificare, quindi scegliere 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 opzioni colore dello sfondo dipendono dal modello:

  • Tutti i modelli - Puoi impostare il colore dell'area contenuti principale.
  • Alcuni modelli - Puoi impostare colori diversi per l'intestazione, il piè di pagina e lo spazio attorno ai contenuti.

Ricorda:

  • I colori dello sfondo non verranno trasferite se cambi modello.
  • Alcuni modelli supportano anche le immagini di sfondo
  • 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: 74 su 270