Überschrift und Titel Block | Gutenberg Tutorial Teil 3

Rolle der Überschrift im Gutenberg Editor

WordPress gibt sechs Arten von Überschriften vor. Diese werden mit H1 (Heading 1) bis H 6 bezeichnet, wobei deren Bedeutung von H1 nach H6 absteigt. Jedoch musst du nicht alle sechs verwenden. In den meisten Fällen dürften H1, H2, H3 und evtl. noch H4 ausreichen.

Einerseits spielen diese Überschriften und deren Reihenfolge bei der Suchmaschinen-Optimierung (SEO) eine Rolle, andererseits aber auch bei der optischen Gliederung der Texte. Denn sie erleichtern den Besuchern deiner Website das Lesen nicht nur langer Beiträge. Deshalb sollten die Überschriften sich klar voneinander unterscheiden.

Um die Größe festzulegen, gehst du in den Customizer deines Themes – Typografie – und wählst für jede Überschrift eine andere Schriftgröße. Die H1 Überschrift wäre am größten, H2 geringfügig kleiner usw.; die kleinste sollte immer noch größer als die Schriftgröße des Textes sein. Außerdem könntest du eine oder mehrere fett hervorheben oder für alle Überschriften einheitlich eine andere Schriftart (Font) als für den Text verwenden.

Überschriften generell fett zu gestalten, ist nicht unbedingt die beste Idee, denn „fett“ sollte eigentlich (nur) zur Hervorhebung wichtiger Begriffe dienen. Um die Hierarchie und Bedeutung von Überschriften darzustellen, ist eine größere Schrift die bessere Wahl.

Darüber hinaus unterscheiden sich die Überschriften auch in ihrer Anzahl. So gibt es pro Beitrag nur eine H1 Überschrift. H2 kannst du je nach Länge des Textes zur Hervorhebung unterschiedlicher Themenbereiche mehrmals verwenden. Und H3 untergliedert die einzelnen Textabschnitte weiter, deshalb setzt du sie beliebig oft ein. Darüber hinaus ist es wichtig, nicht nur auf die Anzahl, sondern auch auf die Reihenfolge zu achten. Auf eine H2 Überschrift können eine zweite H2 oder eine/mehrere H3 Überschrift/en folgen, jedoch nicht direkt H4, H5 oder H6. Kontrollieren kannst du die Reihenfolge über das Hamburger-Menü links in der Kopfleiste des Editors > Übersicht.

Sonderfall – H1

Wie bereits erwähnt, gibt es in jedem Beitrag / auf jeder Seite nur eine H1 Überschrift. Da es sich hierbei immer um den Titel eines Beitrags oder einer Seite handelt, wird sie auch im Gutenberg Editor entsprechend bezeichnet. Nachdem du auf deinem WP Dashboard auf Beitrag oder Seite erstellen geklickt hast, öffnet sich der Gutenberg Editor. Direkt zuoberst siehst du den ersten Block mit der Aufforderung: Titel hier eingeben.

Du klickst in das Feld und schreibst den Titel deines neuen Betrags / deiner neuen Seite hinein. Einerseits ist die Aufgabe des Titels, das Interesse potentieller Leser an deinem Beitrag zu wecken. Andererseits sollte er nicht zu lang sein, da er sonst in der Vorschlags-Liste des Browsers gekürzt erscheint. Außerdem ist zu berücksichtigen, dass er nur ein Bestandteil der URL (s. unten) ist, dem automatisch noch weitere Bestandteile vorangestellt werden. Dies siehst du aber im Eingabefeld selbst nicht.

Im Gegensatz zu den nachrangigen Überschriften kann die H1-Überschrift im Editor nicht gestaltet werden. Ihr Aussehen bestimmen allein die Einstellungen (Schriftart, -größe, -farbe), die du im Customizer deines Themes vorgenommen hast.

Überschrift H2

Direkt unterhalb des Titels ist im Gutenberg Editor bereits ein weiterer Block angelegt. Entweder klickst du direkt in das Feld und schreibst z. B. eine kurze Einleitung. Oder du klickst auf das Plus-Symbol rechts und wählst einen anderen Block wie beispielsweise Bild aus. Details zu diesen Blöcken folgen in den jeweiligen Tutorials.

Anschließend folgt in deinem Beitrag eine H2-Überschrift. Diese ist die zweitwichtigste und sollte ebenfalls dein zuvor gewähltes Schlüsselwort enthalten. Um einen neuen Block dafür zu erstellen, hast du zwei Möglichkeiten. Entweder du

1. nutzt die Eingabe-Taste um einen neuen Absatz zu erstellen,
2. klickst auf das nun sichtbar + = die Blockauswahl erscheint und
3. dann auf Überschrift.

Oder du klickst in den vorhergehenden Block,

1. auf die drei Punkte rechts in der Bearbeitungsleiste (s. u.),
2. Block danach einfügen
3. und verfährst weiter wie unter 2. und 3. oben angegeben.

Natürlich kannst du so mittels davor oder danach einfügen auch einen neuen Block zwischen zwei bereits vorhandenen Blöcken erstellen. Anschließend erscheint jeweils eine leere Zeile / ein leeres Feld, in das du klickst und wie bereits beschrieben fortfährst. Anschließend öffnet sich über dieser Zeile (oder am oberen Rand des Editors) die Bearbeitungsleiste. Sie ähnelt der, die du z. B. aus Microsoft Word kennst.

Bearbeitungsleiste

Hier findest du folgende Optionen, die sich entweder auf den Block selbst oder auf den Text auswirken. Von links nach rechts sind dies

• Art des Blocks wechseln
• Sechs Punkte = Block an eine andere Stelle ziehen
• Pfeile = Block jeweils über / unter den vorhergehenden / nachfolgenden Block schieben
• Quadrat = einem Container hinzufügen (Gruppieren)
• Drei Linien = Ausrichtung des Blocks (normal, weite oder gesamte Breite der Seite)
• H2: Überschrift in H3, H4, … ändern
• Textausrichtung: links, zentriert oder rechts ausrichten
• Fette Schrift, kursive Schrift sowie Link erstellen
• Pfeil nach unten: Text durchstreichen, Fußnote, hervorheben, hoch stellen, Inline-Bild oder -Code, Sprache ändern, Tastatur-Eingabe, tiefer stellen sowie Typing-Animation (Schreib-Animation)
• Drei-Punkte-Menü: s. Abbildung

Anpassung über die Seitenleiste

Nachdem du deine Überschrift eingegeben hast, bietet dir die Seitenleiste des Editors noch weitere Anpassungsmöglichkeiten. Sobald du in den Überschriften-Block klickst, erscheinen dort zwei Optionen für diesen Block. Über die linke Schaltfläche (Zahrad) erreichst du die Eingabefelder für den Anker und zusätzliche CSS-Klassen (s. unten). Nach einem Klick auf die Schaltfläche daneben öffnen sich die Anpassungsoptionen für die Überschrift.

Einerseits kannst du hier die Schriftgröße der Überschrift von klein bis riesig, bzw. auf eine individuelle Größe ändern. Anderseits bestimmst du die Text- und die Hintergrundfarbe für den gesamten Block. Dies ist auf drei Wegen möglich:

• Du wählst eine der vorgegebenen Farben, indem du auf den entsprechenden Punkt klickst bzw. du
• klickst oben in das leere Feld und wählst die Farbe durch Verschieben des Kreises im Farbfelds aus
• oder du löschst den vorgegebenen Hex-Code (#FFFFFF) und setzt den für deine Farbe ein.

Unterhalb der Farbeinstellungen kannst du die Typografie anpassen. Einerseits veränderst du die Größe durch einen Klick auf S, M, L bzw. XL oder du öffnest das Symbol direkt über der Leiste und gibst die gewünschte Größe in Pixel (px) an. Weitere Optionen stehen dir nach einem Klick auf das drei-Punkte-Menü zur Verfügung:

• Design = Schriftstärke von sehr dünn bis sehr fett
• Schreibweise = nur Großbuchstaben, nur Kleinbuchstaben, alle Wörter beginnen mit einem Großbuchstaben
• Zeichenabstand = Verringern oder Erhöhen des Abstands zwischen den Buchstaben in px
• Text-Dekoration = Unterstreichen oder Durchstreichen

Wenn dir die gewählten Anpassungen nicht mehr gefallen, klickst du erneut auf das Drei-Punkte-Menü und dann auf Zurücksetzen.

Anker

Wenn du einen Textbereich direkt von einem anderen Bereich deiner Seite, deines Beitrags oder auch von einer anderen Seite aus erreichbar machen möchtest, setzt du einen Anker. Hierzu klickst du

1. auf das Zahnrad in der rechten Seitenleiste,
2. dann auf Erweitert und
3. in das Feld HTML-Anker.

Dort gibst du den Text deiner Überschrift (evtl. auch nur die wichtigsten Wörter) ein. Alle Wörter werden klein geschrieben, die Lücke zwischen zwei Wörtern durch ein Minus-Zeichen und am besten auch ä. ö, ü durch ae, oe und ue ersetzt. Handelt der Text z. B. von einer Wanderung in den Tiroler Alpen, könnte der Anker so aussehen: alpenwanderung oder tiroler-alpen.

Anschließend kannst du an anderer Stelle deiner Website darauf verlinken, indem du ein oder mehrere Wörter markierst und einen Link erstellst. Als URL trägst du dann

https://ihreseite.de/seitentitel/#alpenwanderung bzw. https://ihreseite.de/seitentitel/#tiroler-alpen ohne Schrägstrich am Ende ein.

Sobald ein Besucher auf den Link klickt, landet er direkt bei der entsprechend verknüpften Überschrift.

Zusätzliche CSS-Klassen

Falls du über die oben beschriebenen hinaus weitere Anpassungen am Erscheinungsbild einer Überschrift vornehmen möchtest, könntest du unter Erweitert in das Feld Zusätzliche CSS-Klasse(n) einen „Verweis auf eine CSS-Klasse“ eingeben. Hierzu muss jedoch eine entsprechende Klasse in deinem Style-Sheet vorhanden sein. Soll der Block beispielsweise unten durch einen Rand begrenzt werden, würdest du so vorgehen:

1. Du kreierst in deinem Style-Sheet eine Klasse (z. B.) „border-bottom“ und
2. gibst die Stärke (… px), Art (solid, dotted,…) sowie die Farbe an.

Anschließend kannst du in das CSS-Klassen-Feld border-bottom eintragen. Das Ergebnis siehst du jedoch nicht im Editor, sondern erst in der Vorschau oder im Frontend nachdem der Beitrag gespeichert wurde.

H3 bis H6

Zur besseren Gliederung deines Textes solltest du mehrere Zwischenüberschriften einsetzen. Auf H2 folgt normalerweise ein bis mehrmals H3. Dabei gehst du wie für H2 beschrieben vor, nur dass du die (voreingestellte) H2 Überschrift in H3 änderst. Eine zweite, dritte… H2 Überschrift ist meistens nur bei langen Beiträgen notwendig. Auch auf diese folgt zunächst wiederum H3, bevor du vielleicht eine H4 Überschrift verwendest (s. auch 1. Abbildung dieses Beitrags).

Über das Hamburger-Menü-Symbol > Übersicht in der Kopfleiste des Editors kannst du kontrollieren, wie der Aufbau deines Beitrags aussieht. Eventuelle Fehler bei der Reihenfolge der Überschriften werden farblich hervorgehoben. Im selben Menü siehst du unter Listenansicht auch alle anderen Elemente deines Beitrags / deiner Seite.

Anpassen des Permalinks

Diesen Permalink (URL) des Beitrags / der Seite hat WordPress automatisch erstellt. Je nach den von dir in den WP-Einstellungen gemachten Vorgaben, setzt er sich etwa wie folgt zusammen

• https://
• deine Domain /
• eventuelle Zusätze^[1] /
• Titel des Beitrags /

[1] Zusätze können beispielsweise Kategorie, Datum etc. sein. Je mehr „Zusätze“ du festgelegt hast, desto länger wird der Permalink. Deshalb gilt hierfür dasselbe wie für den Titel. Wenn der Permalink zu lang ist, ist im Browser später nur der Anfang lesbar und das Ende (der eigentliche Titel) ist durch „…“ ersetzt. Jedoch kannst du daran etwas ändern, indem du in der rechten Seitenleiste

1. auf den Link neben URL klickst,
2. im URL-Feld die dortigen Angaben korrigierst,
3. aber das Schlüsselwort / die Keyphrase auf jeden Fall behältst.

Da die Bestandteile des Permalinks vor dem Beitragstitel nicht veränderbar sind, siehst du im Bearbeitungsfeld auch nur den letzten Teil. Nachdem du deinen Beitrag veröffentlicht hast, solltest du den Permalink nicht mehr verändern. Denn dann würde er als neue URL indexiert. Und die Eingabe des alten in die Browser-Suche bzw. ein Klick auf den alten Link hätte eine 404 Fehlermeldung beim Aufrufen der Seite zur Folge.

Umlaute im Permalink

Da es bei URLs / Permalinks keine Umlaute gibt, können Wörter mit Umlauten zum Problem werden. Beispiel:

Südtiroler Alpen – ein unerwartet aufregendes Abenteuer
= https:// meineseite.de / wanderungen / 2019 / sudtiroler-alpen-ein-unerwartet-aufregendes-abenteuer/ .

Wenn das Schlüsselwort „Südtiroler Alpen“ wäre, müsstest du es im Permalink behalten. Jedoch wird das ü automatisch durch ein u und so gut wie nie durch ein ue ersetzt. Die Suchmaschine würde „Sudtiroler“ jedoch nicht mit „Südtiroler“ gleichsetzen, wenn der automatisch erstellte Link nicht ue enthielte. Deshalb würde dein SEO-Plugin anzeigen, dass das Schlüsselwort nicht in der URL enthalten ist.

PDF: Gutenberg Tutorial Teil 3 mit zusätzlichen Abbildungen (1,2 MB)

Soviel zum Thema Titel- und Überschriften-Blocks. Im nächsten Teil meines Gutenberg Tutorials erkläre ich Textblöcke und deren Gestaltung.

WEITERE GUTENBERG-TUTORIALS

• Einführung
• Bedienfelder
• Textblock
• Bilder, Cover, Galerie
• Layout Elemente, Listen, Zitate
• Spezialelemente und Widgets

Abbildungen © eb, Gutenberg Team | › Externe Verlinkungen: Dieser Beitrag enthält keine Affiliate-/Partner-Links.