Zum Inhalt springen
PageSpeed 100 als Auslieferungs-Standard
Auf dieser Seite

Bausteine: Text und Struktur

Zehn Bausteine für den Lesefluss längerer Seiten und Blogbeiträge: Einleitung, Zitat, Hervorhebung, Kernaussagen, Listen, Hinweisboxen, Trennlinie, Code, Terminal und Bild. Zu jedem stehen hier alle Einstellungen.

Überblick

Bausteine für den Lesefluss: Einleitung, Zitat, Hervorhebung, Listen, Hinweise, Trennlinien, Code und Bilder.

Diese Bausteine finden Sie im Editor unter „Text & Struktur". Sie eröffnen keinen eigenen Abschnitt, sondern hängen sich an den Abschnitt darüber an — sie gehören also optisch zu der Überschrift, unter der sie stehen.

In allen Textfeldern funktionieren dieselben Auszeichnungen: ==Akzent==, **fett**, *kursiv*, `Code` und [Link](/ziel/). Eine Leerzeile beginnt einen neuen Absatz.

Einleitung intro

Hervorgehobener Einleitungstext am Anfang einer Seite oder eines Beitrags.

Im Editor
Text & Struktur
Seitenaufbau
Im Abschnitt
Einstellungen
1

Ein einleitender Absatz, der das Thema in zwei, drei Sätzen einordnet und zum Weiterlesen führt.

Die Einleitung wird gegenüber dem übrigen Text hervorgehoben.
Alle Einstellungen des Bausteins Einleitung
EinstellungArtPflichtVorgabeBedeutung
textTextPflicht keine VorgabeDer Einleitungstext; Markdown ist erlaubt.

Dazu kommen die gemeinsamen Einstellungen _style.

Zitat quote

Hervorgehobenes Zitat mit Quellenangabe.

Im Editor
Text & Struktur
Seitenaufbau
Im Abschnitt
Einstellungen
2

Ein prägnantes Zitat, das eine Aussage auf den Punkt bringt.

Quelle / Person
Zitat mit Quellenangabe. Beides sind Platzhalter — tragen Sie nur Zitate ein, die wirklich so gefallen sind.
Alle Einstellungen des Bausteins Zitat
EinstellungArtPflichtVorgabeBedeutung
textTextPflicht keine VorgabeDer Wortlaut des Zitats.
citeTextoptional keine VorgabeWer oder was zitiert wird.

Dazu kommen die gemeinsamen Einstellungen _style.

Hervorhebung highlight

Kurzer, farbig abgesetzter Textblock für eine wichtige Aussage.

Im Editor
Text & Struktur
Seitenaufbau
Im Abschnitt
Einstellungen
2

Wichtig

Ein hervorgehobener Hinweis mit besonderem Gewicht.
Die Hervorhebung zieht einen einzelnen Gedanken aus dem Fließtext heraus.
Alle Einstellungen des Bausteins Hervorhebung
EinstellungArtPflichtVorgabeBedeutung
textTextPflicht keine VorgabeDer hervorgehobene Text.
titleTextoptional keine VorgabeÜberschrift über dem Text.

Dazu kommen die gemeinsamen Einstellungen _style.

Kernaussagen key-takeaways

Kasten mit den wichtigsten Punkten in Kürze, vor allem für Blogbeiträge.

Im Editor
Text & Struktur
Seitenaufbau
Im Abschnitt
Einstellungen
2

Das Wichtigste in Kürze

  • Erste Kernaussage.
  • Zweite Kernaussage.
  • Dritte Kernaussage.
Kernaussagen fassen einen längeren Text am Anfang zusammen.
Alle Einstellungen des Bausteins Kernaussagen
EinstellungArtPflichtVorgabeBedeutung
titleTextoptional keine VorgabeÜberschrift über dem Baustein.
itemsTextlisteoptionalleer Die Kernaussagen in Reihenfolge.

Dazu kommen die gemeinsamen Einstellungen _style.

Liste list

Aufzählung als Punkte, Nummern oder Häkchenliste.

Als nummerierte Liste oder Häkchenliste mit mindestens drei Punkten entsteht daraus zusätzlich eine maschinenlesbare Liste für Suchmaschinen.

Im Editor
Text & Struktur
Seitenaufbau
Im Abschnitt
Einstellungen
2
  • Erster Punkt
  • Zweiter Punkt
  • Dritter Punkt
Dieselbe Liste gibt es über „style" auch mit Punkten oder Nummern.
Alle Einstellungen des Bausteins Liste
EinstellungArtPflichtVorgabeBedeutung
itemsTextlistePflichtleer Die Zeilen der Liste in Reihenfolge.
styleAuswahloptionalunordered Art der Liste: unordered (Punkte), ordered (Nummern) oder checklist (Häkchen). Mögliche Werte: unordered, ordered, checklist

Dazu kommen die gemeinsamen Einstellungen _style.

Hinweisbox callout

Farbig abgesetzter Kasten für Hinweise, Tipps oder Warnungen.

Im Editor
Text & Struktur
Seitenaufbau
Im Abschnitt
Einstellungen
3

Hinweis

Ein Hinweistext in einer farbigen Box.
Die Hinweisbox in der Variante „info". Über „variant" gibt es außerdem tip, warning, danger und success.
Alle Einstellungen des Bausteins Hinweisbox
EinstellungArtPflichtVorgabeBedeutung
textTextPflicht keine VorgabeDer Text im Kasten; Markdown ist erlaubt.
variantAuswahloptionalinfo Art des Hinweises: info, tip, warning, danger oder success; sie bestimmt Farbe und Symbol. Mögliche Werte: info, tip, warning, danger, success
titleTextoptional keine VorgabeÜberschrift im Kasten.

Dazu kommen die gemeinsamen Einstellungen _style.

Trennlinie divider

Waagerechte Linie zwischen zwei Abschnitten.

Der Trenner hat keinen Text. Im Inspektor weist der Editor darauf hin; Linie, Breite und Abstand stellen Sie trotzdem ein.

Im Editor
Text & Struktur
Seitenaufbau
Im Abschnitt
Einstellungen
2
Eine Trennlinie im Stil „gradient" mit der Breite „wide".
Alle Einstellungen des Bausteins Trennlinie
EinstellungArtPflichtVorgabeBedeutung
styleAuswahloptionalgradient (Darstellung)Strichart: gradient, solid, dashed oder dotted. Mögliche Werte: gradient, solid, dashed, dotted
widthAuswahloptionalfull (Darstellung)Breite der Linie: full, wide oder narrow. Mögliche Werte: full, wide, narrow

Dazu kommen die gemeinsamen Einstellungen _style.

Code code

Codeblock mit Dateikopf für technische Inhalte.

Im Editor
Text & Struktur
Seitenaufbau
Im Abschnitt
Einstellungen
3
start.sh
echo "Hallo Welt"
Ein Code-Block mit Dateiname und Sprachangabe im Kopf.
Alle Einstellungen des Bausteins Code
EinstellungArtPflichtVorgabeBedeutung
codeTextPflicht keine VorgabeDer Quelltext.
languageTextoptionalleer Sprache des Quelltextes; sie steht im Kopf des Blocks.
filenameTextoptional keine VorgabeDateiname im Kopf des Blocks.

Dazu kommen die gemeinsamen Einstellungen _style.

Terminal terminal

Darstellung von Befehlen und ihrer Ausgabe wie in einer Eingabeaufforderung.

Im Editor
Text & Struktur
Seitenaufbau
Im Abschnitt
Einstellungen
4
Terminal
$ npm run build
fertig in 2,4 s
Befehl und Ausgabe in der Darstellung eines Terminals.
Alle Einstellungen des Bausteins Terminal
EinstellungArtPflichtVorgabeBedeutung
commandsEinträge (Text oder Objekt)Pflichtleer Die Zeilen; entweder ein reiner Befehl als Text oder ein Eintrag mit Ausgabe.
commands[].promptTextoptional keine VorgabeZeichen vor dem Befehl.
commands[].commandTextPflicht keine VorgabeDer Befehl selbst.
commands[].outputTextoptional keine VorgabeDie Ausgabe unter dem Befehl.

Dazu kommen die gemeinsamen Einstellungen _style.

Bild image

Einzelnes Bild mit optionaler Unterschrift.

Der Alternativtext ist Pflicht: Er beschreibt das Bild für Menschen, die es nicht sehen können. Liegt das Bild unter einer vollständigen Adresse, entsteht daraus zusätzlich eine Bildangabe für Suchmaschinen.

Im Editor
Text & Struktur
Seitenaufbau
Im Abschnitt
Einstellungen
3
Alle Einstellungen des Bausteins Bild
EinstellungArtPflichtVorgabeBedeutung
srcTextPflicht keine VorgabeAdresse der Bilddatei.
altTextPflicht keine VorgabeAlternativtext, der das Bild beschreibt; er ist für die Barrierefreiheit Pflicht.
captionTextoptional keine VorgabeKurze Unterschrift unter dem Inhalt.

Dazu kommen die gemeinsamen Einstellungen _style.