ThemeLocal - Blog-Tipps, die wie von Zauberhand funktionierenThemeLocal - Blog-Tipps, die wie von Zauberhand funktionierenThemeLocal - Blog-Tipps, die wie von Zauberhand funktionieren
  • Bloggen
  • WordPress
  • E-Mail Marketing
  • SEO
  • Soziale Netzwerke
  • Mehr
    • Tutorials
    • Shopify
    • Bewertungen
    • Tipps
    • Sicherheit
    • Software und Dienste
    • Verkehrserzeugung
    • Anfängerleitfaden
    • Showcase
Search
  • Nutzungsbedingungen
  • Datenschutzerklärung
  • Cookie-Richtlinie
  • Kontakt
© 2022 Themelocal. Alle Rechte vorbehalten.
Lektüre: So fügen Sie einen horizontalen Linientrenner in WordPress hinzu (5 Methoden)
Aktie
Benachrichtigung Zeig mehr
Aa
ThemeLocal - Blog-Tipps, die wie von Zauberhand funktionierenThemeLocal - Blog-Tipps, die wie von Zauberhand funktionieren
Aa
  • Bloggen
  • WordPress
  • E-Mail Marketing
  • SEO
  • Soziale Netzwerke
  • Mehr
Search
  • Bloggen
  • WordPress
  • E-Mail Marketing
  • SEO
  • Soziale Netzwerke
  • Mehr
    • Tutorials
    • Shopify
    • Bewertungen
    • Tipps
    • Sicherheit
    • Software und Dienste
    • Verkehrserzeugung
    • Anfängerleitfaden
    • Showcase
Folge uns
  • Nutzungsbedingungen
  • Datenschutzerklärung
  • Cookie-Richtlinie
  • Kontakt
© 2022 Themelocal. Alle Rechte vorbehalten.
ThemeLocal - Blog-Tipps, die wie von Zauberhand funktionieren > Blog > Tutorials > So fügen Sie einen horizontalen Linientrenner in WordPress hinzu (5 Methoden)
Tutorials

So fügen Sie einen horizontalen Linientrenner in WordPress hinzu (5 Methoden)

Zuletzt aktualisiert: Dezember 3, 2021 5:36 p.m.
ThemeLocal vor 5 Jahren 9 Minuten Mindestlesezeit
Aktie
9 Minuten Mindestlesezeit
So fuegen Sie einen horizontalen Linientrenner in WordPress hinzu 5
Aktie

Möchten Sie Ihrem Beitrag oder Ihrer Seite in WordPress eine horizontale Linie hinzufügen?

Contents
Hinzufügen einer horizontalen Linie im WordPress-BlockeditorHinzufügen einer horizontalen Linie im WordPress Classic EditorManuelles Hinzufügen eines horizontalen Linienteilers mit HTMLAndere Trennzeichen, die Sie in Ihren Beiträgen und Seiten verwenden könnenHinzufügen eines Seitenumbruchs in WordPress-Formularen mit WPForms

Horizontale Linientrenner sind eine großartige Möglichkeit, lange Beiträge in kleinere Abschnitte zu unterteilen, besondere Ankündigungen oder Werbeaktionen hervorzuheben und verschiedene Teile einer Seite klar zu trennen.

In diesem Artikel zeigen wir Ihnen, wie Sie ganz einfach einen horizontalen Linienteiler in WordPress hinzufügen.

Da dies eine umfassende Anleitung zum Hinzufügen eines horizontalen Zeilentrenners in WordPress ist, kann es hilfreich sein, unser Inhaltsverzeichnis zu verwenden:

  • So fügen Sie einen horizontalen Linienteiler im Blockeditor hinzu
  • So fügen Sie einen horizontalen Linienteiler im klassischen Editor hinzu
  • So fügen Sie einen horizontalen Linienteiler mit manuellem HTML hinzu
  • So fügen Sie andere Arten von Spacern und Seitenumbrüchen in WordPress hinzu
  • So unterteilen Sie ein langes WordPress-Formular in mehrere Abschnitte

Hinzufügen einer horizontalen Linie im WordPress-Blockeditor

Um eine horizontale Linie mit dem WordPress-Blockeditor hinzuzufügen, klicken Sie auf das (+)-Symbol, um einen neuen Block hinzuzufügen, wo immer die Linie sein soll.

Hinzufügen eines neuen Blocks, wo Sie Ihre horizontale Linie haben möchten

Wählen Sie als Nächstes den Separator-Block aus dem Abschnitt Layout-Elemente aus oder suchen Sie ihn mithilfe der Suchleiste.

Suchen und fügen Sie den Trennblock hinzu

Nach dem Hinzufügen sehen Sie Ihren horizontalen Linienteiler in Ihrem Inhaltsbereich.

Styling der horizontalen Linie im WordPress Block Editor

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

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

Klicken Sie auf den Separator-Block, um ihn auszuwählen und die Einstellungen zu bearbeiten

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

Sie können die horizontale Linie in eine der folgenden ändern, wenn Sie möchten:

  • Eine breite Linie, die die gesamte Breite des Inhalts Ihres Beitrags abdeckt.
  • Drei Punkte, die in der Mitte Ihres Beitrags angezeigt werden.

Die verschiedenen verfügbaren Stile für den Separator-Block

Notiz: In einigen WordPress-Themes decken sowohl die breite Linie als auch die Standardlinie die gesamte Breite deines Beitrags ab.

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

Ändern Sie die Farbe der horizontalen Linie

Wenn Sie zur standardmäßigen grauen Farbe zurückkehren 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“.

Eine horizontale Linie, die so geändert wurde, dass sie breit und blau ist

Hinzufügen einer horizontalen Linie im WordPress Classic 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.

Wenn Sie in der Symbolleiste über dem Post-Editor nur eine Reihe von Schaltflächen sehen, klicken Sie rechts auf das Symbol zum Umschalten der Symbolleiste:

Klicken Sie auf die Schaltfläche zum Umschalten der Symbolleiste, um die zweite Reihe von Symbolen anzuzeigen

Dadurch wird die zweite Reihe von Schaltflächen geöffnet, die die Option für die horizontale Linie enthält.

Fahren Sie nun fort und setzen Sie einen Zeilenumbruch zwischen den Absätzen, wo die horizontale Linie verlaufen soll. Sie können dann auf die Schaltfläche Horizontale Linie klicken. Es ist die zweite von links in der zweiten Reihe:

Die Schaltfläche für die horizontale Linie im klassischen WordPress-Editor

Ihre horizontale Linie wird hellgrau. Es wird die gesamte Breite Ihres Beitrags wie folgt abdecken:

Eine horizontale Linie, die mit dem klassischen Editor erstellt wurde

Manuelles Hinzufügen eines horizontalen Linienteilers mit HTML

In einigen seltenen Fällen müssen Sie möglicherweise manuell einen horizontalen Linienteiler zu Ihrem WordPress-Inhalt hinzufügen.

Wenn dies der Fall ist, können Sie dies einfach tun, indem Sie das HTML-Tag hr in Ihrem Inhalt verwenden:


Dadurch wird das horizontale Linientrennzeichen in Ihren Beitragsinhalt eingefügt.

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

Mit dem standardmäßigen WordPress-Blockeditor können Sie Ihren Beiträgen und Seiten mehrere Arten von Trennzeichen hinzufügen.

Abgesehen vom horizontalen Zeilentrenner umfassen die anderen Optionen im Satz von Layoutelementen den Abstandshalter, den Link Mehr und die Seitenumbruchblöcke.

Der Abstandsblock

Mit dem Spacer können Sie Leerräume zwischen Blöcken hinzufügen. Wenn Sie beispielsweise vor einem Sonderangebot eine kleine Lücke am Ende Ihres Beitrags wünschen, können Sie den Spacer verwenden.

Sie können die Höhe des Abstandshalters anpassen. So sieht es aus, wenn Sie Ihren Beitrag im Blockeditor erstellen:

Der Spacer-Block im Blockeditor

Und so wird der Spacer auf Ihrer Website angezeigt:

So erscheint der Abstandsblock in einer Seite oder einem Beitrag

Der Mehr-Block

Wenn Ihr Thema vollständige Beiträge (anstelle von Auszügen) auf Ihrer Hauptseite des Blogs anzeigt, wird Ihr Beitrag an dieser Stelle durch das Hinzufügen eines „Mehr“-Links abgebrochen. Der Besucher kann klicken, um mehr zu lesen.

So sieht es aus, wenn Sie Ihren Beitrag erstellen:

Der Mehr-Block im Post-Editor

Und so wird der Link Mehr auf Ihrer Website angezeigt:

Der Read More Block in einem Beitrag auf der Website

Weitere Informationen zu Auszügen finden Sie in unserer Anleitung zum einfachen Anpassen von Auszügen in WordPress.

Der Seitenumbruchblock

Mit dem Seitenumbruch können Sie lange Blog-Posts auf mehrere Seiten aufteilen. Sie können es in keiner Weise anpassen. So sieht es aus, wenn Sie Ihren Beitrag erstellen:

Der im Blockeditor angezeigte Seitenumbruchblock

Und so wird der Seitenumbruch auf Ihrer Website angezeigt:

Der Seitenumbruch, wie er auf einer Website angezeigt wird

All dies könnte eine gute Alternative zum Hinzufügen einer horizontalen Linie in WordPress sein, je nachdem, was Sie tun möchten.

Hinzufügen eines Seitenumbruchs in WordPress-Formularen mit WPForms

Was ist, wenn Sie nicht in einen Beitrag oder eine Seite, sondern in ein WordPress-Kontaktformular eine Pause einlegen möchten? Das können Sie auch. Wir werden dafür WPForms verwenden.

Zuerst müssen Sie das herunterladen, installieren und aktivieren WPForms-Plugin. Wenn Sie sich nicht sicher sind, wie Sie ein WordPress-Plugin installieren, lesen Sie einfach unsere Schritt-für-Schritt-Anleitung.

Als nächstes gehen Sie zu WPForms » Neu hinzufügen in Ihrem WordPress-Dashboard.

Erstellen eines neuen Formulars mit WPForms

Geben Sie einen Namen für Ihr Formular ein und wählen Sie dann eine Vorlage aus. Wir werden die Vorlage „Formular zur Angebotsanfrage“ für unsere verwenden. Fahren Sie mit dem Mauszeiger über die Vorlage und klicken Sie auf die Schaltfläche, um Ihr Formular zu erstellen.

Erstellen eines Angebotsformulars in WPForms

Scrollen Sie als nächstes auf der Registerkarte Felder hinzufügen auf der linken Seite nach unten zum Abschnitt Fancy Fields. Ziehen Sie den Seitenumbruch per Drag & Drop an die gewünschte Stelle im Formular. Wir platzieren es direkt vor dem Anfragefeld.

Hinzufügen eines Seitenumbruchs 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 das Label „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 Seitenumbruchfeld, um es zu bearbeiten.

Bearbeiten des Seitenumbruchsfelds in WPForms

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

Sie können das Formular jetzt zu Ihrer Website hinzufügen. Zuerst müssen Sie einen neuen Beitrag oder eine neue Seite erstellen oder einen bestehenden bearbeiten.

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

Hinzufügen des WPForms-Blocks zu Ihrer Seite oder Ihrem Beitrag

Wählen Sie nun Ihr Formular aus der Dropdown-Liste aus.

Wählen Sie Ihr Formular aus der Dropdown-Liste

Sobald Sie dies getan haben, können Sie den Beitrag oder die Seite veröffentlichen und sehen, wie Ihr Formular auf Ihrer Website aussieht.

Das Formular mit Seitenumbruch auf der Website

Wir hoffen, dass dieses Tutorial Ihnen geholfen hat, zu lernen, wie man horizontale Zeilentrenner in WordPress hinzufügt. Wenn Sie Ihren Beiträgen und Seiten weitere Design- und Layoutelemente hinzufügen möchten, lesen Sie unseren Artikel über die besten Drag-and-Drop-Seitenersteller von WordPress.

Verwandter Beitrag

Sparen Sie 1/3 auf dieser stilvollen Beats Pille x Kim Kardashian tragbarer Lautsprecher

Machen Sie Ihre Frühlingsreinigung mit den massiv reduzierten kabellosen Staubsaugen von Dreame richtig

Sichern Sie sich während des Frühlingsverkaufs von Amazon ein neues Telefon für weniger als 100 £

Sparen Sie mehr als 20% auf der mächtigen 20 -TB -Festplatte von WD 20 TB

Vergessen Sie alle anderen Fitness -Tracker, dieser reduzierte Garmin ist der Traum eines Läufers

MARKIERTE: einen, fügen, hinzu, horizontalen, Linientrenner, Methoden, Sie, WordPress
Teile diesen Artikel
Facebook Twitter Pinterest Whatsapp Whatsapp
Aktie
Was denkst du?
Liebe0
Traurig0
Glücklich0
Schläfrig0
Wütend0
kein Kommentar0
Zwinkern0
Vorheriger Artikel 1638517706 Beldray Clean and Dry kabelloser Hartbodenreiniger Testbericht Beldray Clean and Dry kabelloser Hartbodenreiniger Testbericht
Nächster Artikel Apple M1 Pro vs Apple M2 Was ist der Unterschied Apple M1 Pro vs. Apple M2: Was ist der Unterschied?
Hinterlasse einen Kommentar

Schreibe einen Kommentar Antwort abbrechen

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

Berühmter Post

También podría gustarte

Sparen Sie 13 auf dieser stilvollen Beats Pille x Kim
Angebote

Sparen Sie 1/3 auf dieser stilvollen Beats Pille x Kim Kardashian tragbarer Lautsprecher

vor 1 Jahr 3 Minuten Mindestlesezeit
Machen Sie Ihre Fruehlingsreinigung mit den massiv reduzierten kabellosen Staubsaugen
Angebote

Machen Sie Ihre Frühlingsreinigung mit den massiv reduzierten kabellosen Staubsaugen von Dreame richtig

vor 1 Jahr 4 Minuten Mindestlesezeit
Sichern Sie sich waehrend des Fruehlingsverkaufs von Amazon ein neues
Angebote

Sichern Sie sich während des Frühlingsverkaufs von Amazon ein neues Telefon für weniger als 100 £

vor 1 Jahr 3 Minuten Mindestlesezeit
Sparen Sie mehr als 20 auf der maechtigen 20 TB
Angebote

Sparen Sie mehr als 20% auf der mächtigen 20 -TB -Festplatte von WD 20 TB

vor 1 Jahr 3 Minuten Mindestlesezeit
Vergessen Sie alle anderen Fitness Tracker dieser reduzierte Garmin ist
Angebote

Vergessen Sie alle anderen Fitness -Tracker, dieser reduzierte Garmin ist der Traum eines Läufers

vor 1 Jahr 4 Minuten Mindestlesezeit
Sparen Sie ueber 20 auf einem der besten Streaming Geraete
Angebote

Sparen Sie über 20% auf einem der besten Streaming -Geräte von Amazon

vor 1 Jahr 3 Minuten Mindestlesezeit
Aktualisieren Sie Ihren Fernseher auf den billigen und einfachen Weg
Angebote

Aktualisieren Sie Ihren Fernseher auf den billigen und einfachen Weg mit dem Fire TV -Stick

vor 1 Jahr 3 Minuten Mindestlesezeit
Vergessen Sie den Kauf eines GoPro der Insta360 Ace
Angebote

Vergessen Sie den Kauf eines GoPro – der Insta360 Ace Pro ist ein Schnäppchen für Frühlingsverkaufs

vor 1 Jahr 3 Minuten Mindestlesezeit
Zeig mehr
ThemeLocal - Blog-Tipps, die wie von Zauberhand funktionierenThemeLocal - Blog-Tipps, die wie von Zauberhand funktionieren
Folge uns
© 2022 Themelocal. Alle Rechte vorbehalten.
  • Nutzungsbedingungen
  • Datenschutzerklärung
  • Cookie-Richtlinie
  • Kontakt
Welcome Back!

Sign in to your account

Passwort vergessen?