--- url: 'https://dxpr.com/nl/hc/documentatie/dxpr-builder-leren/aanpassing/teksteditor' title: 'Voeg merkstijlen en knoppen toe aan de teksteditor | DXPR' author: name: Jurriaan url: 'https://dxpr.com/users/jurriaan' date: '2023-11-06T10:11:51+00:00' updated: '2026-10-24T17:19:22+00:00' copyright: 'Copyright DXPR. All rights reserved.' type: article summary: |- Wanneer redacteurs in DXPR Builder in een tekst klikken, verschijnt een werkbalk. Je kunt de lijst Styles vullen met de stijlen van je merk, zoals een leadalinea of een uitgelichte frase. Je kunt ook kiezen welke knoppen elke rol ziet. Redacteurs geven daarna met één klik een merklook in plaats van maten en kleuren met de hand in te stellen. Lettertypen komen uit je thema; zie Aangepaste lettertypen. tags: - 'Match your brand' 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: 'Voeg merkstijlen en knoppen toe aan de teksteditor' description: |- Wanneer redacteurs in DXPR Builder in een tekst klikken, verschijnt een werkbalk. Je kunt de lijst Styles vullen met de stijlen van je merk, zoals een leadalinea of een uitgelichte frase. Je kunt ook kiezen welke knoppen elke rol ziet. Redacteurs geven daarna met één klik een merklook in plaats van maten en kleuren met de hand in te stellen. Lettertypen komen uit je thema; zie Aangepaste lettertypen. image: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg' width: '1200' height: '630' datePublished: '2023-11-06T10:11:51+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/nl/hc/documentatie/dxpr-builder-leren/aanpassing/teksteditor' articleSection: 'Je huisstijl toepassen' - '@type': WebPage '@id': 'https://dxpr.com/nl/hc/documentatie/dxpr-builder-leren/aanpassing/teksteditor' description: |- Wanneer redacteurs in DXPR Builder in een tekst klikken, verschijnt een werkbalk. Je kunt de lijst Styles vullen met de stijlen van je merk, zoals een leadalinea of een uitgelichte frase. Je kunt ook kiezen welke knoppen elke rol ziet. Redacteurs geven daarna met één klik een merklook in plaats van maten en kleuren met de hand in te stellen. Lettertypen komen uit je thema; zie Aangepaste lettertypen. breadcrumb: '@type': BreadcrumbList itemListElement: - '@type': ListItem position: 1 name: Home item: 'https://dxpr.com/nl' publisher: '@type': Organization '@id': 'https://dxpr.com/#organization' name: DXPR inLanguage: nl --- [Helpcentrum](/nl/hc)/[Documentatie](/nl/hc/documentatie) /[DXPR Builder leren](/nl/hc/documentation/learn-dxpr-builder) /[De site beheren](/nl/hc/documentation/learn-dxpr-builder/manage) /[Je huisstijl toepassen](/nl/hc/documentation/learn-dxpr-builder/customization) # Voeg merkstijlen en knoppen toe aan de teksteditor. DXPR Builder lerenDe site beherenJe huisstijl toepassen ## In deze gids Gerelateerde gidsen - [Geef builderinhoud stijl met de CSS van je thema](/nl/hc/documentatie/dxpr-builder-leren/aanpassing/aangepaste-css) - [Utility-klassen](/nl/hc/documentatie/dxpr-builder-leren/aanpassing/utility-klassen) - [Kies wat elke rol in de builder ziet](/nl/hc/documentatie/dxpr-builder-leren/beheer/gebruikersprofielen-beheer) Wanneer redacteurs in DXPR Builder in een tekst klikken, verschijnt een werkbalk. Je kunt de lijst **Styles** vullen met de stijlen van je merk, zoals een leadalinea of een uitgelichte frase. Je kunt ook kiezen welke knoppen elke rol ziet. Redacteurs geven daarna met één klik een merklook in plaats van maten en kleuren met de hand in te stellen. Lettertypen komen uit je thema; zie [Aangepaste lettertypen](/nl/hc/documentatie/dxpr-builder-leren/aanpassing/aangepaste-lettertypen). ## Voordat je begint - Om stijlen te bewerken, heb je **Administer DXPR Builder configuration** nodig. - Om werkbalkknoppen te bewerken, heb je **Administer dxpr builder profile** nodig. - Elke stijl heeft CSS erachter nodig. Bootstrap 5-klassen zoals `lead` werken wanneer de pagina Bootstrap 5 laadt. Je eigen klassen hebben een regel in het thema nodig; zie [Aangepaste CSS](/nl/hc/documentatie/dxpr-builder-leren/aanpassing/aangepaste-css). ## Instellen 1. Ga naar **DXPR Studio** > **DXPR Builder** > **General Settings**(`/admin/dxpr_studio/dxpr_builder/settings`). 2. Vouw **Text Editor** uit. Het vak **Custom styles** somt de stijlen die met DXPR Builder meekomen al op, één per regel. 3. Voeg één regel per stijl toe in de vorm `Label=element.class`, en verwijder de regels die je niet wilt. 4. Klik op **Save settings**. 5. Open een pagina in de builder, of herlaad hem als hij open is, en klik in een tekst. 6. Klik op de werkbalk op **Styles** en kies je stijl. Deze regels voegen vier stijlen toe: ```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 ``` Elke regel heeft drie delen: - Het **label** vóór `=` is de naam die redacteurs in de lijst zien. - Het **element** na `=` bepaalt wat de stijl dekt. Een blokelement zoals `p`, `h2` of `blockquote` geeft een hele alinea of kop stijl. Een inline-element zoals `span`, `mark` of `code` wrapt alleen de geselecteerde woorden. - Elke **class** volgt na een punt. Voeg meer klassen toe met meer punten, zoals in `Callout` hierboven. Elementnamen gebruiken alleen letters en cijfers. Klassenamen gebruiken letters, cijfers, koppeltekens en underscores. Om de meegeleverde lijst terug te krijgen, leeg je het vak en sla je op. ## Werkbalkknoppen per rol 1. Ga naar **DXPR Studio** > **DXPR Builder** > **User Profiles**(`/admin/dxpr_studio/dxpr_builder/profile`) en klik naast het profiel voor de rol op **Edit**. 2. Vouw **Text editor buttons (inline editing)** uit. Vink de knoppen aan voor tekst die je op de pagina bewerkt. 3. Vouw **Text editor buttons (modal editing)** uit. Vink de knoppen aan voor tekstvakken in een instellingendialoogvenster. 4. Klik op **Save**. Inline bewerken dekt de elementen Tekst, Melding en Citaat. Houd **Font style** in beide groepen aangevinkt om je aangepaste stijlen te tonen; zo heet de lijst **Styles** in het profiel. Als je elke knop in een groep uitvinkt, valt die werkbalk terug op de ingebouwde set. [Gebruikersprofielen](/nl/hc/documentation/learn-dxpr-builder/admin/user-profiles-admin) legt uit welk profiel voor wie geldt. ## Wat je ziet **Styles** op de werkbalk opent een paneel met twee groepen. **Block styles** bevat de stijlen voor hele alinea's en koppen, **Text styles** die voor geselecteerde woorden. Nadat je een stijl hebt gekozen, toont de knop zijn naam, of **Multiple styles** wanneer er meerdere gelden. De editor slaat het element en zijn klassen op in de HTML van de pagina, zodat bezoekers dezelfde look zien. Een blokstijl is alleen actief in zijn eigen element: `Sassy Title` heeft de cursor in een **Heading 1** nodig. ## Instellingen Alle 36 knoppen verschijnen in beide groepen. Een nieuw profiel begint met deze aangevinkt: | Knop | Machinenaam | Inline-standaard | Modal-standaard | |---|---|:-:|:-:| | **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** (de lijst **Styles**) | `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 | Gebruikers van wie de rollen in geen enkel ingeschakeld profiel voorkomen, krijgen de ingebouwde werkbalken. Inline, dat is **Bold**, **Italic**, **Remove format**, **HTML block format**, **Font style**, beide lijsten, **Link**, **Image**, **Table**, **Undo** en **Redo**. De modale werkbalk voegt de knoppen voor onderstrepen, doorhalen, script, uitlijning, inspringen, kleur en grootte toe. Die voegt ook **Block quote**, **Horizontal rule**, **Character map**, **Source code** en **Show blocks** toe. Wanneer AI aanstaat, krijgen beide de twee AI-knoppen. **Font family** biedt de standaard webveilige lettertypen van CKEditor, niet de lettertypen van je thema. ## Als je je stijl niet ziet - **De lijst Styles toont alleen de meegeleverde stijlen.** Eén regel breekt het formaat, of een lege regel staat tussen twee stijlen, dus DXPR Builder negeert de hele lijst. Corrigeer hem onder **Text Editor** op `/admin/dxpr_studio/dxpr_builder/settings` en sla op. - **Je stijl is grijs.** Een blokstijl werkt alleen in zijn eigen element: `h1.sassy-title` heeft een **Heading 1** nodig. Wijzig het blok eerst met de koppenlijst, of definieer de stijl voor `p`. - **Er is geen knop Styles op de werkbalk.** Het profiel van de editor heeft **Font style** uitgevinkt. Vink het aan in beide knopgroepen op `/admin/dxpr_studio/dxpr_builder/profile`. - **De stijl geldt, maar de tekst ziet er hetzelfde uit.** Het thema heeft geen CSS voor de klasse, of Bootstrap 5 is niet geladen. Voeg de regel toe aan het thema, of zet **Sideload Bootstrap files** op **Bootstrap 5** onder **Bootstrap** op de pagina Algemene instellingen. - **Redacteurs zien de stijl, bezoekers niet.** **Apply text format filters to frontend content** staat aan onder **Text Filters**, en het tekstformaat van het veld verwijdert `class`-attributen. Zet de optie uit, of geef het veld een formaat dat klassen behoudt; zie [Bezoekers zien iets anders](/nl/hc/documentatie/dxpr-builder-leren/probleemoplossing/bezoekers-zien-iets-anders). ## Wat nu? - [Aangepaste CSS](/nl/hc/documentatie/dxpr-builder-leren/aanpassing/aangepaste-css): schrijf de themaregels achter je stijlklassen. - [Utility-klassen](/nl/hc/documentation/learn-dxpr-builder/customization/utility-classes): bied klassen voor hele elementen aan in de lijst **HTML classes**. - [Gebruikersprofielen](/nl/hc/documentation/learn-dxpr-builder/admin/user-profiles-admin): al het andere dat een profiel beheert.