Markenfarben nutzen.

Learn DXPR BuilderBuild pagesElementen stylenOntwerpgidsen

Tragen Sie Ihre Markenfarben auf Abschnitte, Text und Schaltflächen auf, damit jede Seite aussieht, als gehörte sie zur selben Website. Jedes Farbfeld in DXPR Builder zeigt die Palette Ihres Themes als Farbfelder, daher wählen Sie Markenfarben statt Codes zu raten. Das Beispiel gibt einem Abschnitt Ihre primäre Markenfarbe mit weißem Text.

Das Video folgt den Schritten unten: Es färbt einen Abschnitt mit Ihrem Marken-Farbfeld und macht seinen Text weiß.

Bevor Sie beginnen

  • Ihre Markenfarben leben im Theme. Mit DXPR Theme setzen Sie sie unter Appearance > Settings > DXPR Theme (/admin/appearance/settings/dxpr_theme), im Panel Colors.
  • DXPR Builder zeigt die ersten zehn verschiedenen Farben dieser Palette als Farbfelder.

Abschnitt einfärben

  1. Zeigen Sie auf den Abschnitt, öffnen Sie More und wählen Sie Settings.
  2. Öffnen Sie das Panel Style.
  3. Klicken Sie auf die Farbschaltfläche von Background. Die Farbauswahl öffnet sich mit Ihren Farbfeldern.
  4. Klicken Sie auf Ihr primäres Marken-Farbfeld.
  5. Klicken Sie auf die Farbschaltfläche von Font color und wählen Sie Weiß.
  6. Klicken Sie auf Save. Der Absatztext wird weiß; Überschriften behalten die Überschriftenfarbe des Themes.
  7. Um auch eine Überschrift weiß zu machen, öffnen Sie die Settings ihres Text-Elements, wählen Sie Weiß für Font color in seinem Panel Style und klicken Sie auf Save.

Was Sie sehen

Der Abschnitt füllt sich mit Ihrer Markenfarbe, und Absatztext und Überschrift werden weiß. Dieselben Farbfelder erscheinen in jedem Farbfeld. Dazu gehören die Panels Style und Hover style sowie Start color und End color eines Gradient-Hintergrunds des Abschnitts.

Um eine Farbe außerhalb der Palette zu nutzen, tippen Sie ihren Code in das Textfeld der Auswahl, zum Beispiel #2196F3. Schieben Sie den Deckkraftregler für eine durchscheinende Farbe. Clear entfernt die Farbe.

Farben beim Theme halten

Ein Farbfeld kopiert den Code der Farbe ins Element. Wenn Sie die Theme-Palette später ändern, behält dieses Element die alte Farbe.

Damit ein Element der Palette folgt, nutzen Sie stattdessen eine Farbklasse. Öffnen Sie die Settings des Elements und wählen Sie einen Chip unter HTML classes:

Chip Was er tut
Primary background, Secondary background und weitere Bootstrap-Farben aus Ihrem Theme
Primary text color, Secondary text color und weitere Bootstrap-Textfarben aus Ihrem Theme
Background color: DXPR Theme primary Die Primary-Farbe von DXPR Theme, mit passender Textfarbe
Text color: DXPR Theme accent1 Die Secondary-Farbe von DXPR Theme für Text

Die DXPR Theme-Chips erscheinen nur, wenn DXPR Theme aktiviert ist.

Farbfelder pro Element

Wo Was es färbt
Style-Panel: Font color, Border color, Background Das Element selbst
Hover style-Panel: dieselben Felder Das Element, während der Zeiger darauf ist
Button: Type Ein fertiges Schaltflächen-Farbschema
Card: Type Hintergrund und Text der ganzen Karte
Alert: Type Success, Info, Warning oder Danger
Section: Background effects > Gradient Eine Mischung aus zwei Farben

Lesbare Farbe

  • Halten Sie genug Kontrast zwischen Text und Hintergrund. WCAG 2.1 Stufe AA verlangt mindestens 4,5 zu 1 für normalen Text.
  • Nutzen Sie Farbe nicht allein als Bedeutungsträger; paaren Sie sie mit einer Bezeichnung oder einem Icon.
  • Wechseln Sie Abschnittshintergründe ab, etwa Weiß, Hellgrau und Ihre Markenfarbe, um langen Seiten Rhythmus zu geben.

Wenn Sie Ihre Farben nicht sehen

  • Die Farbauswahl zeigt keine Farbfelder. Das Standard-Theme Ihrer Website liefert keine Farbpalette. Tippen Sie Ihre Farbcodes, oder nutzen Sie ein Theme mit Palette, etwa DXPR Theme.
  • Ein Element behält seine alte Farbe, nachdem Sie die Theme-Palette geändert haben. Ein Farbfeld speichert einen festen Farbcode. Wählen Sie das neue Farbfeld, oder wechseln Sie zu einem Farbchip unter HTML classes, der der Palette folgt.
  • Background oder Font color wirken auf einer Karte nicht. Ein Karten-Type außer Default setzt seine Farben mit Theme-Klassen, die gewinnen. Setzen Sie Type zuerst auf Default.

Wie geht es weiter?