Il Color Picker ti permette di definire colori brand, predefiniti e personalizzati e di applicarli in qualsiasi punto delle tue pagine, fino al livello di singole parole o singoli caratteri. Questo articolo spiega cos'è il Color Picker, perché è importante e come sfruttarne al meglio le funzionalità.
- Cos'è il Color Picker?
- Principali vantaggi del Color Picker
- Stile a livello di carattere e di parola
- Etichette colore personalizzate & Tooltip
- Formati colore supportati
- Validazione e prevenzione dei colori duplicati
- Come usare il Color Picker
- Domande frequenti
- Articoli correlati
Cos'è il Color Picker?
Il Color Picker è il componente di design integrato nel builder di Funnel e Siti Web di GoHighLevel / Squadd che gestisce ogni colore utilizzato, dagli sfondi delle sezioni alle evidenziazioni di testo più specifiche. Mostra insieme i colori brand, predefiniti e personalizzati, supporta i formati HEX, RGB e valori personalizzati, e offre uno stile preciso a livello di singolo carattere direttamente dalla barra degli strumenti inline.
I colori predefiniti nel picker possono cambiare nel tempo man mano che lo stile predefinito del Page Builder viene aggiornato. Ad esempio, possono apparire nuove opzioni di palette predefinita (come Cobalt e Smoke) per supportare i design iniziali più moderni. Se hai bisogno di una coerenza rigorosa del brand, imposta i colori del Brand Board o i Colori Personalizzati Globali e seleziona quelli.
Principali vantaggi del Color Picker
Un'interfaccia unificata e controlli intelligenti ti aiutano a stilizzare le pagine più velocemente e in modo più coerente.
Palette unificata: Visualizza i colori brand, predefiniti e personalizzati in un unico pannello, senza dover cambiare scheda
Controllo per carattere: Colora una singola parola o lettera per enfasi precise
Etichette personalizzate: Assegna un nome ai colori (ad esempio, "Blu CTA") per riutilizzarli rapidamente
Flessibilità di formato: Inserisci e visualizza i colori in HEX, RGB o valori personalizzati
Protezione dai duplicati: La validazione impedisce l'aggiunta accidentale di sfumature duplicate
Layout compatto: Design moderno ed efficiente in termini di spazio, si carica rapidamente e non intralcia il lavoro
Stile a livello di carattere e di parola
Grazie all'editor di testo inline aggiornato, ora puoi applicare un colore a singole parole o persino a singoli caratteri nel tuo testo. Puoi quindi evidenziare parole specifiche o cambiare il colore di solo una parte del testo, ottenendo il pieno controllo sull'aspetto del tuo design.
Etichette colore personalizzate & Tooltip
Mantieni le palette organizzate, anche quando le sfumature sono simili, assegnando un nome ai tuoi colori personalizzati!
Denominare i colori
Dopo aver scelto un colore, gli utenti possono assegnare e modificare le etichette dei colori personalizzati (ad esempio, "Rosso Avviso"). Le etichette possono essere modificate o rimosse in qualsiasi momento.
Tooltip delle etichette personalizzate
Passando il cursore su un colore personalizzato viene visualizzata la sua etichetta come tooltip. Questo rende più semplice distinguere sfumature simili, così il tuo team può scegliere la tinta giusta senza dover memorizzare i codici HEX.
Formati colore supportati
Il Color Picker ti consente di scegliere e salvare i colori in più formati, così puoi lavorare con i valori più adatti alle tue esigenze. Usa il menu a tendina per passare da un formato colore all'altro.
- HEX: Un codice a sei caratteri che definisce il colore (ad esempio, #1E90FF). È il formato più comune per il web design.
- RGB: Un insieme di tre numeri che definisce il colore in base ai valori di rosso, verde e blu (ad esempio, rgb(30,144,255)). È utile per un controllo preciso sulla miscelazione dei colori e l'opacità.
- Valori personalizzati: Accetta token dinamici come {{ custom_values.primary_color }}. Questi consentono di ricavare il colore dai tuoi valori personalizzati, rendendo semplice modificarlo in un unico punto e aggiornarlo ovunque venga utilizzato.
Validazione e prevenzione dei colori duplicati
Validazione dei colori personalizzati
I valori dei token personalizzati devono esistere nella configurazione della Location corrente prima di poter essere salvati, il che impedisce riferimenti non validi.
Prevenzione dei colori duplicati
Rimani coerente e senza errori! Se provi a salvare una sfumatura già presente nella palette, il picker la segnala istantaneamente e ti invita a modificare il valore.
Come usare il Color Picker
Segui i passaggi seguenti per utilizzare il Color Picker:
Passaggio 1: Apri il Color Picker
- Apri un Funnel o una pagina di un sito web esistente
- Seleziona una sezione, un elemento o un blocco di testo
- Clicca sul quadrato Colore nel pannello degli stili, oppure clicca sull'icona A nella barra degli strumenti inline per il testo
Passaggio 2: Scegli un colore
- Seleziona una sfumatura tra i colori predefiniti, i colori brand o i colori personalizzati già creati
- Per creare un nuovo colore personalizzato, premi + Aggiungi
Passaggio 3: Crea un colore personalizzato
- Una volta aperto il pannello dei colori personalizzati, seleziona il colore desiderato
- Usa il menu a tendina per selezionare il formato colore tra RGB, HEX e Valore personalizzato
- Digita un nome descrittivo per il colore
- Clicca su Salva. Il nuovo riquadro colore apparirà nella tua palette
Colore dell'icona del pulsante (Page Builder)
Le icone dei pulsanti possono ora essere colorate in modo indipendente, offrendoti un controllo preciso sulla visibilità dell'icona e sulla coerenza del brand senza influenzare il testo o il sottotesto del pulsante.
Come funziona
Controllo indipendente: il Colore Icona è separato dai colori Testo e Sottotesto.
Sorgenti dei colori: utilizza il nuovo Color Picker, inclusi i colori del Brand Board e i colori personalizzati.
Flessibilità di design: regola l'icona per farla corrispondere agli accenti del brand mantenendo il testo altamente leggibile.
_Aggiungi uno screenshot del pannello **Colori** dell'elemento Pulsante con il campione **Colore Icona** evidenziato. Testo alternativo: "Pannello Colori dell'elemento Pulsante con il nuovo controllo Colore Icona."_
Domande frequenti
D: Le pagine esistenti cambieranno se modifico un Colore Brand?
No. Gli aggiornamenti ai Colori Brand si applicano solo ai nuovi elementi. I colori già salvati sugli elementi o sul testo esistenti rimangono invariati.
D: Perché vedo un messaggio "colore duplicato" quando provo a salvare?
Il valore che hai inserito esiste già nella palette, oppure un valore personalizzato salvato si risolve nello stesso valore. Modifica il valore o aggiorna il riquadro esistente.
D: Posso rinominare o eliminare un colore personalizzato senza rompere le pagine?
R: Sì. Rinominare o eliminare un riquadro non modifica i colori già applicati sulle pagine esistenti.
D: Posso importare i colori brand in blocco?
R: Aggiungili nel Brand Board; appariranno automaticamente in cima alla palette.
D: Perché il mio colore a valore personalizzato non viene salvato?
Il token deve esistere nei Valori Personalizzati della Location corrente e il valore finale non può duplicare un riquadro esistente. Verifica che il valore personalizzato esista nel tuo account.
D: Perché le nuove pagine sembrano diverse da quelle più vecchie?
I valori predefiniti del Page Builder (font, segnaposto e colori di palette predefiniti) possono essere aggiornati per i design più recenti. Il tuo Brand Board o i template salvati garantiscono uno stile coerente tra le pagine.