Editor Studio: lavorare con i colori del sito

Tempo di lettura: 4 min.
I colori del sito costituiscono il tema del colore generale utilizzato nel sito del cliente. Questo tema è diviso in gamme di colori che vengono applicate a diverse categorie (ad esempio sfondo e testo) e contengono tonalità specifiche. 
Sia i colori singoli che le gamme di colori sono personalizzabili, quindi puoi progettare e regolare parti specifiche del sito in base alle tue esigenze. 
In questo articolo, scopri di più su come:

Capire i colori del sito

Questi sono i colori utilizzati nel sito su cui stai lavorando. Di solito sono collegati ai componenti. Ad esempio, un colore può essere collegato agli sfondi delle sezioni, un altro al testo, ecc.
Il numero di colori del sito con cui inizi dipende dal template che scegli o se decidi di crearlo da zero. Tuttavia, puoi aggiungere, gestire e sostituire i colori del sito per garantire un'esperienza di design senza intoppi.

Modificare i colori del sito

Personalizza i colori del sito dal pannello Stili del sito in base alle tue esigenze di design e rafforza il branding dei tuoi clienti.
Importante:
La modifica di un colore influisce istantaneamente sugli elementi con il colore che stai aggiornando, ad esempio, tutti gli elementi a tema che hai aggiunto in precedenza o gli elementi su cui hai utilizzato questo colore.

Per modificare i colori del sito:

  1. Clicca su Stili del sito  sul lato sinistro dell'Editor.
  2. Seleziona la scheda Colori
  3. Clicca sul colore che vuoi regolare
  4. Scegli come selezionare il colore centrale nell'intervallo tra le seguenti opzioni:
    • Seleziona un nuovo colore dal selettore utilizzando il cursore
    • Inserisci le informazioni HEX, RGB o HSB nei campi pertinenti
    • Clicca sul Contagocce per selezionare un nuovo colore da qualsiasi punto dello schermo
  5. Clicca su Applica
È in corso la modifica di un colore nel pannello. È stata selezionata una nuova tonalità e il cursore sta cliccando sul tasto Applica

Gestire i colori del sito

Gestisci i colori del sito per rendere il processo di progettazione il più semplice possibile. Puoi rinominare i colori per renderli più facili da trovare o sostituirli per apportare modifiche rapide al sito.

Per gestire i colori del sito:

  1. Clicca su Stili del sito  sul lato sinistro dell'Editor.
  2. Seleziona la scheda Colori
  3. Passa il mouse sul colore pertinente e clicca sull'icona Altre azioni undefined
  4. Scegli cosa fare:
    • Modifica il nome del colore:
      1. Clicca su Rinomina
      2. Inserisci il nuovo nome del colore nel campo
    • Elimina/sostituisci:
      1. Clicca su Elimina
      2. Seleziona il colore sostitutivo dal selettore
      3. Clicca su Applica
Il menu Altre azioni è stato aperto in un colore sul pannello. Il cursore sta cliccando sull'opzione Rinomina
Non riesci a eliminare/sostituire un colore?
  • Alcune tonalità vengono utilizzate come colore predefinito per le app e gli elementi Wix sul sito e l'opzione Elimina è quindi disattivata. Tuttavia, puoi cliccare sulla tonalità nel pannello per sostituirla
  • Le tonalità che non sono state impostate come colore predefinito potrebbero essere ancora in uso sul sito e ti verrà quindi richiesto di sostituire il colore

Applicare i colori del sito agli elementi

Poiché i colori vengono assegnati alle categorie, vengono applicati automaticamente ad alcuni elementi a tema nel pannello Aggiungi elementi (ad esempio, elementi di testo con stile). Puoi anche applicare i colori del sito agli elementi nell'area di lavoro utilizzando il pannello Ispezione.

Per applicare i colori del sito agli elementi:

  1. Seleziona l'elemento pertinente
  2. Clicca sull'icona Apri Ispezione  in alto a destra dell'Editor
  3. Clicca sulla casella del colore sotto Design per aprire il selettore
Screenshot dell'apertura del pannello Ispezione nell'Editor Studio
  1. Seleziona una tonalità da Colori tema per applicarla
La finestra Ispezione è aperta per un elemento vettoriale. Una delle caselle dei colori è aperta ed è stato applicato un colore del tema
Lo sapevi che:
Se l'elemento contiene più di 1 colore, puoi personalizzare ogni tonalità cliccando sulla casella del colore.