Text und Überschrift

Nur eine Überschrift mit Untertitel – als Zwischentitel zwischen zwei Abschnitten. Einstellungen: Ebene (H1–H6) im Feld selbst; im Style Manager unter „Überschrift“ Größe, Fettung und Ausrichtung, unter „Farben“ die Farbe der Überschrift. Hier: Größe „Display 4“, zentriert, Hauptfarbe 1.

Überschrift, Untertitel und Fließtext mit dem Editor – Absätze, Fettung, Links, Listen. Die Zeilenlänge begrenzt das Theme auf eine angenehme Lesebreite.

So sieht es aus: größere Schrift, eine Zierlinie unter der Überschrift – der Auftakt einer Seite. Einstellungen: Style Manager → „Text und Bild“ → Darstellung „Einleitung“.

So sieht es aus: ab 992 px Breite steht die Überschrift links, der Text rechts daneben; darunter untereinander. Für einen ruhigen, großzügigen Einstieg.

Einstellungen: im Element „Bild hinzufügen“, Bildgröße und Ausrichtung „rechts“; im Style Manager → „Text und Bild“ → „Breite des Bildes“: schmal (30 %), halb oder breit (60 %) – hier schmal. Auf dem Telefon steht das Bild über dem Text.

Wie oben, Ausrichtung „links“, Breite des Bildes „halb“ – für Texte, in denen das Bild gleich wichtig ist.

Ausrichtung „über dem Text“. Das Bild wird nie breiter als die Spalte; schmaler bleibt es nur, wenn die Bilddatei selbst schmaler ist. Die Bildunterschrift kommt aus den Metadaten der Datei oder aus „Metadaten überschreiben“.

So sieht es aus: lange Texte laufen ab dem gewählten Gerät in zwei Spalten. Einstellungen: Style Manager → „Text und Bild“ → „Fließtext in zwei Spalten“ (hier „zwei Spalten ab Notebook“).

Im Text-Element unter „Link unter dem Text“: Adresse, auf Wunsch „In neuem Fenster öffnen“, Link-Text und Link-Titel (Tooltip). Die übrigen Felder und der Abschnitt „Aussehen des Links“ erscheinen, sobald eine Adresse eingetragen ist.

Die Felder sind dieselben wie beim Element „Link / Button“: Textlink oder Button, Farbe, nur Rahmen, Größe, Symbol. Buttons sehen überall gleich aus; der Textlink ist hier – wie in den Boxen – die leise Form unter einem Text, ohne die Großbuchstaben des Elements „Link / Button“. Hier ein Textlink in Hauptfarbe 1, das Symbol passend zur Link-Art.

„Darstellung“: Button, hier in Hauptfarbe 2 und Größe L. Ein Link in ein neues Fenster bekommt von selbst rel="noopener" und einen Hinweis für Screenreader; E-Mail- und Telefonlinks öffnen nie ein neues Fenster.

„Darstellung“: ganzes Element verlinken – ein Klick irgendwo auf das Element öffnet den Link. Der Link-Text wird nicht angezeigt, aber vorgelesen; er sollte sagen, wohin es geht. Links im Text sind dann nicht einzeln anklickbar.

Mit Hintergrund und Innenabstand aus dem Style Manager sieht man, welche Fläche klickbar ist – hier Hellgrau.

So sieht es aus: ein einzelner Absatz größer als Einstieg, ein Zitat mit Anführungszeichen, ein Absatz klein für Hinweise. So geht’s: im Editor in den Absatz klicken, dann „Formate“ → „Absatz“ → „Einleitung (größer)“, „Kleingedruckt“ oder „Zitat“. Wer zitiert wird, steht im Zitat kursiv („I“) – das Theme setzt es gerade und etwas dunkler.

Soll der ganze Text als Auftakt der Seite größer werden, gibt es die Darstellung „Einleitung“ im Style Manager (Artikel „Einleitung“ oben).

So sieht es aus: ein markierter Begriff und Absätze in den Hauptfarben. So geht’s: zum Markieren die Wörter auswählen, für eine Textfarbe in den Absatz klicken – dann „Formate“ → „Markieren“ bzw. „Textfarbe“. Markierungen sparsam setzen: ein, zwei Begriffe je Absatz.

Nicht jede Hauptfarbe ist auf Weiß gut lesbar. Welche zu hell ist, sagt das Menü selbst: Sie trägt den Zusatz „(nur auf dunklen Flächen)“ und gehört auf eine dunkle Fläche (nächster Artikel). Kräftige Farben eignen sich für kurze Hervorhebungen in fetter Schrift.

So sieht es aus: ein Element in Hauptfarbe 1 mit weißer Schrift, ein Absatz hebt sich in Hauptfarbe 3 ab. So geht’s: Hintergrund und Schriftfarbe des ganzen Elements kommen aus dem Style Manager („Farben“ → Hintergrund, Text und Überschrift), der einzelne Absatz im Editor aus „Formate“ → „Textfarbe“.

„Weiß (nur auf dunklen Flächen)“ ist für einen einzelnen Absatz gedacht. Die Schrift des ganzen Elements stellt der Style Manager ein.

So sieht es aus: eine Aufzählung mit Haken, eine mit Pfeilen. So geht’s: im Editor eine Aufzählung anlegen (Listen-Symbol), in die Liste klicken, dann „Formate“ → „Listen“ → „Liste mit Haken“ oder „Liste mit Pfeil“.

Mehr Symbole, Farben und Listen in zwei Spalten bietet das Element „Liste“ (Seite „Listen und Tabellen“).

So sieht es aus: Links im Text als Buttons – genauso wie die Buttons der Elemente. So geht’s: einen Link setzen (Link-Symbol), den Link anklicken, dann „Formate“ → „Link als Button“ → „Button“, „Button in Hauptfarbe 2“ oder „Button umrandet“.

Für einen einzelnen Button unter dem Text ist „Link unter dem Text“ (oben) der bequemere Weg. Im Text stehen auch mehrere Buttons nebeneinander.