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.
phil rooksby
Ich habe kein zusätzliches CSS. Ich habe alle möglichen anderen Wege versucht, den Absatzabstand zu ändern, aber nichts funktioniert, es sieht wirklich chaotisch aus. Hilfe bitte!!!
Norm
Vielen Dank für die Hilfe. Ich habe überall gesucht und wollte es mit einem Plugin machen. Sie haben es so einfach gemacht. Nochmals vielen Dank.
Maria
Hallo! Ich möchte einen einfachen Abstand zwischen meinen Absätzen haben und selbst nach dem Drücken von Enter (für den doppelten Abstand) hat sich beim Vorschau der Entwurfs nichts geändert (es ist immer noch alles ein Absatz). Könnte mir jemand helfen?
Rashmi
Hallo
Ich möchte die Zeilenhöhe und den Zeilenabstand ändern. Allerdings gibt es kein 'Editor'-Symbol (Appearance » Editor) in der CSS-Datei des Themes.
Was kann ich also tun?
Vielen Dank für Ihre Antwort!
Hannah
Wow. Didn’t know it was so easy. Thank you so much! This double space was driving me crazy!
Christine
Danke! Viel einfacher!
Donna
Vielen, vielen, vielen Dank!
Ich war in einem anderen HTML-Editor und konnte nicht herausfinden, wie man einen einzelnen Abstand einfügt.
You saved the day!
Gerard
Genial und ein ewiger Lebensretter.
Ich hatte Schwierigkeiten mit dem Abstand auf einer meiner Kunden-Websites und es ist absolut erstaunlich, dass Sie die genaue Antwort fast zur Hand hatten. Ich werde jetzt ein permanenter Abonnent.
Elandre
Danke für all die Wordpress-Tipps. Diese Seite hat mir bei den meisten Schwierigkeiten, die ich hatte, sehr geholfen
LR
Ich benutze das Pilcrow-Theme und habe keine Ahnung, wie ich den doppelten Abstand zwischen den Absätzen erzeugen kann. Manchmal passiert es in meinen Beiträgen, manchmal aber auch nicht. Wenn ich in die HTML-Datei schaue, sehe ich kein Post-p oder Padding. Ich sehe nur das Endergebnis, wie der Beitrag aussehen wird, und dann weiß ich, dass der doppelte Abstand nicht funktioniert hat. Kann ich trotzdem zurückgehen und es neu bearbeiten und reparieren? Zu guter Letzt habe ich unter "Darstellung" nicht die von Ihnen genannten Menüpunkte "Editor".
Ich habe unter "Darstellung" folgende Optionen: Themes, Anpassen, Widgets, Menüs, Header, Hintergrund, AMP, Theme-Optionen, Mobil.
Bitte helfen Sie mir.
WPBeginner Support
Hallo LR,
Sie können das CSS hinzufügen, indem Sie zu Appearance->Customize gehen und dann im Customizer auf den Tab Additional CSS klicken. Sehen Sie sich unseren Leitfaden an, wie Sie benutzerdefiniertes CSS in WordPress hinzufügen.
Wenn Sie glauben, dass es sich um ein Theme-Problem handelt, wechseln Sie vorübergehend zu einem Standard-WordPress-Theme. Wenn das Problem verschwindet, können Sie Ihren Theme-Entwickler um Unterstützung bitten.
Admin
Derek Cummings
Mein Theme ist kaputt, da es standardmäßig keinen doppelten Abstand hat. Das Theme ist in anderen Worten im Shift+Enter-Modus stecken geblieben. Also in Bezug auf den folgenden Code:
.post p { line-height: 1.5em; padding-bottom: 15px; }
Ist 15px ein normaler Standard-Doppelabstand? Wie viele Pixel sollten es standardmäßig sein? Spielt es auch eine Rolle, wo ich diesen Code platziere? Danke!
Femi
Vielen Dank für den Tipp mit Shift + Enter. Das wusste ich jahrelang nicht. Ihre Website ist immer eine Rettung, wenn ich feststecke.
Lyn
Hallo: Wie bekomme ich einen benutzerdefinierten Zeilenabstand (z. B. 1,5em) für eine einzelne Instanz auf einer Seite, anstatt das gesamte Theme-CSS zu ändern? Ich sehe, dass zwei andere Personen dieselbe Frage gestellt haben, ohne Antwort, zumindest nicht, dass ich gefunden habe. Danke!
Denise B
Ich habe die p-Ränder auf Null gesetzt. In Ihrem CSS wäre es etwas wie p {margins: 0; }
Los Hundlos
Shift+Enter, um einen riesigen Abstand zwischen den Zeilen im WYSIWYG TinyMCE-Editor in WordPress zu vermeiden. Funktioniert !!!! Großartig!
Cat
Wie wäre es, einfach etwas Text hinzuzufügen und die Textfarbe auf Weiß zu ändern (wenn der Hintergrund weiß ist)? Dies sollte es einfacher machen, Zeilenabstände zu erstellen und anzupassen (es sei denn, der Hintergrund ist natürlich ein Bild von etwas, das nicht mit der Schriftfarbe übereinstimmt).
Tim
Vielen Dank! Lebensretter!
Michael Rich
Hallo WPBeginner-Mitarbeiter,
Ich habe eine andere Frage. Ich benutze Visual Composer und habe viele Trennlinien mit Text zwischen meinen Abschnittsüberschriften auf meiner Homepage hinzugefügt. Ich möchte, dass diese Textüberschriften auch ein Link zu diesem Abschnitt sind.
Wenn ich jedoch den Link hinzufüge, verliere ich den Text, der die Abschnitte identifiziert, den ich in der Trennlinie hatte, und er wird magisch durch den Standardtext „TITLE“ ersetzt.
Um zu versuchen, es zu einem Link zu machen, füge ich den Verknüpfungscode in diese Klammer ein:
[vc_text_separator title=”AUTOS DER 1950ER JAHRE”]
Ich kratze mir so sehr den Kopf, dass ich glaube, ich bin kahl. Jede Hilfe wird Ihnen lebenslange Dankbarkeit einbringen!!!
Danke,
Mike
Anthony Cooper
Ich benutze das WordPress-Theme 'Divi' und habe festgestellt, dass, wenn Sie die Eingabetaste (oder Umschalt + Eingabetaste) zweimal drücken, um einen größeren Abstand zu erzeugen, dies ignoriert wird. Um dies zu umgehen, drücken Sie die Eingabetaste einmal, geben Sie ein Zeichen in die Zeile ein (es spielt keine Rolle, welches), markieren Sie es und ändern Sie die Schriftfarbe des Zeichens auf Weiß und drücken Sie dann erneut die Eingabetaste. Dies ergibt den gewünschten Abstand zwischen den Zeilen, ohne das Theme bearbeiten zu müssen. Dasselbe gilt für zusätzliche Leerzeichen in einer Zeile; geben Sie so viele Zeichen ein, wie gewünscht, markieren Sie sie und ändern Sie ihre Schriftfarbe auf Weiß und fahren Sie dann in der gewünschten Schriftfarbe fort.
Julie
Genialer Tipp! Vielen Dank dafür, Sie haben mich vor vielen Kopfschmerzen und Mühen gerettet, Anthony!
Robin Brinkler
Denken Sie daran, dass einige Suchmaschinen „versteckten“ Text wie diesen als Spam behandeln könnten.
Ellen
Das war wirklich hilfreich, danke!
Christy
THANK YOU!! I Love you guys! So glad I found this site! I’ve almost literally been banging my head against the wall. If I knew how to insert emojis, this post would be covered with hearts and smiley faces.
Christy
P.S. ~ HA! Ich wusste NICHT, dass mein kleiner Doppelpunkt und meine Klammern tatsächlich zu einem Smiley werden würden. LOL
Linda Paul
Oh ja! Sie haben mir gerade geholfen, ein Problem zu lösen (erzwungene einzeilige Absätze), das mich seit Jahren plagt!
WPBeginner Support
Glad you found it helpful
Admin
David M. Ebersole Sr.
Ich bin Abonnent von WP Beginner.
Ich hatte eine Frage zur Eingabe von technischen Daten für mein Produkt auf meiner Website. Der Abstand in den Tabellen schien auf der Seite zu groß zu sein. Ich habe den WordPress-Support durchsucht und alles, was ich sah, waren knappe Antworten auf die Frage nach einzeiligem Abstand.
Sie sind der Erste, der die Frage beantwortet, und sie war offensichtlich richtig. Danke.
Mit freundlichen Grüßen,
Dave
WPBeginner Support
Glad you found it helpful
Admin
Mark
Was ist mit Android? Das neueste Update hat einen doppelten Zeilenabstand (neuer Absatz) erzwungen. Nicht sehr gut für Poeten. Gibt es eine Möglichkeit, es wieder auf einfach zurückzusetzen?
Cheryl
Ich benutze das Omega Theme und Strg+Enter funktioniert nicht. Kann ich etwas anderes tun? Ich kann post.p nicht in der CSS-Datei finden.
Becky
Sehr hilfreich, danke!
Adnan Khan
Danke, dieser sehr nützliche Tipp für neue WP-Benutzer
Tina Gleisner
Danke für die „Umschalttaste“ und die Eingabetaste für den einzeiligen Abstand, da ich das seit Jahren herausfinden wollte … und nie dazu kam, die Lösung zu finden.
Ian
Hallo,
Das hat bei mir funktioniert, aber das CSS bewirkt auf meiner Seite nichts...
Will
Bei mir ist dasselbe passiert. Gibt es einen aktualisierten Code zum Einfügen?
A. Lougheed
Ich suche überall nach einer Antwort... wenn ich ein
im Texteditor einfüge, wird es im visuellen Editor entfernt. Das macht mich wahnsinnig. Hat wpbeginner eine Empfehlung?
Soll ich ein Plugin hinzufügen, um das zu stoppen?
Ich habe vor Jahren ein Plugin ausprobiert, aber ich musste jeden Beitrag zurückgehen und neu formatieren.
Jeder Link mit Tutorials oder Ratschlägen wird sehr geschätzt!
WPBeginner Support
Actually it is also removed from your comment.
Bitte sehen Sie sich unseren Leitfaden an: Sonderzeichen in WordPress-Beiträgen hinzufügen.
Admin
Jessica
Was ist der Code, um die Zeilenhöhe für einen einzelnen Beitrag anzupassen?
Bharadwaj
Danke, hilfreich
Samadarshi
Thank you for such wonderful articles
I was completely lost when I started wordpress but now I have a pretty basic idea
Thank u
Neal Umphred
Danke! Das hat mir geholfen, meine Beiträge zu straffen – außer dem ersten Absatz in jedem Beitrag. Aus irgendeinem Grund scheinen die Zeilen doppelt beabstandet zu sein. Gibt es einen Code-Schnipsel, den ich zu CSS bearbeiten hinzufügen könnte, um sie zu straffen?
Neal Umphred
Danke! Das Hinzufügen des Snippets (.post p{line-height: 1.5em;}) zu meinem Edit CSS hat meinen Text viel leichter lesbar gemacht. Nun zu meinem Problem: Der Eröffnungsparagraph in jedem WordPress-Beitrag hat einen viel größeren Zeilenabstand als die restlichen Absätze – und er wird von diesem Zeilenhöhencode nicht beeinflusst. Gibt es ein anderes Code-Snippet, das ich zu Edit CSS hinzufügen könnte, um diese Eröffnungssätze zu straffen?
Tiffany
Vielen Dank. Ihre Seite ist bemerkenswert. Sie hat mir sehr geholfen. Abonniert!! Bitte machen Sie weiter so!!
WPBeginner Support
Danke für die netten Worte. Wir helfen gerne.
Admin
Joe Simmons
Danke! Ich wusste auch nichts von der "Shift+Enter"-Sache.
Debby
Shift + Enter. Wer hätte gedacht, dass es so einfach ist! Vielen Dank, vielen Dank, vielen Dank!
Gamo Nana
Danke für den einzeiligen Abstand mit SHIFT + Enter
Bob M.
Ich möchte Ihnen auch für diesen weisen Rat (Shift+Enter) danken!
JE
Danke für das Tutorial. Wie kann ich jedoch den Zeilenabstand einzelner Absätze anpassen? Ich habe einen 3-Wort-Titel, zentriert und in 3 Zeilen gestapelt. Alle Zeilen haben unterschiedliche Schriftgrößen, daher sind die Zeilenabstände inkonsistent. Ich suche schon seit einiger Zeit nach einer Möglichkeit, dies einfach über ein Texteditor-Tool oder ein Plugin anzupassen.
Irgendwelche Ideen?
Syed Balkhi
Wir haben gerade eine Browser-Suchfunktion verwendet, die Sie durch Drücken von Strg + F finden können
Mx
Finden von .post p, das Sie eine Suchleiste verwendet haben. Können Sie mir sagen, wie ich diese Suchleiste finde? Thanx4
Jun Han
Das ist sehr hilfreich.
Danke.
http://www.digitalgrog.com.au/
es war mein Steckenpferd bis jetzt ..danke, jetzt kann ich richtig Abstand halten ..übrigens, ich habe eine Liste von Hosts erstellt, schau sie dir an
http://www.digitalgrog.com.au/australian/comparison-on-blog-web-hosting-for-australians/
Karen Surfy Mum
Großartig!! Ich wollte auch schon ewig wissen, wie das geht!!! So einfach, wenn man es weiß… Prost xxx
Widdershins
Oiiiiiiiiiiii!!! I’ve been trying to find out how to do that for yonks!!!!
Thankyouthankyouthankyou
fastow2012
„Wenn Sie das .post p-Tag nicht finden, erstellen Sie einfach eines.“
Wo? Soll ich es einfach irgendwo in die CSS-Datei kopieren/einfügen?
WPBeginner-Mitarbeiter
vorzugsweise am Ende der CSS-Datei.
Mx
Tut mir leid, aber ich verstehe immer noch nicht, wo ich es platzieren soll. Ist es möglich, es detaillierter zu erklären? Thanx
James
Ich habe mich schon immer gefragt, wie man das macht. Danke für das Training.
Valerie
Ich bin nicht einmal ein echter „Anfänger“, aber es gibt Lücken in meinem Wissen und Sie haben gerade eines der frustrierendsten Dinge an WP für diesen Autor und Word-Benutzer gelöst… Vielen Dank dafür und für all Ihre fantastischen Informationen… Ich lerne weiterhin großartige Dinge aus Ihren Beiträgen und Ihrer Website. Danke und Prost!
kelly
almost four years of blogging and finally!
so awesome, thanks!!