Elementor to najpopularniejszy page builder dla WordPressa. Pozwala budować strony wizualnie, drag and drop, bez pisania HTML, CSS ani PHP. Pracuje na ponad 16 milionach aktywnych stron. Widzisz, jak strona wygląda na żywo (WYSIWYG), przeciągasz elementy (nagłówek, tekst, obrazek, przycisk, kolumny, formularz), edytujesz styl (kolory, fonty, marginesy), publikujesz. Darmowa wersja daje podstawy, Pro za 59 dolarów rocznie odblokowuje pełnię.
Elementor vs Gutenberg, jedna istotna różnica
| Cecha | Elementor | Gutenberg |
|---|---|---|
| Typ | Page builder (wtyczka) | Wbudowany edytor blokowy |
| Edycja wizualna | Pełna (frontend, WYSIWYG) | Częściowa (backend, podgląd) |
| Drag and drop | Zaawansowany (pixel-perfect) | Podstawowy (bloki) |
| Gotowe szablony | 300+ (Free i Pro) | Patterns (mniej) |
| Widgety | 100+ (formularz, slider, animacje, tabele cen) | ~60 bloków (prostsze) |
| Szybkość strony | Cięższy (CSS/JS ~300–500 KB extra) | Lżejszy (natywny) |
| Zależność od wtyczki | Usunięcie Elementora = utrata layoutu | Zero zależności (wbudowany) |
| Cena | Free / Pro 59 USD/rok | Darmowy |
| Najlepszy do | Custom design, landing page, portfolio | Blog, prosta strona, treść |
Elementor wybierasz, kiedy potrzebujesz pixel-perfect designu, niestandardowego layoutu, landing page z animacjami, portfolio i nie umiesz albo nie chcesz kodować. Gutenberg, kiedy piszesz bloga, budujesz prostą stronę firmową, zależy ci na szybkości i niezależności od wtyczek.
Jak zacząć
- wp-admin, Wtyczki, Dodaj nową, wpisz „Elementor”, Zainstaluj, Aktywuj.
- Strony, Dodaj nową, klikasz niebieski przycisk „Edytuj z Elementorem”.
- Otwiera się edytor wizualny. Po lewej widgety, po prawej podgląd na żywo.
- Przeciągasz widget (Heading, Image, Button) na stronę i edytujesz w panelu.
- „Opublikuj” i strona jest live.
Struktura: sekcje, kolumny, widgety
Każda strona ma trzy poziomy.
Sekcja (Section). Pełnoszerokościowy kontener (jak „row” w Bootstrapie). Sterujesz tłem (kolor, obrazek, gradient, wideo), paddingiem, marginesem, wysokością. Może być pełną szerokością (full width) albo w kontenerze (boxed).
Kolumna (Column). Podział sekcji na kolumny (1, 2, 3, 4, 6, dowolna proporcja). Szerokość w procentach, wyrównanie, padding, tło per kolumna. Responsywność: 3 kolumny na desktopie zwijają się do 1 na mobile, Elementor robi to automatycznie, ale możesz to ręcznie ustawić.
Widget. Element treści wewnątrz kolumny: Heading, Text Editor, Image, Button, Icon, Video, Spacer, Divider, Icon Box, Image Box, Testimonial, Tabs, Accordion, Toggle, Social Icons, Star Rating, Progress Bar, Counter. W darmowej wersji jakieś 60, w Pro 100+.
Free vs Pro
| Funkcja | Free | Pro (59 USD/rok) |
|---|---|---|
| Widgety | ~40 podstawowych | 100+ (formularz, slider, galeria, ceny, lottie) |
| Szablony | ~30 darmowych | 300+ profesjonalnych |
| Theme Builder | Nie | Tak (header, footer, single, archiwum) |
| WooCommerce Builder | Nie | Tak (custom layout produktu, koszyka, checkout) |
| Popup Builder | Nie | Tak |
| Formularz kontaktowy | Nie (potrzebujesz WPForms/CF7) | Tak (wbudowany) |
| Dynamic Content | Nie | Tak (ACF, CPT, dynamic tags) |
| Custom CSS per widget | Nie | Tak |
| Global Widgets | Nie | Tak (zmiana w jednym = zmiana wszędzie) |
| Scroll Effects, Motion | Podstawowe | Zaawansowane (parallax, mouse, sticky) |
Darmowa wersja wystarcza do prostej strony firmowej (5 podstron), landing page, portfolio. Pro wchodzi do gry, kiedy potrzebujesz Theme Buildera (custom header i footer), wbudowanych formularzy, popupów, WooCommerce z własnym layoutem albo zaawansowanych animacji.
Elementor a Core Web Vitals
Tu siedzi największa wada Elementora. Dorzuca 300-500 KB CSS i JS do każdej strony, nawet jeśli widget nie jest na niej użyty. Skutek: wolniejszy TTFB, wyższy INP (bo dużo JS-a do przetworzenia), potencjalnie gorsza pozycja w Google.
Jak to złagodzić. Elementor, Ustawienia, Wydajność (Performance), włącz „Improved Asset Loading” (ładuje CSS/JS tylko widgetów faktycznie użytych), „Optimized DOM Output” (czystszy HTML), „Lazy Load Background Images”. Te trzy opcje obcinają wygenerowany kod o 30-50%.
Drugie podejście: cache strony (LiteSpeed Cache albo WP Rocket). Cache eliminuje większość problemu, bo serwer zwraca gotowy HTML z dysku, zamiast generować go za każdym razem.
Trzecia rzecz, której sam się trzymam: nie buduj wszystkiego w Elementorze. Posty blogowe pisz w Gutenbergu, jest lżejszy. Elementor zachowaj na strony statyczne (główna, o nas, oferta, landing). Blog post w Elementorze to zbędne 300 KB CSS na każdym wpisie.
Szablony
Elementor ma bibliotekę gotowych szablonów: kompletne strony i sekcje do wstawienia jednym klikiem. W edytorze klikasz ikonę folderu, „Templates”, przeglądasz, „Insert”, szablon ląduje na stronie i edytujesz treść.
Darmowych szablonów jest około 30 stron i 100 sekcji. Pro dorzuca 300+ profesjonalnych. Z zewnątrz dochodzą Starter Templates (od Astry, ponad 200 darmowych kompatybilnych z Elementorem), Envato Elements (1200+, subskrypcja) i TemplateMonster.
Theme Builder (Pro)
Pro pozwala zbudować cały motyw wizualnie. Nie tylko treść stron, ale też header, footer, layout pojedynczego wpisu, archiwum, 404, wyszukiwanie. Eliminuje potrzebę child theme i grzebania w PHP.
Elementor, Templates, Theme Builder, Add New, typ (Header, Footer, Single, Archive), budujesz wizualnie, ustawiasz warunki wyświetlania („ten header na całej stronie”, „ten single template tylko dla kategorii Blog”).
Alternatywy
| Builder | Cena | Najlepszy do |
|---|---|---|
| Elementor | $0 / $59/rok | Uniwersalny, największa społeczność |
| Divi (Elegant Themes) | $89/rok (lifetime $249) | All-in-one (builder plus motyw), lifetime license |
| Beaver Builder | $99/rok | Stabilność, czysty kod, agencje |
| Bricks Builder | $99/rok (lifetime $249) | Wydajność (najlżejszy output), developerzy |
| Breakdance | $0 / $149/rok | Nowoczesna alternatywa Elementora, lżejszy |
| Gutenberg (natywny) | $0 (wbudowany) | Blog, prostota, zero zależności, najlżejszy |
Priorytet to szybkość: Bricks Builder albo Gutenberg (najlżejszy output). Priorytet to design freedom i wielka społeczność: Elementor. Lifetime license: Divi albo Bricks. Bez page buildera: Gutenberg plus motyw blokowy. To kierunek, w którym idzie WordPress, ale wdrożenie jest wolniejsze.
Najczęściej zadawane pytania
Czy Elementor spowalnia stronę
Tak. Dorzuca 300-500 KB CSS i JS. Z page cache (LiteSpeed albo WP Rocket) i włączonymi opcjami w Performance: wpływ jest akceptowalny. Z cache TTFB schodzi do 100-200 ms, bez cache potrafi być 500-1000 ms. Cache rozwiązuje większość problemów wydajnościowych Elementora.
Co się stanie po usunięciu Elementora
Stracisz layout. Strony zbudowane w Elementorze pokażą surowy tekst bez formatowania (shortcody zamiast wizualnej strony). Treść (tekst, obrazki) zostaje w bazie, ale layout przepada. Dlatego Elementor to commitment, instalujesz go na stałe, nie tymczasowo.
Czy Free wystarczy
Do prostej strony firmowej (5 podstron plus formularz z WPForms albo CF7): tak. Do custom headera/footera, popupów, wbudowanych formularzy, WooCommerce buildera i zaawansowanych animacji: nie. Wtedy potrzebujesz Pro. 59 dolarów rocznie za jedną stronę to jednak mniej niż godzina freelancera.
Czy mogę użyć Elementora z dowolnym motywem
Tak, działa z każdym motywem WordPressa. Niektóre są lepiej zoptymalizowane (Astra, GeneratePress, OceanWP, Hello Elementor). Hello Elementor (darmowy, od twórców Elementora) to najlżejszy motyw, praktycznie pusta kanwa pod budowanie w Elementorze. Sam tak stawiam strony, kiedy chcę uniknąć konfliktu styli motywu z buildersem.
Jak przenieść stronę z Elementora na Gutenberg
Nie ma automatycznej migracji. Każdą stronę przebudowujesz ręcznie w Gutenbergu. To jeden z problemów vendor lock-in Elementora. Jeśli planujesz przejście, zaczynaj nowe strony w Gutenbergu i stopniowo przebudowuj stare. Skok hurtowy zwykle ląduje w szufladzie.
