So erstellen Sie einen benutzerdefinierten Formteiler in WordPress (2 Wege)

Haben Sie schon einmal bemerkt, wie sich manche Websites beim Scrollen einfach ansprechender anfühlen? Oft steckt ein subtiles Designelement dahinter – Formteiler, die sanfte, fließende Übergänge zwischen verschiedenen Abschnitten schaffen.

Diese geschwungenen, abgewinkelten oder zickzackförmigen Linien mögen wie ein kleines Detail erscheinen, aber sie machen einen großen Unterschied darin, wie professionell und modern Ihre Website aussieht.

Außerdem helfen sie dabei, Inhalte natürlich zu gliedern und die Blicke Ihrer Besucher genau dorthin zu lenken, wo Sie sie haben möchten.

Nach dem Testen mehrerer Optionen, um die zuverlässigsten Methoden zu finden, haben wir sie auf zwei reduziert, die durchweg großartige Ergebnisse liefern.

Heute führen wir Sie durch diese beiden einfachen Ansätze: die Verwendung der Standardmethode von WordPress und SeedProd.

Warum benutzerdefinierte Formtrennlinien zu Ihrer WordPress-Website hinzufügen?

Ein Formteiler ist eine Art von Abschnittsteiler, den Sie zwischen Inhaltsblöcken einfügen.

Diese Trennlinien können einfach sein, wie eine horizontale Linie, die mit den integrierten WordPress-Blöcken erstellt wurde.

Sie können diese einfachen Trenner verwenden, um Inhalte zu organisieren und zu trennen, was besonders nützlich auf Seiten ist, die viele verschiedene Themen abdecken.

Sie können auch fortgeschrittenere Formteiler mit Page-Builder-Plugins und anderer Webdesign-Software erstellen. Diese können die wichtigsten Inhalte Ihrer Website hervorheben, damit sie für Besucher und Kunden hervorstechen.

Professionell aussehende Formteiler können Ihre Seiten auch interessanter und ansprechender gestalten.

Sie können sie zum Beispiel verwenden, um einen einzigartigen Hintergrund für Ihr E-Mail-Newsletter-Anmeldeformular zu erstellen.

Mit diesen Worten sehen wir uns an, wie Sie einen benutzerdefinierten Formteiler in WordPress erstellen können. Verwenden Sie einfach die Schnelllinks unten, um direkt zu der Methode zu springen, die Sie verwenden möchten:

• Methode 1: Erstellen Sie einen einfachen Form-Trenner im Block-Editor (kein Plugin erforderlich)
• Methode 2: Erstellen eines benutzerdefinierten Formteilers in WordPress mit einem Page Builder (empfohlen)
• Frequently Answered Questions: Custom Shape Dividers

Methode 1: Erstellen Sie einen einfachen Form-Trenner im Block-Editor (kein Plugin erforderlich)

Der einfachste Weg, einen WordPress-Formteiler hinzuzufügen, ist die Verwendung des integrierten Trennblocks.

Diese Methode ermöglicht es Ihnen, einen horizontalen Linientrenner zwischen beliebigen WordPress-Blöcken einzufügen und dann die Farbe und den Stil der Linie anzupassen.

Diese Methode erlaubt es Ihnen nicht, verschiedene Formen zu WordPress hinzuzufügen und hat begrenzte Anpassungseinstellungen. Sie müssen jedoch kein zusätzliches WordPress-Plugin installieren, daher ist dies der einfachste Weg, einen einfachen Form-Trenner zu Ihrer Website hinzuzufügen.

Um zu beginnen, öffnen Sie einfach den Beitrag oder die Seite, auf der Sie einen horizontalen Trenner hinzufügen möchten, im Gutenberg-Inhaltseditor. Klicken Sie dann auf die Schaltfläche „+“ dort, wo Sie diesen Trenner platzieren möchten.

Geben Sie im Popup „Separator“ ein.

Wenn der richtige Block erscheint, klicken Sie darauf, um ihn zur Seite oder zum Beitrag hinzuzufügen.

Um den Standard-Separator-Block anzupassen, klicken Sie darauf und verwenden Sie dann die Einstellungen im rechten Menü.

Sie können mit den Schaltflächen im Abschnitt „Stile“ zwischen Standard, breiter Linie und Punkten wechseln.

Sie können auch die Farbe der Linie ändern, damit sie zum Rest Ihres Themas oder Ihrer Marke passt.

Klicken Sie dazu auf „Hintergrund“ und wählen Sie dann eine Farbe aus dem erscheinenden Popup aus.

Zusätzlich können Sie den Rand des Trennzeichens anpassen.

Je größer der Abstand, desto mehr Platz gibt es zwischen den getrennten Blöcken.

Wenn Sie mit dem Aussehen des Teilers zufrieden sind, können Sie entweder auf die Schaltfläche 'Veröffentlichen' oder 'Aktualisieren' klicken, um die Funktion des Formteilers live zu schalten.

Methode 2: Erstellen eines benutzerdefinierten Formteilers in WordPress mit einem Page Builder (empfohlen)

Wenn Sie eine andere Form verwenden und jeden Teil Ihrer Teiler anpassen möchten, empfehlen wir das Plugin SeedProd.

SeedProd ist das beste WordPress Page Builder Plugin auf dem Markt und ermöglicht es Ihnen, mit einem einfachen Drag-and-Drop-Editor einen benutzerdefinierten Formtrenner zu jedem Abschnitt, jeder Zeile oder Spalte hinzuzufügen.

Wir haben dieses Tool in unserer Demo-Umgebung gründlich getestet und festgestellt, dass es unglaublich anfängerfreundlich und intuitiv ist. Das Erstellen von Seiten fühlte sich mühelos an, besonders für neue Benutzer. Mehr darüber, was wir entdeckt haben, erfahren Sie in unserem vollständigen Testbericht.

SeedProd bietet außerdem über 300 professionell gestaltete Vorlagen und mehr als 90 Blöcke, mit denen Sie schöne benutzerdefinierte Homepages, Landingpages und mehr erstellen können.

Das erste, was Sie tun müssen, ist, das SeedProd-Plugin zu installieren und zu aktivieren. Weitere Details finden Sie in unserer Schritt-für-Schritt-Anleitung zur Installation eines WordPress-Plugins.

Nach der Aktivierung müssen Sie Ihren Lizenzschlüssel eingeben.

Diese Informationen finden Sie in Ihrem Konto auf der SeedProd-Website. Klicken Sie nach der Eingabe des Lizenzschlüssels auf die Schaltfläche „Schlüssel überprüfen“.

Wenn dies erledigt ist, gehen Sie zu SeedProd » Seiten und klicken Sie auf die Schaltfläche „Neue Landing Page hinzufügen“.

Danach ist es an der Zeit, eine Seitenvorlage auszuwählen. SeedProd bietet eine Vielzahl professioneller Website-Designvorlagen, die Sie feinabstimmen können, um sie perfekt an Ihre WordPress-Website anzupassen.

Um eine Vorlage auszuwählen, bewegen Sie einfach die Maus darüber und klicken Sie auf das Symbol „Häkchen“.

Geben Sie als Nächstes einen Namen für die Seite ein. SeedProd erstellt automatisch eine URL basierend auf dem Titel der Seite, aber Sie können die URL beliebig ändern.

Wenn Sie mit den eingegebenen Informationen zufrieden sind, klicken Sie auf die Schaltfläche „Speichern und Seite bearbeiten starten“.

Als Nächstes gelangen Sie zum Drag-and-Drop-Page-Builder, bereit zur Anpassung der Vorlage.

Der SeedProd-Editor zeigt rechts eine Live-Vorschau Ihres Designs und links einige Blockeinstellungen an.

Das linke Menü enthält auch Blöcke, die Sie in Ihr Layout ziehen können.

Sie können beispielsweise Standardblöcke wie Schaltflächen und Bilder per Drag & Drop ziehen oder erweiterte Blöcke wie den Countdown-Timer, Social-Media-Sharing-Schaltflächen und mehr verwenden.

Um einen Block anzupassen, klicken Sie einfach darauf, um ihn in Ihrem Layout auszuwählen.

Das Menü auf der linken Seite zeigt dann alle Einstellungen an, mit denen Sie diesen Block konfigurieren können. Sie können auch die Hintergrundfarben der Seite ändern, Hintergrundbilder hinzufügen oder das Farbschema und die Schriftarten ändern, um sie besser an Ihre Marke anzupassen.

SeedProd bietet auch 'Abschnitte', bei denen es sich um Sammlungen von Blöcken handelt, die oft zusammen verwendet werden. Zum Beispiel hat SeedProd einen Kopfzeilenabschnitt, ein Hero-Bild, Call-to-Action, Kundenrezensionen, Funktionen, Fußzeilenabschnitte und mehr.

Um die verschiedenen Abschnitte zu durchsuchen, klicken Sie einfach auf die Registerkarte „Abschnitte“.

Sie können Abschnitte und Blöcke mit Drag & Drop in Ihrem Layout verschieben.

Wenn Sie einen Block löschen möchten, fahren Sie einfach mit der Maus darüber und klicken Sie auf das Papierkorbsymbol, wenn es erscheint.

Unabhängig davon, ob Sie sich für die Verwendung eines SeedProd-Abschnitts entscheiden oder nicht, können Sie jetzt einen benutzerdefinierten Form-Teiler erstellen. Klicken Sie einfach, um den Abschnitt, die Zeile oder die Spalte auszuwählen, in der Sie den Teiler hinzufügen möchten.

Klicken Sie dann im linken Menü auf die Registerkarte „Erweitert“.

Klicken Sie nun, um den Abschnitt „Formteiler“ zu erweitern.

Um zu beginnen, können Sie auswählen, wo der Formteiler angezeigt werden soll, indem Sie entweder auf die Schaltfläche „Oben“ oder „Unten“ klicken.

Sie können nun das Menü 'Typ' öffnen und den Formteiler auswählen, den Sie verwenden möchten.

Wenn Sie verschiedene Formen auswählen, wird die Live-Vorschau automatisch aktualisiert, sodass Sie verschiedene Stile ausprobieren können, um zu sehen, was am besten aussieht.

Nachdem Sie einen Formteiler ausgewählt haben, können Sie ihn mit den neuen Einstellungen gestalten.

Zuerst können Sie auf 'Farbe' klicken und dann eine neue Farbe aus dem erscheinenden Popup auswählen.

Wenn dies erledigt ist, können Sie den Teiler größer oder kleiner machen, indem Sie die Schieberegler 'Breite' und 'Höhe' ziehen.

Wenn Sie bereits eine bestimmte Größe im Sinn haben, können Sie diese Zahlen in die Felder eingeben.

Sie können den Teiler auch umdrehen, indem Sie auf den Schalter „Umdrehen“ klicken, um ihn zu aktivieren oder zu deaktivieren.

Standardmäßig erscheint die Trennlinie hinter dem Rest des Inhalts, sodass Benutzer Text, Bilder oder andere Inhalte, die die Trennlinie überlappen, klar sehen können.

Das Verschieben der Form nach vorne kann jedoch einige interessante Effekte erzeugen. Wenn Sie sehen möchten, wie das aussieht, klicken Sie einfach, um den Schalter „Nach vorne bringen“ zu aktivieren.

Um weitere Trennlinien hinzuzufügen, folgen Sie einfach demselben oben beschriebenen Vorgang.

Sie können sogar einen Formteiler oben und unten in einem Bereich hinzufügen, was oft einige beeindruckende und auffällige Ergebnisse erzielt.

Sie können die Arbeit an der Seite fortsetzen, indem Sie weitere Blöcke hinzufügen und diese Blöcke im linken Menü anpassen.

Wenn Sie mit dem Aussehen der Seite zufrieden sind, klicken Sie auf die Schaltfläche 'Speichern'. Sie können dann 'Veröffentlichen' auswählen, um die Seite live zu schalten.

So fügen Sie Form-Teiler zu einem WordPress-Theme hinzu

SeedProds Drag-and-Drop-Editor gibt Ihnen die Freiheit, jeder Seite einen einzigartigen Formteiler hinzuzufügen. Manchmal möchten Sie jedoch dieselben Formteiler auf mehreren Webseiten oder sogar auf Ihrem gesamten WordPress-Blog oder Ihrer Website verwenden.

Dies hilft Ihnen, ein konsistentes Design zu erstellen und kann Ihnen auch viel Zeit sparen. In diesem Fall empfehlen wir, Ihrem Theme mithilfe des SeedProd Theme Builders einen Form-Teiler hinzuzufügen.

Mit SeedProd können Sie ein WordPress-Theme erstellen und anpassen, ohne Code schreiben zu müssen. Es erstellt alle Dateien, aus denen Ihr Theme besteht, einschließlich der Seitenleiste, des Headers, des Footers, einzelner Beiträge und mehr.

Sie können diese Dateien dann mit dem bekannten Drag-and-Drop-Builder anpassen. Dies beinhaltet das Hinzufügen von Form-Trennern, indem Sie den gleichen Prozess wie oben beschrieben befolgen.

Wenn Sie das neue Theme mit SeedProd aktivieren, wird Ihr bestehendes WordPress-Theme überschrieben. Verwenden Sie diese Methode also nur, wenn Sie Ihr aktuelles Theme ersetzen möchten.

Detaillierte Schritt-für-Schritt-Anleitungen finden Sie in unserem Leitfaden zur einfachen Erstellung eines benutzerdefinierten WordPress-Themes.

Häufig gestellte Fragen: Benutzerdefinierte Form-Trenner

Hier sind einige häufig gestellte Fragen unserer Leser zur Erstellung eines benutzerdefinierten Form-Teilers:

Beeinflussen Formteiler die Geschwindigkeit meiner Website?

Im Allgemeinen haben Formteiler keinen großen Einfluss auf die Leistung, insbesondere wenn sie mit reinem CSS oder SeedProd erstellt werden. Diese sind leichtgewichtig und laden schnell im Browser.

Wenn Sie sie jedoch übermäßig verwenden oder Bilddateien verwenden, kann dies die Ladezeiten geringfügig erhöhen. Um Ihre Website schnell zu halten:

• Verwenden Sie minimale Plugins.
• Bevorzugen Sie SVGs gegenüber großen Bilddateien.
• Vermeiden Sie es, zu viele Effekte in einem Abschnitt zu schichten.

Das Ausbalancieren von Design und Geschwindigkeit ist der Schlüssel zu einer reibungslosen Benutzererfahrung.

Wie stelle ich sicher, dass meine Formteiler auf Mobilgeräten gut aussehen?

Responsives Design ist sehr wichtig. Wenn Sie einen Page Builder verwenden, erlauben die meisten, die Sichtbarkeit, Höhe und Ausrichtung des Form-Teilers separat für Desktop, Tablet und Mobilgeräte anzupassen.

Hier sind einige Tipps:

• Testen Sie Ihre Formtrennlinien auf verschiedenen Bildschirmgrößen. SeedProd macht dies einfach, indem es Ihnen ermöglicht, eine Vorschau darauf anzuzeigen, wie Ihr Design auf Mobilgeräten aussieht, direkt im Drag-and-Drop-Builder.
• Verwenden Sie auf Mobilgeräten kleinere oder vereinfachte Formen.
• Vermeiden Sie Formen, die den Text schwer lesbar machen oder wichtige Inhalte überlappen.

Tools wie SeedProd bieten reaktionsschnelle Steuerelemente, mit denen Sie jede Version Ihrer Website einfach anpassen können.

Wo finde ich vorgefertigte SVG-Formteiler?

Es gibt viele kostenlose Ressourcen, wo Sie vorgefertigte SVG-Formtrenner herunterladen können. Diese eignen sich hervorragend, wenn Sie etwas Individuelles wünschen, ohne bei Null anfangen zu müssen.

Hier sind einige Optionen:

• Haikei – Kostenloser SVG-Generator für einzigartige, anpassbare Formen.
• ShapeDividers.com – Bietet verschiedene SVG-Teiler, die Sie kopieren und einfügen können.

Sobald Sie die SVG heruntergeladen haben, können Sie sie je nach Einrichtung in einen benutzerdefinierten HTML-Block einfügen oder in die Dateien Ihres Themes aufnehmen.

Entdecken Sie weitere WordPress-Design-Tipps und -Tricks

Möchten Sie weitere Designfunktionen hinzufügen, die Ihre Website-Besucher beeindrucken? Schauen Sie sich diese WordPress-Design-Tipps und -Tricks für weitere Informationen an:

• So fügen Sie jedem WordPress-Theme einen Parallax-Effekt hinzu
• So erstellen Sie eine „Sticky“ schwebende Fußzeilenleiste in WordPress
• Anfängerleitfaden zur Erstellung eines mobilfreundlichen, responsiven WordPress-Menüs
• So fügen Sie eine Preloader-Animation zu WordPress hinzu (Schritt für Schritt)
• Wie man Drop Caps in WordPress-Beiträgen hinzufügt
• Anfängerleitfaden zum Hinzufügen des Dunkelmodus zu Ihrer WordPress-Website (einfach)
• Wie man einen animierten Hintergrund in WordPress hinzufügt

Wir hoffen, dieses Tutorial hat Ihnen geholfen zu lernen, wie Sie einen benutzerdefinierten Formteiler in WordPress erstellen. Möglicherweise möchten Sie auch lernen, wie Sie Feature-Boxen mit Symbolen in WordPress hinzufügen und unsere Expertentipps zu Möglichkeiten, eine mobilfreundliche WordPress-Website zu erstellen.

Wenn Ihnen dieser Artikel gefallen hat, abonnieren Sie bitte unseren YouTube-Kanal für WordPress-Video-Tutorials. Sie finden uns auch auf Twitter und Facebook.