Ten post nie jest w jakikolwiek sposób sponsorowany. To relatywnie świeże wrażenia po dwóch miesiącach używania jednego z najmniej znanych narzędzi do tworzenia stron, czyli Pinegrow. Na początku uprzedzę, że nie używałem wszystkich jakie są dostępne na rynku, ALE obejrzałem sporo filmów, w których ludzie porównywali ze sobą wszystkie najbardziej znane aplikacje. Ja sam mam dość spore doświadczenie z Webflow, troszkę z Webstudio, troszkę z Elementorem. No i oczywiście VS Code, ale nie mówimy o edytorach kodu, lecz o narzędziach no code/low code. Mam pewne wyobrażenie o mocnych i słabych stronach innych programów/aplikacji po obejrzeniu mnóstwa materiałów na ten temat.
Web edytor jak potężne pudełko z narzędziami Boscha
Kiedy mówię „najbardziej profesjonalne”, muszę na początku doprecyzować co dokładnie mam na myśli. Przede wszystkim najlepsze z punktu widzenia developera. Inne aplikacje i buildery mogą mieć swoje mocne strony jeżeli chodzi o workflow czy model biznesowy – szczególnie dla naszych klientów, którym stronę budujemy. Przykład: Webflow który jest dużo droższy niż WordPress; Framer który jest lepszy dla klientów, którzy chcą mieć stronę „na wczoraj”.
Nie chodzi mi również o szybkość i wydajność – trzaskanie jak największej ilości projektów w najkrótszym czasie, celem zarobienia większych pieniędzy. Tutaj, jak się domyślam, Framer zapewne wygrywa. Nie mam na myśli narzędzia najłatwiejszego do opanowania – tu Framer zapewne przoduje, choć i Elementor wydaje się być łatwy dla początkujących.
Mam na myśli dwie rzeczy. Jeden – wachlarz możliwości oraz poziom kontroli jaki dana aplikacja daje profesjonaliście. Dwa – zgodność z najlepszymi standardami świata web developingu. A co ciekawe, te dwie rzeczy zawsze idą ze sobą w parze w najlepszych narzędziach. W narzędziach, które służą do budowania stron nie „na wczoraj”, ale na dekady.
Na początku porównajmy Pinegrow z innymi aplikacjami do budowania stron na silniku WordPressa. W dalszej części tekstu porównamy go z całą resztą page builderów, niezależnie od rodzaju CMS’a.
Zhackuj prawo Pareto z Pinegrow
Według Chata GPT 80% stron na WordPressie budowanych jest przy pomocy page builderów – takich jak na przykład Elementor. Czym są page buildery i dlaczego ich nie używam – już o tym pisałem na blogu. GPT dał mi bardzo wyraźnie do zrozumienia, że takie strony mają mnóstwo mankamentów. Spowalniają stronę nadmiarowym kodem, trzeba za nie płacić, zamykają one w ekosystemie jednej firmy, ich możliwości projektowe są ograniczone – lista jest dłuższa. GPT dał również do zrozumienia, że jeżeli koduje strony na WordPress bez ich użycia, to zdecydowanie jest to moim marketingowym lewarem.
Chciałbyś być w górnych 20% zawodowców i brać większe pieniądze za lepszą usługę? Jest tylko mały problem. Tradycyjne kodowanie szablonów WordPressa jest trudne i pracochłonne. Kodowanie bloków Gutenberga (full site editing) jest jeszcze trudniejsze! Na szczęście mamy Pinegrow.
Pinegrow nie jest super łatwy do nauczenia się – nie polecam osobom, które dopiero zaczynają uczyć się tworzyć strony, tudzież osobom, które nie mają do tego cierpliwości i serca. Page builderowcom dla których budowanie stron, to jedynie łatwy biznes, a nie wielka pasja i ciągłe dążenie do doskonalenia swoich kompetencji. Pinegrow ma cholernie rozbudowany, naszpikowany możliwościami interfejs, ale jak już się go nauczysz, to staje się on potężnym narzędziem w Twoich rękach.
Page buildery takie jak Elementor to świetne narzędzia na start. Intuicyjne, wizualne, z setkami gotowych elementów. Problem pojawia się wtedy, gdy zaczynasz chcieć czegoś więcej – lepszej wydajności, bardziej precyzyjnego designu, czystszego kodu, większej kontroli nad zachowaniem strony.
I tu Elementor zaczyna ograniczać. Bo page buildery to budowanie strony na bazie prefabrykowanych klocków. Bardzo łatwe i bardzo ograniczające jednocześnie. Przykład – do niedawna Elementor nie miał nawet tak fundamentalnej właściwości CSS, jaką jest flexbox. Z kolei Pinegrow – podobnie jak Webflow – to budowanie stron od podstaw, na bazie prawdziwej semantyki HTML i CSS. W sposób wizualny, zamiast ręcznego stukania kodu. Przy czym o ile ręczne napisanie kodu statycznej strony jest jeszcze łatwe, o tyle napisanie kodu dynamicznej strony z CMS WordPressa – dodawania postów na bloga lub produktów do sklepu – to już nieco wyższa szkoła jazdy. I teraz jest najlepszy moment, żeby przybliżyć działanie hype’owanego przeze mnie w tym tekście programu.
Smart Actions zamiast godzin grzebania w PHP
Największa siła Pinegrow? Smart Actions. To specjalne znaczniki, które dodajesz do stworzonego szablonu HTML, dzięki którym Pinegrow generuje pliki PHP zgodne ze specyfikacją WordPressa, automatyzuje pętle, dynamiczne treści, obrazki, linki itd. Innymi słowy – to stworzenie szablonu pod bloga czy sklep, przy użyciu przysłowiowych kilku kliknięć myszką.
Przykład: chcesz wyświetlić projekty z Custom Post Type „projekty”? Zaznaczasz sekcję, dodajesz Smart Action „WP Loop”, ustawiasz typ posta i… gotowe.
To jak wizualny interfejs do pisania szablonów PHP, który nie odbiera Ci kontroli, ale przyspiesza pracę 10x. To łączy wygodę page buildera z całym potencjałem kodowania klasycznego szablonu.
BONUS: Możesz ustawić smart action elementowi z formularzem kontaktowym, który oprócz przesłania wiadomości na wskazanego maila, stworzy też Custom Post Type „formularz” w pulpicie WordPressa, na którym owe wiadomości będą zapisywane. Innymi słowy Pinegrow konfiguruje Ci formularz kontaktowy bez instalowania żadnej zewnętrznej wtyczki!
BONUS 2: W edytorze Pinegrow możesz zarejestrować każdy inny Custom Post Type, bez instalowania zewnętrznej wtyczki typu CPT UI w WordPressie.
A może zamiast tworzenia gotowego szablonu chciałbyś jedynie prekonfigurować klientowi bloki Gutenberga tak, aby wyglądały w pewien określony sposób? Określone spacingi, kolory, typografia, kilka gotowych sekcji a resztę niech buduje sobie sam! Na YouTube są długie i trudne tutoriale jak zrobić to w kodzie. Jest lepszy sposób!
Tworzenie własnych bloków Gutenberga bez pisania Reacta
I tu kolejny killer feature – w Pinegrow możesz robić własne, kastomowe bloki Gutenberga! Również te z dynamicznymi treściami. Bez pisania Reacta czy JSX, wszystko jest zautomatyzowane: struktura block.json, integracja z WP, renderowanie przez PHP. W porównaniu do ręcznego pisania bloków w React, które jest czasochłonne i zniechęcające, to po prostu bajka!
No i jeszcze jedno na sam koniec tematu WordPressa…
Absurd modelu licencyjnego
Chcesz stworzyć stronę dla klienta przy użyciu Elementora czy innych builderów? Musisz opłacać roczną licencję jako projektant, albo nakłonić klienta, by sam kupił licencję, której nie rozumie. Tudzież zaryzykować, że po zakończeniu współpracy strona przestanie działać, gdy licencja przestanie być opłacana.
To nielogiczne. W modelu open source, jak WordPress, strona powinna należeć do klienta bez żadnych haczyków. I właśnie tak jest w przypadku Pinegrow, gdzie ja opłacam licencję za narzędzie, dostarczając Ci stronę, która jest w 100% funkcjonalna już na zawsze – bez żadnych opłat i zależności od żadnej firmy.
Eliminacje do finału starcia tytanów woli stworzycielskiej człowieka
Ktoś mógłby powiedzieć „no i co z tego, w Elementorze też mogę tworzyć blogi i sklepy”. Ktoś inny „w Webflow też mam całkowitą wolność tworzenia layoutu i do tego niezły CMS”. To prawda. Ja sam kocham Webflow i cały czas go używam. Ale mówiąc, że Pinegrow to najbardziej profesjonalny edytor stron, miałem na myśli coś konkretnego i namacalnego – zakres możliwości edycji i mnogość opcji i narzędzi.
Na początku porównajmy różne aplikacje z Webflow, następnie skonfrontujemy Webflow z Pinegrow (stawiając sprawę w ten sposób, zaspoilerowałem że Webflow wygra to starcie).
Timothy Ricks na swoim kanale YouTube (https://www.youtube.com/watch?v=6vkcIQbfQZ4) zaprezentował tabelkę, w której porównuje zgodność ze standardami HTML/CSS w różnych web edytorach (Webflow, Framer, Figma Sites i Wix Studio). Jak widać na załączonym obrazku, większość aplikacji nie posiada nawet tak podstawowej property jak margin… Oni oferują jedynie padding. A przecież margin to szalenie ważna własność w CSS. Margin: auto auto do wyrównania elementu na stronie chociażby. Albo używanie margin-left/right: auto na elemencie, który znajduje się w rodzicu który ma display: flex, co daje niesamowite możliwości budowania nietuzinkowych layoutów.
Brak klas? Brak dziedziczenia stylów(!)? Szczerze? Nie sądziłem, że te narzędzia są aż tak biedne.
Widzimy więc, że Webflow wciąż rządzi, jeżeli chodzi o poziom wolności i kontroli nad tworzonym przez nas projektem, a także o wierność semantyce HTML i CSS. To drugie jest już ważne z perspektywy klienta – wolisz mechanika samochodowego, który działa według najwyższych standardów branży, czy typa, który naprawi Ci silnik trytytkami?
Skonfrontujmy zatem słynnego Webflow z mało znanym, niszowym pretendentem jakim jest Pinegrow.
Pinegrow – prawdziwy raj dla control freaków
Pinegrow to wizualny edytor kodu – w nieco bardziej dosłownym znaczeniu tego pojęcia. Pracujesz w nim na realnych, lokalnych plikach HTML/CSS/JS i PHP na Twoim komputerze (a nie w zamkniętym systemie w oknie przeglądarki).
Oznacza to, że w Pinegrow nie tylko eksportujesz kod strony, ale również możesz go importować! Możesz pracować na każdym pliku .html na swoim komputerze. Co to oznacza? Ani w Webflow ani w Webstudio nie ma możliwości zaimportowania strony, którą eksportowaliśmy i już usunęliśmy z panelu naszych przeglądarkowych apek. Wtedy zostaje już tylko VS Code, by dalej poprawiać/rozwijać projekt.
Na szczęście owe projekty można dalej edytować i rozwijać w sposób wizualny w Pinegrow, który otworzy każdy plik HTML/CSS/JS!
W Webflow nie masz możliwości edycji kodu w sposób bezpośredni. Dodawać custom code, możesz jedynie poprzez Code Embed. Nie masz możliwości dodania kastomowych stylów bezpośrednio do arkusza CSS. W Pinegrow możesz pracować w czasie rzeczywistym w wizualnym interfejsie i/lub w kodzie strony. To jak połączenie Webflow z Visual Studio Code.
To nie koniec euforii. Pinegrow nie jest apką przeglądarkową, lecz programem komputerowym, co oznacza, że możesz pracować bez dostępu do Internetu. Ostatnio dłubałem przy stronie lecąc samolotem!
Za mało euforii? W Pinegrow możesz pracować nad nieskończoną ilością projektów! Za ok 80 zł miesięcznie. Porównaj to sobie do planów Webflow, gdzie za nieco większe pieniądze masz ograniczenie do 10 projektów. By wyjść ponad ten limit, musisz zapłacić jeszcze więcej.
Nie dość euforii? W Pinegrow masz wizualny edytor do tworzenia animacji GSAP, które niczym nie ustępują Webflow Animations, a są lżejsze.
Sama ilość CSS properties jaka się znajduje w interfejsie Pinegrow, mocno przewyższa tą w Webflow. Niech mnie kule biją, tu możesz nawet ustawić swoje własne breakpointy responsywności, podczas gdy w Webflow są one narzucone.
A może nienawidzisz CSS i chcesz pracować z Tailwind lub Bootstrap? To wyobraź sobie, że w Pinegrow możesz wizualnie budować strony na klasach tych właśnie frameworków!
Od „no code” do „know code”? Owszem, ale tylko po to, by na końcu wylądować w „low code”!
Powiedzenie „from no code to know code” to całkowita prawda. Webflow nauczył mnie kodowania stron Internetowych i to jest fakt. Gdyby nie Webflow, ja jako osoba estetycznie zorientowana, prawopółkulowa, prawdopodobnie nigdy nie wszedłbym do tego fascynującego świata. Webflow oferuje świetny CMS i szalenie intuicyjną obsługę strony z punktu widzenia klienta. Webflow to cały czas Top 1 – ex aequo z Pinegrow – jeżeli chodzi o edycje stron. Ale gdy już rozumiesz HTML/CSS a nawet JavaScript, zaczynasz widzieć ograniczenia narzędzi No Code. Korci Cię, by pójść dalej.
I wtedy warto przesiąść się na narzędzie low-code, którego Pinegrow jest dla mnie symbolem. Szczególnie gdy projekt jest statycznym landingiem lub klient uparł się przy tańszym, open source’owym CMS WordPressa. Kiedyś nienawidziłem takich sytuacji, teraz uwielbiam budować strony na WordPressie!
W Pinegrow masz wygodę i szybkość interfejsu wizualnego oraz moc tradycyjnego developingu w jednym. Jeśli budujesz strony zawodowo i zależy Ci na jakości, Pinegrow to narzędzie, które warto poznać. Pinegrow to nie kolejny page builder – to prawdziwe środowisko do pracy z front-endem i WordPressem.
Jeśli Elementor to „strona w 15 minut”, to Pinegrow to strona, która wytrzyma 15 lat – i którą możesz zbudować dokładnie tak, jak chcesz.
Zobacz Pinegrow w akcji
Chcesz zobaczyć jak to działa? Zerknij na te wideo:
