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

Hinzufügen eines horizontalen Linientrenners in WordPress (5 Methoden)

Hinweis der Redaktion: Wir erhalten eine Provision für Partnerlinks auf WPBeginner. Die Provisionen haben keinen Einfluss auf die Meinung oder Bewertung unserer Redakteure. Erfahre mehr über Redaktioneller Prozess.

Möchten Sie eine horizontale Linie über Ihren Beitrag oder Ihre Seite in WordPress hinzufügen?

Horizontale Trennlinien eignen sich hervorragend, um lange Beiträge in kleinere Abschnitte zu unterteilen, besondere Ankündigungen oder Werbeaktionen hervorzuheben und verschiedene Teile einer Seite klar voneinander zu trennen.

In diesem Artikel zeigen wir Ihnen, wie Sie ganz einfach eine horizontale Trennlinie in WordPress hinzufügen können.

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 wissen, ob sie Ihre Seite verlassen wollen. Je nach Gerät kann es vorkommen, dass Browser Ihren Blogbeitrag als lange Textwände anzeigen.

Viele Leser werden die Seite verlassen, wenn der Inhalt zu schwer zu lesen ist, selbst wenn der Blogartikel sehr wertvoll ist.

Das Hinzufügen einer horizontalen Trennlinie könnte alles sein, was Sie brauchen, um Ihre Inhalte lesbar zu machen, was die Lesbarkeit verbessert und letztendlich das Engagement der Nutzer in Ihren Blog-Beiträgen und Seiten erhöht.

Darüber hinaus können horizontale Linientrennlinien wichtige Punkte hervorheben. Zum Beispiel können sie helfen, wichtige Zitate oder Übergänge in Ihrem Inhalt hervorzuheben.

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:

Hinzufügen einer horizontalen Linie im WordPress-Block-Editor

Um eine horizontale Linie mit dem WordPress-Block-Editor hinzuzufügen, klicken Sie auf das Symbol (+), 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

Wählen Sie als Nächstes den Block Trennzeichen aus dem Abschnitt Layoutelemente aus.

Sie können auch über die Suchleiste danach suchen.

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 Farbeinstellungen ändern. Klicken Sie einfach auf eine der angezeigten Optionen oder verwenden Sie den Link „Benutzerdefinierte 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 die Schaltfläche „Löschen“ unter den Farboptionen.

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

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

Hinzufügen einer horizontalen Linie im klassischen WordPress-Editor

Wenn Sie noch den klassischen Editor verwenden, können Sie einfache horizontale Linien hinzufügen. Bearbeiten Sie dazu einfach einen bestehenden Beitrag oder eine Seite oder erstellen Sie einen neuen Beitrag.

Wenn Sie nur eine Reihe von Schaltflächen in der Symbolleiste oberhalb des Beitragseditors sehen, klicken Sie auf das Symbol „Symbolleiste umschalten“ 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 die horizontale Linie verlaufen soll. Klicken Sie dann auf die Schaltfläche Horizontale Linie. Sie ist die zweite von links in der zweiten Reihe:

The horizontal line button in the classic WordPress editor

Ihre horizontale Linie wird hellgrau sein.

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.

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

Der Standard-Block-Editor von WordPress ermöglicht es Ihnen, mehrere Arten von Trennzeichen zu Ihren Beiträgen und Seiten hinzuzufügen.

Abgesehen vom horizontalen Linientrenner gehören zu den anderen Optionen in der Gruppe der Layoutelemente die Blöcke Abstandhalter, Weitere Verknüpfung und Seitenumbruch.

Der Abstandshalterblock

Mit dem Abstandhalter können Sie Leerraum zwischen den Blöcken einfügen. Wenn Sie z. B. eine kleine Lücke am Ende Ihres Beitrags vor einem Sonderangebot wünschen, können Sie den 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.

Und so sieht der Spacer auf Ihrer Website aus:

How the spacer block appears in a page or post

Der More-Block

Wenn Ihr Thema vollständige Beiträge (und nicht Auszüge) auf Ihrer Blog-Hauptseite anzeigt, wird Ihr Beitrag durch das Hinzufügen eines „Mehr“-Links an dieser Stelle abgebrochen.

Der Besucher kann klicken, um mehr zu lesen.

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 erscheint.

The Read More block in a post on the site

Mehr über Auszüge erfahren Sie in unserem Leitfaden zur einfachen Anpassung von Auszügen in WordPress.

Der Seitenumbruch-Block

Mit dem Seitenumbruch können Sie lange Blogbeiträge in mehrere Seiten aufteilen. Sie können ihn in keiner Weise anpassen. So sieht es aus, wenn Sie Ihren Beitrag erstellen:

The page break block shown in the block editor

Und so sieht der Seitenumbruch auf Ihrer Website aus.

Beachten Sie die Verwendung von Seitenzahlen und die Möglichkeit für die Leser, die gewünschte Seite auszuwählen.

The page break as it appears on a site

Jede dieser Möglichkeiten könnte eine gute Alternative zum Hinzufügen einer horizontalen Linie in WordPress sein, je nachdem, was Sie erreichen wollen.

Hinzufügen eines Seitenumbruchs in WordPress-Formularen mit WPForms

Was ist, 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 dafür WPForms 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.

Gehen Sie dann in Ihrem WordPress-Dashboard zu WPForms “ Add New.

Creating a new form using WPForms

Geben Sie einen Namen für Ihr Formular ein und wählen Sie dann eine Vorlage. Wir werden die Vorlage„Formular für Angebotsanfragen“ für unser Formular verwenden.

Fahren Sie mit dem Mauszeiger über die Vorlage und klicken Sie auf die Schaltfläche, um Ihr Formular zu erstellen.

Creating a quote form in WPForms

Blättern Sie dann auf der Registerkarte Felder hinzufügen auf der linken Seite nach unten zum Abschnitt Ausgefallene Felder.

Ziehen Sie den Seitenumbruch per Drag & Drop an die gewünschte Stelle im Formular. Wir setzen ihn direkt vor das Anforderungsfeld.

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 eine Schaltfläche „Zurück“ hinzufügen, um auf die zweite Seite des Formulars zu gelangen. Klicken Sie einfach auf das Feld für den Seitenwechsel, um es zu bearbeiten.

Editing the page break field in WPForms

Speichern Sie Ihr Formular, sobald Sie fertig sind, indem Sie oben rechts auf die Schaltfläche Speichern klicken.

Sie können das Formular nun in Ihre Website einfügen.

Zunächst müssen Sie einen neuen Beitrag oder eine neue Seite erstellen oder einen bestehenden Beitrag bearbeiten.

Klicken Sie auf das (+), um einen neuen Block zu Ihrem Beitrag oder Ihrer Seite hinzuzufügen, und suchen Sie den WPForms-Block. Sie können die Suchleiste verwenden oder im Abschnitt Widgets nachsehen. Fügen Sie den Block zu Ihrer Seite hinzu.

Adding the WPForms block to your page or post

Nun sehen Sie eine Option zur Auswahl Ihres Formulars.

Wählen Sie aus der Dropdown-Liste.

Choose your form from the dropdown list

Danach können Sie den Beitrag oder die Seite veröffentlichen.

Prüfen Sie anschließend, wie Ihr Formular auf Ihrer Website aussieht.

The form with a page break on the website

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-Seitenerstellungsprogramme für WordPress oder unseren Blogbeitrag über die Erstellung eines benutzerdefinierten Formtrenners in WordPress.

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 .

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

5 KommentareEine Antwort hinterlassen

  1. Syed Balkhi says

    Hey WPBeginner readers,
    Did you know you can win exciting prizes by commenting on WPBeginner?
    Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
    You can get more details about the contest from here.
    Start sharing your thoughts below to stand a chance to win!

    • WPBeginner Support says

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

      Admin

    • WPBeginner Support says

      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.