--- url: 'https://dxpr.com/de/hc/documentation/learn-dxpr-builder/customization/text-editor' title: 'Markenstile und Buttons in den Texteditor bringen | DXPR' author: name: Jurriaan url: 'https://dxpr.com/users/jurriaan' date: '2026-10-24T04:01:42+00:00' updated: '2026-10-24T09:09:48+00:00' copyright: 'Copyright DXPR. All rights reserved.' type: article summary: 'Wenn Bearbeitende in DXPR Builder in einen Text klicken, erscheint eine Symbolleiste. Sie können ihre Styles-Liste mit den Stilen Ihrer Marke füllen, etwa einem Lead-Absatz oder einer hervorgehobenen Phrase. Sie können auch wählen, welche Schaltflächen jede Rolle sieht. Bearbeitende wenden dann einen Marken-Look mit einem Klick an, statt Größen und Farben von Hand zu setzen. Fonts kommen aus Ihrem Theme; siehe Eigene Fonts.' tags: - 'Je huisstijl toepassen' image: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg' published: true og: site_name: DXPR updated_time: '2026-10-24T09:09:48+0000' 'image:alt': 'DXPR, powered by Drupal: AI-powered Drupal for marketers.' schema: '@context': 'https://schema.org' '@graph': - mainEntity: { } - '@type': TechArticle headline: 'Markenstile und Buttons in den Texteditor bringen' description: 'Wenn Bearbeitende in DXPR Builder in einen Text klicken, erscheint eine Symbolleiste. Sie können ihre Styles-Liste mit den Stilen Ihrer Marke füllen, etwa einem Lead-Absatz oder einer hervorgehobenen Phrase. Sie können auch wählen, welche Schaltflächen jede Rolle sieht. Bearbeitende wenden dann einen Marken-Look mit einem Klick an, statt Größen und Farben von Hand zu setzen. Fonts kommen aus Ihrem Theme; siehe Eigene Fonts.' 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:42+0000' dateModified: '2026-10-24T09:09:48+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/documentation/learn-dxpr-builder/customization/text-editor' articleSection: 'Je huisstijl toepassen' - '@type': WebPage '@id': 'https://dxpr.com/de/hc/documentation/learn-dxpr-builder/customization/text-editor' description: 'Wenn Bearbeitende in DXPR Builder in einen Text klicken, erscheint eine Symbolleiste. Sie können ihre Styles-Liste mit den Stilen Ihrer Marke füllen, etwa einem Lead-Absatz oder einer hervorgehobenen Phrase. Sie können auch wählen, welche Schaltflächen jede Rolle sieht. Bearbeitende wenden dann einen Marken-Look mit einem Klick an, statt Größen und Farben von Hand zu setzen. Fonts kommen aus Ihrem Theme; siehe Eigene Fonts.' 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 --- [Help Center](/de/hc)/[Documentation](/de/hc/documentation) /[Learn DXPR Builder](/hc/documentation/learn-dxpr-builder) /[Manage the site](/hc/documentation/learn-dxpr-builder/manage) /[Je huisstijl toepassen](/hc/documentation/learn-dxpr-builder/customization) # Markenstile und Buttons in den Texteditor bringen. Learn DXPR BuilderManage the siteJe huisstijl toepassen ## In this guide Related guides - [Builder-Inhalte mit Theme-CSS stylen](/de/hc/documentation/learn-dxpr-builder/customization/custom-css) - [Dienstklassen](/de/hc/documentation/learn-dxpr-builder/customization/utility-classes) - [Wählen Sie, was jede Rolle im Builder sieht](/de/hc/documentation/learn-dxpr-builder/admin/user-profiles-admin) Wenn Bearbeitende in DXPR Builder in einen Text klicken, erscheint eine Symbolleiste. Sie können ihre **Styles**-Liste mit den Stilen Ihrer Marke füllen, etwa einem Lead-Absatz oder einer hervorgehobenen Phrase. Sie können auch wählen, welche Schaltflächen jede Rolle sieht. Bearbeitende wenden dann einen Marken-Look mit einem Klick an, statt Größen und Farben von Hand zu setzen. Fonts kommen aus Ihrem Theme; siehe [Eigene Fonts](/de/hc/documentation/learn-dxpr-builder/customization/custom-fonts). ## Bevor Sie beginnen - Um Stile zu bearbeiten, brauchen Sie **Administer DXPR Builder configuration**. - Um Symbolleisten-Schaltflächen zu bearbeiten, brauchen Sie **Administer dxpr builder profile**. - Jeder Stil braucht CSS dahinter. Bootstrap-5-Klassen wie `lead` funktionieren, wenn die Seite Bootstrap 5 lädt. Eigene Klassen brauchen eine Regel im Theme; siehe [Eigenes CSS](/de/hc/documentation/learn-dxpr-builder/customization/custom-css). ## Einrichtung 1. Gehen Sie zu **DXPR Studio** > **DXPR Builder** > **General Settings** (`/admin/dxpr_studio/dxpr_builder/settings`). 2. Klappen Sie **Text Editor** auf. Das Feld **Custom styles** listet bereits die Stile, die DXPR Builder mitbringt, einen pro Zeile. 3. Fügen Sie pro Stil eine Zeile in der Form `Label=element.class` hinzu, und löschen Sie die Zeilen, die Sie nicht wollen. 4. Klicken Sie auf **Save settings**. 5. Öffnen Sie eine Seite im Builder, oder laden Sie sie neu, wenn sie offen ist, und klicken Sie in einen Text. 6. Klicken Sie in der Symbolleiste auf **Styles** und wählen Sie Ihren Stil. Diese Zeilen fügen vier Stile hinzu: ```text Lead=p.lead Event date=span.text-primary.fw-semibold Callout=p.border-start.border-primary.border-4.ps-3 Sassy Title=h1.sassy-title ``` Jede Zeile hat drei Teile: - Das **label** vor `=` ist der Name, den Bearbeitende in der Liste sehen. - Das **element** nach `=` entscheidet, was der Stil erfasst. Ein Blockelement wie `p`, `h2` oder `blockquote` stylt einen ganzen Absatz oder eine Überschrift. Ein Inline-Element wie `span`, `mark` oder `code` umschließt nur die markierten Worte. - Jede **class** folgt einem Punkt. Fügen Sie weitere Klassen mit weiteren Punkten hinzu, wie bei `Callout` oben. Elementnamen nutzen nur Buchstaben und Ziffern. Klassennamen nutzen Buchstaben, Ziffern, Bindestriche und Unterstriche. Um die mitgebrachte Liste zurückzuholen, leeren Sie das Feld und speichern. ## Symbolleisten-Schaltflächen pro Rolle 1. Gehen Sie zu **DXPR Studio** > **DXPR Builder** > **User Profiles** (`/admin/dxpr_studio/dxpr_builder/profile`) und klicken Sie neben dem Profil der Rolle auf **Edit**. 2. Klappen Sie **Text editor buttons (inline editing)** auf. Aktivieren Sie die Schaltflächen für Text, den Sie auf der Seite bearbeiten. 3. Klappen Sie **Text editor buttons (modal editing)** auf. Aktivieren Sie die Schaltflächen für Textfelder in einem Einstellungsdialog. 4. Klicken Sie auf **Save**. Inline-Bearbeitung erfasst die Elemente Text, Alert und Blockquote. Halten Sie **Font style** in beiden Gruppen aktiviert, um Ihre eigenen Stile zu zeigen; es ist der Profilname für die **Styles**-Liste. Wenn Sie jede Schaltfläche einer Gruppe deaktivieren, fällt diese Symbolleiste auf den eingebauten Satz zurück. [Benutzerprofile](/de/hc/documentation/learn-dxpr-builder/admin/user-profiles-admin) erklärt, welches Profil für wen gilt. ## Was Sie sehen **Styles** in der Symbolleiste öffnet ein Panel mit zwei Gruppen. **Block styles** hält die Stile für ganze Absätze und Überschriften, **Text styles** die für markierte Worte. Nach der Wahl eines Stils zeigt die Schaltfläche seinen Namen, oder **Multiple styles**, wenn mehrere zutreffen. Der Editor speichert Element und Klassen im HTML der Seite, daher sehen Besucher denselben Look. Ein Blockstil ist nur in seinem eigenen Element aktiv: `Sassy Title` braucht den Cursor in einer **Heading 1**. ## Settings Alle 36 Schaltflächen erscheinen in beiden Gruppen. Ein neues Profil beginnt mit diesen aktivierten: | Schaltfläche | Systemname | Inline-Standard | Modal-Standard | |---|---|:-:|:-:| | **AI Assistant**, **AI Tone of Voice** | `aiAgentButton`, `aiAgentToneButton` | ja | ja | | **Bold**, **Italic** | `bold`, `italic` | ja | ja | | **Underline**, **Strike through** | `underline`, `strikethrough` | | ja | | **Superscript**, **Subscript** | `superscript`, `subscript` | | ja | | **Remove format** | `removeFormat` | ja | ja | | **Text color** | `fontColor` | ja | ja | | **Background color** | `fontBackgroundColor` | | | | **Font size** | `fontSize` | ja | ja | | **Font family** | `fontFamily` | | | | **HTML block format** | `heading` | ja | ja | | **Font style** (die **Styles**-Liste) | `style` | ja | ja | | **Align left**, **Center**, **Align right**, **Justify** | `alignment:left`, `alignment:center`, `alignment:right`, `alignment:justify` | ja | ja | | **Insert/Remove Bullet list** | `bulletedList` | ja | ja | | **Insert/Remove Numbered list** | `numberedList` | | ja | | **Outdent**, **Indent** | `outdent`, `indent` | | ja | | **Block quote** | `blockQuote` | | ja | | **Link**, **Image**, **Table** | `link`, `insertImage`, `insertTable` | ja | ja | | **Horizontal rule**, **Character map** | `horizontalLine`, `specialCharacters` | | ja | | **Source code**, **Show blocks** | `sourceEditing`, `showBlocks` | | ja | | **Select all**, **Replace**, **Accessibility help** | `selectAll`, `findAndReplace`, `accessibilityHelp` | | | | **Undo**, **Redo** | `undo`, `redo` | ja | ja | Bearbeitende, deren Rollen zu keinem aktivierten Profil passen, erhalten die eingebauten Symbolleisten. Inline sind das **Bold**, **Italic**, **Remove format**, **HTML block format**, **Font style**, beide Listen, **Link**, **Image**, **Table**, **Undo** und **Redo**. Die modale Symbolleiste fügt die Unterstreichungs-, Durchstreichungs-, Hoch-/Tiefstellungs-, Ausrichtungs-, Einzugs-, Farb- und Größenschaltflächen hinzu. Sie fügt außerdem **Block quote**, **Horizontal rule**, **Character map**, **Source code** und **Show blocks** hinzu. Wenn KI an ist, erhalten beide die zwei KI-Schaltflächen. **Font family** bietet CKEditors websichere Standard-Fonts, nicht die Fonts Ihres Themes. ## Wenn Sie Ihren Stil nicht sehen - **Die Styles-Liste zeigt nur die mitgebrachten Stile.** Eine Zeile bricht das Format, oder eine Leerzeile sitzt zwischen zwei Stilen, daher ignoriert DXPR Builder die ganze Liste. Korrigieren Sie sie unter **Text Editor** auf `/admin/dxpr_studio/dxpr_builder/settings` und speichern Sie. - **Ihr Stil ist ausgegraut.** Ein Blockstil funktioniert nur in seinem eigenen Element: `h1.sassy-title` braucht eine **Heading 1**. Ändern Sie zuerst den Block mit der Überschriftenliste, oder definieren Sie den Stil für `p`. - **Es gibt keine Styles-Schaltfläche in der Symbolleiste.** Das Profil des Editors hat **Font style** deaktiviert. Aktivieren Sie es in beiden Schaltflächengruppen unter `/admin/dxpr_studio/dxpr_builder/profile`. - **Der Stil greift, aber der Text sieht gleich aus.** Das Theme hat kein CSS für die Klasse, oder Bootstrap 5 ist nicht geladen. Fügen Sie die Regel zum Theme hinzu, oder setzen Sie **Sideload Bootstrap files** auf **Bootstrap 5** unter **Bootstrap** auf der Seite General Settings. - **Bearbeitende sehen den Stil, Besucher nicht.** **Apply text format filters to frontend content** ist unter **Text Filters** an, und das Textformat des Felds entfernt `class`-Attribute. Schalten Sie die Option aus, oder geben Sie dem Feld ein Format, das Klassen behält; siehe [Besucher sehen etwas anderes](/hc/documentation/learn-dxpr-builder/troubleshooting/visitors-see-something-else). ## Wie geht es weiter? - [Eigenes CSS](/de/hc/documentation/learn-dxpr-builder/customization/custom-css): schreiben Sie die Theme-Regeln hinter Ihren Stilklassen. - [Dienstklassen](/de/hc/documentation/learn-dxpr-builder/customization/utility-classes): Klassen für ganze Elemente in der **HTML classes**-Liste anbieten. - [Benutzerprofile](/de/hc/documentation/learn-dxpr-builder/admin/user-profiles-admin): alles Übrige, was ein Profil steuert.