Standardowe separatory Elementor wystarczają do typowego składu, ale gdy makieta wymaga unikalnego falistego konturu, firmowego skosu czy przekątnej dokładnie takiej jak w projekcie, wbudowany zestaw 26 figur przestaje ratować. Projektant rysuje niestandardowe przejście między sekcjami, a osoba wdrażająca zostaje z pytaniem: jak wciągnąć swój SVG do Elementora tak, aby pobierał kolor z ustawień i nie zniknął przy najbliższej aktualizacji wtyczki.

Problem nie leży w braku mechanizmu, filtr elementor/shapes/additional_shapes istnieje w jądrze od dawna. Problem w tym, że większość instrukcji w sieci proponuje umieszczać SVG w folderze samej wtyczki, a to prosta droga do utraty pliku podczas automatycznej aktualizacji. Ponadto parametry url/path są często pomijane, a bez nich separator po prostu nie wyświetla się w edytorze.

Poniżej sprawdzona kolejność działań: od przygotowania pliku wektorowego po rejestrację przez filtr z umieszczeniem w motywie potomnym. Po tym własny shape divider pojawi się na liście rozwijanej na równi ze standardowymi i będzie działał niezależnie od aktualizacji Elementora.

💡 Szybki przegląd:

• Przygotowujemy szkic rastrowy w Photoshopie: wycinamy potrzebny obszar i zalewamy czernią.
• Konwertujemy PNG do SVG przez serwis online, z uproszczeniem do jednego koloru.
• Doprowadzamy kod SVG do czystej postaci: usuwamy zbędne tagi, dodajemy elementor-shape-fill i preserveAspectRatio.
• Umieszczamy plik w folderze motywu potomnego i rejestrujemy przez add_filter z kluczami url, path i has_negative.
• Sprawdzamy separator w edytorze Elementora, zmieniamy kolor i wysokość.

Czym jest Shape Divider i po co dodawać własny

Shape Divider to figura SVG, która nakłada się na górną lub dolną krawędź sekcji w Elementorze. Tworzy płynne przejście między blokami: falę, skos, łuk, zaostrzoną krawędź. Standardowa biblioteka zawiera 26 figur: góry, krople, chmury, krzywe itp.

Własny separator jest potrzebny w trzech przypadkach. Po pierwsze, gdy makieta zawiera unikalny kształt, którego nie ma w standardowym zestawie. Po drugie, do brandingu, na przykład przejście w formie logotypu lub firmowej fali. Po trzecie, gdy kilka projektów używa tego samego niestandardowego zestawu, wtedy separatory dodaje się centralnie przez motyw potomny lub niestandardową wtyczkę.

Technicznie mechanizm jest zrealizowany przez filtr elementor/shapes/additional_shapes. Hak przyjmuje tablicę, gdzie każdy element opisuje jeden separator: nazwę, ścieżkę do pliku, możliwość odbicia lustrzanego i negatywu. Po rejestracji figura pojawia się na liście rozwijanej edytora.

Tworzenie pliku SVG dla separatora

Zasada działania shape divider polega na tym, że widoczny pozostaje ten obszar, który zamalowano w SVG. Dlatego przede wszystkim trzeba zrozumieć, która dokładnie część szkicu stanie się kształtem.

Załóżmy, że projektant narysował przejście z niebieską dolną sekcją i białą górną „falą". Kształtem ma stać się biały kontur, to właśnie go trzeba wyciąć i zalać jednolitym kolorem.

Kluczowy moment: jeśli popełni się błąd i weźmie niebieski obszar zamiast białego, separator w Elementorze będzie wyglądał na odwrócony lub przycięty. Zawsze należy określić, co dokładnie ma być widoczną figurą.

Kolejność działań w Photoshopie

Proszę otworzyć szkic w Photoshopie i wykonać trzy kroki:

• Proszę usunąć obszar tła, który NIE ma być separatorem. W powyższym przykładzie proszę usunąć niebieską część.

• Obszar, który pozostał (białą „falę"), proszę zalać czarnym kolorem. Czerń upraszcza późniejsze trasowanie do wektora, konwerter nie myli się w odcieniach.

• Proszę przyciąć płótno do granic figury i wyeksportować do PNG. Photoshop generuje SVG ze zbędnymi opakowaniami i artefaktami, dlatego PNG jako format pośredni jest bardziej niezawodny.

Dlaczego czarny, a nie od razu kolor strony? Elementor podstawia kolor separatora z własnych ustawień, wypełnienie SVG nie ma znaczenia. A czarna sylwetka na białym tle daje maksymalnie czysty wektor po automatycznym trasowaniu.

Rezultat po obróbce w Photoshopie:

Konwersja PNG do SVG

Następnie potrzebny jest czysty wektor. Proszę użyć konwertera online pngtosvg.com, nie wymaga rejestracji i radzi sobie z jednokolorowymi formami bez zbędnego szumu w kodzie.

Proszę załadować PNG i wskazać parametry:

• Maksymalne uproszczenie, jeden kolor. To usuwa „śmieciowe" krzywe i czyni SVG kompaktowym.

• Liczba kolorów, 1 (lub 2, jeśli potrzebne jest przezroczyste tło; wtedy drugi kolor proszę ustawić jako transparent).

Proszę pobrać otrzymany SVG i otworzyć go w edytorze kodu, Notepad++, VS Code lub zwykłym notatniku. Następnie ręczne czyszczenie.

Dostosowanie SVG do wymagań Elementora

Aby separator pobierał kolor i poprawnie się skalował, proszę wprowadzić trzy poprawki bezpośrednio w kodzie pliku:

Proszę dodać klasę elementor-shape-fill. Bez niej Elementor nie będzie mógł przemalowywać SVG. Proszę znaleźć tag <path> lub <polygon> i dodać atrybut class="elementor-shape-fill".

Proszę usunąć width i height. Proszę zostawić tylko viewBox i dodać preserveAspectRatio="none", to pozwoli separatorowi rozciągać się na całą szerokość sekcji. Jeśli atrybutów szerokości/wysokości nie ma, proszę niczego nie ruszać, tylko upewnić się, że viewBox jest obecny.

Proszę wyciąć wszystko, co zbędne. Proszę usunąć konstrukcje <?xml...>, <!DOCTYPE...> i wszelkie nagłówki XML poza tagiem <svg>. Proszę zostawić czysty kod wewnątrz <svg>...</svg>, Elementor czyta takie pliki stabilniej.

Końcowy SVG powinien wyglądać mniej więcej tak:

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>

Gdzie umieścić plik SVG

Najpoważniejsze i najczęstsze rozwiązanie, folder /wp-content/plugins/elementor/assets/shapes/. Działa ono dokładnie do pierwszej automatycznej aktualizacji Elementora, która po cichu nadpisuje zawartość folderu wtyczki razem z Pana/Pani plikiem.

Prawidłowa ścieżka, motyw potomny. Proszę utworzyć w nim folder assets/shapes/ i umieścić tam SVG:

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

Prawie wszystkie współczesne motywy, Hello Elementor, GeneratePress, Astra, Kadence, wspierają motywy potomne. Jeśli ich Pan/Pani nie ma, proszę utworzyć: w katalogu głównym motywu wystarczy style.css z nagłówkiem /* Theme Name: My Child Theme Template: parent-theme */ i functions.php.

Alternatywa, niestandardowa wtyczka. Ale dla jednego-dwóch separatorów motyw potomny jest prostszy i nie mnoży zbędnych bytów.

Kod do rejestracji separatora

W pliku functions.php motywu potomnego (lub przez wtyczkę Code Snippets) proszę dodać następujący kod:

1
/**
2
 * Регистрирует кастомный shape divider в Elementor.
3
 * SVG лежит в папке assets/shapes/ дочерней темы.
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
} );

Omówienie kluczy:

• title, nazwa separatora na liście rozwijanej edytora. Proszę pisać alfabetem łacińskim, to wewnętrzny identyfikator, w interfejsie wyświetla się tak, jak jest.
• url, publiczny adres URL pliku, używany w podglądzie edytora. get_stylesheet_directory_uri() wskazuje na folder motywu potomnego.
• path, ścieżka serwerowa do pliku. Potrzebna do renderowania po stronie serwera i niektórych sprawdzeń.
• has_flip, pozwala na pionowe odbicie lustrzane separatora (przycisk Flip w edytorze).
• has_negative, potrzebny, jeśli ma Pan/Pani dwa pliki: shape.svg (prosty) i shape-negative.svg (z odwróconymi kolorami). Jeśli negatywu nie ma, proszę ustawić false.
• height_only, gdy true, Elementor pozwala zmieniać tylko wysokość separatora; gdy false, szerokość również.

Kluczowa różnica w stosunku do instrukcji krążących po forach: obecność url i path jest obowiązkowa. Bez nich separator nie zostanie wyrenderowany, Elementor po prostu nie znajdzie pliku.

Ważny niuans dotyczący ID separatora

Identyfikator shape-custom-wave (klucz tablicy) musi być unikalny. Jeśli inna wtyczka zarejestruje separator z tym samym kluczem, Pana/Pani zostanie nadpisany. Proszę zawsze używać prefiksu: na przykład mytheme-wave-1 zamiast po prostu wave.

Sprawdzenie w edytorze

Po dodaniu kodu proszę otworzyć dowolną stronę w edytorze Elementora, zaznaczyć sekcję i przejść na zakładkę Style → Shape Divider. Pana/Pani separator powinien pojawić się na liście rozwijanej pod standardowymi.

Proszę sprawdzić trzy scenariusze:

• Kolor, proszę zmienić kolor separatora w ustawieniach. SVG powinien zostać przemalowany. Jeśli nie, proszę sprawdzić obecność class="elementor-shape-fill" w pliku.
• Wysokość, proszę zmienić wysokość suwakiem. Separator powinien skalować się bez zniekształceń.
• Flip, jeśli has_flip jest włączone, przycisk odbicia lustrzanego powinien być aktywny.

Jeśli w ogóle się nie wyświetla, przede wszystkim proszę sprawdzić URL: proszę otworzyć get_stylesheet_directory_uri() . '/assets/shapes/shape-custom.svg' w przeglądarce. Powinien otworzyć się czysty kod SVG, a nie 404.

Proszę zobaczyć cały proces od makiety do działającego separatora w czasie rzeczywistym, w tym filmie autor przechodzi całą ścieżkę, włącznie z niuansami preserveAspectRatio i debugowaniem uszkodzonych ścieżek:

⁉️🤔 Często zadawane pytania

Czy niestandardowy separator zniknie podczas aktualizacji Elementora?

Nie, jeśli SVG leży w motywie potomnym lub niestandardowej wtyczce. Aktualizacja Elementora nadpisuje tylko własny folder /wp-content/plugins/elementor/. Plików motywu nie rusza. Natomiast jeśli umieścił(a) Pan/Pani SVG w /wp-content/plugins/elementor/assets/shapes/, zostanie on wymazany przy pierwszej automatycznej aktualizacji.

Czy można zrobić separator z gradientem?

Bezpośrednio przez ustawienia Elementora, nie, tam jest tylko jednolity kolor. Ale można wpisać gradient bezpośrednio w SVG, wewnątrz <defs> i <linearGradient>. Wtedy Elementor nie będzie przemalowywał figury (klasy elementor-shape-fill na taki path proszę nie wieszać), separator wyświetli się z „zaszytym" gradientem.

Dlaczego separator nie wyświetla się w edytorze, chociaż w kodzie nie ma błędów?

Trzy najczęstsze przyczyny: zapomniane url/path w tablicy rejestracji, uszkodzona ścieżka do pliku (proszę sprawdzić bezpośredni dostęp przez URL) lub brak klasy elementor-shape-fill w SVG, bez niej Elementor po cichu pomija separator.

Czy koniecznie trzeba używać Photoshopa?

Nie, nada się dowolny edytor rastrowy: GIMP, Figma (eksport do PNG), Photopea, nawet Paint.NET. Kluczowe jest uzyskanie czystej czarnej sylwetki na przezroczystym lub białym tle przed konwersją do SVG. Samo trasowanie robi się nie w edytorze, a przez pngtosvg lub analog.

Ile niestandardowych separatorów można dodać?

Nie ma ograniczeń co do liczby, proszę rejestrować w tym samym wywołaniu add_filter tyle, ile potrzeba. Każdy z własnym kluczem, ścieżką i ustawieniami. Praktyczna granica to wygoda: więcej niż 10-15 separatorów na liście rozwijanej jest już niewygodnie szukać.

Czy warto zawracać sobie głowę niestandardowym Shape Divider

Jeśli projekt jest jednorazowy i standardowa „fala" wystarcza, nie warto. Wbudowane 26 figur Elementor pokrywa większość typowych makiet, a czas na przygotowanie SVG i debugowanie kodu lepiej przeznaczyć na treść.

Ale gdy makieta wymaga dokładnego odwzorowania projektu lub ma Pan/Pani linię stron z identycznym brandingowym przejściem między sekcjami, niestandardowy separator zwraca się od pierwszego zastosowania. Raz dodany przez motyw potomny jest dostępny na wszystkich stronach sieci bez zbędnych ceregieli.

Najważniejsze, co trzeba zapamiętać: **proszę nie umieszczać SVG w folderze wtyczki, zawsze wskazywać url i path w filtrze i nie zapominać o **elementor-shape-fill. Te trzy punkty to źródło większości problemów, które wypływają w temacie na forach i w issues na GitHub.