Eine schöne Bereichstrennung lässt eine Seite mit fünf Minuten Arbeit hochwertiger wirken. Das ist die günstigste Möglichkeit, einer Website Charakter zu verleihen: kein Redesign nötig, kein Designer nötig, nur eine Vektorlinie an der richtigen Stelle.

Das Problem: Der eingebaute Satz von Elementor nutzt sich schnell ab. Die standardmäßigen Wellen und Dreiecke aus dem Shape Divider begegnen einem auf jeder zweiten Landingpage, und das Divider-Widget zeichnet lediglich eine gerade Linie mit einem FontAwesome-Icon. Sie möchten Ornamente, botanische Motive oder Funkeneffekte, und genau da beginnt die Suche.

Diese Sammlung enthält alles, was Sie für schöne Trennlinien benötigen: sechs fertige SVG-Stile, die wir selbst gezeichnet und direkt im Artikel bereitgestellt haben, eine Besprechung des Plugins SVG Divider for Elementor, einen ehrlichen Blick auf die Bordmittel und einen Weg, beliebigen SVG-Code ganz ohne Plugin einzufügen.

💡 Kurzüberblick:

• Schritt 1: Bestimmen Sie den Trennlinienstil für Ihr Seitendesign, Beispiele für sechs Stile finden Sie unten in der Galerie
• Schritt 2: Für einfache Wellen und Schrägen aktivieren Sie den eingebauten Shape Divider in den Abschnittseinstellungen von Elementor
• Schritt 3: Für handgezeichnete animierte Trennlinien installieren Sie das Plugin SVG Divider for Elementor
• Schritt 4: Für volle Kontrolle kopieren Sie den SVG-Code aus dem Artikel und fügen ihn über das HTML-Widget ein

Warum eine Seite Trennlinien braucht und warum speziell SVG

Eine Trennlinie löst drei Aufgaben: Sie trennt semantische Blöcke, gibt den Leserhythmus vor und lenkt den Blick zum nächsten Abschnitt. Eine Textwand ohne visuelle Pausen ermüdet, der Leser verlässt die Seite, bevor er den Button erreicht.

Das SVG-Format eignet sich am besten für diese Aufgabe, und der Markt bestätigt es: Laut W3Techs-Statistik zu SVG wird das Format von 66,8% aller Websites genutzt (Juli 2026). Die Gründe sind praktischer Natur. Vektorgrafiken verlieren auf Retina-Bildschirmen oder bei beliebiger Vergrößerung nicht an Schärfe. Eine Datei mit einer ganzen Illustration wiegt weniger als ein einzelnes Rasterlogo. Und jedes Element innerhalb einer SVG, Linie, Blütenblatt, Punkt, kann separat über CSS animiert werden.

Die Zielgruppe für dieses Thema ist riesig: Elementor selbst ist laut WordPress.org-Katalog auf 10 Millionen Websites installiert, und WordPress insgesamt betreibt 41,5% aller Internetseiten (W3Techs-Zähler, Juli 2026). Mit anderen Worten: Millionen von Seiten nutzen dieselben Standardwellen. Sich abzuheben ist einfach, und wir zeigen Ihnen unten, wie das geht.

Galerie: Sechs Stile von SVG-Trennlinien mit Beispielen

Alle unten gezeigten Trennlinien haben wir speziell für diesen Artikel gezeichnet und als ganz normale SVG-Dateien in die Mediathek hochgeladen. Die Farbpalette ist neutral, Blau mit einem Goldakzent, jeder Stil ist nach Verwendungszweck beschriftet. Nutzen Sie sie als Referenz bei der Wahl Ihres eigenen Stils oder übernehmen Sie den Code für sich: Wie man SVG ohne Plugin auf einer Seite einfügt, behandeln wir in einem Abschnitt weiter unten.

Welle

Der vielseitigste Stil. Eine Doppellinie mit unterschiedlicher Transparenz erzeugt Tiefe, und Punkte in der Mitte geben dem Auge einen Anker. Fast überall passend: Blogs, Dienstleistungs-Landingpages, Portfolios.

Klassisches Ornament

Eine Linie mit Schnörkeln und einem Diamanten in der Mitte, eine Technik direkt aus dem Printlayout. Eine solche Trennlinie verlangt nach Serifentypografie: juristische Dienstleistungen, gehobene Gastronomie, Hochzeitsseiten, Verlage.

Botanisches Motiv

Blätter und Beeren auf einer dünnen Achse. Ein Stil für alles „Natürliche und Handgemachte": Ökoprodukte, Kosmetik, Yogastudios, Hofladenprodukte, Handarbeiten.

Geometrie der Rauten

Eine Kette aus Rauten in abnehmender Größe. Eine strenge Variante ohne eine einzige geschwungene Linie, die nicht mit dem Layoutraster kollidiert: Unternehmenswebsites, SaaS, Finanzen, Tech-Blogs.

Doppellinie mit Medaillon

Der nächste Verwandte des eingebauten Divider-Widgets, aber deutlich raffinierter: eine Doppellinie unterschiedlicher Stärke und ein rundes Medaillon mit einem Stern. Gut geeignet als abschließende Trennlinie vor dem Footer oder der Autorensignatur.

Gepunktete Linie mit Funkeln

Eine gepunktete Linie und verstreute vierzackige Funkelsterne. Der stimmungsvollste Stil: festliche Aktionen, Kinderprodukte, kreative Portfolios, Neujahrs-Landingpages.

Was Elementor von Haus aus kann

Bevor Sie Plugins installieren, lohnt es sich, das Maximum aus den eingebauten Werkzeugen herauszuholen. Elementor bietet zwei Standardwerkzeuge, und diese decken grundlegende Szenarien ab.

Formtrenner befindet sich in den Abschnittseinstellungen (Tab „Stil"). Dies ist eine geformte Kante zwischen Abschnitten: Welle, Schräge, Hügel, Wolken, Zickzack, insgesamt etwa ein Dutzend Formen mit Einstellungen für Farbe, Höhe und Spiegelung, einige unterstützen Ebenen. Details dazu im Elementor-Leitfaden zum Formtrenner. Die grundlegende Einschränkung: Es handelt sich um eine Abschnittskantenform, nicht um ein separates dekoratives Element, und es gibt keine Enthüllungsanimation.

Trennlinien-Widget wird zwischen Inhaltsblöcken platziert: eine gerade Linie, Einstellungen für Stärke und Farbe, optional ein Icon oder Text in der Mitte. Ein ehrliches, funktionierendes Minimum. Aber die Linie ist immer gerade, Icons stammen nur aus Standardsets, keine Animation.

Das Fazit ist einfach: Für ein strenges Corporate-Layout reichen die eingebauten Werkzeuge aus. Für Ornamente, handgezeichnete Grafiken und Animation benötigen Sie entweder ein Plugin oder eigene Hände. Beginnen wir mit einem Plugin.

SVG Divider for Elementor-Plugin: 90 handgezeichnete Trennlinien

SVG Divider for Elementor von Let's WP Studio fügt ein separates Widget mit zwei Modi hinzu. Laut der Ankündigung im Let's WP-Blog umfasst das Set 90 handgezeichnete Designs und einen klassischen Modus mit Linien und Icons, darunter über 300 Icons aus einem eigenen Set sowie exklusive thematische Serien für Reise-Websites und Restaurants.

Der Modus Gezeichnet ist der Kern des Plugins: ornamentale Illustrationen mit Enthüllungsanimation, bei der jedes Blütenblatt und jeder Schnörkel sein eigenes Timing hat. Alle Animationen sind in reinem CSS geschrieben, ohne externe Bibliotheken, es werden nur tatsächlich verwendete Stile auf die Seite geladen. Eine optionale Glitzerschicht fügt dem gezeichneten Element einen unendlichen Schimmer hinzu.

Der Modus Klassisch wiederholt die Idee des Standard-Trennlinien-Widgets, ist jedoch flexibler: doppelte und gepunktete Linien mit Abstandsanpassung per Schieberegler, Icon links, mittig oder rechts, Integration mit dem Elementor-Button.

Die Designauswahl erfolgt über einen eigenen Popup-Picker mit Live-Suche: ein Raster mit 90 Vorschaubildern, die Animation startet beim Überfahren mit der Maus, der Wechsel zwischen Optionen dauert ein paar Sekunden. Das Plugin ist schlank: Inline-SVG mit wenigen Kilobyte, die einzige Abhängigkeit ist jQuery, das bereits vom WordPress-Core geladen wird.

Nun der ehrliche Teil. Das Plugin wird auf der Plugin-Seite auf CodeCanyon unter einer Standardlizenz für eine Site verkauft, benötigt Elementor 2.8+ und wurde seit 2020 nicht mehr nennenswert aktualisiert. Seine Architektur ist einfach, es gibt fast nichts, was kaputtgehen könnte, aber ein Produkt ohne aktiven Support zu kaufen, bleibt ein Risiko, das jeder für sich selbst abwägt. Prüfen Sie vor dem Kauf die Demo mit der aktuellen Elementor-Version.

So fügen Sie Ihren eigenen SVG-Divider ohne Plugin ein

Jeder Divider aus unserer Galerie lässt sich, wie jede andere SVG-Datei auch, in drei Schritten kostenlos auf einer Seite einfügen. Die Methode funktioniert in Elementor, Gutenberg und generell in jedem Builder mit einem HTML-Block.

Erster Schritt: Nehmen Sie den SVG-Code. Hier eine gekürzte Version unserer Welle, kopieren Sie sie direkt von hier und passen Sie die Farben an Ihre Marke an:

1
<svg xmlns="http://www.w3.org/2000/svg" width="1200" height="120" viewBox="0 0 1200 120">
2
  <path d="M60,60 C210,20 360,100 510,60 S810,20 960,60 S1140,100 1140,60"
3
        fill="none" stroke="#4a6fa5" stroke-width="3" stroke-linecap="round"/>
4
  <circle cx="600" cy="60" r="6" fill="#c9a227"/>
5
</svg>

Zweiter Schritt: Ziehen Sie in Elementor das HTML-Widget an die gewünschte Stelle und fügen Sie den Code ein. Inline-SVG wird sofort gerendert, erzeugt keine HTTP-Requests und übernimmt die Skalierung des Containers. Die Pfad- und Form-Syntax ist in der MDN-Dokumentation zu SVG gut erklärt.

Dritter Schritt, falls der Weg über die Mediathek bequemer ist: Beachten Sie, dass WordPress das Hochladen von SVG-Dateien standardmäßig verbietet. Das ist keine Schikane, sondern Sicherheit: In einer SVG-Datei kann ein ausführbares Skript stecken, daher muss die Datei vor der Veröffentlichung bereinigt werden. Diese Aufgabe löst das kostenlose Plugin Safe SVG: Es säubert Dateien beim Hochladen, danach wird die SVG mit dem ganz normalen Bild-Widget eingefügt.

Die Sicherheitsregel lautet: Laden Sie keine SVGs aus ungeprüften Quellen ohne Bereinigung auf Ihre Website. Ihr eigener Code und die Dateien aus diesem Artikel sind von Haus aus sauber, sie enthalten nur Pfade und Formen.

Vergleich: Welche Methode ist die richtige?

Ein paar Worte zur Zeile aus der Mitte der Tabelle: Shape Dividers Plus erweitert den integrierten Shape Divider um neue Kantenstile (Pinsel, Geometrie, Papier), arbeitet in der nativen Oberfläche und wird aktualisiert, die letzte Version stammt vom Februar 2026. Ein ähnliches Modul für animierte Shape Divider mit eigener SVG-Unterstützung gibt es auch in Premium Addons. Wenn Sie gezielt eine geformte Abschnittskante benötigen, starten Sie mit diesen Optionen, nicht mit kostenpflichtiger Kunst.

⁉️🤔 Häufig gestellte Fragen

Funktioniert das SVG-Divider-Plugin ohne Elementor?

Nein. Es handelt sich um ein Addon, das dem Elementor-Panel ein Widget hinzufügt und ohne dieses nicht funktioniert, eine eigenständige Version existiert nicht. Die Mindestanforderung, Elementor 2.8+, ist auf CodeCanyon angegeben. Für Websites ohne Elementor nutzen Sie das Einfügen Ihres eigenen SVG-Codes über einen HTML-Block.

Verlangsamen SVG-Divider eine Website?

Praktisch nicht. Inline-Vektoren rendern ohne zusätzliche HTTP-Requests, und das Gewicht eines Dividers wird in Kilobyte gemessen, was die Aufschlüsselung des Plugin-Autors bestätigt. CSS-Animationen nutzen die Hardwarebeschleunigung des Browsers. Ein einziges Raster-Banner ist in der Regel schwerer als alle Divider einer Seite zusammen.

Warum erlaubt WordPress das Hochladen von SVG in die Mediathek nicht?

Aus Sicherheitsgründen: SVG ist ein XML-Dokument, in das ein Skript eingebettet werden kann. Der Kern blockiert solche Uploads standardmäßig. Die Lösung, das Safe-SVG-Plugin aus dem offiziellen Katalog: Es bereinigt Dateien beim Hochladen und ermöglicht eine Vorschau in der Mediathek.

Darf ich Divider aus Ihrer Galerie auf meiner Website verwenden?

Ja, uneingeschränkt. Wir haben sie speziell für diesen Artikel gezeichnet: Speichern Sie die SVG-Datei aus der Galerie oder kopieren Sie den Beispielcode aus dem Abschnitt zum Einfügen ohne Plugin und ändern Sie die Farben passend zu Ihrer Palette. Eine Namensnennung ist nicht erforderlich, es gibt keine lizenzrechtlichen Einschränkungen.

Das Plugin wurde seit mehreren Jahren nicht aktualisiert, lohnt sich der Kauf?

Wägen Sie das Risiko ab. Die Architektur ist simpel, reines CSS plus Elementor-API, daher funktioniert das Plugin auch auf aktuellen Versionen weiter. Es gibt aber keinen aktiven Support, und falls das nächste Elementor-Update etwas zerstört, wird es niemand reparieren. Prüfen Sie die Demo vor dem Kauf und halten Sie einen Backup-Plan in Form Ihres eigenen SVG-Codes bereit.

Worin unterscheidet sich Shape Divider vom Divider-Widget?

Das sind unterschiedliche Elementor-Werkzeuge. Shape Divider legt eine geformte Kante eines gesamten Abschnitts fest (Welle, Schräge, Wolken) und wird im Abschnittsstil konfiguriert. Das Divider-Widget setzt eine horizontale Linie zwischen Inhaltsblöcken, optional mit einem Icon. Ersteres betrifft die Layout-Geometrie, Letzteres eine Pause innerhalb einer Textspalte.

💎 Fazit und Kernaussagen

Schöne Trennelemente sind ein kostengünstiges visuelles Upgrade, das mit jedem Budget realisierbar ist. Rezept nach Szenarien: Für einfache Bereichsgeometrie genügt der integrierte Shape Divider oder das kostenlose Shape Dividers Plus. Für handgezeichnete Kunst mit Enthüllungsanimation gibt es SVG Divider für Elementor, den Sie jedoch mit Blick auf ausbleibende Updates erwerben sollten. Maximale Flexibilität liefert Ihr eigener SVG-Code über ein HTML-Widget: kostenlos, ohne Abhängigkeiten und mit voller Kontrolle über jede Linie.

Praxistipp: Entscheiden Sie sich für einen Trennelement-Stil und setzen Sie ihn auf der gesamten Website ein. Drei verschiedene Ornamente auf einer Seite wirken schlechter als ihr Fehlen, und ein wiederkehrender Stil fungiert als Element der Markenidentität.

Nehmen Sie das Trennelement, das Ihnen aus der Galerie gefällt, passen Sie die Farben an Ihre Marke an und schreiben Sie in die Kommentare, welchen der sechs Stile Sie installieren würden: Welle, Ornament oder Funkeln?