Voeg merkstijlen en knoppen toe aan de teksteditor.

DXPR Builder lerenDe site beherenJe huisstijl toepassen

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.

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.

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:

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 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 tekstwerkbalk van een Tekst-element waarvan de knop Styles Lead leest, boven de alinea met de cursor erin, nu in de grotere Lead-stijl boven een normale alinea

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.

Wat nu?