Usa i colori del tuo brand.

Impara DXPR BuilderCrea le pagineDai stile agli elementiGuide di design

Applica i colori del tuo brand a sezioni, testo e pulsanti così ogni pagina sembra appartenere allo stesso sito. Ogni campo colore in DXPR Builder mostra la palette del tuo tema come campioni, così scegli colori brand invece di indovinare codici. L’esempio dà a una sezione il tuo colore brand primario con testo bianco.

Il video segue i passaggi sotto: colora una sezione con il tuo campione brand e ne rende bianco il testo.

Prima di iniziare

  • I colori del tuo brand vivono nel tema. Con DXPR Theme, impostali in Appearance > Settings > DXPR Theme (/admin/appearance/settings/dxpr_theme), nel pannello Colors.
  • DXPR Builder mostra i primi dieci colori diversi di quella palette come campioni.

Colora una sezione

  1. Passa sopra la sezione con il mouse, apri More e scegli Settings.
  2. Apri il pannello Style.
  3. Fai clic sul pulsante colore di Background. Il selettore di colori si apre con i tuoi campioni.
  4. Fai clic sul tuo campione brand primario.
  5. Fai clic sul pulsante colore di Font color e scegli il bianco.
  6. Fai clic su Save. Il testo del paragrafo diventa bianco; i titoli mantengono il colore dei titoli del tema.
  7. Per rendere bianco anche un titolo, apri le Settings del suo elemento Text, scegli il bianco per Font color nel suo pannello Style e fai clic su Save.

Cosa vedrai

La sezione si riempie del tuo colore brand, e il testo del paragrafo e il titolo diventano bianchi. Gli stessi campioni compaiono in ogni campo colore. Inclusi i pannelli Style e Hover style, e Start color e End color dello sfondo Gradient di una sezione.

Per usare un colore fuori palette, digita il suo codice nel campo di testo del selettore, ad esempio #2196F3. Sposta il cursore di opacità per un colore trasparente. Clear rimuove il colore.

Mantieni i colori legati al tema

Un campione copia il codice del colore nell’elemento. Se cambi in seguito la palette del tema, quell’elemento mantiene il vecchio colore.

Per far seguire la palette a un elemento, usa invece una classe di colore. Apri le Settings dell’elemento e scegli un chip in HTML classes:

Chip Cosa fa
Primary background, Secondary background e altri Colori Bootstrap dal tuo tema
Primary text color, Secondary text color e altri Colori di testo Bootstrap dal tuo tema
Background color: DXPR Theme primary Il colore Primary di DXPR Theme, con il suo colore di testo abbinato
Text color: DXPR Theme accent1 Il colore Secondary di DXPR Theme per il testo

I chip DXPR Theme compaiono solo quando DXPR Theme è attivo.

Campi colore per elemento

Dove Cosa colora
Style del pannello: Font color, Border color, Background L’elemento stesso
Hover style (gli stessi campi del pannello) L’elemento mentre il puntatore è sopra
Button: Type Una combinazione di colori pronta per i pulsanti
Card: Type Lo sfondo e il testo dell’intera card
Alert: Type Success, Info, Warning o Danger
Section: Background effects > Gradient Una fusione di due colori

Colore leggibile

  • Mantieni abbastanza contrasto tra testo e sfondo. WCAG 2.1 Livello AA richiede almeno 4,5 a 1 per il testo normale.
  • Non usare il solo colore per trasmettere significato; abbinalo a un’etichetta o un’icona.
  • Alterna gli sfondi delle sezioni, come bianco, grigio chiaro e il tuo colore brand, per dare ritmo alle pagine lunghe.

Se non vedi i tuoi colori

  • Il selettore di colori non mostra campioni. Il tema predefinito del tuo sito non fornisce palette di colori. Digita i tuoi codici colore, oppure usa un tema con una palette, come DXPR Theme.
  • Un elemento mantiene il vecchio colore dopo aver cambiato la palette del tema. Un campione memorizza un codice colore fisso. Scegli il nuovo campione, oppure passa a un chip di colore in HTML classes, che segue la palette.
  • Background o Font color non ha effetto su una card. Un Type di card diverso da Default ne imposta i colori con classi del tema che vincono. Imposta prima Type a Default.

Prossimi passi