So fügen Sie einen Shape Divider zu WordPress hinzu (kein Code erforderlich) 

Die meisten WordPress-Themes bieten keine integrierte Möglichkeit, Shape Divider zwischen Abschnitten hinzuzufügen. Shape Divider erzeugen klare visuelle Übergänge, die Besucher die Seite hinunterführen, ohne schwere Animationen.

Sie benötigen keine Programmier- oder Designkenntnisse, um sie hinzuzufügen, egal ob Sie eine Website für Kleinunternehmen, ein Portfolio oder einen Blog betreiben. In dieser Anleitung zeige ich Ihnen zwei Möglichkeiten, einen Shape Divider zu WordPress hinzuzufügen.

Sie können Trennelemente über oder unter Inhaltsblöcken platzieren, um Themen zu trennen oder wichtige Bereiche auf der Seite hervorzuheben.

Trennelemente gibt es in verschiedenen Stilen, wie z. B. SVG-Shape-Divider, Linien- oder textbasierten Trennelementen und benutzerdefinierten Designs. Die meisten können so gestaltet werden, dass sie zu Ihren Markenfarben und Ihrem Layout passen, um ein poliertes Aussehen zu erzielen.

So fügen Sie Ihrer WordPress-Website schicke Trennelemente hinzu

Mit SeedProd können Sie über das integrierte Shape Dividers-Panel ohne Code Shape Divider zu jedem Abschnitt in WordPress hinzufügen.

Sie können aus 18 SVG-Stilen wählen und Farbe, Breite, Höhe und Position anpassen.

Methode 1: Website-Trennelemente mit SeedProd erstellen

Ich werde SeedProd verwenden, um Ihrer WordPress-Website für diese Methode Shape Divider hinzuzufügen.

SeedProd ist einer der besten Website-Builder für WordPress. Es ermöglicht Ihnen, benutzerdefinierte WordPress-Themes, Landingpages und responsive Website-Layouts ohne Code zu erstellen.

Es enthält Hunderte von vorgefertigten Vorlagen, zahlreiche Inhaltselemente und einen einfach per Drag & Drop zu bedienenden visuellen Editor, um Ihre WordPress-Seiten anzupassen.

Eine der Funktionen, die ich in dieser Anleitung verwenden werde, sind die integrierten Fancy Shape Dividers von SeedProd. Sie ermöglichen es Ihnen, mit wenigen Klicks attraktive Formtrenner zu jedem Beitrag oder jeder Seite hinzuzufügen, ohne dass Code erforderlich ist.

Befolgen Sie die nachstehenden Schritte, um mit SeedProd Shape Divider zu WordPress hinzuzufügen.

Installieren und aktivieren Sie das SeedProd WordPress-Plugin

Klicken Sie zuerst hier, um mit SeedProd loszulegen und das Plugin auf Ihren Computer herunterzuladen. Laden Sie dann die .zip-Datei des Plugins auf Ihre WordPress-Website hoch.

Sie können dieser Anleitung zum Installieren eines WordPress-Plugins folgen, wenn Sie Hilfe benötigen.

Hinweis: Es gibt eine kostenlose Version von SeedProd, aber ich werde die Premium-Version von SeedProd für die Shape Divider-Funktion verwenden.

Nachdem Sie SeedProd installiert und aktiviert haben, gehen Sie zu SeedProd » Einstellungen und geben Sie Ihren Plugin-Lizenzschlüssel ein.

Sie finden Ihren Lizenzschlüssel, indem Sie sich auf der SeedProd-Website anmelden und im Bereich Downloads nachsehen.

Erstellen Sie ein WordPress-Theme oder eine Landingpage

Es gibt 2 Möglichkeiten, Abschnittstrenner in SeedProd zu verwenden.

Sie können ein neues WordPress-Theme erstellen und Formteiler zu verschiedenen Theme-Teilen hinzufügen. Oder Sie können eine eigenständige Landingpage erstellen und Formteiler zu einer einzelnen Seite hinzufügen.

Hier sind Anleitungen für die Einrichtung beider:

WordPress-Theme

SeedProds Theme Builder ermöglicht es Ihnen, ein neues WordPress-Theme mit seinem Drag-and-Drop-Editor zu erstellen.

Es erstellt alle Dateien, aus denen Ihr Theme besteht, einschließlich der Seitenleiste, des Headers, des Footers, des Einzelbeitrags usw. Sie können dann jede Datei visuell anpassen, ohne Code.

Wenn Sie Ihr neues Theme aktivieren, überschreibt es Ihr vorhandenes WordPress-Theme. Wählen Sie diese Option also nur, wenn Sie damit einverstanden sind, Ihr vorhandenes Theme zu verlieren.

Folgen Sie diesem Tutorial, um mit SeedProd ein benutzerdefiniertes WordPress-Theme zu erstellen.

Landingpage

SeedProds Landingpage-Builder ermöglicht es Ihnen, mit seiner Drag-and-Drop-Oberfläche einzelne Landingpages in WordPress zu erstellen. Sie können das Design vollständig anpassen, aber es überschreibt nicht Ihr vorhandenes Theme, im Gegensatz zur Theme Builder-Version.

Dies ist eine gute Lösung, wenn Sie Ihr aktuelles WordPress-Theme beibehalten möchten, aber dennoch die Formteiler-Funktion nutzen möchten.

Folgen Sie dieser Schritt-für-Schritt-Anleitung, um eine Landingpage in WordPress zu erstellen.

Nachdem Sie ein WordPress-Theme oder eine Landingpage erstellt haben, können Sie mit dem nächsten Schritt fortfahren.

Passen Sie Ihr Design mit einem Abschnittstrenner an

Um Formteiler zu WordPress hinzuzufügen, bearbeiten Sie eine Theme-Vorlage oder Landingpage, wodurch der visuelle Editor von SeedProd geöffnet wird. Ich werde in diesem Tutorial die Homepage meines benutzerdefinierten WordPress-Themes bearbeiten.

Sobald Sie sich im visuellen Editor befinden, müssen Sie einen Bereich der Seite finden, in dem Sie Ihren Formteiler hinzufügen möchten. SeedProd ermöglicht es Ihnen, Formteiler zu Abschnitten, Spalten und Zeilen hinzuzufügen.

Klicken Sie auf den gewünschten Abschnitt oder die Zeile, um dessen Einstellungsfenster auf der linken Seite zu öffnen. Klicken Sie in diesem Fenster auf die Registerkarte „Erweitert“, um weitere Anpassungsoptionen anzuzeigen.

Unten im Fenster sehen Sie die Überschrift Formteiler. Klicken Sie auf die Überschrift, um die Einstellungen für Formteiler zu öffnen.

Zuerst können Sie wählen, ob Sie einen Teiler am oberen oder unteren Rand Ihres Abschnitts hinzufügen möchten.

Sie können dann auf das Dropdown-Menü klicken, um 18 verschiedene Formen für Ihren Teiler auszuwählen.

Nachdem Sie eine Form ausgewählt haben, zeigt SeedProd zusätzliche Einstellungen zur Anpassung des Erscheinungsbilds der Form an.

Zum Beispiel können Sie:

• Ändern Sie die Farbe der Form
• Wählen Sie eine benutzerdefinierte Breite und Höhe
• Spiegeln Sie die Form
• Bringen Sie die Form nach vorne

Sie können die gleichen Schritte ausführen, um einen Formteiler am unteren Rand eines Abschnitts hinzuzufügen.

Hier sind einige weitere Beispiele für die verschiedenen Effekte, die Sie mit den Formteilern von SeedProd erzielen können:

Berge

Wellen

Kurve

Experimentieren Sie mit verschiedenen Website-Teilern, bis Sie mit dem Aussehen zufrieden sind.

SeedProd Formteiler sind standardmäßig responsiv. Wenn Sie einen auf bestimmten Geräten ausblenden müssen, verwenden Sie die Block-Sichtbarkeitseinstellungen im Tab "Erweitert".

Veröffentlichen Sie Ihre schicken Teiler in WordPress

Nachdem Ihre Formteiler platziert sind, können Sie Ihr neues Design veröffentlichen.

Wenn Sie ein WordPress-Theme erstellen, können Sie es veröffentlichen, indem Sie zu SeedProd Theme Builder gehen und den Schalter "SeedProd Theme aktivieren" auf "Ja" stellen.

Klicken Sie einfach auf den Dropdown-Pfeil neben der Schaltfläche  Speichern und klicken Sie für Landing Pages auf Veröffentlichen.

Sie können nun Ihre Live-Website besuchen und Ihren Abschnittsteiler in Aktion sehen. Hier ist ein Beispiel unserer Demoseite mit Abschnittsteilern in unserem Hero-Hintergrundbild-Abschnitt:

Symbole und Textteiler mit SeedProd hinzufügen

Wenn schicke Abschnittsteiler nicht Ihren Website-Bedürfnissen entsprechen, können Sie auch den Divider-Block von SeedProd verwenden, um Ihrem WordPress-Site eine Zeile mit Text- und Symbolteilern hinzuzufügen.

Das Prinzip ist dasselbe wie zuvor, aber anstatt eine Option für Zeilen, Spalten oder Abschnitte zu wählen, müssen Sie den Divider-Block auf Ihre Seite ziehen.

Von dort aus können Sie auf ein Dropdown-Feld klicken, um einen Symbolzeilen-Teiler wie diesen auszuwählen:

Oder einen Textteiler ähnlich diesem Beispiel:

Sie haben also jetzt 2 Möglichkeiten, attraktive Teiler in WordPress mit SeedProd zu erstellen. Als Nächstes sehen wir uns an, wie man Teiler ohne Plugin hinzufügt.

Methode 2: Einen Abschnittsteiler in WordPress ohne Plugin erstellen

Sie können auch die integrierten WordPress-Einstellungen verwenden, um Teiler zu Ihrer Website hinzuzufügen. Diese Methode ist hilfreich, wenn Sie keine zusätzlichen WordPress-Plugins installieren möchten.

Die Anpassungsoptionen sind jedoch begrenzter. Sie können beispielsweise nur verschiedene Linienstile hinzufügen und die Hintergrundfarbe für jeden Zeilenumbruch ändern.

Ich empfehle Methode 1 für erweiterte Anpassungsoptionen. Befolgen Sie die nachstehenden Schritte, um einen horizontalen Abschnittsteiler in WordPress ohne Plugin hinzuzufügen.

Hinzufügen einer horizontalen Linie im WordPress Block Editor

Um einen horizontalen Abschnittsteiler mit dem WordPress Block Editor hinzuzufügen, öffnen Sie einen Beitrag oder eine Seite und klicken Sie auf das Pluszeichen (+), wo immer Sie Ihren Teiler haben möchten.

Geben Sie als Nächstes "Separator" in das Suchfeld ein und klicken Sie auf den Block Separator.

Nachdem Sie den Block zu Ihrer Seite hinzugefügt haben, sehen Sie einen horizontalen Trennstrich zwischen jedem Textabschnitt.

Sie können den Teilerstil ändern, indem Sie im rechten Bereich auf "Standard", "Breite Linie" oder "Punkte" klicken.

Sie können auch die Hintergrundfarbe des Trennzeichens im selben Bereich ändern.

Wenn Sie mit dem Aussehen zufrieden sind, aktualisieren oder veröffentlichen Sie Ihre Seite, um die Ergebnisse zu sehen.

Hinzufügen einer horizontalen Linie im WordPress Classic Editor

Befolgen Sie diese Anweisungen, um Abschnittstrenner zu Ihrer Website mit dem klassischen WordPress-Editor hinzuzufügen.

Bearbeiten Sie einen vorhandenen Beitrag oder eine Seite oder erstellen Sie eine neue. Wenn Sie nicht alle Editor-Einstellungen sehen können, klicken Sie auf das Symbol Werkzeugleiste umschalten.

Klicken Sie als Nächstes auf die Stelle auf Ihrer Seite, an der Sie Ihren Trenner hinzufügen möchten. Klicken Sie dann auf das Symbol Horizontale Linie.

Ihr horizontaler Linientrenner ist schwarz-weiß oder hellgrau und deckt Ihren gesamten Beitrag oder Ihre gesamte Seite ab, wie hier:

FAQs zu Abschnittstrennern in WordPress

Wie füge ich eine Form-Trennlinie zu einer WordPress-Seite ohne Code hinzu?

Öffnen Sie einen beliebigen Abschnitt im visuellen Editor von SeedProd, klicken Sie auf die Registerkarte „Erweitert“ und scrollen Sie zum Bereich „Form-Trennlinien“. Wählen Sie aus 18 SVG-Formen, legen Sie Farbe, Breite und Höhe fest und veröffentlichen Sie dann. Kein CSS oder Code erforderlich.

Funktioniert die Form-Trennlinie von SeedProd auf jeder Seite oder jedem Beitrag?

Ja. Form-Trennlinien funktionieren in jedem Abschnitt oder jeder Zeile innerhalb des visuellen Editors von SeedProd, egal ob Sie eine Landingpage oder ein vollständiges WordPress-Theme erstellen. Sie können einen Trenner am Anfang oder Ende jedes Abschnitts hinzufügen.

Ist die Funktion für Form-Trennlinien in der kostenlosen Version von SeedProd verfügbar?

Nein. Form-Trennlinien sind ein Premium-Feature. Sie benötigen einen kostenpflichtigen SeedProd-Plan, um auf das Bedienfeld für Form-Trennlinien in den erweiterten Einstellungen zugreifen zu können.

Kann ich Form-Trennlinien mit meinem bestehenden WordPress-Theme verwenden?

Ja, mit einer Einschränkung. Wenn Sie den Landingpage-Builder von SeedProd verwenden, bleibt Ihr bestehendes Theme erhalten und nur die Landingpage verwendet Form-Trennlinien. Wenn Sie den Theme-Builder von SeedProd aktivieren, ersetzt dieser Ihr aktuelles Theme vollständig.

Was ist der Unterschied zwischen einer Form-Trennlinie und einem Trennblock in WordPress?

Ein Trennblock (der native WordPress-Block) fügt eine einfache horizontale Linie zwischen Inhaltsbereichen ein. Eine Form-Trennlinie ist eine vollbreite SVG-Grafik, wie Wellen oder Kurven, die den gesamten Abschnittsrand überspannt. Form-Trennlinien sind visuell markanter und in SeedProd vollständig anpassbar.

SeedProd und Ihr Kleinunternehmen

Wir hoffen, dieser Artikel hat Ihnen geholfen, zu lernen, wie Sie einen Abschnittstrenner zu WordPress hinzufügen. Mit dem leistungsstarken Drag-and-Drop-Website-Builder von SeedProd ist das Erstellen von schicken Form-Trennlinien ein Kinderspiel.

Hier sind einige verwandte Artikel, die für Sie hilfreich sein könnten:

• Blog-Seite in WordPress erstellen
• So fügen Sie eine Autorenbox in WordPress hinzu
• So fügen Sie eine benutzerdefinierte Seitenleiste zu WordPress hinzu

Danke fürs Lesen! Wir würden uns freuen, Ihre Gedanken zu hören. Treten Sie also gerne der Unterhaltung auf YouTube, X und Facebook bei, um weitere hilfreiche Ratschläge und Inhalte für das Wachstum Ihres Unternehmens zu erhalten.