Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
WPB Cup
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

Wie man in WordPress eine horizontale Trennlinie einfügt (3 Methoden)

Das Hinzufügen einer horizontalen Linie zu Ihrem WordPress-Beitrag oder Ihrer Seite ist eine effektive Möglichkeit, die Lesbarkeit zu verbessern. Diese Linien helfen dabei, lange Beiträge in überschaubare Abschnitte zu unterteilen, damit Ihr Inhalt ansprechend bleibt.

Horizontale Trennlinien eignen sich auch hervorragend, um die Aufmerksamkeit auf wichtige Ankündigungen oder Werbeaktionen zu lenken. Sie trennen die verschiedenen Teile Ihrer Seite klar voneinander ab und erleichtern den Besuchern das Verfolgen der Seite.

In dieser Anleitung zeigen wir Ihnen 3 einfache Methoden, um horizontale Linientrennlinien in WordPress hinzuzufügen. Wir werden auch einige Alternativen für horizontale Trennlinien vorstellen.

How to add a horizontal line in WordPress

Warum sollten Sie eine horizontale Trennlinie in WordPress hinzufügen?

Es dauert nur Sekunden, bis die Besucher entscheiden, ob sie Ihre Seite verlassen wollen. Je nach Gerät zeigen Browser Ihre Beiträge möglicherweise als lange Textwände an.

Viele Besucher verlassen die Seite, wenn der Inhalt zu schwer zu lesen ist, selbst wenn der Blog-Artikel einen hohen Nutzwert hat.

Das Hinzufügen eines horizontalen Zeilentrenners könnte ausreichen, um Ihren Inhalt lesbar zu machen.

Ein horizontaler Linientrenner kann die Lesbarkeit Ihrer Beiträge und Seiten verbessern und letztlich die Beteiligung der Benutzer erhöhen. Darüber hinaus kann er wichtige Punkte hervorheben, was dazu beiträgt, wichtige Zitate oder Übergänge in Ihrem Inhalt zu betonen.

Da dies eine umfassende Anleitung zum Hinzufügen einer horizontalen Trennlinie in WordPress ist, kann es hilfreich sein, unser Inhaltsverzeichnis zu verwenden, um die Methode zu finden, die Sie verwenden möchten:

Sind Sie bereit? Legen wir los.

Methode 1: Hinzufügen einer horizontalen Linie im WordPress Block-Editor

Um eine horizontale Linie mit dem WordPress Block-Editor hinzuzufügen, können Sie auf das „+“-Symbol klicken, um einen neuen Block an der Stelle hinzuzufügen, an der Sie die Linie haben möchten.

Adding a new block where you want your horizontal line

Als Nächstes wählen wir den Block „Trennzeichen“ aus dem Abschnitt „Layoutelemente“ aus.

Sie können sie leicht über die Suchleiste finden.

Find and add the Separator block

Nach dem Hinzufügen sehen Sie die horizontale Trennlinie in Ihrem Inhaltsbereich.

Gestaltung der horizontalen Linie im WordPress-Block-Editor

Standardmäßig ist die horizontale Trennlinie eine blassgraue Linie in der Mitte Ihres Beitrags oder Ihrer Seite.

Sie können das Aussehen ändern, indem Sie auf die Zeile klicken, um ihren Block auszuwählen. Dann öffnet sich das Bearbeitungsfeld „Block“ auf der rechten Seite Ihres Bildschirms.

Click on the Separator block to select it and edit the settings

Um den Stil Ihrer Linie zu ändern, klicken Sie einfach auf den kleinen Pfeil neben „Stile“. Dann sehen Sie die verschiedenen Optionen.

Wenn Sie möchten, können Sie die horizontale Linie in eine dieser Linien ändern:

  • Eine breite Linie, die die gesamte Breite des Inhalts Ihres Beitrags abdeckt.
  • Drei Punkte werden in der Mitte Ihres Beitrags angezeigt.
The different styles available for the Separator block

Hinweis: Bei einigen WordPress-Themes decken sowohl die breite Zeile als auch die Standardzeile die gesamte Breite Ihres Beitrags ab.

Sie können auch die Farbe Ihrer horizontalen Linie unter den Einstellungen „Farbe“ ändern. Klicken Sie einfach auf eine der angezeigten Optionen oder verwenden Sie den Link „Individuelle Farbe“, um eine beliebige Farbe auszuwählen.

Change the color of the horizontal line

Wenn Sie die graue Standardfarbe wiederherstellen möchten, klicken Sie einfach auf den Button „Löschen“ unter den Optionen.

Hier ist unsere horizontale Linie blau und verwendet den Stil „breit“.

A horizontal line that's been modified to be wide and blue

Methode 2: Hinzufügen einer horizontalen Linie im klassischen Editor von WordPress

Wenn Sie noch den klassischen Editor verwenden, können Sie auch weiterhin einfache horizontale Linien hinzufügen.

Bearbeiten Sie dazu einfach einen bestehenden Beitrag oder eine Seite oder erstellen Sie einen neuen Beitrag. Wenn Sie in der Werkzeugleiste oberhalb des Editors für Beiträge nur eine Reihe von Buttons sehen, klicken Sie auf das Symbol zum Umschalten der Werkzeugleiste auf der rechten Seite:

Click the Toolbar Toggle button to see the second row of icons

Dadurch wird die zweite Reihe von Schaltflächen geöffnet, die die Option „Horizontale Linie“ enthält.

Fügen Sie nun einen Zeilenumbruch zwischen den Absätzen an der Stelle ein, an der Sie die horizontale Linie haben möchten. Klicken Sie dann auf das Symbol „Horizontale Linie“. Es ist das zweite von links in der zweiten Reihe:

The horizontal line button in the classic WordPress editor

Nach dem Hinzufügen sehen Sie eine hellgraue horizontale Linie.

Sie erstreckt sich über die gesamte Breite deines Beitrags, etwa so:

A horizontal rule created using the classic editor

Manuelles Hinzufügen einer horizontalen Trennlinie mit HTML

In einigen seltenen Fällen kann es erforderlich sein, dass Sie manuell eine horizontale Trennlinie in Ihren WordPress-Inhalt einfügen müssen.

Wenn ja, können Sie dies einfach tun, indem Sie den hr-HTML-Tag in Ihrem Inhalt verwenden:

<hr>

Dadurch wird die horizontale Trennlinie zum Inhalt Ihres Beitrags hinzugefügt.

Methode 3: Hinzufügen eines Seitenumbruchs in WordPress-Formularen mit WPForms

Was, wenn Sie eine Pause nicht in einem Beitrag oder einer Seite, sondern in einem WordPress-Kontaktformular einfügen möchten? Auch das können Sie tun!

Wir werden WPForms für diese Aufgabe verwenden.

Zunächst müssen Sie das WPForms-Plugin herunterladen, installieren und aktivieren. Wenn Sie sich nicht sicher sind, wie das geht, lesen Sie einfach unsere Schritt-für-Schritt-Anleitung zur Installation eines WordPress-Plugins.

Als Nächstes können Sie von Ihrem WordPress-Dashboard aus zu WPForms “ Add New gehen.

Creating a new form using WPForms

In der nächsten Ansicht geben Sie einen Namen für Ihr Formular ein und wählen dann ein Template aus.

Für dieses Tutorial verwenden wir das Template„Formular für Angebotsanfragen„.

Nachdem Sie ein Template ausgewählt haben, können Sie einfach mit dem Mauszeiger über das Template fahren und auf den Button klicken, um Ihr Formular zu erstellen.

Creating a quote form in WPForms

Blättern Sie nun auf dem Tab „Add Fields“ auf der linken Seite zum Abschnitt „Fancy Fields“.

Dann können Sie den ‚Seitenumbruch‘ per Drag-and-drop an die gewünschte Stelle im Formular ziehen. Wir setzen ihn direkt vor die Box „Anfrage“.

Adding a page break in WPForms

Sie werden sehen, dass das Formular jetzt in zwei Teile unterteilt ist. WPForms hat auch automatisch eine Schaltfläche „Weiter“ hinzugefügt.

Sie können die Beschriftung „Weiter“ ändern, wenn Sie möchten, und Sie können einen Button „Zurück“ hinzufügen, damit die Benutzer zur zweiten Seite des Formulars wechseln können.

Klicken Sie einfach auf das Feld für den Seitenumbruch, um es zu bearbeiten.

Editing the page break field in WPForms

Wenn Sie fertig sind, können Sie das Formular speichern, indem Sie oben rechts auf den Button „Speichern“ klicken.

Nun ist es an der Zeit, das Formular in Ihre Website einzubauen.

Klicken Sie auf den Button „Einbetten“ direkt neben dem Button „Speichern“, um loszulegen. Daraufhin öffnet sich ein Fenster, in dem Sie einen neuen Beitrag oder eine neue Seite erstellen oder einen bestehenden Beitrag bearbeiten können.

Für dieses Tutorial wählen wir die Option „Vorhandene Seite auswählen“.

WPForms' embed prompt window

Im nächsten Schritt wählen Sie eine der verfügbaren Seiten aus und klicken auf „Los geht’s!“.

Sie werden dann zum Content Editor von WordPress weitergeleitet.

Klicken Sie hier einfach auf das „+“-Symbol, um einen neuen Block zu Ihrem Beitrag oder Ihrer Seite hinzuzufügen, und suchen Sie den Block „WPForms“. Sie können die Suchleiste verwenden oder im Abschnitt „Widgets“ nachsehen.

Wenn Sie ihn gefunden haben, klicken Sie ihn an, um den Block zu Ihrer Seite hinzuzufügen.

Adding the WPForms block to your page or post

Nun sehen Sie eine Option zur Auswahl Ihres Formulars.

Wählen Sie nun das soeben erstellte Formular aus der Dropdown-Liste aus.

Choose your form from the dropdown list

Danach können Sie den Beitrag oder die Seite veröffentlichen. Und das war’s dann auch schon!

Wenn Sie nun den Beitrag oder die Seite besuchen, können Sie das Formular in Aktion sehen.

The form with a page break on the website

Bonus-Tipp: Andere Trennzeichen, die Sie in Ihren Beiträgen und Seiten verwenden können

Mit dem Standard WordPress Block-Editor können Sie Ihren Beiträgen und Seiten mehrere Arten von Trennzeichen hinzufügen.

Abgesehen von der horizontalen Linientrennung gehören zu den anderen Optionen in der Blockgruppe „Layoutelemente“ der „Abstandhalter“, der Link „Mehr“ und die Blöcke „Seitenumbruch“.

Der Abstandshalterblock

Mit dem ‚Spacer‘-Block können Sie Leerzeichen zwischen den Blöcken einfügen. Wenn Sie zum Beispiel am Ende Ihres Beitrags vor einem Sonderangebot eine kleine Lücke einfügen möchten, können Sie „Spacer“ verwenden.

So sieht es aus, wenn Sie Ihren Beitrag im Block-Editor erstellen:

The Spacer block in the block editor

Sie können die Höhe des Abstandshalters individuell anpassen, um ihn besser an Ihren Inhaltsbereich anzupassen.

Und so könnte der Spacer auf Ihrer Website aussehen:

How the spacer block appears in a page or post

Der More-Block

Wenn Ihr Theme auf der Hauptseite Ihres Blogs vollständige Beiträge anstelle von Textauszügen anzeigt, wird Ihr Beitrag durch das Hinzufügen eines Links „Mehr“ an dieser Stelle abgeschnitten.

Dies erfordert, dass die Besucher anklicken, um mehr zu erfahren.

The More block in the post editor

Das obige Bild zeigt, was Sie im Inhaltseditor sehen werden.

Und unten sehen Sie, wie es auf Ihrer Website für Besucher aussehen könnte:

The Read More block in a post on the site

Mehr dazu erfahren Sie in unseren Anleitungen zur richtigen Verwendung des more-Blocks und zum einfachen Anpassen von Textauszügen in WordPress.

Der Seitenumbruch-Block

Mit „Seitenumbruch“ können Sie lange Beiträge in mehrere Seiten aufteilen, aber Sie können sie nicht individuell anpassen. So sieht es aus, wenn Sie Ihren Beitrag erstellen:

The page break block shown in the block editor

Die Funktion „Seitenumbruch“ verwendet Seitenzahlen und ermöglicht es den Besuchern, die gewünschte Seite auszuwählen.

So könnte es auf Ihrer Website aussehen:

The page break as it appears on a site

Je nach Zielsetzung kann jede dieser Möglichkeiten eine gute Alternative zum Hinzufügen einer horizontalen Linie in WordPress sein.

Wir hoffen, dass dieses Tutorial Ihnen geholfen hat zu lernen, wie man in WordPress horizontale Trennlinien einfügt. Wenn Sie Ihren Beiträgen und Seiten weitere Design- und Layout-Elemente hinzufügen möchten, lesen Sie unseren Artikel über die besten Drag-and-drop-WordPress Page-Builder oder unseren Blog-Beitrag darüber, wie Sie einen individuellen Formteiler in WordPress erstellen.

Wenn Ihnen dieser Artikel gefallen hat, dann abonnieren Sie bitte unseren YouTube-Kanal für WordPress-Videotutorials. Sie können uns auch auf Twitter und Facebook finden.

Offenlegung: Unsere Inhalte werden von unseren Lesern unterstützt. Das bedeutet, dass wir möglicherweise eine Provision verdienen, wenn Sie auf einige unserer Links klicken. Mehr dazu erfahren Sie unter Wie WPBeginner finanziert wird , warum das wichtig ist und wie Sie uns unterstützen können. Hier finden Sie unseren redaktionellen Prozess .

Avatar

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

Das ultimative WordPress Toolkit

Erhalte KOSTENLOSEN Zugang zu unserem Toolkit - eine Sammlung von WordPress-bezogenen Produkten und Ressourcen, die jeder Profi haben sollte!

Reader Interactions

4 KommentareEine Antwort hinterlassen

  1. Jiří Vaněk

    May I ask you, if its possible to make dividier horizontal, instead fo vertical?

    • WPBeginner Support

      For that you would want to create columns and then you would use css to add the border property to the columns.

      Admin

  2. Shoaib

    Does using hr tags between article affect SEO?

    • WPBeginner Support

      It would depend on how they are being used but for the most part they should not have a major effect.

      Admin

Eine Antwort hinterlassen

Danke, dass du einen Kommentar hinterlassen möchtest. Bitte beachte, dass alle Kommentare nach unseren kommentarpolitik moderiert werden und deine E-Mail-Adresse NICHT veröffentlicht wird. Bitte verwende KEINE Schlüsselwörter im Namensfeld. Lass uns ein persönliches und sinnvolles Gespräch führen.