Gebruik je merkkleuren.

DXPR Builder lerenPagina’s bouwenElementen stylenOntwerpgidsen

Pas je merkkleuren toe op secties, tekst en knoppen zodat elke pagina eruitziet alsof die bij dezelfde site hoort. Elk kleurveld in DXPR Builder toont het palet van je thema als stalen, dus je kiest merkkleuren in plaats van codes te raden. Het voorbeeld geeft een sectie je primaire merkkleur met witte tekst.

De video volgt de stappen hieronder: hij kleurt een sectie met je merkstaal en maakt zijn tekst wit.

Voordat je begint

  • Je merkkleuren staan in het thema. Met DXPR Theme stel je ze in onder Appearance > Settings > DXPR Theme (/admin/appearance/settings/dxpr_theme), in het paneel Colors.
  • DXPR Builder toont de eerste tien verschillende kleuren van dat palet als stalen.

Een sectie kleuren

  1. Wijs de sectie aan, open More en kies Settings.
  2. Open het paneel Style.
  3. Klik op de kleurknop van Background. De kleurkiezer opent met je stalen.
  4. Klik op je primaire merkstaal.
  5. Klik op de kleurknop van Font color en kies wit.
  6. Klik op Save. De alineatekst wordt wit; koppen behouden de kopkleur van het thema.
  7. Om een kop ook wit te maken, open je de Settings van zijn Text-element, kies je wit voor Font color in zijn Style-paneel en klik je op Save.

Wat je ziet

De sectie vult zich met je merkkleur en zijn alineatekst en kop worden wit. Dezelfde stalen verschijnen in elk kleurveld. Daaronder vallen de panelen Style en Hover style, en de Start color en End color van een Gradient-achtergrond van een sectie.

Om een kleur buiten het palet te gebruiken, typ je zijn code in het tekstveld van de kiezer, bijvoorbeeld #2196F3. Verschuif de opaciteitsregelaar voor een doorschijnende kleur. Clear verwijdert de kleur.

Kleuren gekoppeld houden aan het thema

Een staal kopieert de code van de kleur naar het element. Als je het themapalet later wijzigt, behoudt dat element de oude kleur.

Om een element het palet te laten volgen, gebruik je in plaats daarvan een kleurklasse. Open de Settings van het element en kies een chip onder HTML classes:

Chip Wat het doet
Primary background, Secondary background and others Bootstrap-kleuren uit je thema
Primary text color, Secondary text color and others Bootstrap-tekskleuren uit je thema
Background color: DXPR Theme primary De Primary-kleur van DXPR Theme, met zijn bijpassende tekstkleur
Text color: DXPR Theme accent1 De Secondary-kleur van DXPR Theme voor tekst

De DXPR Theme-chips verschijnen alleen wanneer DXPR Theme is ingeschakeld.

Kleurvelden per element

Waar Wat het kleurt
Style-paneel: Font color, Border color, Background Het element zelf
Hover style-paneel: dezelfde velden Het element terwijl de pointer erop staat
Button: Type Een kant-en-klaar knopkleurenschema
Card: Type De achtergrond en tekst van de hele kaart
Alert: Type Success, Info, Warning of Danger
Section: Background effects > Gradient Een vermenging van twee kleuren

Leesbare kleur

  • Houd genoeg contrast tussen tekst en achtergrond. WCAG 2.1 Level AA vraagt om minstens 4,5 op 1 voor normale tekst.
  • Gebruik kleur niet alleen om betekenis te dragen; combineer hem met een label of een pictogram.
  • Wissel sectieachtergronden af, zoals wit, lichtgrijs en je merkkleur, om lange pagina's ritme te geven.

Als je je kleuren niet ziet

  • De kleurkiezer toont geen stalen. Het standaardthema van je site heeft geen kleurenpalet. Typ je kleurcodes, of gebruik een thema met een palet, zoals DXPR Theme.
  • Een element behoudt zijn oude kleur nadat je het themapalet hebt gewijzigd. Een staal slaat een vaste kleurcode op. Kies het nieuwe staal, of schakel over op een kleurchip onder HTML classes, die het palet volgt.
  • Background of Font color heeft geen effect op een kaart. Een kaart-Type anders dan Default stelt zijn kleuren in met themaklassen die winnen. Zet Type eerst op Default.

Wat nu?