Elementor to najpopularniejszy page builder (kreator stron) dla WordPress – pozwala budować strony wizualnie, metodą drag & drop, bez pisania kodu HTML, CSS czy PHP. Ponad 16 milionów aktywnych stron. Widzisz na żywo jak strona wygląda (WYSIWYG), przeciągasz elementy (nagłówek, tekst, obrazek, przycisk, kolumny, formularz), edytujesz stylem (kolory, czcionki, marginesy) – i publikujesz. Darmowa wersja daje podstawy, Pro ($59/rok) daje pełnię możliwości.
Elementor vs Gutenberg – kluczowa różnica
| Cecha | Elementor | Gutenberg |
|---|---|---|
| Typ | Page builder (wtyczka) | Wbudowany edytor blokowy |
| Edycja wizualna | Pełna (frontend, WYSIWYG) | Częściowa (backend, podgląd) |
| Drag & drop | Zaawansowany (pixel-perfect) | Podstawowy (bloki) |
| Gotowe szablony | 300+ (darmowe i Pro) | Patterns (mniej) |
| Widgety/elementy | 100+ (formularz, slider, animacje, tabele cen) | ~60 bloków (prostsze) |
| Szybkość strony | Cięższy (dodatkowy CSS/JS ~300–500 KB) | Lżejszy (natywny) |
| Zależność od wtyczki | Usunięcie Elementor = utrata layoutu | Zero zależności (wbudowany) |
| Cena | Darmowy / Pro $59/rok | Darmowy (w WordPress) |
| Najlepszy do | Custom design, landing page, portfolio | Blog, prosta strona, treść |
Elementor gdy: potrzebujesz pixel-perfect designu, niestandardowego layoutu, landing page z animacjami, strony portfolio – i nie umiesz kodować. Gutenberg gdy: piszesz bloga, budujesz prostą stronę firmową, zależy Ci na szybkości (lżejszy kod) i niezależności od wtyczki.
Jak zacząć z Elementorem
- wp-admin → Wtyczki → Dodaj nową → „Elementor” → Zainstaluj → Aktywuj.
- Utwórz nową stronę: Strony → Dodaj nową → kliknij „Edytuj z Elementorem” (przycisk niebieski).
- Otwiera się edytor wizualny: po lewej panel z widgetami, po prawej podgląd strony na żywo.
- Przeciągnij widget (np. Heading, Image, Button) na stronę → edytuj treść i styl w panelu.
- Kliknij „Opublikuj” → strona gotowa.
Struktura Elementor – sekcje, kolumny, widgety
Każda strona w Elementorze składa się z 3 poziomów:
Sekcja (Section) – pełnoszerokosc kontener (jak „wiersz” w Bootstrap). Kontrolujesz: tło (kolor, obrazek, gradient, wideo), padding, margin, wysokość. Sekcja może być: pełna szerokość (full width) lub w kontenerze (boxed).
Kolumna (Column) – podział sekcji na kolumny (1, 2, 3, 4, 6… dowolna proporcja). Kontrolujesz: szerokość (%), wyrównanie, padding, tło per kolumna. Responsywność: na desktop 3 kolumny → na mobile 1 (Elementor robi to automatycznie, ale możesz dostosować).
Widget – element treści wewnątrz kolumny. Heading (nagłówek), Text Editor (tekst WYSIWYG), Image, Button, Icon, Video, Spacer, Divider, Icon Box, Image Box, Testimonial, Tabs, Accordion, Toggle, Social Icons, Star Rating, Progress Bar, Counter – i ~60 więcej w darmowej wersji, ~100+ w Pro.
Elementor Free vs Pro
| Funkcja | Free | Pro ($59/rok) |
|---|---|---|
| Widgety | ~40 podstawowych | 100+ (formularz, slider, galeria, ceny, portfolio, lottie) |
| Szablony | ~30 darmowych | 300+ profesjonalnych |
| Theme Builder | Nie | Tak (edycja nagłówka, stopki, single post, 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 effects, sticky) |
Darmowa wersja wystarczy do: prostej strony firmowej (5 podstron), landing page, portfolio. Pro potrzebujesz do: custom nagłówek/stopka (Theme Builder), formularz kontaktowy wbudowany, popup, sklep WooCommerce z custom layoutem, zaawansowane animacje.
Elementor a szybkość strony (Core Web Vitals)
To największa wada Elementora: dodaje 300–500 KB CSS/JS do każdej strony (nawet jeśli widget nie jest użyty na tej stronie). Efekt: wolniejsze TTFB, wyższy INP (bo dużo JS do przetworzenia), potencjalnie gorsze pozycje w Google.
Jak złagodzić:
Elementor → Ustawienia → Wydajność (Performance) → włącz: „Improved Asset Loading” (ładuje CSS/JS tylko użytych widgetów, nie wszystkich), „Optimized DOM Output” (czystszy HTML), „Lazy Load Background Images”. Te opcje zmniejszają wygenerowany kod o 30–50%.
LiteSpeed Cache lub WP Rocket – minifikacja + concat CSS/JS + page cache. Cache eliminuje problem „ciężkiego” Elementora – bo serwer zwraca gotowy HTML z cache, nie generuje go za każdym razem.
Nie buduj WSZYSTKIEGO w Elementorze. Posty blogowe: pisz w Gutenbergu (lżejszy). Elementor: do stron statycznych (główna, o nas, oferta, landing page). Blog posts w Elementorze = zbędne 300 KB CSS na każdym wpisie.
Szablony – szybki start
Elementor ma bibliotekę gotowych szablonów – kompletne strony i sekcje do importu jednym kliknięciem. W edytorze: kliknij ikonę folderu (📁) → „Templates” → przeglądaj → „Insert” → szablon wstawiony na stronę → edytuj treść.
Darmowe szablony: ~30 stron + ~100 sekcji. Pro: 300+ profesjonalnych. Zewnętrzne: Starter Templates (wtyczka od Astra – 200+ darmowych, kompatybilnych z Elementor), Envato Elements (1200+ szablonów, subskrypcja), TemplateMonster.
Theme Builder (Pro) – edycja nagłówka, stopki, single post
Elementor Pro pozwala budować cały motyw wizualnie – nie tylko treść stron, ale też: nagłówek (header), stopkę (footer), layout pojedynczego wpisu (single post template), archiwum (archive), stronę 404, stronę wyszukiwania. Eliminuje potrzebę child theme i kodowania PHP.
Elementor → Templates → Theme Builder → Add New → wybierz typ (Header / Footer / Single / Archive) → buduj wizualnie → ustaw warunki wyświetlania (np. „ten header na całej stronie”, „ten single template tylko dla kategorii Blog”).
Alternatywy Elementora
| Builder | Cena | Najlepszy do |
|---|---|---|
| Elementor | $0 / $59/rok | Uniwersalny, największa społeczność |
| Divi (Elegant Themes) | $89/rok (lifetime $249) | All-in-one (builder + 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 |
Jeśli szybkość jest priorytetem: Bricks Builder lub Gutenberg (lżejszy output). Jeśli design freedom + ogromna społeczność: Elementor. Lifetime license: Divi lub Bricks. Zero page buildera: Gutenberg + motyw blokowy = przyszłość WordPress (ale wolniejsze wdrożenie).
Najczęściej zadawane pytania
Czy Elementor spowalnia stronę?
Tak – dodaje 300–500 KB CSS/JS. Ale z page cache (LiteSpeed/WP Rocket) i ustawieniami Performance w Elementorze: wpływ jest akceptowalny. Strona z Elementorem + cache: TTFB ~100–200 ms. Bez cache: ~500–1000 ms. Cache rozwiązuje większość problemów wydajnościowych.
Co się stanie jak usunę Elementor?
Stracisz layout – strony zbudowane w Elementorze pokażą surowy tekst bez formatowania (shortcody Elementora zamiast wizualnej strony). Treść (tekst, obrazki) zostaje w bazie – ale layout przepada. Dlatego: Elementor to commitment – instalujesz na stałe, nie jako tymczasowe rozwiązanie.
Elementor Free wystarczy?
Do prostej strony firmowej (5 podstron + formularz z WPForms/CF7): tak. Do: custom nagłówka/stopki, popupów, formularzy wbudowanych, WooCommerce buildera, zaawansowanych animacji: nie – potrzebujesz Pro. Pro kosztuje $59/rok za 1 stronę – tańsze niż godzina freelancera.
Czy mogę używać Elementora z dowolnym motywem?
Tak – Elementor działa z każdym motywem WordPress. Ale: niektóre motywy są zoptymalizowane pod Elementor (Astra, GeneratePress, OceanWP, Hello Elementor). Hello Elementor (darmowy, od twórców Elementora) to najlżejszy motyw – praktycznie pusta kanwa, wszystko budujesz w Elementorze.
Jak przenieść stronę z Elementora na Gutenberg?
Nie ma automatycznej migracji – musisz przebudować każdą stronę ręcznie w Gutenbergu. To jeden z problemów vendor lock-in Elementora. Jeśli planujesz przejście: zacznij od nowych stron w Gutenbergu, stare przebudowuj stopniowo.
