Dobry separator między sekcjami sprawia, że strona wygląda na droższą o pięć minut pracy. To najtańszy sposób, by dodać witrynie charakteru: nie potrzeba redesignu, nie potrzeba projektanta, wystarczy jedna linia wektorowa w odpowiednim miejscu.

Problem w tym, że wbudowany zestaw Elementora szybko się nudzi. Standardowe fale i trójkąty Shape Divider stoją na co drugim landingu, a widżet Divider rysuje wyłącznie prostą linię z ikoną z FontAwesome. Chciałoby się ornament, motyw botaniczny albo iskry i tu zaczynają się poszukiwania.

W tym zestawieniu znajdzie Pan wszystko, czego potrzeba do ładnych separatorów: sześć gotowych stylów SVG, które sami narysowaliśmy i udostępniliśmy wprost w artykule, omówienie wtyczki SVG Divider for Elementor, szczere spojrzenie na wbudowane narzędzia oraz sposób na wstawienie dowolnego kodu SVG całkowicie bez wtyczek.

💡 Szybki przegląd:

• Krok 1: proszę określić styl separatora pasujący do projektu witryny, przykłady sześciu stylów poniżej w galerii
• Krok 2: dla podstawowych fal i skosów proszę włączyć wbudowany Shape Divider w ustawieniach sekcji Elementora
• Krok 3: dla rysowanych animowanych separatorów proszę zainstalować wtyczkę SVG Divider for Elementor
• Krok 4: dla pełnej kontroli proszę skopiować kod SVG z artykułu i wkleić go przez widżet HTML

Po co stronie separatory i dlaczego akurat SVG

Separator rozwiązuje trzy zadania: oddziela bloki znaczeniowe, nadaje rytm przewijaniu i kieruje wzrok do następnej sekcji. Ściana tekstu bez wizualnych pauz męczy, czytelnik opuszcza stronę, zanim dotrze do przycisku.

Format SVG nadaje się do tego zadania najlepiej, a rynek to potwierdza: według statystyk W3Techs dotyczących SVG format ten jest używany przez 66,8% wszystkich witryn (lipiec 2026). Przyczyny są praktyczne. Wektor nie traci ostrości ani na ekranach retina, ani przy dowolnym skalowaniu. Plik z całą ilustracją waży mniej niż jeden rastrowy logotyp. A każdy element wewnątrz SVG, linię, płatek, kropkę, można animować osobno przez CSS.

Publiczność w temacie jest ogromna: sam Elementor, według danych z katalogu WordPress.org, stoi na 10 milionach witryn, a WordPress ogółem działa na 41,5% wszystkich stron internetu (licznik W3Techs, lipiec 2026). Innymi słowy, miliony stron używają tych samych standardowych fal. Wyróżnić się nie jest trudno, a dalej pokażemy jak.

Galeria: sześć stylów separatorów SVG z przykładami

Wszystkie separatory poniżej narysowaliśmy specjalnie na potrzeby tego artykułu i załadowaliśmy do biblioteki mediów jako zwykłe pliki SVG. Paleta jest neutralna, niebieski ze złotym akcentem, każdy styl jest podpisany zgodnie z przeznaczeniem. Proszę używać ich jako referencji podczas wyboru własnego stylu lub zabrać kod dla siebie: jak wstawić SVG na stronę bez wtyczki, omówimy w dalszej części.

Fala

Najbardziej uniwersalny styl. Podwójna linia o różnej przezroczystości tworzy głębię, a kropki w centrum dają oku punkt zaczepienia. Pasuje niemal wszędzie: blogi, landingi usług, portfolio.

Klasyczny ornament

Linia z zawijasami i rombem pośrodku, chwyt wprost z drukowanego składu. Taki separator domaga się typografii szeryfowej: usługi prawne, restauracje haute cuisine, strony ślubne, wydawnictwa.

Motyw botaniczny

Liście i jagody na cienkiej osi. Styl do wszystkiego, co „naturalne i ręczne": ekoprodukty, kosmetyki, studia jogi, produkty farmerskie, rękodzieło.

Geometria z rombów

Łańcuszek rombów malejącego rozmiaru. Surowa opcja bez ani jednej krzywej linii, która nie kłóci się z siatką layoutu: strony korporacyjne, SaaS, finanse, blogi technologiczne.

Podwójna linia z medalionem

Najbliższy krewny wbudowanego widżetu Divider, ale zauważalnie bardziej elegancki: podwójna linia o różnej grubości i okrągły medalion z gwiazdą. Dobry jako finalny separator przed stopką lub podpisem autora.

Linia przerywana z iskrami

Linia przerywana i rozsypane czteroramienne iskry. Najbardziej „nastrojowy" styl: promocje świąteczne, produkty dla dzieci, portfolio kreatywne, landingi noworoczne.

Co potrafi Elementor od razu po instalacji

Zanim zainstaluje Pan/Pani wtyczki, warto wycisnąć maksimum z wbudowanych funkcji. Elementor ma dwa standardowe narzędzia i pokrywają one podstawowe scenariusze.

Shape Divider znajduje się w ustawieniach sekcji (zakładka Style). To ozdobna krawędź między sekcjami: fala, skos, górka, chmury, zygzak, łącznie kilkanaście kształtów z możliwością ustawienia koloru, wysokości i odbicia lustrzanego, część obsługuje warstwy. Szczegóły w poradniku Elementora o Shape Divider. Zasadnicze ograniczenie: jest to kształt krawędzi sekcji, a nie osobny element dekoracyjny, i nie ma animacji odsłaniania.

Widżet Divider wstawia się między blokami treści: prosta linia, ustawienia grubości i koloru, opcjonalnie ikona lub tekst na środku. Uczciwe, solidne minimum. Linia jest jednak zawsze prosta, ikony tylko ze standardowych zestawów, brak animacji.

Wniosek jest prosty: do surowego, korporacyjnego układu wbudowane narzędzia wystarczą. Do ornamentów, ręcznie rysowanej grafiki i animacji potrzebna jest albo wtyczka, albo własna praca. Zacznijmy od wtyczki.

Wtyczka SVG Divider for Elementor: 90 ręcznie rysowanych separatorów

SVG Divider for Elementor od studia Let's WP dodaje osobny widżet z dwoma trybami. Sądząc po zapowiedzi na blogu Let's WP, zestaw zawiera 90 ręcznie rysowanych wzorów i tryb klasyczny z liniami i ikonami, w tym ponad 300 ikon z własnego zestawu oraz ekskluzywne serie tematyczne dla stron turystycznych i restauracji.

Tryb Drawn, to sedno wtyczki: ornamentalne ilustracje z animacją odsłaniania, gdzie każdy płatek i zawijas ma własny timing. Wszystkie animacje są napisane w czystym CSS, bez zewnętrznych bibliotek, na stronę ładowane są tylko faktycznie używane style. Opcjonalna warstwa brokatu dodaje na rysunku nieskończone migotanie.

Tryb Classic powiela ideę standardowego widżetu Divider, ale jest bardziej elastyczny: linie podwójne i przerywane z regulacją odstępu suwakiem, ikona z lewej, na środku lub z prawej, integracja z przyciskiem Elementora.

Wybór wzoru odbywa się przez własny pop-up picker z wyszukiwaniem na żywo: siatka 90 miniatur, animacja uruchamia się po najechaniu myszą, przełączanie między wariantami zajmuje kilka sekund. Pod względem wagi wtyczka jest lekka: inline SVG to zaledwie kilka kilobajtów, z zależności tylko jQuery, który i tak jest ładowany przez rdzeń WordPressa.

Teraz uczciwa część. Wtyczka jest sprzedawana na stronie wtyczki na CodeCanyon na standardowej licencji na jedną stronę, wymaga Elementora 2.8+ i nie była zauważalnie aktualizowana od 2020 roku. Jej architektura jest prosta, praktycznie nie ma się co zepsuć, ale zakup produktu bez aktywnego wsparcia pozostaje ryzykiem, które każdy ocenia sam. Przed płatnością proszę sprawdzić demo na aktualnej wersji Elementora.

Jak wstawić własny separator SVG bez wtyczki

Każdy separator z naszej galerii, jak i każdy inny plik SVG, można wstawić na stronę za darmo w trzech krokach. Sposób działa w Elementorze, Gutenbergu i ogólnie w każdym kreatorze z blokiem HTML.

Krok pierwszy: proszę wziąć kod SVG. Oto skrócona wersja naszej fali, proszę skopiować bezpośrednio stąd i zmienić kolory na własne, firmowe:

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>

Krok drugi: w Elementorze proszę przeciągnąć widżet HTML w wybrane miejsce i wkleić kod. Inline SVG renderuje się natychmiast, nie generuje żądań HTTP i dziedziczy skalowanie kontenera. Składnia ścieżek i kształtów jest dobrze opisana w dokumentacji MDN o SVG.

Trzeci krok, jeśli wygodniej pracuje się Pan/Pani przez bibliotekę mediów: proszę wziąć pod uwagę, że WordPress domyślnie zabrania przesyłania plików SVG. To nie fanaberia, a kwestia bezpieczeństwa: wewnątrz SVG może znajdować się wykonywalny skrypt, dlatego plik przed publikacją trzeba sanityzować. Zadanie rozwiązuje bezpłatna wtyczka Safe SVG: oczyszcza ona pliki podczas przesyłania, po czym SVG wstawia się zwykłym widżetem Image.

Zasada bezpieczeństwa jest jedna: nie przesyła Pan/Pani na stronę plików SVG z niesprawdzonych źródeł bez sanityzacji. Własny kod i pliki z tego artykułu są czyste konstrukcyjnie, znajdują się tam wyłącznie ścieżki i figury.

Porównanie: którą metodę wybrać

Kilka słów o wierszu ze środka tabeli: Shape Dividers Plus rozszerza wbudowany Shape Divider o nowe style krawędzi (pędzel, geometria, papier), działa w natywnym interfejsie i jest aktualizowany, świeże wydanie datowane jest na luty 2026 roku. Podobny moduł Animated Shape Divider z obsługą własnych SVG ma również Premium Addons. Jeśli potrzebują Państwo właśnie kształtnej krawędzi sekcji, proszę zacząć od tych opcji, a nie od płatnego artu.

⁉️🤔 Często zadawane pytania

Czy wtyczka SVG Divider działa bez Elementora?

Nie. To addon, który dodaje widżet do panelu Elementora i bez niego nie funkcjonuje, nie istnieje wersja standalone. Minimalne wymaganie, Elementor 2.8+, podane jest na CodeCanyon. Dla stron bez Elementora proszę użyć wstawki własnego kodu SVG przez blok HTML.

Czy separatory SVG spowalniają stronę?

Praktycznie nie. Wektor inline renderuje się bez dodatkowych zapytań HTTP, a waga separatora mierzona jest w kilobajtach, co potwierdza analiza autora wtyczki. Animacje CSS korzystają ze sprzętowego przyspieszenia przeglądarki. Jeden baner rastrowy jest zazwyczaj cięższy niż wszystkie separatory na stronie razem wzięte.

Dlaczego WordPress nie pozwala wgrać SVG do biblioteki mediów?

Ze względów bezpieczeństwa: SVG to dokument XML, wewnątrz którego można osadzić skrypt. Rdzeń domyślnie blokuje takie przesyłanie. Rozwiązanie: wtyczka Safe SVG z oficjalnego katalogu: sanityzuje pliki podczas przesyłania i udostępnia podgląd w bibliotece mediów.

Czy można używać separatorów z Państwa galerii u siebie?

Tak, swobodnie. Narysowaliśmy je specjalnie na potrzeby tego artykułu: proszę zapisać plik SVG z galerii lub skopiować przykładowy kod z sekcji o wstawce bez wtyczki i zmienić kolory pod własną paletę. Atrybucja nie jest wymagana, nie ma ograniczeń licencyjnych.

Wtyczka nie była aktualizowana od kilku lat, czy warto ją kupić?

Proszę rozważyć ryzyko. Architektura jest prosta, czysty CSS plus API Elementora, dlatego wtyczka nadal działa na aktualnych wersjach. Ale nie ma aktywnego wsparcia i jeśli kolejna aktualizacja Elementora coś zepsuje, nie będzie miał kto tego naprawić. Proszę sprawdzić demo przed zakupem i mieć plan awaryjny w postaci własnego kodu SVG.

Czym Shape Divider różni się od widżetu Divider?

To różne narzędzia Elementora. Shape Divider nadaje kształtną krawędź całej sekcji (fala, nachylenie, chmury) i konfiguruje się go w stylach sekcji. Widżet Divider wstawia poziomą linię między blokami treści, opcjonalnie z ikoną. Pierwszy dotyczy geometrii layoutu, drugi, pauzy wewnątrz kolumny tekstu.

💎 Podsumowanie i wnioski

Ładne separatory to tani upgrade wizualny, dostępny przy każdym budżecie. Recepta według scenariuszy: do podstawowej geometrii sekcji wystarczy wbudowany Shape Divider lub bezpłatny Shape Dividers Plus. Do rysunkowego artu z animacją odsłaniania jest SVG Divider for Elementor, ale proszę go kupować z uwagą na zamrożone aktualizacje. A maksimum elastyczności daje własny kod SVG przez widżet HTML: bezpłatnie, bez zależności i z pełną kontrolą nad każdą linią.

Praktyczny lifehack: proszę wybrać jeden styl separatora i stosować go na całej stronie. Trzy różne ornamenty na jednej podstronie wyglądają gorzej niż ich brak, a jeden powtarzalny styl działa jak element identyfikacji wizualnej.

Proszę pobrać separator, który się spodobał, z galerii, zmienić kolory pod własną markę i napisać w komentarzach, który z sześciu stylów wybraliby Państwo dla siebie: falę, ornament czy iskry?