Hinweis: Der folgende Artikel hilft Ihnen weiter: So erstellen Sie einen ausgefallenen Abschnittsteiler für WordPress-Websites
Möchten Sie Ihrer WordPress-Website einen Abschnittstrenner hinzufügen?
Abschnittstrenner sind eine hervorragende Möglichkeit, Inhalte zu trennen und visuelle Effekte zu erzeugen, um die Besucher Ihrer Website anzusprechen. Allerdings ist es schwierig, sie zu erstellen, wenn Sie keine Design- und Programmiererfahrung haben.
Klingt das nach dir? Mach dir keine Sorge; In diesem Artikel zeigen wir Ihnen, wie Sie Website-Teiler ohne Code erstellen.
Was ist ein Abschnittstrenner in WordPress?
Ein Abschnittsteiler wird in WordPress auch als Formteiler bezeichnet. Sie ermöglichen es Ihnen, benutzerdefinierte Formen und Effekte zu Seiten hinzuzufügen und so ansprechende Übergänge zwischen Inhalten zu schaffen.
Sie können einen Abschnittstrenner über und unter Inhaltsblöcken platzieren, um die Organisation und Trennung verschiedener Themen zu erleichtern.
Website-Trenner gibt es in verschiedenen Formaten, beispielsweise als Seitentrenner mit SVG-Formen und Texttrenner, bei denen es sich um Textränder handelt, die Textblöcke trennen. In vielen Fällen können Sie auch Trennwände individuell anpassen.
Welche Vorteile bietet die Verwendung von Formteilern?
Formteiler sind ein wirksames Mittel, um die Aufmerksamkeit auf Ihrer Website zu erregen. Sie sorgen dafür, dass Benutzer mit dem Scrollen aufhören und lenken ihre Aufmerksamkeit auf Informationen, die sie nicht verpassen sollen.
Einige Websitebesitzer verwenden auffällige Animationen und eindrucksvolle Bilder, um Besucher anzusprechen. Formteiler können jedoch die gleiche Aufgabe erfüllen und optisch weniger störend wirken.
Darüber hinaus können Formteiler Ihr Website-Design sofort verändern, ohne ein neues Design von Grund auf erstellen zu müssen.
So fügen Sie Ihrer WordPress-Site ausgefallene Teiler hinzu
Wie bereits erwähnt, benötigen Sie in der Regel einige Design- und Programmierkenntnisse, um ausgefallene Abschnittstrenner in WordPress zu erstellen. Im Folgenden stellen wir Ihnen jedoch zwei Möglichkeiten vor, wie Sie ohne Code einen Abschnittstrenner zu Ihrer Website hinzufügen können.
Methode 1: Erstellen Sie Website-Teiler mit SeedProd
Für die erste Methode verwenden wir SeedProd, um Formteiler zu Ihrer WordPress-Site hinzuzufügen.
SeedProd ist einer der besten Website-Builder für WordPress. Damit können Sie benutzerdefinierte WordPress-Themes, Landingpages und responsive Website-Layouts ohne Code erstellen.
Es enthält Hunderte vorgefertigter Vorlagen, zahlreiche Inhaltselemente und einen einfachen visuellen Drag-and-Drop-Editor zum Anpassen Ihrer WordPress-Seiten.
Eine der Funktionen, die wir in diesem Handbuch verwenden, sind die integrierten, ausgefallenen Formteiler von SeedProd. Mit ihnen können Sie mit wenigen Klicks attraktive Formtrennzeichen zu jedem Beitrag oder jeder Seite hinzufügen, ohne dass eine Programmierung erforderlich ist.
Führen Sie die folgenden Schritte aus, um mit SeedProd Formteiler zu WordPress hinzuzufügen.
Installieren und aktivieren Sie das SeedProd WordPress-Plugin
Klicken Sie zunächst hier, um mit SeedProd zu beginnen 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 weiter folgen Installation eines WordPress-Plugins Wenn du Hilfe benötigst.
Note: Es gibt eine kostenlose Version von SeedProd, aber wir werden die Premium-Version von SeedProd für die Shape Divider-Funktion verwenden.
Gehen Sie nach der Installation und Aktivierung von SeedProd 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 Abschnitt „Downloads“ nachsehen.
Erstellen Sie ein WordPress-Theme oder eine Landingpage
Es gibt zwei 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 einer einzelnen Seite Formteiler hinzufügen.
Hier finden Sie Anweisungen zum Einrichten beider:
WordPress-Theme
Mit dem Theme Builder von SeedProd können Sie mit seinem Drag-and-Drop-Editor ein neues WordPress-Theme erstellen.
Es erstellt alle Dateien, aus denen Ihr Theme besteht, einschließlich Seitenleiste, Kopfzeile, Fußzeile, einzelner Beitrag usw. Sie können dann jede Datei visuell und ohne Code anpassen.
Wenn Sie Ihr neues Theme aktivieren, überschreibt es Ihr bestehendes WordPress-Theme. Wählen Sie diese Option also nur, wenn Sie mit dem Verlust Ihres bestehenden Themes zufrieden sind.
Befolgen Sie dieses Tutorial, um mit SeedProd ein benutzerdefiniertes WordPress-Theme zu erstellen.
Landingpage
Mit dem Landingpage-Builder von SeedProd können Sie über die Drag-and-Drop-Oberfläche einzelne Landingpages in WordPress erstellen. Sie können das Design vollständig anpassen, aber im Gegensatz zur Theme-Builder-Version wird Ihr vorhandenes Theme nicht überschrieben.
Dies ist eine gute Lösung, wenn Sie Ihr aktuelles WordPress-Theme behalten und dennoch die Formteilerfunktion verwenden möchten.
Befolgen Sie diese 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 Abschnittsteiler an
Um Formteiler zu WordPress hinzuzufügen, bearbeiten Sie eine Designvorlage oder Landingpage, wodurch der visuelle Seitenersteller von SeedProd geöffnet wird. In diesem Tutorial bearbeiten wir die Homepage unseres benutzerdefinierten WordPress-Themes.
Sobald Sie sich im visuellen Editor befinden, müssen Sie einen Bereich auf der Seite finden, in dem Sie Ihren Formteiler hinzufügen möchten. Mit SeedProd können Sie Formteiler zu Abschnitten, Spalten und Zeilen hinzufügen.
Klicken Sie auf den ausgewählten Abschnitt oder die Zeile, um das Einstellungsfeld auf der linken Seite zu öffnen. Klicken Sie in diesem Bereich auf die Registerkarte „Erweitert“, um weitere Anpassungsoptionen anzuzeigen.
Du wirst das sehen Formteiler Überschrift am unteren Rand des Panels. Klicken Sie auf die Überschrift, um die Einstellungen für den Formteiler zu öffnen.
Zunächst können Sie wählen, ob Sie oben oder unten in Ihrem Abschnitt eine Trennlinie hinzufügen möchten.
Anschließend können Sie auf das Dropdown-Menü klicken, um 18 verschiedene Formen für Ihre Trennwand auszuwählen.
Nachdem Sie eine Form ausgewählt haben, zeigt SeedProd zusätzliche Einstellungen zum Anpassen des Erscheinungsbilds der Form an.
Sie können zum Beispiel:
- Ändern Sie die Farbe der Form
- Wählen Sie eine benutzerdefinierte Breite und Höhe
- Drehen Sie die Form um
- Bringen Sie die Form in den Vordergrund
Sie können die gleichen Schritte ausführen, um am unteren Rand eines Abschnitts einen Formteiler hinzuzufügen. Mit nur wenigen Klicks können Sie beeindruckende visuelle Effekte erstellen.
Hier sind ein paar weitere Beispiele für die verschiedenen Effekte, die Sie mit den Formteilern von SeedProd erzeugen können:
Berge
Wellen
Kurve
Experimentieren Sie mit verschiedenen Website-Teilern, bis Sie mit dem Aussehen zufrieden sind.
Veröffentlichen Sie Ihre ausgefallenen Divider in WordPress
Nachdem Ihre Formteiler nun angebracht sind, können Sie Ihr neues Design veröffentlichen.
Wenn Sie ein WordPress-Theme erstellen, können Sie es veröffentlichen, indem Sie zum SeedProd Theme Builder gehen und auf den Schalter „SeedProd Theme aktivieren“ auf die Position „Ja“ klicken.
Klicken Sie einfach auf den Dropdown-Pfeil Speichern Taste und klicken Sie Veröffentlichen für Landingpages.
Sie können jetzt Ihre Live-Website besuchen und Ihren Abschnittsteiler in Aktion sehen. Hier ist ein Beispiel unserer Demo-Site mit Abschnittsaufteilungen in unserem Helden-Hintergrundbild-Bereich:
Hinzufügen von Symbolen und Textteilern mit SeedProd
Wenn ausgefallene Abschnittstrenner nicht zu den Anforderungen Ihrer Website passen, können Sie auch den Divider-Block von SeedProd verwenden, um Ihrer WordPress-Site eine Textzeile und Symboltrenner hinzuzufügen.
Das Prinzip ist dasselbe wie zuvor, aber anstatt eine Option für Zeilen, Spalten oder Abschnitte auszuwählen, müssen Sie den Teilerblock auf Ihre Seite ziehen.
Von dort aus können Sie auf ein Dropdown-Feld klicken, um einen Symbol-Zeilentrenner wie diesen auszuwählen:
Oder ein Textteiler ähnlich diesem Beispiel:
Jetzt haben Sie zwei Möglichkeiten, mit SeedProd attraktive Trennlinien in WordPress zu erstellen. Schauen wir uns als Nächstes das Hinzufügen von Teilern ohne Plugin an.
Methode 2: Erstellen Sie einen Abschnittstrenner in WordPress ohne Plugin
Sie können auch die integrierten WordPress-Einstellungen verwenden, um Ihrer Website Trennlinien hinzuzufügen. Diese Methode ist hilfreich, wenn Sie keine zusätzlichen WordPress-Plugins installieren möchten.
Allerdings sind die Anpassungsmöglichkeiten eingeschränkter. Sie können beispielsweise nur unterschiedliche Linienstile hinzufügen und die Hintergrundfarbe für jeden Zeilenumbruch ändern.
Wir empfehlen die Verwendung von Methode 1 für erweiterte Anpassungsoptionen. Führen Sie die folgenden Schritte aus, um in WordPress einen Abschnittstrenner mit horizontaler Linie ohne Plugin hinzuzufügen.
Hinzufügen einer horizontalen Linie im WordPress-Blockeditor
Um mit dem WordPress-Blockeditor eine horizontale Abschnittstrennlinie hinzuzufügen, öffnen Sie einen Beitrag oder eine Seite und klicken Sie auf das Pluszeichen (+) an der Stelle, an der Sie die Trennlinie platzieren möchten.
Geben Sie als Nächstes „Trennzeichen“ in das Suchfeld ein und klicken Sie auf Separator Block.
Nachdem Sie den Block zu Ihrer Seite hinzugefügt haben, sehen Sie zwischen den einzelnen Textabschnitten eine horizontale Trennlinie.
Sie können den Trennstil ändern, indem Sie im rechten Bereich auf „Standard“, „Breite Linie“ oder „Punkte“ klicken.
Sie können im selben Bereich auch die Hintergrundfarbe des Trennzeichens ä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 mit dem klassischen WordPress-Editor Abschnittstrenner zu Ihrer Website hinzuzufügen.
Bearbeiten Sie einen vorhandenen Beitrag oder eine vorhandene Seite oder erstellen Sie einen neuen. Wenn Sie nicht alle Editoreinstellungen sehen können, klicken Sie auf Symbolleiste umschalten Symbol.
Klicken Sie anschließend auf die Stelle auf Ihrer Seite, an der Sie Ihre Trennlinie hinzufügen möchten. Klicken Sie dann auf Horizontale Linie Symbol.
Ihr horizontaler Linientrenner ist schwarz-weiß oder hellgrau und deckt Ihren gesamten Beitrag oder Ihre gesamte Seite wie folgt ab:
SeedProd und Ihr kleines Unternehmen
Wir hoffen, dass dieser Artikel Ihnen dabei geholfen hat, zu lernen, wie man WordPress einen Abschnittstrenner hinzufügt. Mit dem leistungsstarken Drag-and-Drop-Website-Builder von SeedProd ist das Erstellen ausgefallener Formteiler ein Kinderspiel.
SeedProd ist hier, um Ihnen in jeder Hinsicht beim Wachstum Ihres Unternehmens zu helfen! Weitere Tipps für Kleinunternehmen und Webentwicklung finden Sie in unserem Blog. Hier sind einige unserer beliebtesten relevanten Beiträge:
Danke fürs Lesen. Bitte folgen Sie uns weiter YouTube, TwitterUnd Facebook für weitere hilfreiche Inhalte zum Wachstum Ihres Unternehmens.
