Modificare i colori

Scegli una palette di colori per il tuo sito, quindi applica colori specifici alle diverse sezioni di pagina.

Ultimo aggiornamento 29 gennaio 2025

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

Modificare i colori del sito

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

  1. Apri il pannello Stili sito, quindi fai clic su > accanto a 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. Clicca su Salva per salvare il lavoro e continuare ad apportare modifiche, oppure clicca su Esci e poi su Salva per chiudere l'editor.

colors_-_edit_palette.png

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. Apri il pannello Stili sito, quindi fai clic su > accanto a Colori.
  2. Scorri l'anteprima della tua pagina ed esamina le etichette del tema sezione in ogni sezione.

section_themes_on_preview.png

section_themes_on_preview.png

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:

  1. Apri il pannello Pagine.
  2. Seleziona la pagina che desideri modificare e clicca su Modifica nell'angolo in alto a sinistra.
  3. Clicca su Modifica sezione o sull'icona della matita nella sezione che desideri modificare.
  4. Nella scheda Colori, clicca su un tema per applicarlo alla sezione.
  5. Clicca su Salva per salvare il lavoro e continuare ad apportare modifiche, oppure clicca su Esci e poi su Salva per chiudere l'editor.

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.

section_theme_editor.png

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:

  1. Apri il pannello Stili sito, quindi fai clic su > accanto a 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 tue modifiche restano valide mentre modifichi gli altri contenuti della pagina. Clicca su Salva per salvare il lavoro e continuare ad apportare modifiche, oppure clicca su Esci e poi su Salva per chiudere l'editor.

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.

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.

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

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:

  1. Apri il pannello Stili sito, quindi fai clic su > accanto a 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 tue modifiche restano valide mentre modifichi gli altri contenuti della pagina. Clicca su Salva per salvare il lavoro e continuare ad apportare modifiche, oppure clicca su Esci e poi su Salva per chiudere l'editor.

Modifica dei colori di sfondo dei blocchi

Accesso a questa funzionalità

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 modulo
  • Blocchi Newsletter
  • Blocchi Citazione
  • Blocchi riepilogo

È inoltre possibile abilitare i colori di sfondo sui blocchi di testo facendo clic sul blocco di testo, quindi sull'icona di sfondo del blocco. Dopo aver attivato lo Sfondo, fai clic su Colore per selezionare un colore dalla palette di colori del sito o un colore personalizzato. Crea blocchi con colori di sfondo coordinati, oppure conferisci a ciascun blocco un colore unico.

Temi colore predefiniti

Ogni modello in versione 7.1 ha un tema cromatico predefinito, che viene applicato automaticamente alle seguenti pagine integrate del sito:

  • Schermata di accesso negato
  • Barra degli Annunci
  • Pagina di ricerca integrata
  • Pagina 404 predefinita
  • Intestazione dinamica su un'immagine o un video di sfondo
  • Pagina di conferma dell'ordine
  • Pagina di anteprima dei prodotti
  • Sezioni con immagine o video di sfondo
  • Pagina del carrello

Non è possibile assegnare un tema diverso a queste aree del sito, ma si possono apportare modifiche al tema predefinito per personalizzare queste pagine. Per trovare il tema predefinito del tuo modello:

  1. Aggiungi una sezione vuota a una pagina.
  2. Apri il pannello Stili sito, quindi fai clic su > accanto a Colori.
  3. Cerca l'etichetta del tema. Alle nuove sezioni viene assegnato il tema cromatico predefinito.

Suggerimento

un altro modo per determinare il tema cromatico predefinito è aprire una delle pagine di sistema, premere / e cercare Stili sito. È possibile accedere al pannello Colori e controllare l'indicatore del tema da qui.

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.

Apri il pannello Design, quindi fai clic su Stili sito per impostare manualmente i colori del tuo sito con tweak di stile.I tweak specifici dipendono dal modello del tuo sito.Consulta le guide del tuo modello per conoscere tutti i dettagli su come modificare i colori del tuo 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.

site_styles_-_show_all.png

Per modificare i colori del sito:

  1. Apri il pannello Pagine e clicca su una pagina del blog che vuoi cambiare.
  2. Quando l'anteprima del sito mostra la pagina corretta, torna al pannello Sito web.
  3. Clicca su Design e poi su Stili sito.
  4. 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.
  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 è visibile ai visitatori.

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

Guarda un video

Questo video si riferisce alla versione 7.0.

Footer Image
  • Ricevi assistenza dalla nostra community

  • Ricevi assistenza dalla nostra community in merito alle personalizzazioni avanzate.

  • Affidati a uno Squarespace Expert

  • Fatti notare online con l'aiuto di un designer o di uno sviluppatore esperto.