Gestaltung von Headings (Überschriften) bei Block Themes

Beitragsdatum: 22.04.2024 | Letztes Update: 06.05.2024

Headings (Überschriften) bei Block Themes wie Twenty Twenty-Four (TT4) gestalten

Aufgrund eines Beitrags im deutschsprachigen WordPress-Support-Forum bin ich auf eine Option gestoßen, die ich bis dato nicht kannte: Man kann Headings (Überschriften) bei Block Themes wie Twenty Twenty-Four (TT4) individuell für jedes Überschriften-Element farbig gestalten. Aber es gibt noch mehr Möglichkeiten.

Überschriften und ihre Verwendung

In HTML kennen wir sechs verschiedene Überschriften-Elemente, die mit den Tags <h1> bis <h6> verwendet werden. Diese Überschriften dienen dazu, den Inhalt einer Webseite hierarchisch zu strukturieren und den Benutzern eine klare Vorstellung von der Bedeutung und dem Kontext des Inhalts zu geben. Bei WordPress-Websites hat man den mit den Tags nicht direkt etwas zu tun:

  1. H1 – Hauptüberschrift (der Beitragstitel bekommt automatisch vom Theme das Tag <h1> zugewiesen):
    • Dies ist die wichtigste Überschrift auf einer Seite und sollte nur einmal pro Seite verwendet werden.
    • Sie sollte den Hauptinhalt oder das Hauptthema der Seite beschreiben.
  2. H2 – Unterüberschrift:
    • Diese Überschrift wird verwendet, um Hauptabschnitte oder Themen innerhalb des Hauptinhalts zu kennzeichnen.
    • Sie sollte unter der H1-Überschrift und vor einer H3-Überschrift stehen.
  3. H3 – Unterunterüberschrift:
    • Diese Überschrift kann verwendet werden, um Unterthemen oder spezifische Abschnitte innerhalb eines H2-Abschnitts zu kennzeichnen.
  4. H4 bis H6 – Weitere Unterüberschriften kommen eher selten vor.

Jede dieser Überschriften hat ihre eigene visuelle Gewichtung und sollte entsprechend ihrer Bedeutung und ihrer Position innerhalb der Hierarchie der Seite gewählt werden. Suchmaschinen verwenden diese Hierarchie auch, um den Inhalt der Seite besser zu verstehen und zu indexieren.

Es ist wichtig, Überschriften korrekt und hierarchisch zu verwenden, um Zugänglichkeit, SEO (Suchmaschinenoptimierung) und Benutzererfahrung zu verbessern. Überschriften sollten in aufsteigender Reihenfolge verwendet werden, so dass sie logisch und sinnvoll strukturiert sind.

Dokumentenübersicht im Block Editor auf einer WordPress-Website
Dokumentenübersicht im Block Editor auf einer WordPress-Website

Wenn man oben auf die drei versetzten Striche klickt, dann erhält man unter „Listenansicht“ eine Übersicht der verwendeten Blöcke. Unter dem wenig bekannten Reiter „Übersicht“ kann man sich aber zusätzlich u. a. die Verwendung der Überschriften ansehen. Bei Fehlern in der Hierarchie erhält man einen entsprechenden Hinweis. Zusätzlich wird hier auch die Anzahl der Zeichen, die Anzahl der Wörter und die voraussichtliche Lesezeit angezeigt.

Anpassungen der Überschriften (headings) im Website-Editor

Die Anpassungen kann man rechts bei den Eigenschaften für einzelne Überschriften z. B. in einem Beitrag im Block Editor vornehmen. Eine Anpassung einzelner Überschriften in einem Beitrag ist aber eher ungewöhnlich.

Im Website-Editor kann man dagegen die Gestaltung global, d. h. für die gesamte Website vornehmen. Wie das funktioniert, zeige ich in dem folgenden kurzen Video:

Headings (Überschriften) bei Block Themes wie Twenty Twenty-Four (TT4) individuell farbig gestalten.
Headings bei Block Themes wie Twenty Twenty-Four (TT4) individuell farbig gestalten.

Die Funktion zur Änderung der Farben bei den Headings ist etwas versteckt. In dem folgenden Screenshot kann man besser sehen, wie man die Gestaltung vornehmen kann.

Headings (Überschriften) bei Block Themes wie Twenty Twenty-Four (TT4) individuell gestalten
Headings (Überschriften) bei Block Themes wie Twenty Twenty-Four (TT4) individuell gestalten
  1. Auf Design > Website-Editor und oben auf den „Halbmond“ (Styles) klicken.
  2. Colors wählen
  3. Klick auf die drei senkrechten Punkte (Kebap-Menü)
  4. Auswahl von z. B. H2
  5. Hier kann anschließend die Farbe für Hintergrund und Textfarbe gewählt werden.

Wenn man weitergehende Anpassungen vornehmen möchte, die allgemein für alle Überschriften gelten sollen, dann kann man das über die Stile und „Blöcke“ machen.

Globale Styles bei Blöcken ändern
Globale Styles bei Blöcken ändern

Auswahl der Blöcke

Anschließend kann man die Blöcke auswählen, für die man Änderungen durchführen möchte. In unserem Fall ist das der Block „Überschrift“ (Heading):

Blöcke, bei denen Anpassungen möglich sind
Blöcke, bei denen Anpassungen möglich sind
Anpassungen für die Überschriften (Headings) bei einer WordPress-Website
Anpassungen für die Überschriften (Headings) bei einer WordPress-Website

Fazit

Ohne CSS können viele Änderungen relativ einfach bei den Blöcken auf einer WordPress-Website durchgeführt werden. Wie das bei Überschriften funktioniert, habe ich hier als Beispiel gezeigt. Wie bei vielen Dingen im Zusammenhang mit Block Themes ist es eher schwieriger, die entsprechenden Stellen zu finden. Das war auch der Grund für diesen Beitrag.

Weitere Beiträge zum Thema (Block Neueste Beiträge)

Wir freuen uns über eine Kontaktaufnahme

Was hältst du davon?

Wir hoffen, dieser Beitrag hat dir gefallen und wir würden uns über einen Kommentar freuen. Auch über Erweiterungen, Korrekturen, Hinweise oder sonstige Anmerkungen freuen wir uns sehr.

  • Auf der folgenden Seite findest du weitere interessante Beiträge sortiert nach Kategorien und Schlagwörter.
  • Wenn du über unsere neuesten Beiträge informiert werden möchtest, kannst du dich gerne bei unserem Newsletter anmelden.

Beitrags-Kategorien

Allgemein (104) Anleitung (68) Block-Editor (45) CSS (10) Full Site Editing (34) Keine Anzeige (1) Plugins (28) Short News (1) Theme (28) Tipps (69) Veranstaltungen (3) WordPress (113)

2 Gedanken zu „Gestaltung von Headings (Überschriften) bei Block Themes“

Schreibe einen Kommentar