Textgröße und -farbe ändern.
Machen Sie einen Lead-Satz größer, setzen Sie ein Zitat in Ihre Markenfarbe oder machen Sie eine Überschrift weiß auf einem dunklen Foto. Mit Font size und Font color im Style-Panel ändern Sie den gesamten Text in einem Element. Für einen Textteil nutzen Sie stattdessen die Symbolleiste des Texteditors. Für Größen und Farben, die jede Seite teilt, nutzen Sie Ihr Theme.
Das Video folgt dem Rezept unten: Es macht aus einem Satz einen Lead mit größerer Schrift und Markenfarbe.
Bevor Sie beginnen
- Öffnen Sie die Seite in DXPR Builder; wenn Sie auf ein Element zeigen, erscheint seine Steuerleiste mit More. Neu im Builder? Siehe Ihre erste Seite.
- Speichern im Dialog behält eine Änderung im Editor. Speichern in der Builder-Symbolleiste über Ihrem Inhalt speichert die Seite und zeigt „Saved field“.
- Nutzen Sie das Style-Panel für ein Element: einen Lead-Absatz, ein Zitat, eine Überschrift auf einem Foto.
- Nutzen Sie den Texteditor für einen Textteil und die Struktur. Machen Sie eine Überschrift mit Heading 2 oder Heading 3 zu einer echten Überschrift, nicht zu einer größeren Normal-Zeile. Screenreader und Suchmaschinen lesen die Ebene, nicht die Größe.
- Nutzen Sie die Styles-Liste des Editors für Marken-Textstile. Ihr Webmaster legt sie unter General Settings > Text Editor > Custom styles (
/admin/dxpr_studio/dxpr_builder/settings) fest. - Nutzen Sie Ihr Theme für die Body-Schrift, Überschriftengrößen und Linkfarben.
Rezept: ein Lead-Satz in Ihrer Markenfarbe
- Fügen Sie ein Text-Element hinzu und geben Sie einen oder zwei Sätze als Normal-Text ein.
- Fahren Sie mit der Maus darüber, klicken Sie auf More und dann auf Settings.
- Öffnen Sie das Style-Panel und ziehen Sie Font size auf 20. Der Text wächst beim Ziehen.
- Öffnen Sie Font color und wählen Sie Ihre Markenfarbe aus den Farbfeldern oder geben Sie ihren Code, zum Beispiel #1a4d8f, in das Farbfeld ein.
- Klicken Sie im Dialog auf Speichern. Mit 20 px zählt der Satz als normaler Text, braucht also einen Kontrast von 4,5 zu 1. Geben Sie Ihren Farbcode und die Hintergrundfarbe in einen Kontrastprüfer ein; eine weiße Seite ist #ffffff.
- Klicken Sie in der Symbolleiste auf Speichern.
Was Sie sehen
Der Satz wächst auf 20 px und nimmt Ihre Markenfarbe an. Überschriften und Links im selben Text-Element übernehmen diese Farbe ebenfalls, behalten aber ihre eigene Größe.
Wie die Einstellungen funktionieren
Font size
Font size reicht von 0 bis 100 px und 0 behält die Theme-Größe. Der Wert gilt auf jeder Bildschirmgröße gleich: Eine 48-px-Zeile auf dem Desktop ist auch 48 px auf dem Smartphone.
Die Größe liegt auf dem Element und Text mit eigener Größe behält sie. Überschriften meist schon, denn Bootstrap bemisst sie aus der Basisgröße der Seite. Text, den Sie mit dem Schriftgrößenwerkzeug des Editors bemessen haben, behält seine Größe ebenfalls.
Font color
Die Auswahl zeigt die Palette Ihres Themes als Farbfelder, wenn Ihre Website eine hat. Dazu gibt es einen Opazitätsregler und ein Feld, in das Sie einen Farbcode eingeben, zum Beispiel #1a4d8f. Clear in der Auswahl stellt den Text auf die Theme-Farbe zurück.
Auf einem Inhaltselement wie Text, Card oder Alert erreicht die Farbe alles darin, Überschriften und Links eingeschlossen. Auf einer Section erreicht sie nur Text ohne eigene Farbe. Überschriften und Links, die Ihr Theme färbt, behalten dort ihre Farbe.
Bootstrap-Farbklassen sind mit !important markiert, schlagen also Font color. Ein Beispiel ist der Chip Primary text color unter HTML classes. Ein anderes ist ein Editorstil wie Primary Brand Text auf einem Textteil.
Auf einem Button liegt die Farbe auf dem Button selbst und ersetzt die Hover-Farbe des Themes. Stellen Sie Font color ebenfalls in Hover style ein.
Hover
Das Hover style-Panel hat seine eigene Font color und Font size. Eine größere Größe beim Darüberfahren schiebt den Inhalt darum herum, sodass eine Farbänderung meist die ruhigere Wahl ist.
Kontrast
Damit die meisten Menschen Text lesen können, verlangen die WCAG-2-Regeln auf Level AA diesen Kontrast:
| Text | Kontrast zum Hintergrund |
|---|---|
| Normaler Text | mindestens 4,5 zu 1 |
| Großer Text: 24 px (18 pt) oder mehr, oder 19 px (14 pt) oder mehr in Fett | mindestens 3 zu 1 |
Messen Sie auf einem Foto an der hellsten Stelle hinter dem Text. Testen Sie Ihr Farbpaar mit einem Kontrastprüfer, zum Beispiel dem WebAIM contrast checker.
Wenn Sie es nicht sehen
- Die Überschrift im Text ist nicht gewachsen. Die Überschrift hat ihre eigene Größe aus Ihrem Theme. Wählen Sie eine andere Überschriftenebene im Texteditor oder nutzen Sie dessen Schriftgrößenwerkzeug.
- Links und Überschriften behalten ihre Farbe. Auf einer Section behält Text mit eigener Theme-Farbe sie. Stellen Sie stattdessen Font color auf dem Text-Element ein.
- Font color tut gar nichts. Eine Farbklasse wie Primary text color oder White text unter HTML classes gewinnt. Entfernen Sie ihren Chip.
- Ein Textteil behält eine andere Farbe. Ein Editorstil auf diesem Teil, zum Beispiel Primary Brand Text, gewinnt. Entfernen Sie den Stil im Texteditor.
- Font size tut nichts auf einem Zähler. Circle counter und Number counter haben ihre eigene Font size. Nutzen Sie diese.
- Eine Farbfeld-Farbe passt nicht mehr zur Marke. Ein Farbfeld kopiert die Farbe beim Wählen. Wählen Sie das Farbfeld nach einer Palettenänderung erneut.
- Die Markenfarbe besteht die Kontrastprüfung nicht. Wählen Sie einen dunkleren Ton davon. Oder machen Sie den Text mindestens 24 px groß, sodass das 3-zu-1-Ziel gilt.
- Der Text ist schwer auf einem Foto zu lesen. Der Kontrast ist zu niedrig. Dunkeln Sie das Foto mit einem Verlauf ab, wie auf der Seite Hintergründe gezeigt.
- Der Button hat seine Hover-Textfarbe verloren. Ihre Font color ersetzt die Hover-Farbe des Themes. Stellen Sie Font color ebenfalls in Hover style ein.
Wie geht es weiter?
- HTML-ID und Klassen: Einen Textstil über eine Klasse wiederverwenden, statt ihn auf jedem Element zu setzen.