Wie man den Zeilenabstand von Text in WordPress ändert

Der richtige Zeilenabstand ist nicht nur eine Frage der Ästhetik – er wirkt sich direkt auf die Lesbarkeit, die Benutzerfreundlichkeit und sogar darauf aus, wie Besucher mit Ihren Inhalten umgehen. Ganz gleich, ob Sie einen persönlichen Blog betreiben oder kommerzielle Websites mit hohem Besucheraufkommen verwalten, die Optimierung der Textabstände in WordPress kann die visuelle Struktur Ihrer Website erheblich verbessern.

In diesem Leitfaden zeigen wir Ihnen die effektivsten Möglichkeiten, den Zeilenabstand in WordPress zu ändern, mit und ohne Programmierung, sowohl mit dem klassischen als auch dem Block-Editor (Gutenberg). Außerdem erfahren Sie, wie Sie benutzerdefinierte CSS anwenden und häufige Formatierungsprobleme beheben können.

Warum Zeilenabstände wichtig sind

• Verbessert die Lesbarkeit – besonders auf mobilen Geräten
• Reduziert die Absprungrate, da lange Texte leichter zu lesen sind
• Verbessert die Design-Konsistenz über verschiedene Themen und Geräte hinweg
• Entspricht den bewährten SEO-Verfahren (klarer, strukturierter Inhalt = besseres Engagement)

Schauen wir uns an, wie man es kontrolliert.

Methode 1: Anpassen des Zeilenabstands im Gutenberg-Editor

Im Standard-Block-Editor (Gutenberg) können Sie die Zeilenabstände über die Blockeinstellungen “Absatz” oder über benutzerdefinierte CSS-Klassen verwalten.

➤ Schritte:

• Öffnen Sie den Beitrag oder die Seite im WordPress-Editor.
• Wählen Sie einen Absatzblock aus.
• Suchen Sie in der rechten Seitenleiste die Option Typografie > Zeilenhöhe.
• Passen Sie den Wert an (z. B. 1,6, 2, 2,2).

Hinweis: Wenn die Option nicht verfügbar ist, fahren Sie mit Benutzerdefiniertes CSS (Methode 3) unten fort.

Methode 2: Klassischer Editor (TinyMCE)

Der klassische Editor verfügt nicht über eine direkte Option für die Zeilenhöhe. Das können Sie jedoch:

• Verwenden Sie Shift Enter für manuelle Zeilenumbrüche (kein Abstand)
• Plugins wie TinyMCE Advanced (jetzt Teil der “Advanced Editor Tools”) verwenden, um Abstandskontrollen hinzuzufügen

Für ein konsistentes Styling empfehlen wir weiterhin, die Zeilenhöhe per CSS festzulegen.

Methode 3: Benutzerdefiniertes CSS (beste Praxis für volle Kontrolle)

Diese Methode ermöglicht eine präzise Steuerung, funktioniert über alle Blöcke und Themen hinweg und vermeidet Layout-Verschiebungen.

Beispiel 1: Globale Zeilenhöhe für alle Absätze

p {
  zeilenhöhe: 1.8;
}

Beispiel 2: Nur auf eine bestimmte Klasse anwenden

.custom-text {
  zeilenhöhe: 2.2;
}

Wo CSS eingefügt werden soll:

• Erscheinungsbild → Anpassen → Zusätzliches CSS, oder
• In der style.css Ihres Child-Themes, oder
• Über ein Plugin wie Simple Custom CSS

Methode 4: Seitenerstellungsprogramme (Elementor, WPBakery usw.)

Für Elementor:

• Bearbeiten Sie den Abschnitt oder das Textwidget.
• Passen Sie unter Stil → Typografie das Feld Zeilenhöhe an.
• Sie können es in em, px oder relativen Einheiten einstellen.

Für WPBakery:

• Verwenden Sie die Designoptionen oder fügen Sie benutzerdefinierte CSS direkt in den Zeilen- oder Spalteneinstellungen hinzu.

Methode 5: Mobilfreundlicher Zeilenabstand

• Ein guter Zeilenabstand auf dem Desktop kann auf dem Handy beengt wirken. Die meisten Editoren (einschließlich Gutenberg und Elementor) erlauben responsive Einstellungen. Immer:
• Vorschau der Änderungen auf Tablet und Handy
• Stellen Sie eine etwas größere Zeilenhöhe für kleine Bildschirme ein (z. B. 2 statt 1,6)
• Häufige Probleme & Korrekturen

Zeilenhöhe ändert sich nicht nach CSS-Update?

• Vergewissern Sie sich, dass Ihr Theme oder Plugin die Stile nicht überschreibt.
• Versuchen Sie, !important in Ihrer CSS-Regel zu verwenden:

p {
  zeilenhöhe: 2 !important;
}

Änderungen im Customizer sichtbar, aber nicht live?

• Löschen Sie Ihren Website-Cache und den Browser-Cache.
• Wenn Sie ein Caching-Plugin verwenden, leeren Sie alle Caches.

Zusammenfassung