Jeszcze słowo o tym dlaczego napisałem ten artykuł. Wyobraź sobie, że chcąc w polskim necie znaleźć jakieś sensowne porównanie wiodących kreatorów stron znalazłem… no właśnie, nic! Nie ma ani jednego artykułu po polsku na ten temat, a to co jest jest porównaniem raczej kreatorów i szablonów online’owych typu Wix, Weebly, czy Squarespace. Ani słowa jednak o kreatorach do WordPress’a. Oto zatem jest – pierwszy ‘in Polish’ artykuł porównawczy.

A zatem od początku: co to w ogóle jest kreator stron? Jest to specjalna wtyczka do systemu zarządzania treścią (tutaj WordPress), która pozwala na tworzenie treści w sposób wizualny, na frontendzie (czyli nie w panelu administracyjnym, a na finalnej stronie jaką widzi użytkownik) przy pomocy różnej maści modułów. Kreatory stron, niezależnie co myślą o nich konserwatywni deweloperzy, są przyszłością w dziedzinie tworzenia stron www, od kilku lat kształtując krajobraz narzędzi do tego wykorzystywanych. Dzięki nim każdy z odrobiną smykałki technicznej jest w stanie stworzyć rozbudowaną stronę w kilka dni, a może i godzin. Nawet agencje interaktywne (w tym nasza) korzystają z kreatorów stron – głównie z dwóch powodów: tworzenie nowych stron jest łatwiejsze i szybsze oraz późniejsza edycja jest dużo przyjaźniejsza po oddaniu strony Klientowi.

Jak zatem zamierzamy podejść do tej recenzji? Poza podaniem podstawowych faktów o każdym z narzędzi, będziemy chcieli zajrzeć nieco pod maskę i ocenić takie cechy jak zaawansowane funkcje styli, funkcje dotyczące responsywności, jakość kodu, faktyczna wydajność, łatwość użytkowania, wyjątkowe funkcje i więcej. Pod koniec lektury mam nadzieję, że będziesz mieć dogłębne rozumienie każdej wtyczki i, co najważniejsze, poczucie pewności przy wyborze właściwego narzędzia dla siebie.

Spis treści

Wstęp | Popularność, historia | Łatwość użytkowania, interfejs i funckje | Dostępne moduły (Free/Pro) | Jak daleko można pójść z dodatkową stylizacją | Wyjątkowe funkcje | Responsywność | Szablony – jakie i ile oferuje każdy kreator | Wydajność – czas ładowania strony | Deaktywacja – jakość kodu | Ceny | Za co bym (nie)wybrał danego kreatora | Podsumowanie końcowe

Wstęp: Divi vs. Beaver Builder vs. Elementor

Zanim zarzucimy Cię masą szczegółów, obrazów, GIFów, tabel porównawczych, pomyśleliśmy, że na początek warto przedstawić proste zestawienie najważniejszych cech porównawczych wszystkich trzech narzędzi. Jeśli zatem chcesz podstawowe info, rzuć okiem na poniższą tabelę. A jeśli chcesz więcej, to zanurz się w dalsze, ~9000 słów szczegółów.

Który kreator stron jest najpopularniejszy?

To może nie jest najlepszy sposób na ocenę jakości, a popularność zależy od wielu czynników (np. cena, czy czas obecności na rynku). Poza tym poniższe dane nie są do końca reprezentatywne – Beaver Builder i Elementor posiadają darmową wersję i dane oznaczają ilość pobrań z WordPress.org, zaś Divi publikuje dane na swojej stronie. Ale oto one w podsumowaniu:

Co ciekawe, Divi jest jednym z pierwszych w ogóle kreatorów stron z pierwszą wersją datowaną na 2013 rok! Beaver Builder przyszedł do nas w 2014, a Elementor najpóźniej, bo w 2016 roku. Ten ostatni zatem musi robić coś dobrze, bo zdecydowanie zdobył najwięcej użytkowników w najkrótszym czasie. Oczywiście trzeba wziąć pod uwagę, że Divi nie posiada darmowej wersji i podane ilości dotyczą wersji płatnej, zaś dwa pozostałe kreatory dotyczą wersji darmowej. Niemniej zestawienie to warto mieć z tyłu głowy czytając dalszy opis.

Łatwość użytkowania, interfejs i funkcje

Ta część będzie poświęcona najważniejszej rzeczy, czyli który kreator co potrafi i jak się tego używa. Jest najobszerniejsza – zawiera sporo zrzutów ekranu i GIFów oraz masę opisów, niekiedy szczegółowych.

A zatem…

Na początek wszystkie kreatory są wtyczkami i instaluje się je jak każdą inną wtyczkę (wersje darmowe do pobrania z repozytorium, wersje Pro do wgrania jako plik ZIP). Po uruchomieniu każda z nich ma osobny panel ustawień, jednakże żaden kreator nie wymaga żadnego początkowego konfigurowania.

Ustawienia

Divi

Sekcja ustawień Divi jest raczej uboga – sprowadza się do ekranu wpisu kluczy API, integracji Google Maps, wybraniu typu postów do edycji oraz – co akurat mi się bardzo podoba – podstawowych ustawieniach optymalizacyjnych takich jak minimifikacja i łączenie plików CSS i JS oraz generowanie statycznego CSSa. Fajne opcje, normalnie dostępne w każdej niemal wtyczce cache’ującej – tutaj w pakiecie. Oprócz tego jest sekcja ustawień zarządzania uprawnieniami gdzie można rozmienić na najdrobniejsze dostęp wg ról do poszczególnych funkcji – aż za dużo tego (jest ponad 60! ustawień). Żeby było śmiesznie, sekcja ta po polsku nazywa się… „Zaskocz Rolę Edytora” (WTF???). W ogóle tłumaczenie na polski całego interfejsu oceniam na 2/5 (jest bardzo słabo!).

Beaver Builder

Ustawienia Beaver Builder są nieco bardziej rozbudowane. Oprócz aktywacji licencji jest możliwość deaktywowania poszczególnych modułów (dla fanatyków wydajności), ustawienie rodzajów wpisów do edycji, zarządzanie prawami dostępu w podstawowej (wystarczającej) wersji, opcja włączania/wyłączania poszczególnych pakietów ikon oraz opcja czyszczenia cache’a wtyczki (czasami przydatne). Oprócz sekcji ustawień (Ustawienia > Beaver Builder) jest tworzone osobne menu Beaver Builder gdzie znajdziemy wszystkie szablony, zapisane moduły, wiersze i kolumny.

Elementor

Elementor ma najbardziej rozbudowany panel ustawień i menu. W ustawieniach definiujemy rodzaje wpisów do edycji, globalne parametry jak szerokość treści, szerokość na urządzenia mobilne, czy lightbox obrazków. Dalej jest dość obszerna sekcja integracji (jest 9, m.in. facebook, reCAPTCHA, MailChimp, czy GetResponse – wygodne) oraz – genialna sprawa – możliwość dodawania własnych fontów (w innych kreatorach niezbędna jest dodatkowa wtyczka – lub ręcznie). Dalej jest wyjątkowo uproszczony edytor uprawnień, niezwykle fajna opcja zmiany adresów w bazie (przydatna przy migracji lub wgraniu SSLa – normalnie do zrobienia zewnętrznym narzędziem), jest nawet przywrócenie poprzedniej wersji kreatora w przypadku problemów (wow – zdarzają się jakieś?), a nawet możliwość uruchomienia szablonu przerwy technicznej. Na koniec mamy dodatkowo podsumowanie informacji o systemie (fajny patent) i bezpośredni link do całej bazy wiedzy. Całość uzupełnia menu z dostępem do wszystkich szablonów, w tym do absolutnego bajeru Elementora, czyli możliwości tworzenia kreatorem zamkniętych do tej pory dla takiej edycji elementów, jak nagłówki, stopka, pojedyncze, czy archiwa (ale o tym później więcej). Taka opcja jest również w Beaver Builderze, ale za pomocą dodatkowego (płatnego) rozszerzenia – w Elementorze mamy to w cenie każdej wersji Pro.

Edytor, funkcjonalność, cechy, plusy i minusy

Divi

Divi Page Builder jako jedyny z trzech posiada backend’owy edytor (z poziomu panelu administracyjnego WordPress’a). Nie będziemy jednak się na nim skupiać, ani omawiać – w końcu artykuł jest o edytorach wizualnych.

Edycję strony w Divi uruchamiamy z poziomu edytora strony naciskając duży przycisk ‘Użyj kreatora graficznego’. Trochę szkoda, że nie ma linku do edycji przy każdej stronie na ich liście (jak w Beaver Builder lub Elementor) – tutaj trzeba wejść w konkretną stronę i dopiero można uruchomić edytora. Oczywiście jest przycisk na belce administracyjnej uruchomienia kreatora – jak w każdym z narzędzi.

Interfejs Divi znacząco różni się od pozostałych dwóch – zamiast wyraźnego oddzielenia sekcji modułów w formie bocznego panelu Divi raczej wszystkie kontrolki umieszcza bezpośrednio na edytowanym obszarze, a dodawania nowych modułów polega na klikaniu przycisku z plusikiem.

Na początek, przy pierwszej edycji nowej strony otwiera nam się panel z wyborem, czy chcemy budować stronę od zera, wgrać szablon, czy skopiować inną istniejącą stronę. Od razu uwaga – brak języka polskiego (prawie).

Wybierając tworzenie od zera (pierwsza opcja) ukazuje nam się pusta strona i typowe dla Divi kolorowe guziczki (plusiki), którymi dodajemy elementy (sekcje, wiersze, moduły). Po dodaniu jakiegokolwiek elementu pojawia się panel edycji modułu.

Na minus jak dla mnie jest konieczność zdefiniowania struktury kolumn w danym wierzy najpierw, a dopiero potem można w kolumnach umieszczać moduły. Fatalne jest też to, że nie można ustawić szerokości poszczególnych kolumn (!) – jest tylko do wyboru określony predefiniowany układ i już (chyba, że ręcznie CSSem). Dodatkowo nie widać w żaden sposób granic sekcji, wierszy i kolumn, co bardzo utrudnia sprawne poruszanie się po całym obszarze roboczym. Zapomnijcie o wygodnym skalowaniu kolumn, kolumnach zagnieżdżonych (kolumna w kolumnie), czy zapisywaniu kolumn.

Po otwarciu okna ustawień poszczególnego modułu można zobaczyć, że jest on podzielony na 3 zakładki: Zawartość, Design i Zaawansowane. Można zauważyć, że opcji ustawień jest bardzo dużo (oczywiście w zależności od modułu). Jednak sposób ich ułożenia, wrzucenia dużej ilości elementów graficznych do ustawień powoduje brak przejrzystości i trudność w ogarnięciu co jest gdzie (zapewne po dłuższym użytkowaniu można się przyzwyczaić – ale na pewno mogliby lepiej dopracować UX).

Z fajnych opcji jest m.in. możliwość dopisania niestandardowego CSSa wprost w ustawieniach modułu, nawet dla sekcji :before i :after. Choć ja osobiście wolę pisać CSSa w jednym zbiorczym miejscu, bo łatwiej to potem edytować, niż musieć wchodzić w kreatora strony, edytować poszczególny moduł i tam poprawiać style. Także opcja może i fajna, ale moim zdaniem niekoniecznie praktyczna. Jak we wszystkich kreatorach jest możliwość edycji tekstu bezpośrednio na stronie, bez konieczności odpalania ustawień modułu (inline editing).

Jest kontrola widoczności ze względu na urządzenie (choć mega uboga), brak jednak kontroli wyświetlania (ze względu na status użytkownika – zalogowany/niezalogowany). Jest możliwość dodania animacji do elementu (7 do wyboru), a nawet jest rozbudowana sekcja ustawień filtrów (choć to chyba mega rzadko używane). Duży minus znowu dla tłumaczenia – jak widać poniżej w ustawieniach przycisku mamy ustawienie pt. ‘Przycisk ikona noclegów’ (???), są nie do końca zrozumiałe ustawienia (‘Przycisk umieszczeniu kolor tekstu’), a polangielski to tu standard (‘Show Przycisk Icon’, Zawartość – Design – Zaawansowane, czy ‘Czcionka Przycisk – Default’). Ostatnie na plus – jest (jak wszędzie co prawda) widok responsywny: wystarczy kliknąć ikonę telefonu lub tabletu aby strona przełączyła się na odpowiedni widok, w którym możemy dalej edytować stronę. Niektóre ustawienia mają opcję responsywną, czyli po kliknięciu przy nich ikony telefonu widok strony się zwęża i można definiować osobne ustawienia dla każdej z trzech szerokości urządzeń.

Duży plus dla Divi za podręczne menu pod prawym przyciskiem, które jest dostępne dla modułów, wierszy i sekcji. Wygląda ono tak:

Można z tego poziomu zrobić kilka użytecznych rzeczy. Można zapisać w bibliotece do wykorzystania gdzie indziej (w tym zapisać jako globalny), można wyłączyć w zależności od wielkości urządzenia, można uruchomić testy A/B dla tego modułu (o tym trochę później), można dany moduł lub sekcję zablokować do edycji, można moduły kopiować i wklejać gdzie indziej oraz – super ekstra sprawa – można kopiować i wklejać style modułu. Jeśli zrobiliście ileś podobnych modułów w jednej sekcji, a potem chcecie jednak coś zmienić, wystarczy zmienić w jednym, a potem po prosty zrobić kopiowanie styli i wkleić same style do pozostałym modułów. Tona czasu oszczędności.
Na koniec dwie dość ważne opcje, a mianowicie auto-zapis i historia. Jeśli wprowadziliście jakieś zmiany, a nagle wam się przeglądarka lub komputer zawiesiły, czy odcięli prąd – wasze zmiany zostaną odtworzone. Także można spać spokojnie. A po drugie historia. Super sprawa. Pozwala cofnąć dowolną ilość wprowadzonych zmian, a nawet przywrócić cofnięte – czyli takie typowe undo/redo. Ekstra sprawa. Duży plus.
Jak dla mnie interfejs, ilość/jakość opcji i sposób obsługi to 3,5/5. Jest nieźle i na pewno Divi nie ma się czego wstydzić – choć mnie wiele rzeczy nie pasowało i nie chciałbym z niego korzystać na co dzień. Ale nie jest fajne to co jest fajne, tylko co się komu podoba. Kwestia preferencji. Tysiące użytkowników nie mogą się mylić, nie…?

Beaver Builder

Od razu przyznam się, że Beaver’a używam od prawie dwóch lat. Widziałem zatem jak się zmienia i mogłem go poznać dość dobrze i dogłębnie. Postaram się jednak zachować obiektywizm w ocenie – przyznaję, że wielu rzeczy mi brakuje (w porównaniu z Divi, czy Elementorem), ale kolejne release’y dodają nowe opcje (jak wszędzie) i produkt staje się coraz bardziej dojrzały.

Tak więc w Beaver Builder mamy obszar roboczy, do którego na początek musimy wrzucić (przeciągnij-i-upuść) określony układ kolumn, co tym samym tworzy nowy wiersz (dla Divi – sekcja, nie wiersz). Wszystkie kolumny są zawsze oznaczone przerywaną kreską, co bardzo dobrze uwidacznia strukturę.

Co też jest super wrzucenie nowej kolumny nie stanowi problemu – można ją upuścić w dowolne miejsce, np. między kolumnami, a nawet tworzyć zagnieżdżone kolumny (kolumny w kolumnie). To bardzo ułatwia tworzenie layout’ów jakie się chce nie będąc ograniczonym jakąś standardową strukturą jednakowej szerokości kolumn (Divi).

A wszystkie kolumny można dowolnie skalować łapiąc za taką kropeczkę na ich granicy i przesuwając myszką w lewo-prawo, mogąc ustawić szerokość z dokładnością do 0,1%! W porównaniu do Divi – niebo a ziemia.

W Beaver Builder mamy jeden główny przycisk dodawania nowych elementów. Po jego naciśnięciu rozwija się pasek boczny podzielony na 4 sekcje: Moduły, Wiersze, Szablony i Zapisane.

Wszystkie elementy się przenosi i upuszcza w odpowiednim miejscu obszaru roboczego.

Okno ustawień poszczególnych modułów może być pływające (można je przesunąć i/lub przeskalować w dowolne miejsce okna) lub dokowane z lewej lub prawej strony na stałe. Same ustawienia prezentują się bardzo czysto i minimalistycznie – wręcz spartańsko. Ale ustawień nie brakuje. Nie ma przeładowania kolorami, a zamiast grafik jest tekst – jak dla mnie przejrzyściej i przyjemniej dla oka.

Wszystkie opcje są pogrupowane w (najczęściej – w zależności od modułu) 3 zakładki: Ogólne, Styl i Zaawansowane. Z fajnych opcji jest możliwość zapisania każdego modułu, kolumny czy wiersza i późniejszego ich wykorzystania w innych miejscach czy stronach. Dodatkowo każdy zapisany element można ustawić jako globalny, czyli taki, który zmienia się w jednym miejscu, a zmiany są widoczne we wszystkich miejscach gdzie ten element jest użyty. Jest też trochę bardziej rozbudowana możliwość definiowania opcji responsywnych oraz jest kontrola wyświetlania ze względu na status użytkownika (zalogowany/niezalogowany). Super opcją jest też opcja widoku responsywnego połączonego z dedykowanymi ustawieniami. Po włączeniu widoku mobilnego możemy zmienić niektóre ustawienia tylko dla tego widoku (marginesy, odstępy wewnętrzne, czcionki, obramowania i inne). Dodatkowo fajne jest możliwość zmieniania jednostek – tam gdzie zazwyczaj ustawienia są w pikselach (px), tutaj można zmienić na procenty (%) lub nawet na jednostki szerokości ekranu (vw), a w przypadku czcionek px’y można zmienić na em’y (lub rem’y). W końcu nie zawsze chcemy ustawić margines na sztywno w px’ach, a % dają nam zupełnie inny manewr (tak samo z czcionkami i em’ami). Z innych fajności jest cała masa dostępnych animacji (38!).

Na plus jest jakość tłumaczenia. Nie ma żadnych kwiatków, czy kalek, a czasami tylko pojawiają się nieprzetłumaczone parametry (default, radius, czy box-shadow). Oprócz tego bez zarzutów.

Do plusów zaliczę też świetnie działający auto-zapis: wszystkie zmiany są natychmiast zapisywane i jakiekolwiek odświeżenie przeglądarki nie jest im groźne.

W stosunku do Divi niestety jest kilka istotnych braków. Wśród głównych wymieniłbym brak podręcznego menu pod prawym przyciskiem, a w nim przede wszystkim opcji kopiowania styli. Moduły można duplikować, ale późniejszych zmian nie da się powielić i trzeba robić to ręcznie. Wielokrotnie musiałem poprawiać np. 10 identycznych modułów, a w każdym tylko zmienić wielkość czcionki. Mega słabe. Drugi istotny brak to nie ma opcji undo (i redo). Jest co prawda historia, ale ogranicza się tylko do wersji zapisanych i opublikowanych i dotyczy wszystkich zmian w ramach takiej jednej sesji. Nie da się zatem cofnąć dodania kilku modułów jednym przyciskiem, albo zmienienia kilku parametrów styli w jednym module, które może wprowadziliśmy by zobaczyć, czy w nowej wersji jest ładniej. Jeśli nie jest ładniej, ręcznie trzeba wprowadzić poprzednie ustawienia. Wiem, że planują wprowadzenie tej opcji w jednym z najbliższych wydań, ale na razie brak. Szkoda. Wreszcie nie ma testów A/B – choć taka opcja jakoś nigdy mi się nie przydała, aczkolwiek rozumiem, że może być istotne testowanie np. poziomu klikalności w czerwony vs. zielony przycisk CTA. Tutaj nie doświadczysz.

Ogólnie oceniam łatwość użytkowania, dostępne opcje i jakość interfejsu na 4.5/5. Gdyby nie braki w kilku funkcjach (głównie brak undo i brak kopiowania styli) byłoby solidne 5. Jestem jednak pewien, że te opcje pojawią się w ciągu najbliższych wydań i wtedy będzie miód malina!

Elementor

Muszę przyznać, że Elemenor’a zacząłem używać pierwszy raz… podczas tego testu. Wcześniej dużo o nim czytałem i słyszałem (głównie dobrego), ale jakoś były do tej pory ważniejsze rzeczy niż testowanie nowych narzędzi – zwłaszcza, że dotychczasowe (Beaver Builder) w zupełności spełniały swoje zadanie. Poza tym Elementor to nowy gracz na boisku i kiedy wybierałem swoje narzędzia jeszcze go na świecie nie było. Cieszę się jednak, że mogłem się mu przyjrzeć, szczególnie najnowszej, drugiej wersji. Ogólnie – bardzo pozytywnie mnie Elementor zaskoczył. Choć… nie zachwycił. Ale do brzegu…

Na początek dostajemy opcję wyboru struktury naszego pierwszego wiersza. Klikamy po prostu czerwoną ikonkę plusika i dostajemy taki ekran:

Wybieramy interesującą nas strukturę z 10 dostępnych. Jeśli później zmienimy zdaniem możemy kliknąć prawym przyciskiem myszy na ikonę kolumny (w lewym górnym rogu każdej kolumny) i dostajemy opcję duplikacji, usunięcia, a nawet kolumny można kopiować i wklejać – oraz, jak w przypadku Divi, można kopiować i wklejać style poszczególnych elementów (nie tylko kolumn, ale i modułów) – wielki plus dla Elementora za tę funkcję. Strasznie brak mi jej w Beaver Builder.

Są kolejne istotne plusy. Jest menu pod prawym przyciskiem myszy, a w nim – podobnie jak w Divi – możliwość kopiowania/wklejania modułów/kolumn/wierszy, możliwość kopiowania i wklejania styli (!), duplikowanie, usuwania oraz zapisywania (moduły tylko jako globalny – dziwne, nie znalazłem możliwości zapisu modułu jako nie-globalny).

Z kolejnych plusów należy wymienić panel historii, gdzie – jak w Divi – można cofać poszczególne akcje dowolnie w przeszłość (oprócz cofania jest też ponawianie). Też super opcja i też brak mi jej w BB.

W panelach ustawień modułów, kolumn i wierszy nie brakuje opcji. Często ustawienia są zwinięte w kategorie i trzeba kliknąć, by otworzył się dodatkowy panel ustawień (np. typografia). Nie trzeba zatem scrollować aż tyle. W Elementorze, tak samow Divi, panel ustawień dzieli się na 3 zakładki: treść, styl i zaawansowane. To ułatwia nieco poruszanie się, bo w Beaver Builder zakładek jest więcej i to co tutaj jest w Style, tam się rozdziela na… Styl, Typografia (jeśli jest) i jeszcze inne, w zależności od modułu. Można się przyzwyczaić, ale tutaj jest to jakoś przejrzyściej. Jest też, jak w BB, możliwość zmiany jednostek dla niektórych ustawień (nie tylko px, ale i %, vw lub em), jest możliwość, jak wszędzie, zmiany ustawień responsywności, jest sporo animacji (36). Ogólnie układ panelu ustawień jest wg mnie duże lepszy niż w Divi, ale nie mam pewności, czy lepszy niż w BB. Jest kilka więcej opcji, jednak ogólne wrażenie z pracy jest odrobinę mniej przyjemne niż z Beaver Builder – tam te panele ustawień są super dopracowane pod względem wizualnym i jakoś mi bardziej leżą. Pogrupowanie wszystkich styli w jedna zakładkę… niby ma sens, ale też nie mam 100% przekonania, że tak jest lepiej. Pewnie trochę przyzwyczajenie przemawia i indywidualna preferencja. Nie jest to w każdym razie radykalna różnica – jak trochę w przypadku Divi, gdzie tamtejsze panele ustawień nie leżą mi w ogóle. Na Elementora mógłbym się przesiąść z BB i nie płakałbym wcale.

Chcę tutaj wspomnieć o jeszcze jednej super cesze Elementora, a mianowicie Dynamiczne treści. We wszystkich modułach w zakładce Treść jest taki przycisk Dynamiczny przy polach treści. Po kliknięciu ukazuje nam się taka lista:

Oznacza to nic innego jak możliwość podpięcia pod dane pole (np. tytuł nagłówka, czy plik obrazka) treści dynamicznej, czyli wynikającej ze zmiennej wartości pojawiającej się w danym poście. Mogą to być zatem tytuł posta, krótki opis, nazwa autora, wyróżniony obrazek i jakiekolwiek inne pola wpisywane podczas tworzenia treści w panelu administracyjnym WordPress’a. Można nawet tworzyć własne pola przy pomocy wtyczki ACF (Advanced Custom Fields) i wyświetlać je na stronie (np. plik do pobrania albo osobna informacja tekstowa). Pozawala to na tworzenia szablonów, których pola będą się uzupełniać treścią w zależności od tego, który post jest wyświetlany. GENIALNA sprawa! Dzięki temu można tworzyć właśnie szablony posta nie będąc uzależnionym od tych oferowany przez nasz motyw. O tym trochę więcej później, ale ta funkcja jest po prostu ekstra. Trzeba jednak dodać – co z punktu funkcjonalnego nie jest dość istotne – że tego typu opcja pojawiła się rok wcześniej w… Beaver Builder. Nazywa się ona Beaver Themer i jest (osobnym) rozszerzeniem do kreatora BB pozwalającym na tworzenie kompletnych layoutów nagłówków, postów, archiwów, stron woocommerce i dodawania dynamicznych treści do pól w kreatorze. To właśnie oni pierwsi wymyślili ten koncept, a Elementor wziął i po prostu ordynarnie to skopiował i wydał jako swoje. W Elementorze funkcjonalność ta jest nieco uboższa niż w Beaver Themer (w końcu Ci drudzy rozwijają ten produkt o rok dłużej), ale bezwzględną przewagą Elementora jest fakt, że ta funkcjonalność jest częścią każdej płatnej edycji kreatora, podczas gdy Beaver Themer jest dodatkowo płatnym (niemało) rozszerzeniem. Jednak o cenach i odrobinę bliższym porównaniu funkcji oby Theme Builderów w osobnej sekcji.

Dostępne moduły – wersje darmowa i Pro

Na początek od razu uwaga: Divi nie posiada darmowej wersji, więc powiem tylko jakie są dostępne moduły w jedynej wersji, czyli płatnej.

Na poprzednich screenach można było zobaczyć głównie moduły (lub elementy – nazywane różnie) tekstu lub nagłówka oraz zdjęcia. Ale wszystkie kreatory posiadają bardziej zaawansowane moduły, jak rekomendacje, formularze kontaktowe, cenniki wiele innych.

Oto krótkie podsumowanie cech związanych z modułami:

Ponieważ każdy kreator oferuje dużą ilość modułów, zamiast omawiać te, które są podobne, pokażę raczej różnice wymieniając niektóre, których nie ma we wszystkich pakietach.

No tak, z ilości modułów wynika, że Elementor ma najwięcej. Jednak te, które są w Beaver Builder wystarczą zapewne w 80% przypadków i potrzeb. Divi też nie grzeszy jednak bogactwem modułów, choć ma małą przewagę nad BB.

Wszystkie kreatory można rozbudowywać o dodatkowe moduły przez zewnętrzne rozszerzenia. Wygląda, że dla Divi jest ich stosunkowo najmniej, zaś Beaver i Elementor posiadają całkiem sporo dodatków firm trzecich, w tym wiele od tych samych developerów. Jeśli ktoś planuje używać BB lub Elementora do projektowania jako twórca stron dla Klientów, warto się doposażyć w doskonałe dodatki, takie jak Ultimate Addons For Elementor / Ultimate Addons For Beaver Builder, Power Pack for Elementor / Powet Pack for Beaver Builder. Wiele modułów powtarza się między tymi narzędziami, jednak są różnice i stąd moim zdaniem warto mieć oba. Dodatków jest naturalnie więcej i wystarczy pogooglować (zazwyczaj jednak in English), by znaleźć dobre rozszerzenia lub artykuły na ich temat. Na przykład z tego z tego samego źródła, opis popularnych rozszerzeń dla:

• Divi: https://wplift.com/divi-extensions
• Beaver Builder: https://wplift.com/beaver-builder-add-ons
• Elementor: https://wplift.com/elementor-add-ons

Ogólnie każdy kreator spełni większość potrzeb zwykłego użytkownika i prawie każdy wymaga rozszerzeń dla dewelopera (może Elementor najmniej – ale też niekoniecznie). Elementor nadaje się całkiem nieźle w wersji darmowej i na pewno da się nim stworzyć w miarę prostą stronę.

Jak daleko można pójść z dodatkową stylizacją

Mimo, że każdy kreator stara się maksymalnie ułatwić użytkownikom życie projektowe, to jest niemal nieuniknione, że będziecie chcieli dokonać bardziej drobiazgowej stylizacji niż tylko wrzucić moduł, treść i mieć z głowy.

Z tego powodu będziesz chcieć, aby kreator dawał Ci sporą kontrolę nad tym jak Twoje moduły wyglądają i są umiejscowione. To tutaj znajdziesz najwięcej różnić między poszczególnymi kreatorami.

Podsumowując, Divi i Elementor oferują najbardziej zaawansowane opcje stylizacji, jednak Beaver Builder nie jest daleko w tyle.

Wiele aspektów związanych z możliwościami szczegółowej stylizacji omówiłem w poprzednim punkcie. Dodam zatem tylko to, czego nie było wcześniej, głównie w obszarze ustawień dotyczących wierszy i kolumn.

Divi

Do ustawień modułu (wiersza lub sekcji) dostajemy się klikając ikonkę trybu, która pojawia się po najechaniu na dany element. Dostajemy wtedy okno ustawień modułu podzielone na 3 zakładki:

• Treść – tutaj wpisujemy tekst, ustawiamy podstawowe formatowania, dodajemy linki
• Styl – tutaj zmieniamy fonty, obramowania, marginesy, odstępy wewnętrzne i więcej
• Zaawansowane – tutaj z kolei możemy wpisać klasy i identyfikatory, dopisać własny CSS lub zmienić ustawienia responsywne

Poszczególnych ustawień jest masa. W zasadzie można zmienić prawie wszystko. W ustawieniach wiersza możemy zmienić m.in. odstępy między kolumnami (nazywa się to tutaj ‘szerokością rynny’! – ang. gutter width), czy ustawić kolumny jednakowej wysokości (choć nie znalazłem opcji wyrównania treści w kolumnach, a to ważne).

Niestety nie ma opcji zmiany szerokości poszczególnych kolumn (???) – normalnie brak. Oj nie, przepraszam: jest taka opcja. Trzeba tylko wejść w zakładkę Zaawansowane w ustawieniach wiersza i w sekcji ‘Niestandardowe CSS’ jest m.in. pozycja ‘Główny element kolumny X’ – i tam należy wpisać ‘width: 50%!important;’ – łatwe, nie? Bardzo pasujące do stylu wizualnych kreatorów. A, i oczywiście jak macie np. 3 kolumny domyślnie po 1/3 i chcecie środkową na 50%, a pozostałe po 25%, to nie wystarczy ustawić środkowej na 50%, a pozostałe się przeskalują do 100%. Pozostałe nadal mają po 33,33% w związku z tym ostatnia kolumna ląduje już pod pierwszymi dwoma. Trzeba zatem edytować ustawienia dla każdej kolumny. WOW! Dla mnie sama już ta cecha jest dyskwalifikująca dla Divi. Nie kumam dlaczego nie ma takiego ustawienia – przecież własne szerokości kolumn to podstawa. Ech… Dodatkowo nie ma opcji ustawienia koloru krycia dla wiersza – pozostaje tylko CSS. Znowu.

Beaver Builder

W Beaver Builder okna ustawień też mają trzy (choć nie zawsze – zależy od modułu) zakładki ustawień:

• Ogólne – tutaj wpisujemy tekst, ustawiamy podstawowe formatowania, dodajemy linki
• Styl – tutaj zmieniamy fonty, obramowania, i więcej
• Zaawansowane – tutaj z kolei możemy ustawić marginesy i odstępy wewnętrzne, wpisać klasy i identyfikatory, ustawić animację, zasady wyświetlania lub zmienić ustawienia responsywne

Ustawień nie brakuje. Może jest ich odrobinę mniej niż w Divi czy Elementorze, ale zazwyczaj są to różnice, które niekoniecznie się (często) używa – np. filtry CSS lub predefiniowane cienie wierszy. Wchodząc w ustawienia wiersza mamy możliwość ustawienia niemal tego samego co w pozostałych kreatorach. Jedną z zauważalnych (i bardzo fajnych) różnić jest możliwość ustawienia wyświetlania wiersza w zależności od statusu logowania użytkownika – dzięki temu łatwo można pokazać np. jakiś banner użytkownikowi zalogowanemu. Takiej opcji nie ma w Divi i Elementorze. Jest też opcja edycji ustawień kolumny, gdzie możemy zdefiniować niemal te same parametry co dla wiersza – plus dodatkowo wyrównać wysokość kolumn w wierszu i ustawić w nich równanie treści w pionie (nie ma w Divi, jest w Elementorze). Jest też opcja zapisu szablonu każdego elementu (moduł, kolumna, wiersz), w tym jako globalnego. W innych kreatorach tak samo, z tym że w Elementorze nie ma opcji zapisu kolumny (tylko moduł i wiersz). Jest najwięcej ustawień responsywnych i cała masa animacji. Z innych fajnych opcji jest możliwość ustawienia separatora wiersza. Jeśli nie chcemy, aby wiersze się odcinały między sobą normalnie poziomo, można ustawić np. linię ukośną, trójkąt, owal, a nawet falki. Łącznie kształtów separatora jest 9. Kilkukrotnie wykorzystywałem separatory i wiem, że potrafią dodać interesujący wizualnie motyw do strony. To czego nie ma to odstępy między kolumnami – choć nigdy mi tego nie brakowało – w końcu i tak można osiągnąć zamierzony efekt przy pomocy marginesów i odstępów wewnętrznych. Oczywiście, jak już pisałem wcześniej, jest możliwość ustawiania szerokości kolumn i to łatwo, bo przeciągając krawędź kolumny w lewo/prawo z dokładnością do 0,1%. No i jest możliwość ustawienia koloru krycia (z półprzezroczystością naturalnie też).

Elementor

W Elementorze, jak w innych kreatorach, okno ustawień ma również 3 bardzo podobne zakładki:

• Treść/Wygląd – tutaj wpisujemy tekst, ustawiamy podstawowe formatowania, dodajemy linki
• Styl – tutaj zmieniamy fonty, kolory, cienie, obramowania
• Zaawansowane – tutaj z kolei możemy ustawić marginesy i odstępy wewnętrzne, wpisać klasy i identyfikatory, ustawić animację, zasady wyświetlania lub zmienić ustawienia responsywne

W Elementorze nie będziesz (raczej) cierpieć na brak ustawień. W ustawieniach wiersza (tutaj sekcja) jest również w czym wybierać. Jest m.in. ciekawe ustawienie ‘Rozciągnij sekcję’, które ma pozwalać na uzyskanie wierszy o pełnej szerokości nawet w przypadku niekompatybilnych motywów. Sprawdziłem, że nie zawsze to działa. Z resztą przy używaniu kreatorów wizualnych (zwłaszcza tych z kreatorami motywów – jak w Elementor 2 Pro lub Beaver Builder z dodatkiem Themer) motyw zaczyna pełnić drugorzędną rolę i nie jest tak bardzo (z niewielkimi wyjątkami) istotny. Warto więc wybrać motyw kompatybilny, czyli przede wszystkim taki, w którym da się ustawić pełną szerokość treści dla zawartości oraz np. wyłączyć tytuł posta.

Idąc dalej, mamy tu możliwość ustawienia szerokości treści w stosunku do pojemnika, wysokości wiersza, pozycji treści w pionie (fajnie – tylko w Elementorze da się to ustawić dla wiersza). Są też – jak w Beaver Builder – separatory wierszy, jednak dla danego wiersza można ustawić tylko górny ALBO dolny separator, nie da się obu na raz (trzeba zatem łączyć separatory z sąsiednimi wierszami). Łącznie kształtów separatora jest aż 18! Z innych ciekawostek jest możliwość ustawienia danej sekcji jako przyklejonej (sticky). Wówczas, po przewinięciu w dół, gdy taka sekcja dotrze do górnego marginesu to się zatrzymuje pomimo dalszego przewijania. Zazwyczaj nadaje się taką opcję nagłówkom, tutaj można dodać to też do wiersza. Nie wiem co prawda do czego można by chcieć to zastosować – może np. do ustawienia jakiegoś paska z sub-menu, które zatrzymuje się pod głównym nagłówkiem. W każdym razie można – nie działa jednak stackowanie takich przyklejonych wierszy – czyli jeśli ustawimy tę opcję dla dwóch wierszy, to po przewinięciu strony oba wiersze nałożą się na siebie, przez co poprzedni się schowa pod niższym.

Jak w Beaver Builder, można łatwo skalować szerokość kolumn przesunięciem myszki. Można też ustawić dodatkowe krycie tła kolorem. Czyli tak, jak powinno być.

Wyjątkowe funkcje

Każdy kreator jest innych od pozostałych, każdy ma jakieś funkcje, których nie mają pozostałe. Zazwyczaj są to jakieś pojedyncze opcje ustawień, czy wygląd paneli opcji. Choć z grubsza wszystkie polegają na tym samym: wrzucamy jakiś moduł i stylizujemy go. Ale czy są jakieś zasadnicze różnice funkcjonalne między nimi, możliwości, które czynią je wyjątkowymi? Tutaj zajrzymy trochę pod powierzchnię i wskażemy, które funkcje są wyjątkowe lub się mocno wyróżniają.

Divi

Na pewno kluczowym wyróżnikiem Divi są testy A/B, czyli możliwość ustawienia dwóch wersji dowolnego elementu strony i testowanie, który z nich cieszy się lepszym odbiorem użytkownika. Definiuje się wielkości grupy testowej i warunki w jakich ma być uruchomiona zwycięska opcja. Dzięki temu możemy dopracowywać naszą stronę w najmniejszych detalach pod kątem optymalizacji odbioru przez użytkownika końcowego. Co prawda myślę, że 90% użytkowników nie skorzysta z tej opcji, a może być ona ważna w przypadku większych stron, czy sklepów. Dla zwyczajnej strony to chyba jednak nie jest niezbędna funkcja.

Po uruchomieniu i ustawieniu tych testów mamy po jakimś czasie do wglądu dość szczegółową analitykę:

Z innych wyjątkowych rzeczy można wymienić konfigurator uprawnień, o którym mówiłem wcześniej. Jak dla mnie jest on jednak BARDZO mocno przeładowany i aż 60 ustawień to zdecydowanie coś, czego nikt nie będzie nawet dotykał, przez co może to przynieść trudność w ustawieniu podstawowych uprawnień. Z innych unikalnych opcji jest możliwość blokowania elementów do edycji – być może przydatne, jeśli chcemy uniemożliwić np. klientowi możliwość zmiany pewnych elementów strony. Choć nie mam przekonania do takiej metody. Ale jest. Jest też opcja decydowania które cechy zapisywanego do biblioteki elementu mają być zachowane (np. można wykluczyć dodatkowego CSSa, style, czy ustawienia podstawowe). Z tego czego nie ma w Beaver Builder, a jest w Elementorze należy wymienić dedykowany CSS dla każdego elementu, kopiowanie styli, historia z opcją cofania zmian.

Beaver Builder

Uwaga: w kwestii unikalności Beaver Buildera skupię się na dodatkowym rozszerzeniu do kreatora (Beaver Themer), które z racji bycia dodatkiem płatnym kazało mi się zastanowić nad tym, czy umieszczenie go tu jako wyjątkowej cechy jest właściwe (w końcu porównujemy same kreatory, a nie dostępne rozszerzenia). Jednak ze względu na fakt, iż jest to dodatek tego samego producenta oraz to, że jest on zdecydowanie warty wspomnienia, dodaję go tutaj, prosząc jednak o pamięć o tym, że jest to płatny dodatek.

Jeszcze do niedawna kluczowym (wybitnie super) wyróżnikiem był dodatek Themer, czyli tzw. kreator motywów (theme builder). Pozwala on na tworzenie:

• dedykowanych nagłówków i stopek z wykorzystaniem kreatora wizualnego
• stron archiwalnych – np. listy postów, strony produktowej WooCommerce
• pojedynczych (sigle), czyli np. struktury posta, czy wyglądu strony produktu WooCommerce
• części (part), czyli samodzielnych elementów do wykorzystania na stronie (np. pasek nad menu), przy których określa się umiejscowienie na stronie (których lista jest uzależniona od zakotwiczeń (hoocks) w wykorzystywanym motywie – mogą być np. przed nagłówkiem, przed postem, po treści itp.)
• strony 404, czyli wyglądu strony, która się wyświetla kiedy użytkownik wpisze adres jakiejś nieistniejącej podstrony

To absolutnie genialne narzędzie, dzięki któremu w końcu można używać kreatora wizualnego i w ogóle sprawnie edytować nie-edytowalne wcześniej elementy (no chyba, że się dobrze znało PHP i CSSa). Dzięki Themer’owi stało się to banalnie proste i te zamknięte do edycji wcześniej fragmenty teraz edytuje się jak zwykłą stronę przy pomocy kreatora wizualnego.

Co więcej, Themer ma dwie ważne cechy: parametryzjacja sposoby wyświetlania oraz dynamiczne treści lub łączniki pól (field connections). Pierwsza opcja pozwala ustalić bardzo szczegółowo warunki kiedy i jak dany element tworzony Themer’em ma się wyświetlać. Można zatem ustalić położenie, warunki wykluczenia (czyli np. ma się pojawiać na wszystkich stronach z wyjątkiem strony X), a nawet szczegółowe zasady (np. wyświetlaj tylko na stronach, których autorem jest X albo nie wyświetlaj na stronach na których nie ma ustawionego obrazka wyróżniającego), a takie zasady można łączyć – czyli niezwykła precyzja, co może się gigantycznie przydać w tworzeniu większych, bardziej zaawansowanych stron, sklepów, czy nawet bardziej rozbudowanych blogów.

Oczywiście w zależności jaki element chcemy Themer’em tworzyć takie mamy dodatkowe opcje – jak na przykład poniżej ekran tworzenia Nagłówka, gdzie możemy ustawić czy ma on być przyklejający się, zmniejszać się po przewinięciu strony oraz czy ma mieć tło przykryte przezroczystością (przezroczyste nagłówki to przecież super sprawa).

Drugą istotną cechą Themer’a są łączniki pól (ach ten polski – ‘field connections’ brzmi dużo lepiej). Tutaj działa to podobnie jak w Elementorze. Po włączeniu Themer’a pojawia się w panelach ustawień przy wielu pozycjach ikonka plusika, po naciśnięciu której pojawia się lista dynamicznych pól, które możemy przyporządkować do danego ustawienia. A zatem, tworząc np. szablon pojedynczego posta, w nagłówku zamiast pisać ręcznie tytuł posta można połączyć to pole z nazwą posta, a pod spodem lub w tle umieścić nie obrazek wyróżniony tylko niejako link do tego obrazka. W ten sposób uzyskujemy szablon, który będzie wykorzystywany we wszystkich postach (lub nie we wszystkich, bo można ustawić kilka szablonów i np. uzależnić ich wyświetlanie od kategorii posta). Istnieje też możliwość łączenia pól z polami definiowanymi przez wtyczki typu Advance Custom Fields. Z resztą coraz więcej deweloperów wtyczek dodaje często obsługę tych pól i może być ich coraz więcej.

Na wstępie napisałem, że Themer był wyróżnikiem Beaver’a. Dlaczego był? Bo od wersji 2 Elementor Pro zawarł identyczną funkcjonalność w każdej swojej płatnej edycji. Dlatego Themer przestał być wyróżnikiem w nowo stworzonym przez nich właśnie świecie kreatorów motywów. Elementor powielił ich pomysł i dodał jako zwykła (bezpłatną) aktualizację. Wersja Elementor’a jednak ma bardzo dużo do nadrobienia w stosunku do Themer’a. Po pierwsze nie ma tam żadnych ustawień wyświetlania, żadnych reguł, nic. Po prostu możemy zdecydować, że tworzymy dany element i… to wszystko. Także to jak porównanie malucha z mercedesem. Oba są samochodami i jadą do przodu, ale… no chyba rozumiesz. Niewątpliwie jednak kwestia ceny jest czymś nie do zignorowania. Podczas gdy (co prawda bardzo mocno okrojony) kreator motywów w Elementorze jest częścią funkcjonalności podstawowego kreatora (ale tylko w wersjach płatnych), tak Beaver Themer jest osobnym i to niemało płatnym rozszerzeniem dla kreatora ($147). Jeśli zatem chcesz stworzyć jedną, dwie strony, to czynnik cenowy działa na korzyść Elementora. Jeśli jednak tworzysz strony zawodowo dla klientów, jesteś agencją, to inaczej podchodzisz do kosztów narzędzi. Wtedy takie ~500zł rocznie nie stanowi przeszkody i patrzysz bardziej na możliwości i funkcjonalność. Wtedy Themer bije na głowę Elementora. Można by powiedzieć nawet, że istnienie Themer’a może być kluczowym kryterium wyboru dla profesjonalnego twórcy stron, dając mu bardzo rozbudowane i wygodne narzędzie.

Elementor

Oprócz nawiązania do w/w theme builder’a zawartego w wersji 2+ Elementora Pro, ten kreator może się wyróżnić innymi cechami. Po pierwsze wyróżnia się ilością dostępnych modułów – jest ich o połowę więcej niż u konkurencji. Wymieniłbym możliwość dodawania własnych fontów (choć w innych kreatorach można to załatwić łatwo dodatkową darmową wtyczką), podstawowymi ustawieniami optymalizacyjnymi dotyczącymi bibliotek CSS i JS (przydatne jeśli nie planujesz używać wtyczki cache’ującej), możliwość zmiany adresów URL w bazie (np. po migracji lub dodaniu certyfikatu). Jest też dedykowany slider zdjęć (jako moduł).

Warto nadmienić ciekawą funkcję pt. Embed Anywhere (czyli umieść gdziekolwiek). Polega to na tym, iż zapisane moduły/elementy są dostępne z poziomu zarządzania widgetami, czyli pojawia nam się nowy widget pt. Elementor Library i tam można wybrać dowolny zachowany szablon. W Beaver Builder jest to też możliwe, jednak nie jest to aż takie proste (zamiast rozwijanej listy trzeba wybrać widget HTML i tam wkleić ręcznie shortcode danego zapisanego elementu z biblioteki).

Ogólnie mam wrażenie, że Elementor kopiuje Beaver Builder’a starając się dodawać swoje usprawnienia i dodatki. Wychodzi im to chyba całkiem nieźle oceniając to czysto po ilości użytkowników.

Responsywność

Statystyki mówią, że ponad 50% odwiedzin wszystkich stron dzieje się na urządzeniach mobilnych , telefonach w szczególności. Są regiony, gdzie jest to nawet 2/3. Tak więc prawidłowe wyświetlania na mniejszych ekranach to oczywiście absolutny bazowy standard każdego kreatora wizualnego i nie inaczej jest z omawianymi tutaj. Pozostaje tylko pytanie na ile daje się modyfikować różne ustawienia pod kątem takich urządzeń?

Podsumowujemy podstawowe funkcje takich ustawień w zależności od urządzenia:

Jak widać wszystkie kreatory mają wiele wspólnego i wszystkie oferują podstawowe możliwości zarządzania ustawieniami wyświetlania treści w zależności od wielkości urządzenia. Na pewno warto zwrócić uwagę jednak na różnice, czyli dwie ostatnie w tabeli powyżej. Divi nie oferuje możliwości własnej definicji punktów przełamania – czyli szerokości ekranu w px kiedy następuje zmiana układu desktop – tablet – telefon. Jest to gdzieś zapisane na sztywno i pewnie w większości wypadków wystarcza i działa prawidłowo. Druga rzecz to zmienne tła. Tutaj tylko Beaver Builder bryluje, dając (świetną) opcję zmiany obrazu tła na telefonach. Bo bardzo często jest tak, że dane tło na komputerze wygląda super, ale po przeskalowaniu i obcięciu na telefonie wygląda fatalnie. Do tej pory dawało się to załatwić tylko dedykowanym CSSem. Teraz w Beaver Builder po prostu ustawiamy inny plik na dane urządzenie i voila – gotowe. Co więcej, nie tylko możemy ustawić inny obraz, ale możemy ustawić inne parametry obrazu, jak powtarzanie tła, pozycja, zachowanie, czy skala. W ustawieniach kolumn, czy modułów są nawet responsywne ustawienia justowania/wyrównania, obramowań. W Beaver Builder i Elementor można też zmieniać ustawienia responsywne tekstu i to wszystkie. Da się ustawić nie tylko rodzinę czcionki, ale i pozostałe ustawienia – wielkość, grubość, wysokość linii, przekształcenie, odstępy między znakami, dekorację, styl, i to jeszcze gdzieniegdzie mając wybór jednostki. W Divi da się ustawić tylko wielkość czcionki, wysokość linii i rozstaw znaków.

Szablony – jakie i ile oferuje każdy kreator

Podczas gdy główną cechą kreatorów stron jest to, że możesz przy ich pomocy budować własne strony, to wcale tak nie musi być. Można skorzystać z biblioteki gotowych szablonów, które wystarczy wgrać przy pomocy kilku kliknięć, a następnie pozmieniać treści i zdjęcia. To zdecydowanie ułatwia projektowanie i jeśli nie jest nam niezbędna projektowana od zera strona, szablony są zdecydowanie wartym uwagi katalogiem gotowych projektów (a na pewno inspiracji). Stąd też zachodzi tu prosta zasada – im więcej tym lepiej. Jak zatem omawiane kreatory plasują się w tej konkurencji?

Jak widać Elementor bije wszystkich na głowę oferując niemal 3x więcej szablonów od Beaver Buildera i 2,5x więcej od Divi. Jest w czym wybierać! Wszystkie szablony u każdego dostawcy są atrakcyjne i są podzielone na kategorie tematyczne. Dodatkowo są też szablony poszczególnych sekcji (np. o nas, kontakt, zespół itp.). Można zatem używać pojedynczych sekcji, jeśli jakaś nam się spodoba, zamiast ładować cały szablon z którego musimy usuwać wszystko oprócz tego, co nas interesuje.

Divi posiada przyzwoitą kolekcję szablonów (62), z czego każdy szablon jest w paczce, w ramach której są dostępne osobno poszczególne sekcje. To bardzo wygodny sposób zarządzania biblioteką szablonów. Podoba mi się także filtr kategorii po lewej – wygodnie można ograniczyć wybór do interesującej nas branży. Choć przy 60+ szablonach przejrzenie wszystkich i tak nie jest problemem.

Beaver Builder ma najuboższą bibliotekę gotowych szablonów – widać, że wolą się skupiać na dodawaniu funkcjonalności, niż tworzeniu gotowizny. Trochę szkoda. Jedyna opcja to rozbudowa tej biblioteki o rozszerzenia, które często przychodzą z dodatkowymi bibliotekami szablonów. W Beaver Builder szablony są podzielone na docelowe i podstron, do których się dostajemy przez proste menu na górze.

Elementor, jak wspomniałem, króluje w dziedzinie dostępności gotowych szablonów. Jest potężna biblioteka i przy takiej ilości nie ma się już wrażenia, że nie ma w czym wybierać (jak np. w Beaver Builder). 144 szablony i wszystkie atrakcyjne – na pewno znajdziesz coś dla siebie chcąc skrócić sobie proces projektowy.

Wydajność – czas ładowania strony

No dobra, funkcjonalność to jedno, ale jak finalne strony się zachowują przy korzystaniu z nich w normalny sposób, czyli tak jak robi to użytkownik końcowy – wpisuje adres w przeglądarkę, naciska Enter i… czeka. No właśnie, jak długo musi czekać przy ładowaniu strony stworzonej każdym z kreatorów?

Aby przeprowadzić taki test trzeba było zrobić wspólny mianownik, czyli de facto stworzyć prawie identyczne 3 strony każdym z narzędzi z osobna, aby potem móc je przepuścić przez narzędzie analityczne (tutaj będziemy korzystać z Pingdom Tools). Sprawdzimy dwa parametry: czas ładowania (uśrednimy z 3 odczytów) oraz ilość zapytań.

Przy okazji powiem, że tworzenie 3 takich samych stron różnymi narzędziami to bardzo ciekawe ćwiczenie. Wyszło na jaw wiele dodatkowych różnic i osobiste preferencje nabrały realnych kształtów. Dlatego po podsumowaniu wydajności dopiszę jeszcze kilka słów na temat tych wrażeń.

Środowisko testowe:

• ta sama konfiguracja powielona 3 razy jako środowisko testowe (staging) i w każdej uruchomiony jeden kreator na standardowych ustawieniach
• te same strony stworzone na każdym WP – wybrany jakiś losowy szablon i powielony ręcznie jako wzór z tymi samymi grafikami
• nie są zastosowane żadne wtyczki cache’ujące ani inne narzędzia optymalizacyjne

A zatem jak wygląda wydajność ładowania stron zbudowanych każdym z kreatorów:

Powyższe wyniki, choć mają różnice, są one drobne. Nasza testowa strona nie była zbyt rozbudowana (~1,5MB) i stąd pojawiające się różnice są drobne. Poza tym natura narzędzi analitycznych mierzących czas ładowania powoduje duże wahania wyników – tutaj różnice między najniższym, a najwyższym wynikiem dochodziły do 0,5s. Niemniej pokazuje to jakiś obraz, a najbardziej rzuca się w oczy ilość odwołań w przypadku Elementora – niemal 50% więcej niż Beaver Builder.

Próbując robić jakieś podsumowanie można rzec, że Beaver Builder jest najlepiej zoptymalizowanym kreatorem stron ze wszystkich – ładuje stronę najszybciej, ważny ona najmniej i obsługuje to za pomocą najmniejszej ilości zapytań. Brawo.

Zdaję sobie naturalnie sprawę, że takie analizy mogą wywoływać kontrowersje…, ale to pokazały liczby kiedy przeprowadzaliśmy ten test.

Referencja:

Divi
Beaver Builder
Elementor

Może zatem nie bez kozery sami użytkownicy wskazują, że szybkość działania stanowi ich kluczowe kryterium wyboru Beaver Buildera ponad innymi kreatorami. Może o tym świadczyć m.in. ankieta facebookowa na grupie Beaver Builders pytająca właśnie o kryteria wyboru BB w stosunku do konkurencji (co prawda ankieta jest z końca 2017, ale pewnie nie straciła na ważności). Zwracam uwagę, że na drugim i trzecim miejscu są odpowiednio łatwość użytkowania i przyjazność deweloperom.

Obiecałem też dodatkowe podsumowanie wrażeń z używania kreatorów do tworzenia faktycznej strony. Niektóre punkty to są drobiazgi, mogłoby się wydawać, ale to właśnie takie drobiazgi składają się na ogólną jakość użytkowania danego narzędzia. Oto zatem krótkie podsumowanie w punktach tego, czego mi zabrakło oraz to co jest super (ale już bez komentarza):

Divi

• nie można przełączyć się na edycję innego modułu, jeśli okno edycji ustawień poprzedniego jest otwarte (trzeba najpierw zamknąć)
• nie ma modułów nagłówka (tylko tekst), ikony (akurat były potrzebne)
• brakuje przykrycia tła wiersza
• nie można wrzucić modułu w inne miejsce niż w przygotowane wcześniej układem kolumn w wierszu
• jest pole wyszukiwania fontów, a nawet pojawiają się ostatnio używane na górze listy

Beaver Builder

• moduł tekstowy nie ma żadnych ustawień styli – zostaje tylko HTML/CSS
• nie ma pola szukania fontów (tylko po pierwszej literze – dużo scrollowania)
• najlepsze zarządzanie kolumnami i wierszami (można je dodawać wszędzie i w każdej chwili, duplikować, przestawiać, a wrzucenie modułu między kolumnami powoduje utworzenie nowej kolumny)

Elementor

• jest wyszukiwarka fontów
• można tworzyć kolumny w kolumnie, choć trochę trudniej / mniej wygodnie niż w BB (wstawiamy moduł kolumny i dodają się dwie – jak chcemy więcej, trzeba dodatkowo klikać w dodawanie kolumn)
• czasami trochę lepiej niż w BB jest zorganizowane okno ustawień (mniej czysto, ale też mniej klikania jakby, niekiedy)
• po zapisaniu strony trzeba kliknąć jeszcze dwa razy, aby wyjść z edytora, ale wtedy nie przechodzimy do strony, tylko do ustawień strony w WordPressie
• nowy wiersz jest strasznie cienki przez co ma się wrażenie jakiejś mocnej kompresji elementów na stronie – trochę brak powietrza

Jakość kodu po deaktywacji

Kreatory stron otrzymują wiele złych opinii od konserwatywnych deweloperów jeśli chodzi o jakość generowanego kodu. Choć pewnie pamiętają stare czasy pierwszych podrygów takich aplikacji, jak Microsoft FrontPage, czy nawet Adobe Dreamweaver. Są (były) to jednak aplikacje desktopowe, a tutaj porównujemy narzędzia online’owe jako rozszerzenia do CMSa jakim jest WordPress. Warto zatem zwrócić uwagę co się stanie ze stroną, jeśli wyłączymy wtyczkę naszego kreatora.

Divi

Kreator Divi korzysta z shortcode’ów. Widać to po kodzie, gdzie każda sekcja ma przypisaną unikalną klasę, które z kolei łączą się z ich arkuszami styli, definiujących każde pojedyncze ustawienie.

Powoduje to pewien problem w przypadku deaktywacji wtyczki kreatora w Divi. Oto co dostajemy:

Jeden długi ciąg shortcode’ów i z treści totalnie nici. Dlatego niektórzy krytykują Divi właśnie za jakość generowanego kodu.

Beaver Builder

A jak się zachowuje Beaver Builder? Jakość kodu już na pierwszy rzut oka wygląda lepiej. Przypisane klasy dotyczą raczej struktury.

Jeśli wyłączymy wtyczkę to naturalnie tracimy wszelkie ustawienia styli, jednak treści zostają i przede wszystkim kreator nie pozostawia po sobie śmietnika shortcode’ów.

Elementor

A co ze wspaniałym Elementorem? Zachowuje się podobnie do Beaver Builder’a. Kod jest podobnie czysty.

Po deaktywacji wtyczki kreatora otrzymujemy podobny efekt do Beaver Buildera:

Czyli nie jest źle.

Oczywiście ktoś mógłby zapytać: ale po co w ogóle miałbym kiedykolwiek wyłączać wtyczkę kreatora na stronie? Pytanie dobre i odpowiedź w sumie oczywista: nie będziesz raczej nigdy musieć tego robić. To ćwiczenie ma na celu pokazanie jedynie jakości generowanego kodu przez każdego z kreatorów, a z punktu programistycznego jest to ważne.

Ceny – czyli to, czego tygryski nie lubią

Fajnie korzystać z super narzędzi. Trochę mniej fajnie za nie płacić. Jeszcze mniej fajnie płacić dużo.  Jak zatem kształtują się ceny poszczególnych kreatorów i co za to dostajemy? Przyjrzymy się też ewentualnym dodatkom oferowanych przez producenta.

Na początek jedna uwaga, o której już pisałem wcześniej: Beaver Builder i Elementor są dostępne w wersji bezpłatnej, zaś Divi występuje tylko jako część subskrypcji Elegant Themes.

Jak widzicie, różnice są spore i trudno jednoznacznie porównać te ceny. Elementor dla przykładu oferuje obsługę nielimitowanej ilości stron tylko w najdroższym pakiecie za $199, podczas gdy Beaver Builder jest dostępny na nielimitowane strony z definicji w każdym pakiecie. Divi w zasadzie ma tylko jeden pakiet, ale za to w ramach niego dostajemy dostęp do wszystkich wtyczek i motywów Elegant Themes.

Łatwiej będzie zatem pokazać poszczególne cenniki, by móc samemu to ocenić.

Divi

Tutaj nie ma zatem wielkiego wyboru. Możemy zdecydować tylko, czy płacimy co roku, czy decydujemy się na jednorazową opłatę i mamy wszystko dożywotnio (w cenie niecałych 3 rocznych opłat). Z innych niż kreator stron dodatków w subskrypcji mamy dostęp do dwóch innych wtyczek (jedna do formularzy emailowych, druga do do social media) oraz aż 88 motywów, w tym motyw Divi dający dość sporo opcji personalizacji (choć nie wiem po co wykorzystywać pozostałe motywy – ale są).

Link do Divi

Beaver Builder

Tutaj już jest nad czym się zastanawiać. I chociaż wszystkie pakiety są policzone na nielimitowaną ilość stron, to mają kilka różnic. Pakiet średni (Pro) ma dodatkowo w stosunku do najtańszego Standard producencki motyw Beaver Theme, który wg mnie nie jest warty +$100. Nie ma on jakichś szczególnych walorów funkcjonalnych w stosunku do innych kompatybilnych, w tym nawet rozszerzonych o płatne funkcje. W wersji Pro mamy też możliwość używania kreatora w środowisku Multisite – jeśli takiego używasz, to tutaj nie masz wyboru. Inaczej nie zadziała. Wersja Agencyjna posiada dodatkowo możliwość personalizacji wszystkich nazw Beaver Builder’a i zamienienia ich na własne – przydatna funkcja dla agencji, ale nie wiem, czy warta aż +200$ (lub aż +$300 w stosunku do najtańszej). Wersja Standard powinna wystarczyć 80% użytkownikom.

Link do Beaver Builder’a

Producent dodatkowo oferuje możliwość dokupienia do każdego pakietu dodatku Beaver Themer, o którym pisałem już wcześniej. Niestety nie jest on częścią żadnego z pakietów. Kosztuje dodatkowe $147, z 40% upustem na odnowienia za kolejne lata.

Link do Beaver Themer’a

Elementor

Cennik Elementora z kolei jest uzależniony od ilości obsługiwanych stron i to jest jedyna różnica. Tutaj decyzja zatem jest dość prosta – kupujesz na ile potrzebujesz. W każdej wersji mamy te same funkcje, w tym kreatora motywów, który w Beaver Builder jest osobno płatny.

Trudno określić zatem jednoznacznie, która opcja jest najbardziej opłacalna. Można powiedzieć, że jeśli planujesz zbudować 1 stronę, to Elementor będzie najlepszym ekonomicznie wyborem. Jeśli w okolicach trzech, to tutaj mamy jednakową niemal cenę wszystkich dostawców. Jeśli chcemy budować wiele stron dla klientów, to Elementor wychodzi najdrożej – chyba, że będziemy chcieli korzystać z Beaver Themer’a, to wtedy Elementor wychodzi $199, a combo Beaver Builder + Themer już $246 (ale w kolejnym roku za odnowienie Elementora zapłacimy $149, a za combo Beaver’a podobnie, bo $147). Divi cały czas jest w tej samej cenie i jeśli chcemy budować wiele stron będąc agencją, to opcja dożywotnia wygląda najbardziej interesująco.

Link do Elementora

Za co bym wybrał, a za co nie danego kreatora

Postanowiłem napisać takie małe podsumowanie kluczowych różnic – pozytywnych i negatywnych, które w mojej ocenie stanowią o kluczowych aspektach decyzyjnych każdego z narzędzi. Pewnie dałoby się dopisać tu coś więcej, ale to pierwsze rzeczy, jakie przychodzą mi do głowy.

Na początek plusy, czyli Za co wybrałbym każdy z kreatorów:

• Divi – testy A/B, kopiowanie styli
• Beaver Builder – zarządzanie kolumnami, Beaver Themer, wygoda obsługi (interfejs)
• Elementor – ilość modułów, szablonów, kopiowanie styli, kreator motywów w pakiecie

Nie ma jednak róży bez kolców, czyli Za co nie wybrałbym każdego z kreatorów:

• Divi – brak jakiegokolwiek ustawiania kolumn (tylko CSS), mało przejrzysty interfejs
• Beaver Builder – brak kopiowania styli, brak historii i cofania
• Elementor – mało intuicyjne zarządzanie kolumnami, ale brak szczególnie wyraźnych minusów

Podsumowanie, czyli którego kreatora wybrać

I oto jest pytanie! Zawsze jak czytam takie recenzje, to często zaczynam od takiego podsumowania (zwłaszcza, jak są długie 🙂 Liczę w duchu, że autor na pewno wie lepiej ode mnie i jeśli odwalił taką robotę analityczną, to jego wnioski są bardzo cennie – i to co poleci na pewno będzie dobre. Z drugiej strony zdaję sobie sprawę, że wchodzi tu dużo subiektywnej oceny, własnych preferencji i dotychczasowych doświadczeń. W końcu każdy kreator ma tysiące (a nawet setki tysięcy) zadowolonych użytkowników i to zdecydowanie o czymś świadczy – z każdego wyboru (raczej) bylibyście zadowoleni.

Najlepiej oczywiście, gdyby każdy sam przed dokonaniem wyboru zrobił własną analizę – może nie aż tak obszerną (chyba, że prowadzisz agencję i szukasz narzędzia na długo), ale przynajmniej polecam pobawić się chwilę darmowymi wersjami (oprócz Divi) i/lub wypróbować wersję Pro w dostępnych demach:

• Divi – jedyne demo tu: https://pindemo.com/project/divi-review-demo/ (trzeba wpisać email i wyślą dane dostępowe do własnego panelu WordPress’a)
• Beaver Builder – jest demo na stronie producenta tu: http://demo.wpbeaverbuilder.com/ (w tym demo Beaver Themer’a)
• Elementor – jedyne dostępne demo (zewnętrzne) dostępne jest tu: http://hosted-demo.net/launch/41/60/ (wymagane jednak jest zalogowanie przez konto Envato i – niestety – demo obsługuje obecnie wersję 1.5 [najnowsza to 2.1])

Tutaj mega duży plus dla Beaver Builder’a za własne demo na ich stronie, z czym nie pofatygowali się pozostali. Wstyd.

Polecam też poczytać inne recenzje – co prawda jedynie w języku angielskim. Jest ich trochę i wystarczy pogooglać, by znaleźć kilka interesujących artykułów.

No dobra, ale pewnie czekasz mimo wszystko na jakąś finalną sugestię. Ok, nie będę więcej od tego uciekał.

Na początek powiedziałbym, że Beaver Builder i Elementor dzierżą wiele wspólnego z tego jak się je obsługuje, jak wygląda interfejs, jakie są funkcje. Divi jest zgoła inne i dlatego wybór między BB/Elementor, a Divi jest prostszy, niż między samymi Beaver Builder’em, a Elementorem. Ale spróbujmy, może na początek przez pryzmat negatywów.

Jak dla mnie najwięcej ma ich jednak Divi. Jakoś kompletnie nie mogłem „poczuć” tego interfejsu, brakowało mi co chwila jakichś możliwości ustawień, nie było jakiegoś oczywistego modułu. Fajne są testy A/B, super jest kopiowanie styli (dwie główne zalety Divi wg mnie), ale to za mało by zdecydować się dla mnie na to narzędzie. Czułbym się ograniczony i bardziej w świecie przypominającym mi (nie)osławionego WPBakery Visual Composer’a – króla edycji motywów z ThemeForest. Po prostu nie leży mi Divi ze wszystkich powodów, które wymieniłem w całej recenzji.

Elementor jednakże mnie pozytywnie zaskoczył (pamiętaj, że przed pisaniem tej recenzji używałem Beaver Builder’a przez 2 lata). Bardzo fajny kreator i widzę, dlaczego ma tylu użytkowników, bijąc wszystkich na łeb pod tym względem (choć pewnie najlepszym samochodem nie jest ten, który można najczęściej spotkać na ulicy). Na pewno jest to zasługą całkiem rozbudowanej wersji darmowej, a jak chcemy więcej funkcji to dla pojedynczych stron jest to najtańsza opcja. Dodatkowo wbudowany kreator motywów jest świetną sprawą – choć daleko mu do Beaver Themer’a. Jest to zatem kawał dobrego oprogramowania i – jak wspomniałem wcześniej – bezboleśnie (prawie) przesiadłbym się z BB na Elementora. Prawie, bo jednak na koniec zastanowiłbym się nad…

Beaver Builder – jak ponad dwa lata temu wybierałem narzędzia do swojej agencji, to dość sporo czytałem recenzji wszystkich obecnych wtedy na rynku kreatorów wizualnych i w większości z nich powtarzały się opinie, że Beaver Builder jest najlepszy. Ma naturalnie swoje braki (kto nie ma?), ale ma ich najmniej i wszyscy, którzy go używają bardzo sobie chwalą. A jednocześnie pojawiało się relatywnie sporo nieprzychylnych opinii w stosunku do innych kreatorów, w szczególności Divi, czy właśnie WPBakery Visual Composer (z innych rozważanych wtedy był SiteOrigin, Avada, Themify, Upfront i właśnie Elementor – w jakiejś początkowej wersji). Wtedy odrzuciłem wszystkie inne opcje i wybrałem Beaver’a, z czego do dziś jestem mega zadowolony. No przez ten czas miałem szansę doświadczyć jakości wsparcia technicznego, środowiska na grupach facebook’owych, no i historii zmian – to wszystko sprawia, że z czystym sumieniem mogę polecić każdemu to narzędzie. Nie mam wątpliwości, że będziesz zadowolony. Nowe edycje pokazują mi, że w ciągu najdalej pół roku znikną bolące mnie cechy (kopiowanie styli i cofanie zmian) i wtedy to już będzie miejsce tylko na zupełnie nowe funkcjonalności.

Reasumując, moim osobistym faworytem pozostaje Beaver Builder (poza tym firma, która nazywa swój produkt Bóbr Budowniczy musi mieć poczucie humoru – a to przecież fajna i cenna cecha własnego dostawcy:) Bardzo blisko za nim jest jednak Elementor i każdy kto się na niego zdecyduje zapewne będzie tak samo zadowolony, jak ja z BB. Mogę go śmiało polecić, bo po wszystkich testach i zabawie z tym narzędziem podczas pisania tej recenzji przekonałem się, że tak naprawdę to nic mu nie brakuje. Raczej ogólne odczucia mi pasują trochę mniej niż w BB, ale to przecież subiektywna sprawa.

Dla podsumowania podaję jeszcze dla pewności linki do wszystkich 3 kreatorów:

• Divi
• Beaver Builder
• Elementor

Uff, wygląda że razem dotarliśmy do końca. Ja pisząc to, Ty czytając. Dzięki za wytrwałość. Wyszło prawie 10 tys. słów!

Mam nadzieję, że moja recenzja przyda Ci się i dzięki niej będziesz w stanie podjąć lepszą decyzję. Jestem bardzo ciekaw Twojej opinii na temat mojej – napisz czego używasz lub na co się zdecydowałeś i przede wszystkim – dlaczego.