Ü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 müssen Sie 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 Suchmaschinenoptimierung (SEO) eine Rolle.

Andererseits aber auch bei der optischen Gliederung der Texte. Denn sie erleichtern den Besuchern Ihrer Website das Lesen nicht nur langer Beiträge. Deshalb sollten die Überschriften sich klar voneinander unterscheiden.

INHALT

• Rolle der Überschrift im Gutenberg Editor
  • Sonderfall – H1
• Überschrift H2
  • Bearbeitungsleiste
  • Anpassung über die Seitenleiste
  • Anker
  • Zusätzliche CSS-Klassen
  • H3 bis H6
• Anpassen des Permalinks
  • Umlaute im Permalink

Um die Größe festzulegen, gehen Sie in den Customizer Ihres Themes – Typografie – und wählen 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önnten Sie eine oder mehrere fett hervorheben. Oder Sie verwenden für alle Überschriften einheitlich eine andere Schriftart (Font) als für den Text.

Darüber hinaus unterscheiden sich die Überschriften auch in ihrer Anzahl. So gibt es pro Beitrag nur eine H1 Überschrift. H2 können Sie je nach Länge des Textes zur Hervorhebung unterschiedlicher Themenbereiche mehrmals verwenden. Und H3 untergliedert die einzelnen Textabschnitte weiter, deshalb setzen Sie sie beliebig oft ein.

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 handelt, wird sie auch im Gutenberg Editor entsprechend bezeichnet. Nachdem Sie auf Ihrem WP Dashboard auf Beitrag erstellen geklickt haben, öffnet sich der Gutenberg Editor. Direkt zuoberst sehen Sie den ersten Block mit der Aufforderung: Titel hier eingeben.

Sie klicken in das Feld und schreiben den Titel Ihres neuen Betrags / Ihrer neuen Seite hinein. Einerseits sollte dieser nicht zu lang sein, da er sonst in der Vorschlags-Liste des Browsers gekürzt erscheint. Außerdem ist zu berücksichtigen, dass automatisch noch weitere Bestandteile der URL (s. u.) vor dem eigentlichen Titel stehen. Dies sehen Sie aber im Eingabefeld selbst nicht. Andererseits ist es Aufgabe des Titels, das Interesse potentieller Leser auf Ihren Beitrag zu lenken.

Im Gegensatz zu den nachrangigen ist die H1-Überschrift im Editor nicht anpassbar. Ihr Aussehen bestimmen allein die Einstellungen (Schriftart, -größe, -farbe), die Sie im Customizer Ihres Themes vorgenommen haben.

Überschrift H2

Direkt unterhalb des Titels ist im Gutenberg Editor bereits ein weiterer Block angelegt. Entweder klicken Sie direkt in das Feld und schreiben z. B. eine kurze Einleitung. Oder Sie klicken auf das Bild-Symbol rechts und fügen eine Abbildung ein. Details zu diesen Blöcken folgen in den jeweiligen Tutorials.

Anschließend beginnen Sie Ihren Beitrag mit einer H2-Überschrift. Diese ist die zweitwichtigste und sollte ebenfalls Ihr zuvor gewähltes Schlüsselwort enthalten. Um einen neuen Block dafür zu erstellen, haben Sie zwei Möglichkeiten. Entweder Sie

1. fahren mit dem Cursor über den darüber befindlichen Block
2. und klicken auf das nun sichtbar + = die Options-Liste poppt auf,
3. auf Überschrift klicken.

Oder Sie klicken in den vorhergehenden Block,

1. auf die drei Punkte rechts in der Bearbeitungsleiste (s. u.),
2. Block danach einfügen
3. und wieder auf Überschrift

Nachdem Sie so einen neuen Block erstellt haben, klicken Sie in das Feld. Anschließend erscheint darüber (oder am oberen Rand des Editors) die Bearbeitungsleiste. Diese ähnelt der, die Sie z. B. aus Microsoft Word kennen.

Bearbeitungsleiste

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

• H: Art des Blocks wechseln
• H2: Überschrift in H3 oder H4 ändern
• Text: links, zentriert oder rechts ausrichten
• Farbe / Highlight-Farbe für einzelne Wörter der Überschrift festlegen
• Fette oder kursive Schrift / Link erstellen
• Pfeil nach unten: Text durchstreichen, hervorheben, ein Inline-Bild oder einen Code einfügen
• Drei-Punkte-Menü

Anpassung über die Seitenleiste

Nachdem Sie Ihre Überschrift eingegeben haben, bietet Ihnen die Seitenleiste des Editors noch weitere Anpassungsmöglichkeiten. Sobald Sie in den Überschriften-Block geklickt haben, erscheinen dort die Einstellungen für diesen Block. Einerseits können Sie hier die Schriftgröße der Überschrift von klein bis riesig, bzw. auf eine individuelle Größe ändern. Anderseits bestimmen Sie die Text- und die Hintergrundfarbe für den gesamten Block. Dies ist auf drei Wegen möglich:

• Sie wählen eine der vorgegebenen Farben, indem Sie auf den entsprechenden Punkt klicken oder Sie
• klicken auf Individuelle Farbe und wählen die Farbe durch Verschieben des Kreises im Farbfeld oder des Reglers auf der Leiste aus
• oder Sie geben den Hex– oder RGB-Code für Ihre Farbe ein.

Anker

Wenn Sie einen Textbereich direkt von einem anderen Bereich Ihrer Seite, Ihres Beitrags oder auch von einer anderen Seite aus erreichbar machen wollen, können Sie einen Anker setzen. Hierzu klicken Sie

1. in den Überschriften-Block,
2. in der rechten Seitenleiste auf Erweitert und
3. in das Feld HTML-Anker.

Dort geben Sie einen Begriff ein, der in ein bis zwei Wörtern auf den Inhalt des Textes hindeutet. Handelt der Text z. B. von einer Wanderung in den Tiroler Alpen, könnte der Anker so aussehen: alpenwanderung oder tiroler-alpen. Einzelne Wörter müssen dabei mit einem Bindestrich verbunden werden, kein Leerzeichen!

Anschließend können Sie an anderer Stelle Ihrer Website darauf verlinken, indem Sie ein oder mehrere Wörter markieren und einen Link erstellen. Als URL tragen Sie dann

https://ihreseite.de/seitentitel/#alpenwanderung ein.

Sobald ein Besucher auf den Link klickt, landet er direkt bei dem entsprechend verknüpften Textabschnitt.

Zusätzliche CSS-Klassen

Falls Sie über das oben beschriebene hinaus Anpassungen am Erscheinungsbild einer Überschrift vornehmen möchten, können Sie in das Feld Zusätzliche CSS-Klasse(n) einen „Verweis auf eine CSS-Klasse“ eingeben. Hierzu muss jedoch eine entsprechende Klasse in Ihrem Style-Sheet vorhanden sein. Soll der Block beispielsweise unten durch einen Rand begrenzt werden, würden Sie so vorgehen:

1. Sie kreieren in Ihrem Style-Sheet eine Klasse (z. B.) „border-bottom“ und
2. geben die Stärke, Art (solid, dotted,…) sowie die Farbe an.

Anschließend können Sie in das CSS-Klassen-Feld border-bottom eintragen. Das Ergebnis sehen Sie jedoch nicht im Editor, sondern erst in der Vorschau oder im Frontend nachdem der Beitrag gespeichert wurde.

H3 bis H6

Zur besseren Gliederung Ihres Textes sollten Sie mehrere Zwischenüberschriften einsetzen. Auf H2 folgt in jedem Fall ein bis mehrmals H3. Dabei gehen Sie wie für H2 beschrieben vor, nur dass Sie die (voreingestellte) H2 Überschrift in H3 ändern. Eine zweite, dritte… H2 Überschrift ist meistens nur bei langen Beiträgen notwendig. Auch auf diese folgt zunächst wiederum H3, bevor Sie am Ende (des Beitrags) vielleicht eine H4 Überschrift verwenden.

Über das Info-Symbol in der Kopfleiste des Editors können Sie kontrollieren, wie der Aufbau Ihres Beitrags aussieht. Eventuelle Fehler bei der Reihenfolge der Überschriften werden farblich hervorgehoben.

Wenn Sie Ihren Beitrag soweit fertig gestellt und gespeichert (nicht Veröffentlicht!) haben, kehren Sie noch einmal zu Ihrer H1 Überschrift zurück. Ein Klick in das H1 Feld zeigt Ihnen darüber den Permalink für diesen Beitrag an.

Anpassen des Permalinks

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

• https://
• Ihre Domain /
• eventuelle Zusätze* /
• Titel des Beitrags.

*Zusätze können beispielsweise Kategorie, Datum etc. sein. Je mehr „Zusätze“ Sie festgelegt haben, 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 können Sie daran etwas ändern, indem Sie in der rechten Seitenleiste

1. Permalink aufklappen und
2. im URL-Feld die dortigen Angaben korrigieren,
3. aber Schlüsselwort / Keyphrase auf jeden Fall behalten.

Da die Bestandteile des Permalinks vor dem Beitragstitel nicht veränderbar sind, sehen Sie im Bearbeitungsfeld auch nur den letzten Teil. Nachdem Sie Ihren Beitrag veröffentlicht haben, sollten Sie 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üssten Sie es im Permalink behalten. Jedoch wird das ü automatisch durch ein u, seltener 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 Ihr SEO-Plugin anzeigen, dass das Schlüsselwort nicht in der URL enthalten ist. Um das zu umgehen, hilft nur, Wörter mit Umlauten im Titel zu vermeiden oder mit der Umwandlung zu leben.

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

PDF: Beitrag herunterladen

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.