--- url: 'https://dxpr.com/de/hc/dokumentation/dxpr-builder-lernen/design/farben-und-branding' title: 'Markenfarben nutzen | DXPR' author: name: Jurriaan url: 'https://dxpr.com/users/jurriaan' date: '2026-10-24T04:01:46+00:00' updated: '2026-10-24T17:19:22+00:00' copyright: 'Copyright DXPR. All rights reserved.' type: article summary: |- 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ß. tags: - 'Design guides' image: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg' published: true og: site_name: DXPR updated_time: '2026-10-24T17:19:22+0000' 'image:alt': 'DXPR, powered by Drupal: AI-powered Drupal for marketers.' schema: '@context': 'https://schema.org' '@graph': - mainEntity: { } - '@type': TechArticle headline: 'Markenfarben nutzen' description: |- 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ß. image: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg' width: '1200' height: '630' datePublished: '2026-10-24T04:01:46+0000' dateModified: '2026-10-24T17:19:22+0000' author: '@type': Organization '@id': 'https://dxpr.com/#organization' name: DXPR url: 'https://dxpr.com/' logo: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/dxpr-logo-dark.svg' width: '1348' height: '501' publisher: '@type': Organization '@id': 'https://dxpr.com/#organization' name: DXPR url: 'https://dxpr.com/' logo: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/dxpr-logo-dark.svg' width: '1348' height: '501' mainEntityOfPage: 'https://dxpr.com/de/hc/dokumentation/dxpr-builder-lernen/design/farben-und-branding' articleSection: Design-Leitfäden - '@type': WebPage '@id': 'https://dxpr.com/de/hc/dokumentation/dxpr-builder-lernen/design/farben-und-branding' description: |- 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ß. breadcrumb: '@type': BreadcrumbList itemListElement: - '@type': ListItem position: 1 name: Startseite item: 'https://dxpr.com/de' publisher: '@type': Organization '@id': 'https://dxpr.com/#organization' name: DXPR inLanguage: de --- [Hilfe-Center](/de/hc)/[Dokumentation](/de/hc/dokumentation) /[DXPR Builder lernen](/de/hc/documentation/learn-dxpr-builder) /[Seiten erstellen](/de/hc/documentation/learn-dxpr-builder/build) /[Elemente gestalten](/de/hc/documentation/learn-dxpr-builder/element-settings) /[Design-Leitfäden](/de/hc/documentation/learn-dxpr-builder/design/overview) # Markenfarben nutzen. DXPR Builder lernenSeiten erstellenElemente gestaltenDesign-Leitfäden ## In diesem Leitfaden Verwandte Leitfäden - [Elemente bei Hover reagieren lassen](/de/hc/dokumentation/dxpr-builder-lernen/design/hover-effekte) - [Karten stylen](/de/hc/dokumentation/dxpr-builder-lernen/design/card-stile) - [Builder-Inhalte mit Theme-CSS stylen](/de/hc/dokumentation/dxpr-builder-lernen/anpassung/eigenes-css) 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? - [Elemente bei Hover reagieren lassen](/de/hc/dokumentation/dxpr-builder-lernen/design/hover-effekte): Farben ändern, wenn Besuchende auf ein Element zeigen. - [Karten stylen](/de/hc/dokumentation/dxpr-builder-lernen/design/card-stile): Ihre Farben auf Karten anwenden. - [Eigenes CSS](/de/hc/dokumentation/dxpr-builder-lernen/anpassung/eigenes-css): Markenregeln setzen, die die Panels nicht abdecken.