Il Color Picker ti permette di definire colori brand, predefiniti e personalizzati e applicarli ovunque nelle tue pagine, fino al livello di singole parole o caratteri. Questo articolo spiega cos'è il Color Picker, perché è utile e come sfruttarne al meglio le funzionalità.

INDICE

Cos'è il Color Picker?

Il Color Picker è il componente di design all'interno del builder Funnel e Siti Web di HITLEAD che gestisce ogni colore utilizzato, dagli sfondi delle sezioni alle evidenziazioni di testo più specifiche. Mostra insieme colori brand, predefiniti e personalizzati, supporta HEX, RGB e valori personalizzati, e offre uno stile preciso al livello del singolo carattere direttamente dalla toolbar inline del testo.

I colori predefiniti nel picker possono cambiare nel tempo man mano che lo stile predefinito del Page Builder viene aggiornato. Ad esempio, nuove opzioni di palette predefinite possono apparire (come Cobalt e Smoke) per supportare i design di partenza moderni. Se hai bisogno di una coerenza brand rigorosa, imposta i colori del Brand Board o i Global Custom Colors e seleziona quelli.

Vantaggi principali 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 colori brand, predefiniti e personalizzati in un unico pannello, senza dover cambiare tab
  • Controllo per singolo carattere: colora una singola parola o lettera per un'enfasi precisa
  • Etichette personalizzate: dai un nome ai colori (ad esempio, "CTA Blue") per un riutilizzo rapido
  • Flessibilità di formato: inserisci e visualizza i colori in HEX, RGB o valori personalizzati
  • Protezione dai duplicati: la validazione previene duplicati accidentali di tonalità
  • Layout compatto: design moderno ed efficiente in termini di spazio, si carica rapidamente e non è invasivo

Stile a livello di singolo carattere o parola

Con l'editor di testo inline aggiornato, puoi ora applicare un colore a singole parole o anche a singoli caratteri nel tuo testo. Questo significa che puoi evidenziare parole specifiche o cambiare il colore solo di una parte del testo, dandoti pieno controllo sull'aspetto del tuo design.

Etichette colore personalizzate e tooltip

Tieni le palette organizzate, anche quando le tonalità sono simili, dando un nome ai tuoi colori personalizzati!

Denominare i colori

Dopo aver scelto un colore, puoi assegnare un nome e modificare le etichette per i colori personalizzati (ad esempio, "Warning Red"). Le etichette possono essere modificate o rimosse in qualsiasi momento.

Schermata 1 — Come usare il Color Picker per Funnel e Siti Web

Tooltip delle etichette personalizzate

Passando il cursore su un colore personalizzato viene mostrata la sua etichetta come tooltip. Questo rende più facile distinguere tonalità simili, così il tuo team può scegliere la tinta giusta senza dover memorizzare i codici HEX.

Schermata 2 — Come usare il Color Picker per Funnel e Siti Web

Formati colore supportati

Il Color Picker ti permette 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 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 definiscono 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 sull'opacità.
  • Valori personalizzati: accetta token dinamici come {{ custom_values.primary_color }}. Questi consentono di recuperare il colore dai tuoi valori personalizzati, rendendo facile cambiarlo in un unico posto e aggiornarlo ovunque venga utilizzato.

Schermata 3 — Come usare il Color Picker per Funnel e Siti Web

Validazione e prevenzione dei duplicati

Validazione dei colori personalizzati

I valori token personalizzati devono esistere nella configurazione della posizione corrente prima di poter essere salvati, il che previene riferimenti non validi.

Prevenzione dei colori duplicati

Rimani coerente e senza errori! Se provi a salvare una tonalità già presente nella palette, il picker la segnala immediatamente e ti invita ad aggiustare il valore.

Schermata 4 — Come usare il Color Picker per Funnel e Siti Web

Come usare il Color Picker

Segui i passaggi seguenti per usare il color picker:

Passo 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 Color nel pannello di stile, oppure clicca sull'icona A nella toolbar inline per il testo

Schermata 5 — Come usare il Color Picker per Funnel e Siti Web

Passo 2: Scegli un colore

  • Scegli una tonalità dai colori predefiniti, dai colori brand o dai colori personalizzati già creati
  • Per creare un nuovo colore personalizzato, premi + Add

Schermata 6 — Come usare il Color Picker per Funnel e Siti Web

Passo 3: Crea un colore personalizzato

  • Una volta aperto il pannello del colore personalizzato, seleziona il colore desiderato
  • Usa il menu a tendina per scegliere tra i formati RGB, HEX e colore personalizzato
  • Digita un nome descrittivo per il colore
  • Clicca su Save. Il nuovo riquadro colore apparirà nella tua palette

Schermata 7 — Come usare il Color Picker per Funnel e Siti Web

Colore dell'icona del pulsante (Page Builder)

Le icone dei pulsanti possono ora essere colorate in modo indipendente, dandoti un controllo preciso sulla visibilità delle icone e sull'allineamento al brand senza influenzare il testo o il sottotesto del pulsante.

Come funziona

Controllo indipendente: il colore dell'icona è separato dai colori del testo e del sottotesto.

Fonti di colore: utilizza il nuovo Color Picker, inclusi i colori del Brand Board e i colori personalizzati.

Flessibilità di design: regola l'icona per abbinarla agli accenti del brand mantenendo il testo ben leggibile.

Domande frequenti

D: Le pagine esistenti cambieranno se modifico un Brand Color?

No. Gli aggiornamenti ai Brand Color si applicano in avanti. I colori già salvati su elementi o testi esistenti rimangono invariati.

D: Perché vedo un messaggio di "colore duplicato" quando provo a salvare?

Il valore inserito esiste già nella palette, oppure un valore personalizzato salvato restituisce lo stesso valore. Cambia il valore o modifica 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 nelle pagine esistenti.

D: Posso importare in blocco i colori brand?

R: Aggiungili nel Brand Board; appariranno automaticamente in cima alla palette.

D: Perché il mio colore con valore personalizzato non si salva?

Il token deve esistere nei Custom Values della tua posizione 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 della palette predefinita) possono essere aggiornati per i design più recenti. Il tuo Brand Board o i template salvati garantiscono uno stile coerente tra le pagine.

Articoli correlati

  • Come usare i Brand Board nei Funnel e Siti Web
  • Panoramica dei Siti
  • Per iniziare - Lancia un Funnel
  • Come creare un Brand Board