Enge, unübersichtliche Texte schrecken Besucher ab, noch bevor sie den ersten Absatz gelesen haben. Die Anpassung des Zeilenabstands ist eine der schnellsten Möglichkeiten, das Lesegefühl Ihrer Inhalte zu verbessern, ohne Ihre gesamte Website neu gestalten zu müssen.
Dieser Leitfaden beschreibt vier Methoden zum Ändern des Zeilenabstands in WordPress, vom Block-Editor bis hin zu benutzerdefiniertem CSS, sodass Sie die Methode auswählen können, die am besten zu Ihrer Konfiguration passt.
In WordPress können Sie den Zeilenabstand über die Typografie-Einstellungen des Gutenberg-Blockeditors, das Format-Dropdown-Menü des klassischen Editors, Inline-CSS, den Bereich „Zusätzliches CSS“ im Theme-Customizer oder ein Plugin zur Zeilenabstandsanpassung ändern. Eine Zeilenhöhe zwischen 1,5 und 1,8 ist für die meisten WordPress-Websites optimal und sorgt für komfortables und gut lesbaren Text auf allen Geräten.
Die Bedeutung des Zeilenabstands in WordPress
Der Zeilenabstand bestimmt, wie viel vertikaler Platz zwischen den einzelnen Textzeilen ist. Ist der Abstand zu gering, wirkt der Text gedrängt und schwer lesbar. Ist er zu groß, verliert er an Kohärenz und wirkt zusammenhanglos.
Der richtige Zeilenabstand sorgt für ein reibungsloses Leseerlebnis und vermittelt Professionalität. Eine gut formatierte Seite wirkt durchdacht und übersichtlich. Eine schlecht formatierte Seite hingegen wirkt unfertig, egal wie gut der Text ist.
Für die meisten WordPress-Websites ergibt eine Zeilenhöhe zwischen 1,5 und 1,8 einen komfortablen und gut lesbaren Text sowohl auf Desktop- als auch auf mobilen Bildschirmgrößen.
Verbessern Sie die Formatierung Ihrer Website für eine bessere Benutzererfahrung
Beheben Sie Probleme mit Abständen, Typografie und Layout, um die Lesbarkeit zu verbessern und ein nahtloses Benutzererlebnis auf Ihrer WordPress-Website zu schaffen.
Wie kann ich den Zeilenabstand in WordPress ändern?
WordPress bietet verschiedene Möglichkeiten, den Zeilenabstand anzupassen, abhängig von Ihrem Editor, Theme und Ihren Programmierkenntnissen. Wählen Sie die Methode, die am besten zu Ihrer Konfiguration passt.
Methode 1: Zeilenabstand in WordPress mit dem klassischen Editor ändern
Wenn Sie noch den klassischen Editor verwenden, haben Sie zwei Möglichkeiten, den Zeilenabstand anzupassen. Die Format-Auswahl ist die schnellste. Der Texteditor bietet Ihnen durch Inline-CSS eine präzisere Steuerung.
Verwendung des Dropdown-Menüs „Format“
- Schritt 1: Gehen Sie zu Ihrem WordPress-Beitrag oder Ihrer Seite und markieren Sie den Text, den Sie anpassen möchten.
- Schritt 2: Klicken Sie in der Symbolleiste des klassischen Editors auf das Dropdown-Menü „Format“.
- Schritt 3: Wählen Sie die Zeilenhöhe aus, sofern Ihr Theme dies unterstützt, und wählen Sie einen voreingestellten Wert wie 1,5 oder 2,0.
Verwendung des „Text“-Editors
Der klassische Editor ermöglicht das Umschalten zwischen „Visueller“ und „Text“-Bearbeitung (HTML). So passen Sie den Zeilenabstand im „Text“-Editor an:
- Schritt 1: Klicken Sie in der oberen rechten Ecke des klassischen Editors auf die Registerkarte „Text“, um zur HTML-Ansicht zu wechseln.
- Schritt 2: Jetzt können Sie Inline-CSS direkt in Ihre Absatz-Tags einfügen, um den Zeilenabstand zu steuern.
Zum Beispiel:
<p style="line-height: 1.7;">Dieser Absatz hat eine Zeilenhöhe von 1,7.</p>Genau wie bei Gutenberg kann man hier mit der Eigenschaft `line-height` Zahlen, Längenwerte, Prozentsätze oder Schlüsselwörter verwenden, um den Abstand zu definieren.
Methode 2: Verwenden Sie den Gutenberg-Editor, um den Zeilenabstand zu ändern
Der Gutenberg-Blockeditor verfügt über integrierte Typografie-Steuerelemente, mit denen Sie den Zeilenabstand anpassen können, ohne Code bearbeiten zu müssen. Für eine präzisere Steuerung können Sie auch den HTML-Code des Blocks direkt bearbeiten.
Anpassen des Zeilenabstands über die Absatzeinstellungen
- Schritt 1: Wählen Sie in Ihrem WordPress-Beitrag oder Ihrer Seite den Absatz aus, den Sie bearbeiten möchten.
- Schritt 2: Gehen Sie zur Seitenleiste mit den Blockeinstellungen auf der rechten Seite. Suchen Sie nach dem Abschnitt mit der Bezeichnung „Typografie“ oder „Texteinstellungen“.
- Schritt 3: Klicken Sie auf das Drei-Punkte-Menü neben „Typografie“. Dort finden Sie die Option „Zeilenhöhe“.
- Schritt 4: Passen Sie nun einfach den Zeilenabstand nach Ihren Wünschen an. So einfach ist das!
Anpassen des Zeilenabstands mit HTML
Wenn Sie eine präzisere Steuerung wünschen, ist die Option für benutzerdefiniertes HTML genau das Richtige für Sie.
So geht's:
- Schritt 1: Wählen Sie den Absatzblock aus, den Sie bearbeiten möchten. Klicken Sie auf das „p“-Symbol und wechseln Sie dann zu „Code“.
- Schritt 2: Klicken Sie erneut auf das Code-Symbol und wählen Sie dann „Benutzerdefiniertes HTML“. Dadurch wird Ihr Absatz in bearbeitbaren HTML-Code umgewandelt.
- Schritt 3: Fügen Sie nun den folgenden Codeausschnitt mit Ihrem gewünschten Inhalt ein:
<p style="line-height: 1.8em;">Ihr Text hier.</p>Die Zeilenhöhen-Eigenschaft steuert den Abstand zwischen den Textzeilen.
So können Sie es einstellen:
- Zahl: Ein Vielfaches der Schriftgröße (z. B. bedeutet 1,5 das 1,5-fache der Schriftgröße).
- Längenwert: Zum Beispiel 20px für einen Abstand von 20 Pixeln.
- Prozentualer Anteil: 150 % für den Zeilenabstand, das entspricht 150 % der Schriftgröße.
- Stichwort: Zum Beispiel normal (was typischerweise standardmäßig bei etwa 1,2 liegt).
Hinweis: Anpassungen in den Blockeinstellungen gelten nur für den jeweiligen Absatz. Die Verwendung des Blocks „Benutzerdefiniertes HTML“ mit Inline-CSS bietet Ihnen jedoch mehr Flexibilität, da Sie mehrere Absätze oder Elemente genau so gestalten können, wie Sie es wünschen.
Methode 3: Zeilenabstand mithilfe des Design-Customizers anpassen
Mit dem Theme-Customizer können Sie den Zeilenabstand seitenweit anpassen, ohne einzelne Blöcke oder Beiträge bearbeiten zu müssen. Welche Optionen verfügbar sind, hängt von Ihrem Theme ab, aber die meisten modernen Themes bieten Typografie-Steuerelemente.
Schritt 1: Gehen Sie in Ihrem WordPress-Admin- Dashboard auf Design > Anpassen. Dadurch wird der Theme-Customizer geöffnet.
Schritt 2: Suchen Sie im Customizer nach Abschnitten mit der Bezeichnung „Typografie“, „Inhalt“ oder „Global“. Der genaue Name und die Position können je nach Theme variieren.
Schritt 3: Suchen Sie nun die Steuerelemente für die Zeilenhöhe. Je nach Ihrem Theme finden Sie möglicherweise eines der folgenden:
- Schieberegler: Durch einfaches Ziehen lässt sich der Abstand anpassen.
- Numerisches Eingabefeld: Geben Sie einen bestimmten Wert für die Zeilenhöhe ein, z. B. 1,5.
- Voreingestellte Optionen: Wählen Sie vordefinierte Zeilenhöheneinstellungen.
Schritt 4: Nachdem Sie Ihre Anpassungen vorgenommen haben, klicken Sie auf „Veröffentlichen“, um Ihre Änderungen zu speichern. Das Beste daran? Sie erhalten eine Live-Vorschau, wie sich die Änderungen auf Ihre Website auswirken, sodass Sie die Ergebnisse sofort sehen können!
Wie kann man zusätzlichen CSS-Code für den Zeilenabstand verwenden?
Falls Ihr Theme keine integrierten Steuerelemente für die Zeilenhöhe bietet, verwenden Sie den Abschnitt „Zusätzliches CSS“ im Customizer. Fügen Sie Folgendes hinzu, um den Zeilenabstand für alle Absätze Ihrer Website anzupassen.
Um nur einen bestimmten Inhaltsbereich anzusprechen, passen Sie den Selektor an die Inhaltsklasse Ihres Themes an. Sie können je nach Präferenz px-, em-, rem- oder einheitenlose Werte verwenden.
Methode 4: WordPress-Plugins zur Anpassung des Zeilenabstands verwenden
Wenn Sie Abstände anpassen möchten, ohne Code oder den Customizer zu bearbeiten, ist ein Plugin die einfachste Lösung. Das Spacer-Plugin fügt dem Gutenberg-Editor einen speziellen Abstandsblock hinzu, mit dem Sie die Höhe zwischen Elementen mithilfe eines Schiebereglers oder eines numerischen Eingabefelds steuern können.
Installieren und aktivieren Sie Spacer aus dem WordPress-Plugin-Verzeichnis. Ein neuer Spacer-Block erscheint im Block-Inserter. Fügen Sie ihn zwischen zwei beliebigen Blöcken ein, legen Sie die gewünschte Höhe fest, sehen Sie sich die Vorschau an und veröffentlichen oder aktualisieren Sie anschließend Ihre Seite.
Abschluss
Der Zeilenabstand ist eine kleine Änderung, die einen großen Unterschied für die Lesbarkeit Ihrer Inhalte und die Verweildauer der Besucher auf Ihrer Seite ausmacht. Für eine schnelle Anpassung einzelner Blöcke beginnen Sie mit den Gutenberg-Typografieeinstellungen.
Im Theme-Customizer können Sie im Bereich „Zusätzliches CSS“ die Zeilenabstände für Ihre gesamte Website anpassen. Eine Zeilenhöhe zwischen 1,5 und 1,8 eignet sich gut für die meisten WordPress-Websites und ist ein guter Ausgangspunkt, bevor Sie die Einstellungen an Ihre Schriftart und Ihr Design anpassen.
Häufig gestellte Fragen zum Ändern des Zeilenabstands in WordPress
Wie kann ich den Zeilenabstand in WordPress ändern?
Verwenden Sie die Typografie-Einstellungen des Gutenberg-Editors, um die Zeilenhöhe einzelner Blöcke anzupassen. Für Änderungen, die die gesamte Website betreffen, fügen Sie CSS im Abschnitt „Zusätzliches CSS“ des Theme-Customizers hinzu. Alternativ können Sie das Spacer-Plugin verwenden, das ohne Programmierung auskommt.
Worin besteht der Unterschied zwischen Zeilenhöhe und Absatzabstand?
Die Zeilenhöhe steuert den Abstand zwischen den einzelnen Zeilen eines Absatzes. Der Absatzabstand bestimmt den Abstand zwischen den Absätzen. Beide beeinflussen die Lesbarkeit, werden aber über unterschiedliche CSS-Eigenschaften angepasst.
Kann ich die Abstände in WordPress ohne Programmierung ändern?
Ja. Sowohl die Typografie-Einstellungen des Gutenberg-Editors als auch der Theme-Customizer ermöglichen es Ihnen, den Zeilenabstand ohne Programmierung anzupassen. Das Spacer-Plugin ist eine weitere Option, um ohne Code Abstände zwischen Blöcken hinzuzufügen.
Warum ist der Zeilenabstand für die Lesbarkeit wichtig?
Ein angemessener Zeilenabstand sorgt dafür, dass jede Textzeile ausreichend Platz zum angenehmen Lesen hat. Zu dichter Text ermüdet die Leser schnell und erhöht die Absprungrate auf inhaltsreichen Seiten.
Was ist der ideale Wert für die Zeilenhöhe in WordPress?
Eine Zeilenhöhe zwischen 1,5 und 1,8 eignet sich gut für die meisten WordPress-Websites. Beginnen Sie mit 1,6 und passen Sie die Höhe je nach Schriftgröße und Design an, bis der Text auf Ihren gängigsten Bildschirmgrößen gut lesbar ist.
