Tekstgrootte en -kleur instellen.
Maak een leadzin groter, zet een citaat in je merkkleur, of maak een kop wit op een donkere foto. Met Lettergrootte en Letterkleur in het paneel Stijl wijzig je alle tekst in één element. Voor een deel van een tekst gebruik je juist de werkbalk van de teksteditor. Voor groottes en kleuren die elke pagina deelt, gebruik je je thema.
De video volgt het recept hieronder: hij maakt van één zin een lead met een grotere grootte en een merkkleur.
Voordat je begint
- Open de pagina in DXPR Builder; als je op een element wijst toont hij zijn besturingsbalk met More. Nieuw in de builder? Zie Je eerste pagina.
- Opslaan in het dialoogvenster bewaart een wijziging in de editor. Opslaan op de builder-werkbalk boven je inhoud slaat de pagina op en toont “Veld opgeslagen”.
- Gebruik het paneel Stijl voor één element: een leadalinea, een citaat, een kop op een foto.
- Gebruik de teksteditor voor een deel van een tekst en voor structuur. Maak van een kop een echte kop met Kop 2 of Kop 3, niet een grotere regel Normaal. Schermlezers en zoekmachines lezen het niveau, niet de grootte.
- Gebruik de Stijlenlijst van de editor voor merkkleur-tekststijlen. Je webmaster stelt ze in onder Algemene instellingen > Teksteditor > Aangepaste stijlen (
/admin/dxpr_studio/dxpr_builder/settings). - Gebruik je thema voor het body-lettertype, kopgroottes en linkkleuren.
Recept: een leadzin in je merkkleur
- Voeg een Tekst-element toe en typ een of twee zinnen als Normale tekst.
- Beweeg erover, klik op More en daarna Instellingen.
- Open het paneel Stijl en sleep Lettergrootte naar 20. De tekst groeit terwijl je sleept.
- Open Letterkleur en kies je merkkleur uit de stalen, of typ zijn code, zoals #1a4d8f, in het kleurveld.
- Klik in het dialoogvenster op Opslaan. Op 20 px telt de zin als normale tekst, dus hij heeft een contrast van 4,5 op 1 nodig. Voer je kleurcode en de achtergrondkleur in in een contrastchecker; een witte pagina is #ffffff.
- Klik op Opslaan op de werkbalk.
Wat je ziet
De zin groeit naar 20 px en krijgt je merkkleur. Koppen en links in hetzelfde Tekst-element krijgen die kleur ook, maar koppen behouden hun eigen grootte.
Hoe de instellingen werken
Lettergrootte
Lettergrootte loopt van 0 tot 100 px, en 0 behoudt de grootte van je thema. De waarde is hetzelfde op elk schermformaat: een regel van 48 px op een desktop is ook 48 px op een telefoon.
De grootte komt op het element, en tekst met een eigen grootte behoudt hem. Koppen meestal wel, omdat Bootstrap ze bemeten vanaf de basisgrootte van de pagina. Tekst die je met het lettergrottetool van de editor hebt bemeten behoudt zijn grootte ook.
Letterkleur
De kiezer toont het palet van je thema als stalen, als je site er een heeft. Hij heeft ook een dekkingsregelaar en een veld waarin je een kleurcode typt, zoals #1a4d8f. Wissen in de kiezer zet de tekst terug naar de themakleur.
Op een inhoudselement zoals Tekst, Kaart of Melding reikt de kleur tot alles binnenin, koppen en links inbegrepen. Op een Sectie reikt hij alleen tot tekst zonder eigen kleur. Koppen en links die je thema kleurt behouden daar hun kleur.
Bootstrap-kleurenklassen zijn gemarkeerd met !important, dus ze winnen van Letterkleur. Een voorbeeld is de chip Primaire tekstkleur onder HTML-klassen. Een ander is een editorstijl zoals Primaire merktekst op een deel van de tekst.
Op een Knop komt de kleur op de knop zelf en vervangt hij de zweefkleur van het thema. Stel Letterkleur ook in in Zweefstijl.
Hover
De Zweefstijl heeft zijn eigen Letterkleur en Lettergrootte. Een grotere grootte bij hover duwt de inhoud eromheen weg, dus een kleurwijziging is meestal de rustigere keuze.
Contrast
Voor tekst die de meeste mensen kunnen lezen, vragen de WCAG 2-regels op niveau AA om zoveel contrast:
| Tekst | Contrast met zijn achtergrond |
|---|---|
| Normale tekst | minstens 4,5 op 1 |
| Grote tekst: 24 px (18 pt) of meer, of 19 px (14 pt) of meer in vet | minstens 3 op 1 |
Meet op een foto tegen het lichtste deel achter de tekst. Test je kleurenpaar met een contrastchecker, zoals de WebAIM-contrastchecker.
Als je het niet ziet
- De kop in de tekst groeide niet mee. De kop heeft zijn eigen grootte uit je thema. Kies een ander kopniveau in de teksteditor, of gebruik zijn lettergrottetool.
- Links en koppen behouden hun kleur. Op een Sectie behoudt tekst met zijn eigen themakleur hem. Stel Letterkleur in op het Tekst-element.
- Letterkleur doet helemaal niets. Een kleurenklasse zoals Primaire tekstkleur of Witte tekst onder HTML-klassen wint. Verwijder zijn chip.
- Een deel van de tekst behoudt een andere kleur. Een editorstijl op dat deel, zoals Primaire merktekst, wint. Verwijder de stijl in de teksteditor.
- Lettergrootte doet niets op een teller. Cirkelteller en Getalenteller hebben hun eigen Lettergrootte. Gebruik die.
- Een staalkleur past niet meer bij het merk. Een staal kopieert de kleur als je hem kiest. Kies na een paletwijziging de staal opnieuw.
- De merkkleur haalt de contrastcheck niet. Kies een donkerdere tint ervan. Of maak de tekst minstens 24 px, zodat het doel van 3 op 1 geldt.
- De tekst is moeilijk te lezen op een foto. Het contrast is te laag. Maak de foto donkerder met een verloop, zoals op de pagina Achtergronden.
- De knop verloor zijn zweeftekstkleur. Je Letterkleur vervangt de zweefkleur van het thema. Stel Letterkleur ook in in Zweefstijl.
Wat nu?
- HTML-ID en klassen: hergebruik een tekststijl via een klasse in plaats van hem op elk element in te stellen.