Haben Sie sich jemals gefragt, warum manche Websites perfekt formatierte Inhalte haben, die leicht zu lesen sind, während andere überladen und schwer zu lesen wirken?
Das Geheimnis liegt oft in etwas Einfachem: richtige Zeilenumbrüche und Abstände.
Wenn Sie jemals Zeilenumbrüche in Ihrem WordPress-Editor hinzugefügt haben und festgestellt haben, dass sie auf Ihrer veröffentlichten Seite nicht angezeigt werden, sind Sie definitiv nicht allein. WordPress behandelt Abstände etwas anders als Textverarbeitungsprogramme wie Google Docs oder Microsoft Word.
Sobald Sie jedoch verstehen, wie es funktioniert, haben Sie die vollständige Kontrolle darüber, wie Ihre Inhalte aussehen.
Wir zeigen Ihnen mehrere zuverlässige Methoden, um Zeilenumbrüche in WordPress hinzuzufügen, von schnellen Tastenkombinationen bis hin zu fortgeschritteneren Formatierungsoptionen.
Warum einen Zeilenumbruch in WordPress hinzufügen (neuer Zeilenabstand)?
Auf den ersten Blick mag ein Zeilenumbruch eine kleine Formatierungsentscheidung sein – aber er kann große Auswirkungen darauf haben, wie Ihre Inhalte funktionieren.
Von der Verbesserung der Lesbarkeit bis zur Steigerung der Benutzererfahrung – die richtige Abstände helfen Ihren Seiten, sauber und professionell auszusehen. Hier ist, warum es wichtig ist:
- Bessere Lesbarkeit: Unterbricht Textblöcke für leichteres Scannen.
- Mobilfreundlich: Hält Inhalte auf kleineren Bildschirmen klar.
- Fügt eingefügten Text ein: Bereinigt die Formatierung aus anderen Quellen.
- Zieht Aufmerksamkeit auf sich: Hilft Tipps und CTAs hervorzuheben.
Kurz gesagt, Zeilenumbrüche machen Ihre Inhalte leichter lesbar und ansprechender – sowohl für Besucher als auch für Suchmaschinen.
Hinweis: Bevor wir beginnen, ist es wichtig zu wissen, dass der Zeilenabstand vom WordPress-Theme gesteuert wird, das Sie verwenden.
Wir zeigen Ihnen, wie Sie Abstände zwischen Blöcken im Block-Editor hinzufügen, und behandeln dann, wie Sie den Zeilenabstand in Ihrem Theme anpassen, wenn Sie mit den Standardergebnissen nicht zufrieden sind.
Nichtsdestotrotz wollen wir uns ansehen, wie Sie ganz einfach einen Zeilenumbruch in WordPress einfügen können.
- So fügen Sie doppelten Zeilenabstand zwischen Blöcken hinzu
- So fügen Sie einen einzeiligen Abstand hinzu
- Der einfachste Weg: Verwenden des Abstandsblocks
- Modifying the Line Height and Spacing
- Video-Tutorial
So fügen Sie doppelten Zeilenabstand zwischen Blöcken hinzu
Wenn Sie die Enter-Taste für Windows oder die Return-Taste für Mac auf Ihrer Tastatur drücken, um einen Zeilenumbruch hinzuzufügen, betrachtet WordPress dies als neuen Absatz.
Das bedeutet, dass automatisch ein doppelter Zeilenabstand hinzugefügt wird. Die Höhe des Abstands wird von Ihrem Theme gesteuert, und diese Formatierung ist eine Standardfunktion aller guten WordPress-Themes.
Gehen Sie einfach zum Inhaltseditor, drücken Sie die Eingabe- oder Enter-Taste nach der Zeile und geben Sie dann etwas anderes in die nächste Zeile ein.
Indem Sie einfach das tun, sollten Sie basierend auf dem Styling Ihres Themes eine klare Unterscheidung zwischen Absätzen sehen.
So fügen Sie einen einzeiligen Abstand hinzu
Wenn Sie nun etwas wie eine Adresse schreiben, möchten Sie wahrscheinlich, dass diese auf Ihrer WordPress-Website einfach statt doppelt formatiert ist.
In diesem Fall müssen Sie auf Windows die Taste SHIFT + ENTER oder auf dem Mac die Taste SHIFT + RETURN drücken.
Dies teilt WordPress mit, dass Sie innerhalb desselben Absatzes eine neue Zeile beginnen möchten. Diese Aktion erzeugt einen einzelnen Zeilenumbruch anstelle des doppelten Abstands, der für einen neuen Absatz verwendet wird.
Der einfachste Weg: Verwenden des Abstandsblocks
Für eine einfache, codelose Möglichkeit, zusätzlichen Abstand zwischen zwei beliebigen Blöcken hinzuzufügen, ist die Verwendung des integrierten Abstandsblocks die einfachste Methode.
Klicken Sie einfach im Editor auf die Schaltfläche „Block hinzufügen“, um einen neuen Block hinzuzufügen, und suchen Sie nach „Abstand“. Sobald Sie ihn hinzufügen, erscheint ein neuer leerer Bereich auf Ihrer Seite.
Sie können dann auf den Abstand klicken und den blauen Griff nach oben oder unten ziehen, um seine Höhe anzupassen.
Dies gibt Ihnen präzise Kontrolle über Ihren vertikalen Abstand direkt im Editor.
Zeilenhöhe und Abstand ändern
Manchmal, selbst wenn Sie den richtigen Zeilenabstand im Editor einfügen, wird er in Ihrem Theme nicht wie gewünscht angezeigt.
Es gibt zwei Möglichkeiten, dies zu beheben:
- Ein Plugin verwenden (der einfache Weg)
- Manuell mit CSS-Code (fortgeschrittener)
Schauen wir uns zuerst die einfache Methode an.
Zeilenabstand mit einem Plugin hinzufügen
Wenn Sie Stiländerungen an Ihrem Theme vornehmen möchten, ohne Code lernen zu müssen, ist die Verwendung eines Plugins wie CSS Hero der beste Weg, dies zu tun.
CSS Hero macht es einfach, das Design Ihrer WordPress-Website zu ändern, ohne Code zu kennen.
Weitere Details finden Sie in unserem vollständigen CSS Hero-Testbericht.
Wenn Sie größere Änderungen an Ihrem Theme vornehmen möchten, z. B. eine Seitenleiste verschieben oder eine Fußzeile hinzufügen, dann wäre ein Drag-and-Drop-Page-Builder-Plugin eine bessere Option. Ein Page-Builder-Plugin würde es Ihnen auch ermöglichen, kleine Anpassungen wie das Ändern von Schriftfarben oder das Hinzufügen von Zeilenumbrüchen in WordPress vorzunehmen.
Möchten Sie kein Plugin verwenden oder nur diese eine Änderung vornehmen? Dann ist die manuelle CSS-Code-Option vielleicht die beste für Sie.
Absatzabstände manuell mit CSS-Code ändern
Um Zeilenumbrüche manuell ohne Plugin hinzuzufügen, müssen Sie etwas CSS zu Ihrem Theme hinzufügen.
CSS ist im Grunde wie die Formatierungsfunktion in Microsoft Word. Anstatt auf Schaltflächen zu klicken, schreiben Sie einfachen CSS-Code. Es ist nicht so beängstigend, wie manche Anfänger denken mögen. CSS ist sehr leicht zu verstehen, wenn Sie nur Anweisungen befolgen.
Um benutzerdefiniertes CSS zu Ihrem Theme hinzuzufügen, müssen Sie die Seite Darstellung » Anpassen aufrufen. Dies startet den WordPress Theme Customizer, wo Sie in der linken Spalte auf den Reiter „Zusätzliches CSS“ klicken müssen.
Wenn Sie diese Menüoptionen nicht sehen können, verwenden Sie möglicherweise ein Block-Theme. Bitte lesen Sie unseren Artikel zur Behebung des fehlenden Theme-Customizers im WordPress-Adminbereich.
Im Feld für benutzerdefiniertes CSS müssen Sie den folgenden CSS-Code hinzufügen:
Dieser Code zielt auf alle Absatz-Elemente (p) ab, insbesondere innerhalb des Hauptinhaltsbereichs Ihrer Beiträge, den WordPress oft mit der Klasse .post identifiziert. Dies stellt sicher, dass nur Ihre Artikel betroffen sind.
.post p{line-height: 1.5em;}Die oben gezeigte CSS-Regel ändert den Zeilenabstand des Absatzinhalts auf 1,5em. Em ist eine Einheit für die Typografie.
Dies ändert nun nur den Abstand für den einzeiligen Abstand.
Wenn Sie den Absatzabstand in WordPress ändern möchten (d. h. doppelten Abstand), müssen Sie Padding hinzufügen.
.post p {
line-height: 1.5em;
padding-bottom: 15px;
}
Passen Sie die Zahlen in diesem CSS-Code gerne an. Das Ändern des Werts für padding-bottom ändert den Abstand zwischen Ihren Absätzen.
Sie können auch benutzerdefiniertes CSS mit dem WPCode Plugin zu Ihrer Website hinzufügen. Das Plugin macht es sehr einfach, Code auf Ihrer Website einzufügen und zu verwalten.
Weitere Details finden Sie in unserem Leitfaden zum einfachen Hinzufügen von benutzerdefiniertem CSS zu Ihrer WordPress-Website.
Wenn Sie die Anweisungen nicht lesen möchten, sehen Sie sich einfach unser Video-Tutorial an.
Video-Tutorial
Für eine visuelle Anleitung können Sie sich unser Video-Tutorial unten ansehen. Es behandelt alle Methoden, die wir für das Hinzufügen von ein- und zweizeiligen Abständen in Ihren Inhalten besprochen haben.
Wir hoffen, dieser Artikel hat Ihnen geholfen, einen Zeilenumbruch in WordPress einzufügen. Möglicherweise möchten Sie auch unseren Leitfaden zum Verwenden von WordPress-Blockmustern und unsere Liste der besten Gutenberg-freundlichen WordPress-Themes sehen.
Wenn Ihnen dieser Artikel gefallen hat, abonnieren Sie bitte unseren YouTube-Kanal für WordPress-Video-Tutorials. Sie finden uns auch auf Twitter und Facebook.
Ralph
Das war ein riesiges Problem im alten Creator. Ich wusste nie, wie es aussehen würde und musste alle paar Zeilen die Vorschau aufrufen, aber ich denke, mit Gutenberg ist es viel einfacher und ich habe gelernt, einfach Shift+Enter zu verwenden. Ich mache das automatisch und fast unbewusst. Ich weiß nicht warum, aber manche Websites erlauben kein Shift+Enter, nur Enter oder gar nichts, und dann denke ich: „WARUM funktioniert es nicht“!
Deepak Sahani
Hervorragendes Video & Beitrag hat meine Frage gelöst.
WPBeginner Support
Glad our guide could be helpful!
Admin
Jennyfer
Vielen Dank für diese Informationen! Sehr nützlich. Genau das, wonach ich gesucht habe.
WPBeginner Support
Glad our guide was helpful
Admin
Colleen Cochran
Ich habe endlich herausgefunden, wie man mit Shift-Enter einzelne Zeilenumbrüche für Gedichte macht, aber wenn der Beitrag veröffentlicht und an Follower gesendet wird, verliert er die Formatierung und alle Zeilen laufen zusammen. Wie behebe ich das?
WPBeginner Support
Sie sollten sich mit dem Tool, das zum Senden der Benachrichtigung verwendet wird, bezüglich des Stylings zur Behebung dieses Problems erkundigen.
Admin
Luiz
Danke! Sehr nützlich!
WPBeginner Support
You’re welcome
Admin
Robin
So hilfreich! Danke!!
WPBeginner Support
You’re welcome
Admin
Dhirendra
Gibt es eine Option, um den Bildabstand zu reduzieren...
WPBeginner Support
Es würde vom spezifischen Bild abhängen, aber als Ausgangspunkt, um herauszufinden, was den Abstand verursacht, sollten Sie sich unseren Leitfaden unten ansehen:
https://www.wpbeginner.com/wp-tutorials/basics-of-inspect-element-with-your-wordpress-site/
Admin
jan van den hoed
Danke für die Erklärung. Eine Frage habe ich jedoch. Wie kann ich dasselbe auf einem Smartphone machen? Ich bearbeite meinen Blog unterwegs und habe keinen Laptop zur Verfügung. Ich habe versucht, Shift Enter zu drücken, aber das hat nicht funktioniert.
WPBeginner Support
Aufgrund der Einschränkungen von Mobilgeräten müssen Sie wahrscheinlich die CSS-Methode verwenden.
Admin
Val
Vielen Dank, eine große Hilfe. Ich habe mich mit dem Abstand gequält!
WPBeginner Support
Glad our guide was helpful
Admin
Stephen
Danke, es hat sehr geholfen.
WPBeginner Support
Glad our article was helpful
Admin
Douglas Daniel
Um die CSS zu ändern, wird mir gesagt, dass ich einen Premium-Plan kaufen muss. Habe ich Pech gehabt?
WPBeginner Support
Es sieht so aus, als wären Sie auf WordPress.com und dieses Tutorial ist für WordPress.org-Websites:
https://www.wpbeginner.com/beginners-guide/self-hosted-wordpress-org-vs-free-wordpress-com-infograph/
Sie wären leider auf die anderen Optionen beschränkt, wie z. B. Umschalt+Eingabetaste, um den Inhalt mit einfachem Zeilenabstand zu versehen.
Admin
SOO
Danke! Hilfreich!!
WPBeginner Support
You’re welcome, glad our article could help
Admin
Rebecca
Es hat bei mir nicht funktioniert. Gibt es Gründe, warum es nicht funktionieren würde?
WPBeginner Support
Wenn Sie ein Page-Builder-Plugin verwenden, haben diese möglicherweise eine andere Methode für den einzeiligen/doppelten Zeilenabstand. Andernfalls könnte es sich um einen Plugin-/Theme-Konflikt handeln, bei dem Sie Ihre Plugins deaktivieren und/oder Ihr Theme wechseln müssten, um dies zu überprüfen.
Admin
Tim G
Ich möchte den Abstand zwischen normalen Absatzzeilen verringern — meiner Meinung nach ist standardmäßig zu viel Weißraum vorhanden. Ich möchte auch eine halbe Zeile am Ende eines Absatzes hinzufügen, anstatt einer ganzen Zeile: Wordpress scheint standardmäßig nur das Äquivalent eines doppelten Wagenrücklaufs zu tun, was ziemlich zwanzigsten Jahrhundert ist und nicht emuliert, was Word kann. Irgendwelche Ideen?
WPBeginner Support
You would want to reach out to the support for your specific theme and they should be able to tell you what CSS needs to be added to reduce your line spacing
Admin
bisher Ahmad
Danke vielmals
sehr hilfreich
WPBeginner Support
Glad our guide could be helpful
Admin
Sumeet
Danke, das war es, wonach ich gesucht habe, es hat geholfen...
WPBeginner Support
Glad our article helped
Admin
Jen
Gott segne dich! Ich bin Ihnen so dankbar, dass Sie das mit dem CSS gepostet haben! Wer hätte gedacht, dass das alles ist, was nötig war, um den Abstand zu ändern! Ich suche schon lange nach so etwas! Vielen Dank!
WPBeginner Support
Glad our article could help you
Admin
Kathy
Ich benutze die "Shift"-Enter-Methode, aber sie erlaubt keine unterschiedlichen Schriftgrößen, wenn ich das tue. Gibt es eine Umgehungslösung?
WPBeginner Support
Hallo Kathy,
Bitte sehen Sie sich unseren Leitfaden an, wie Sie die Schriftgröße in WordPress ändern: Schriftgröße in WordPress ändern.
Admin
Lora Staples
TOLLES Video. Mir haben der Inhalt, das Tempo und der Ton des Sprechers gefallen. DANKE!
Kunal Khandelwal
Thank you so much for this suggestion. Didn’t know it was so easy