Überschriften strukturieren nicht nur Inhalte – sie prägen auch den ersten Eindruck Ihrer Website. Wer Wert auf ein stimmiges, professionelles Design legt, sollte den Standardlook von WordPress nicht einfach übernehmen. Mit gezielten CSS-Anpassungen lassen sich Ihre Überschriften optisch deutlich aufwerten – ganz ohne Plugin.
Warum gute Überschriften mehr als nur Text sind
Gut gestylte Überschriften machen den Unterschied zwischen einem durchschnittlichen und einem professionell wirkenden Blog. Sie leiten Leser durch den Content, schaffen Orientierung und prägen die visuelle Hierarchie der Seite. Der Standardstil vieler WordPress-Themes wirkt jedoch oft zu schlicht oder nicht konsistent genug.
Mit ein paar einfachen CSS-Regeln geben Sie Ihren Überschriften mehr Ausdruck – und Ihrer gesamten Website mehr Stil. Die folgenden Regeln wirken nur innerhalb des Inhaltsbereichs – nicht im Header, Footer oder in Widgets.
Der richtige Abstand schafft Ordnung
Überschriften brauchen Luft zum Atmen. Wenn sie zu eng an vorherigen Absätzen kleben, verlieren sie ihre Funktion als klare Abschnittstrenner. Ein konsistenter Abstand nach oben verbessert sowohl Lesbarkeit als auch Layout-Struktur. Ein einfaches CSS-Snippet sorgt für 2 rem Abstand vor allen gängigen Überschriften:
.wp-block-heading,
.wp-block-post-content h2,
.wp-block-post-content h3,
.wp-block-post-content h4,
.wp-block-post-content h5 {
margin-top: 2rem;
}
Durch diesen Abstand wirken Abschnitte übersichtlicher – besonders auf mobilen Geräten ein wichtiger Faktor.
Visuelle Trenner für Hauptüberschriften
Hauptüberschriften (z. B. h2) dürfen sich ruhig stärker abheben – allerdings ohne dabei aufdringlich zu wirken. Eine schlichte Linie unter der Überschrift setzt genau den richtigen Akzent. So geben Sie dem Design eine professionelle Note, ohne es zu überladen. In Gutenberg ist die HTML-Struktur so: <h2 class=”wp-block-heading”>Überschrift</h2>
h2.wp-block-heading,
.wp-block-post-content h2 {
border-bottom: 1px solid #990000;
padding-bottom: 0.5rem;
}Tipp: Stimmen Sie die Linienfarbe auf Ihr Corporate Design ab – das erhöht den Wiedererkennungswert.
Um die CSS-Regel nur auf Blogbeiträge (und nicht auf Seiten oder das Archiv) anzuwenden, musst du die Klasse noch spezifischer werden. Die Klasse .single-post wird von WordPress automatisch nur dem <body>-Tag von Einzelbeiträgen hinzugefügt.
/* Gilt nur für einzelne Blogbeiträge */
.single-post h2.wp-block-heading,
.single-post .wp-block-post-content h2 {
border-bottom: 1px solid #990000;
padding-bottom: 0.5rem;
}Akzentlinie links neben der Überschrift
Eine schmale, farbige Linie links vom Text wirkt edel und strukturiert. Sie eignet sich gut für H2 oder H3-Überschriften.
h2.wp-block-heading, .wp-block-post-content h2 {
border-left: 4px solid #990000;
padding-left: 1rem;
font-weight: 600; }
Farbhierarchie bringt Struktur ins Spiel
Nicht jede Überschrift sollte die gleiche optische Gewichtung haben. Während h1 und h2 in der Hauptfarbe des Website erscheinen können, wirken h3 bis h6 in einem neutralen Schwarz oft aufgeräumter und weniger überladen. Eine klare Farbhierarchie sorgt für Übersichtlichkeit, ohne dass Ihre Seite bunt oder unruhig wirkt.
.wp-block-post-content h3,
.wp-block-post-content h4,
.wp-block-post-content h5,
.wp-block-post-content h6 {
color: #000000;
}Initiale Buchstaben größer darstellen (Dropcap-Stil)
Z. B. bei Blogpost-Einleitungen oder besonderen Absätzen.
h2.wp-block-heading::first-letter , .wp-block-post-content h2::first-letter {
font-size: 2.5rem;
font-weight: bold;
color: #990000;
}Listenelemente nicht vergessen
Auch wenn es nicht direkt um Überschriften geht: auch Listen sind zentrale Elemente im Content-Design. Werden Listenpunkte zu dicht gesetzt, leidet die Lesbarkeit. Mehr Abstand bringt mehr Übersicht. Ein kleiner Eingriff mit großer Wirkung – besonders bei längeren Artikeln oder Aufzählungen in Blogposts.
.wp-block-list li {
margin-bottom: 1rem;
}Theme-spezifische Selektoren für Überschriften
Nicht jedes WordPress-Theme verwendet dieselben CSS-Container für Inhaltsbereiche. Während Gutenberg-Überschriften innerhalb des Editors konsistent strukturiert sind (.wp-block-heading, .wp-block-post-content), können Themes zusätzliche Wrapper-Klassen hinzufügen – etwa .entry-content, .ast-container oder .inner-content.
| Theme | Haupt-Content-Container | Beispiel-Selektor für h2 |
|---|---|---|
| Twenty Twenty-Four | .wp-block-post-content | .wp-block-post-content h2 |
| Twenty Twenty-Three | .wp-block-post-content | .wp-block-post-content h2 |
| Twenty Twenty-One | .entry-content | .entry-content h2 |
| Twenty Nineteen | .entry-content | .entry-content h2 |
| Astra | .ast-container, .entry-content | .ast-container h2, .entry-content h2 |
| GeneratePress | .entry-content | .entry-content h2 |
| Kadence | .inner-content, .entry-content | .inner-content h2 |
| Blocksy | .entry-content | .entry-content h2 |
| Neve | .entry-content | .entry-content h2 |
| Hello Elementor | keine spezielle Klasse | h2 |
Beispiel CSS-Codes für GeneratePress:
/* Abstand oberhalb von Überschriften */
.entry-content h2,
.entry-content h3,
.entry-content h4,
.entry-content h5,
.entry-content .wp-block-heading {
margin-top: 2rem;
}
/* Unterstrichene Hauptüberschriften */
.entry-content h2 {
border-bottom: 1px solid #990000;
padding-bottom: 0.5rem;
}
/* Farbliche Hierarchie ab h3 */
.entry-content h3,
.entry-content h4,
.entry-content h5,
.entry-content h6 {
color: #000000;
}
/* Listenabstände verbessern */
.entry-content .wp-block-list li {
margin-bottom: 1rem;
}Kleine CSS-Anpassungen, großer Designgewinn
Mit wenigen, gezielten CSS-Regeln verbessern Sie das visuelle Erscheinungsbild Ihrer WordPress-Seite deutlich. Einheitliche Abstände, subtile Trenner und eine durchdachte Farbhierarchie sorgen für ein aufgeräumtes, professionelles Gesamtbild – ganz ohne aufwändige Theme-Anpassung oder zusätzliche Plugins. Wer regelmäßig Inhalte veröffentlicht, sollte diese Details nicht dem Zufall überlassen.