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.

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.

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

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

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.

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.

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.

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

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:

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:

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

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

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.

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.

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

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.

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

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.

Nun sehen Sie eine Option zur Auswahl Ihres Formulars.

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

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.

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:

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:

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.

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:

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:

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:

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.