Die standardmäßigen Elementor-Trenner sind für typische Layouts ausreichend, aber wenn ein Entwurf eine einzigartige Wellenkontur, eine gebrandete Abschrägung oder eine Diagonale verlangt, die exakt dem Mockup entspricht, stößt der eingebaute Satz von 26 Formen an seine Grenzen. Der Designer erstellt einen individuellen Übergang zwischen den Sektionen, und der Entwickler steht vor der Frage: Wie fügt man eigene SVGs zu Elementor hinzu, sodass die Farbe aus den Einstellungen übernommen wird und das Ganze das nächste Plugin-Update übersteht?

Das Problem ist nicht das Fehlen eines Mechanismus: Der Filter elementor/shapes/additional_shapes existiert seit Langem im Core. Das Problem ist, dass die meisten Online-Tutorials empfehlen, das SVG im Plugin-Ordner selbst abzulegen, ein sicherer Weg, die Datei bei automatischen Updates zu verlieren. Und die Parameter url/path werden oft weggelassen; ohne sie wird der Trenner im Editor schlicht nicht dargestellt.

Nachfolgend ein erprobter Workflow: von der Vorbereitung der Vektordatei bis zur Registrierung über einen Filter mit Ablage im Child-Theme. Danach erscheint Ihr individueller Formtrenner im Dropdown-Menü neben den Standardformen und bleibt unabhängig von Elementor-Updates erhalten.

💡 Kurzüberblick:

• Bereiten Sie eine Rasterskizze in Photoshop vor: Schneiden Sie den benötigten Bereich zu und füllen Sie ihn mit Schwarz.
• Konvertieren Sie das PNG über einen Online-Dienst in SVG und vereinfachen Sie es auf eine einzige Farbe.
• Bereinigen Sie den SVG-Code: Entfernen Sie überflüssige Tags, fügen Sie elementor-shape-fill und preserveAspectRatio hinzu.
• Legen Sie die Datei im Child-Theme-Ordner ab und registrieren Sie sie via add_filter mit den Schlüsseln url, path und has_negative.
• Testen Sie den Trenner im Elementor-Editor, ändern Sie Farbe und Höhe.

Was ist ein Formtrenner und warum sollte man eigene hinzufügen

Ein Shape Divider ist eine SVG-Form, die über die obere oder untere Kante einer Sektion in Elementor gelegt wird. Er erzeugt einen fließenden Übergang zwischen Blöcken: eine Welle, Abschrägung, einen Bogen oder eine spitze Kante. Die Standardbibliothek umfasst 26 Formen: Berge, Tropfen, Wolken, Kurven und so weiter.

Ein individueller Trenner wird in drei Fällen benötigt. Erstens, wenn das Design eine einzigartige Form enthält, die im Standardsatz nicht vorkommt. Zweitens für Branding-Zwecke (zum Beispiel ein Übergang in Form eines Logos oder einer signaturartigen Welle). Drittens, wenn mehrere Projekte denselben individuellen Satz verwenden; in diesem Fall werden Trenner zentral über ein Child-Theme oder ein eigenes Plugin hinzugefügt.

Technisch wird der Mechanismus über den Filter elementor/shapes/additional_shapes umgesetzt. Der Hook akzeptiert ein Array, in dem jedes Element einen Trenner beschreibt: den Namen, den Dateipfad, die Spiegelungsfähigkeit und die Negativ-Option. Nach der Registrierung erscheint die Form im Editor-Dropdown.

Erstellen einer SVG-Datei für den Trenner

Das Prinzip der Formtrenner beruht darauf, dass der sichtbare Bereich das ist, was Sie im SVG füllen. Daher müssen Sie zunächst verstehen, welcher Teil der Skizze zur Form werden soll.

Angenommen, der Designer hat einen Übergang mit einem blauen unteren Abschnitt und einer weißen oberen „Welle" erstellt. Die weiße Kontur soll zur Form werden; diese müssen Sie ausschneiden und mit einer Volltonfarbe füllen.

Entscheidender Punkt: Wenn Sie einen Fehler machen und statt des weißen den blauen Bereich auswählen, sieht der Trenner in Elementor invertiert oder beschnitten aus. Bestimmen Sie immer genau, was die sichtbare Form sein soll.

Schritte in Photoshop

Öffnen Sie die Skizze in Photoshop und führen Sie drei Schritte aus:

• Löschen Sie den Hintergrundbereich, der NICHT der Trenner sein soll. Im obigen Beispiel löschen Sie den blauen Teil.

• Füllen Sie den verbleibenden Bereich (die weiße „Welle") mit Schwarz. Schwarz vereinfacht die anschließende Vektorisierung; der Konverter wird nicht durch verschiedene Schattierungen verwirrt.

• Schneiden Sie die Arbeitsfläche auf die Formgrenzen zu und exportieren Sie als PNG. Photoshop generiert SVGs mit zusätzlichen Hüllen und Artefakten, daher ist PNG als Zwischenformat zuverlässiger.

Warum Schwarz statt sofort der Website-Farbe? Elementor wendet die Trennerfarbe aus seinen eigenen Einstellungen an; die SVG-Füllung spielt keine Rolle. Und eine schwarze Silhouette auf weißem Hintergrund ergibt nach der automatischen Vektorisierung den saubersten Vektor.

Ergebnis nach der Bearbeitung in Photoshop:

Konvertierung von PNG in SVG

Als Nächstes benötigen Sie einen sauberen Vektor. Nutzen Sie den Online-Konverter pngtosvg.com; er erfordert keine Registrierung und verarbeitet einfarbige Formen ohne überflüssiges Rauschen im Code.

Laden Sie das PNG hoch und setzen Sie die Parameter:

• Maximale Vereinfachung, eine Farbe. Das entfernt „Müll"-Kurven und hält das SVG kompakt.

• Anzahl der Farben: 1 (oder 2, wenn Sie einen transparenten Hintergrund benötigen; setzen Sie in diesem Fall die zweite Farbe auf transparent).

Laden Sie das resultierende SVG herunter und öffnen Sie es in einem Code-Editor: Notepad++, VS Code oder einem einfachen Texteditor. Als Nächstes folgt die manuelle Bereinigung.

Anpassung des SVG an die Elementor-Anforderungen

Damit der Trenner die Farbe korrekt übernimmt und skaliert, nehmen Sie drei Bearbeitungen direkt im Dateicode vor:

Fügen Sie die Klasse elementor-shape-fill hinzu. Ohne sie kann Elementor das SVG nicht umfärben. Suchen Sie das <path>- oder <polygon>-Tag und fügen Sie das Attribut class="elementor-shape-fill" hinzu.

Entfernen Sie width und height. Behalten Sie nur viewBox und fügen Sie preserveAspectRatio="none" hinzu; dies erlaubt dem Trenner, sich über die volle Sektionsbreite zu strecken. Falls die Attribute width/height nicht vorhanden sind, belassen Sie es dabei und stellen Sie nur sicher, dass viewBox vorhanden ist.

Entfernen Sie alles Überflüssige. Löschen Sie <?xml...>-, <!DOCTYPE...>-Konstrukte und jegliche XML-Header außerhalb des <svg>-Tags. Behalten Sie nur sauberen Code innerhalb von <svg>...</svg>; Elementor parst solche Dateien zuverlässiger.

Das endgültige SVG sollte ungefähr so aussehen:

1
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 120" preserveAspectRatio="none">
2
  <path class="elementor-shape-fill" d="M0,0 C300,100 900,0 1200,120 L0,120 Z"/>
3
</svg>

Wo die SVG-Datei abgelegt wird

Der gröbste und gängigste Ansatz ist der Ordner /wp-content/plugins/elementor/assets/shapes/. Das funktioniert genau bis zum ersten automatischen Elementor-Update, das den Plugin-Ordnerinhalt mitsamt Ihrer Datei stillschweigend überschreibt.

Der korrekte Ansatz ist ein Child-Theme. Erstellen Sie darin einen Ordner assets/shapes/ und legen Sie das SVG dort ab:

1
/wp-content/themes/your-child-theme/assets/shapes/shape-custom.svg

Fast alle modernen Themes (Hello Elementor, GeneratePress, Astra, Kadence) unterstützen Child-Themes. Falls Sie keines haben, erstellen Sie es: Im Theme-Root benötigen Sie lediglich eine style.css mit einem Header /* Theme Name: My Child Theme Template: parent-theme */ und eine functions.php.

Eine Alternative ist ein eigenes Plugin. Aber für ein oder zwei Trenner ist ein Child-Theme einfacher und erzeugt keine zusätzlichen Entitäten.

Code zur Registrierung des Trenners

Fügen Sie in der Datei functions.php des Child-Themes (oder über das Plugin Code Snippets) folgenden Code hinzu:

1
/**
2
 * Registers a custom shape divider in Elementor.
3
 * SVG is located in the assets/shapes/ folder of the child theme.
4
 */
5
add_filter( 'elementor/shapes/additional_shapes', function( $additional_shapes ) {
6
 
7
    $additional_shapes['shape-custom-wave'] = [
8
        'title'        => esc_html__( 'Custom Wave', 'my-child-theme' ),
9
        'url'          => get_stylesheet_directory_uri() . '/assets/shapes/shape-custom.svg',
10
        'path'         => get_stylesheet_directory() . '/assets/shapes/shape-custom.svg',
11
        'has_flip'     => true,
12
        'has_negative' => true,
13
        'height_only'  => false,
14
    ];
15
 
16
    return $additional_shapes;
17
 
18
} );

Aufschlüsselung der Schlüssel:

• title: der Name des Trenners im Editor-Dropdown. Schreiben Sie in lateinischen Zeichen; dies ist eine interne Kennung, die so im Interface angezeigt wird.
• url: die öffentliche Datei-URL, verwendet für die Editor-Vorschau. get_stylesheet_directory_uri() zeigt auf den Child-Theme-Ordner.
• path: der Server-Pfad zur Datei. Erforderlich für serverseitiges Rendering und einige Prüfungen.
• has_flip: aktiviert die vertikale Spiegelung des Trenners (die Schaltfläche „Spiegeln" im Editor).
• has_negative: benötigt, wenn Sie zwei Dateien haben: shape.svg (direkt) und shape-negative.svg (mit invertierten Farben). Wenn kein Negativ existiert, setzen Sie es auf false.
• height_only: wenn true, erlaubt Elementor nur die Änderung der Trennerhöhe; wenn false, kann auch die Breite geändert werden.

Der entscheidende Unterschied zu Anleitungen, die in Foren kursieren: Das Vorhandensein von url und path ist zwingend erforderlich. Ohne sie wird der Trenner nicht dargestellt; Elementor findet die Datei schlicht nicht.

Wichtiger Hinweis zur Trenner-ID

Die Kennung shape-custom-wave (der Array-Schlüssel) muss eindeutig sein. Wenn ein anderes Plugin einen Trenner mit demselben Schlüssel registriert, wird Ihrer überschrieben. Verwenden Sie immer ein Präfix: zum Beispiel mytheme-wave-1 statt nur wave.

Testen im Editor

Öffnen Sie nach dem Hinzufügen des Codes eine beliebige Seite im Elementor-Editor, wählen Sie eine Sektion aus und gehen Sie zum Tab Stil → Formtrenner. Ihr Trenner sollte im Dropdown unter den Standardformen erscheinen.

Testen Sie drei Szenarien:

• Farbe: Ändern Sie die Trennerfarbe in den Einstellungen. Das SVG sollte umgefärbt werden. Falls nicht, prüfen Sie, ob class="elementor-shape-fill" in der Datei vorhanden ist.
• Höhe: Passen Sie die Höhe mit dem Schieberegler an. Der Trenner sollte ohne Verzerrung skalieren.
• Spiegeln: Wenn has_flip aktiviert ist, sollte die Spiegeln-Schaltfläche aktiv sein.

Wenn er überhaupt nicht erscheint, prüfen Sie zuerst die URL: Öffnen Sie get_stylesheet_directory_uri() . '/assets/shapes/shape-custom.svg' im Browser. Es sollte sauberer SVG-Code angezeigt werden, kein 404.

Sehen Sie den gesamten Prozess vom Mockup bis zum funktionierenden Trenner in Echtzeit; in diesem Video geht der Autor den gesamten Weg durch, einschließlich Nuancen mit preserveAspectRatio und der Fehlersuche bei defekten Pfaden:

⁉️🤔 Häufig gestellte Fragen

Geht der individuelle Trenner bei einem Elementor-Update verloren?

Nein, wenn das SVG in einem Child-Theme oder eigenen Plugin liegt. Elementor-Updates überschreiben nur den eigenen Ordner /wp-content/plugins/elementor/. Theme-Dateien werden nicht angerührt. Wenn Sie das SVG jedoch in /wp-content/plugins/elementor/assets/shapes/ abgelegt haben, wird es beim ersten automatischen Update gelöscht.

Kann ich einen Trenner mit Farbverlauf erstellen?

Nicht direkt über die Elementor-Einstellungen; dort sind nur Volltonfarben verfügbar. Sie können aber einen Farbverlauf direkt im SVG definieren, innerhalb von <defs> und <linearGradient>. In diesem Fall wird Elementor die Form nicht umfärben (fügen Sie die Klasse elementor-shape-fill nicht zu diesem Pfad hinzu), und der Trenner wird mit dem „eingebackenen" Farbverlauf angezeigt.

Warum erscheint der Trenner nicht im Editor, obwohl der Code fehlerfrei ist?

Die drei häufigsten Ursachen: vergessene url/path im Registrierungs-Array, ein fehlerhafter Dateipfad (prüfen Sie den direkten URL-Zugriff) oder das Fehlen der Klasse elementor-shape-fill im SVG; ohne sie überspringt Elementor den Trenner stillschweigend.

Ist Photoshop zwingend erforderlich?

Nein, jeder Raster-Editor funktioniert: GIMP, Figma (Export nach PNG), Photopea, sogar Paint.NET. Entscheidend ist, vor der Konvertierung nach SVG eine saubere schwarze Silhouette auf transparentem oder weißem Hintergrund zu erhalten. Die Vektorisierung selbst erfolgt nicht im Editor, sondern über pngtosvg oder ein ähnliches Tool.

Wie viele individuelle Trenner kann ich hinzufügen?

Es gibt keine Mengenbegrenzung; registrieren Sie so viele, wie Sie benötigen, im selben add_filter-Aufruf. Jeder mit eigenem Schlüssel, Pfad und Einstellungen. Die praktische Grenze ist die Benutzerfreundlichkeit: Mehr als 10-15 Trenner in einem Dropdown werden unhandlich zu durchsuchen.

Lohnt sich der Aufwand für einen individuellen Formtrenner

Wenn das Projekt einmalig ist und die standardmäßige „Welle" ausreicht, dann nicht. Die eingebauten 26 Elementor-Formen decken die meisten typischen Layouts ab, und die Zeit für SVG-Vorbereitung und Code-Debugging ist besser in Inhalte investiert.

Aber wenn das Design eine exakte Übereinstimmung mit dem Mockup erfordert oder Sie eine Reihe von Websites mit demselben gebrandeten Übergang zwischen Sektionen haben, zahlt sich ein individueller Trenner vom ersten Einsatz an aus. Sie fügen ihn einmal über das Child-Theme hinzu, und er steht auf allen Seiten netzwerkweit ohne weiteren Aufwand zur Verfügung.

Die wichtigste Erkenntnis: **Legen Sie das SVG nicht im Plugin-Ordner ab, geben Sie immer url und path im Filter an und vergessen Sie **elementor-shape-fill nicht. Diese drei Punkte sind die Wurzel der meisten Probleme, die in Forenthreads und GitHub-Issues auftauchen.