Edytor Wizualny dla WordPressa.

Jeśli zaktualizowaliście Państwo swoją witrynę do wersji 4.9.8, to na pewno mogliście zauważyć przycisk Install Gutenber na stronie Kokpitu w panelu administracyjnym. Jest to nowy wizualny edytor stron, który powinien zastąpić standardowy edytor w wersji WordPress 5.0 (przynajmniej tak zapowiadają deweloperzy systemu). Jeśli wpiszecie nazwę tego edytora do wyszukiwarki, to możecie Państwo znaleźć wiele różnych wpisów na blogach i forach o Gutenbergu. I one będą kontrawersyjne…

Ale na czym polega ten cały hałas? Dlaczego deweloperzy WordPress zmieniają zwykły edytor? Jeśli używacie WordPressa tylko i wyłącznie do prowadzenia własnego bloga/strony, musicie zobaczyć ten wykres ze strony Google Trends (rys. 1):

 

Jak widzicie na rysunku, zainteresowanie internautów do WordPress pomału spada. Natomiast pozycji platformy Shopify idzie do góry. Sytuacja z Shopify w Polsce jest podobna (rys. 2):

 

Przyczyna takiego zjawiska kryje się w szybkiej zmianie zainteresowań internautów. Ostatnio coraz częściej internauci wybierają takie rozwiązania do tworzenia stron, które pozwalają im szybko zbudować witrynę bez posiadania wiedzy technicznej. W tym przypadku platformy SaaS (skrót z angielskiego – oprogramowanie jako usługa) wydają się lepszym rozwiązaniem, ponieważ wprowadzono wizualny edytor stron, który pozwala budować witrynę dzięki metodzie „Przyciągnij i Upuść”. Niestety obecny edytor WordPress nie posiada takiej możliwości (nawet pisaliśmy, na co go można zmienić). Więc aby dalej pozostaćlideram rynku, deweloperzy systemu WP musieli odpowiadzieć na nadchodzące zmiany. Praca nad Gutenberg jest właśnie taką odpowiedzią.

Ale Gutenberg ma przed sobą jeszcze długą drogę, aby stał się idealnym,  wizualnym edytorem stron dla WordPress. Na obecną chwilę istnieje ponad 20 wtyczek, rozszerzających możliwości systemu i pozwalające budować strony bez koniczności edytowania kodu. A korzystają z nich już tysiące użytkowników. Tak, np. Elementor ma ponad 1 mln aktywnych instalacji, czyli używa się go na więcej niż milion stron www na świecie. Dużo, prawda?

Jeśli jeszcze nie korzystaliście Państwo z wizualnych edytorów stron, możecie zapoznać się z naszą listę tzw. Page Builderów. Wybraliśmy 5 najbardziej popularnych wtyczek dla WordPress, a mianowicie: Elementor, Beaver Builder, Divi Builder, Thrive Architect i WPBakery Page Builder (Visual Composer). Porównaliśmy te edytory między sobą według następujących parametrów: interfejs, widgety/szablony, opcje stylizacji, inne ważne funkcje i kod po usunięciu. Także zostały podane własnej oceny według 5-punktowej skali, gdzie 5 – najwyższa ocena. Jeśli z nimi Państwo się nie zgadzacie, możecie zostawić komentarz. 😉

Zapraszamy do krótkiego przeglądu wizualnych edytorów dla WordPress.

Elementor

Obecnie jest to jeden z najpopularniejszych wizualnych edytorów  stron www. Zgodnie z danymi na stronie wordpress.org on ma ponad 1 milion aktywnych instalacji. Elementor powstał w 2016 roku i jest również jednym z najnowszych rozwiązań tego typu dla WordPressa. Swoją popularność edytor zyskał za szybkość działania, wygodny interfejs użytkownika, elastyczne opcje stylizacji i zaawansowane funkcje, takie jak możliwość tworzenia w pełnie funkcjonalnych szablonów.

Cena: Podstawowa wersja – darmowa. Wersja Pro kosztuje od $49 – licencja do jednorazowego użytku.

Ocena edytora:

• Interfejs – 5/5

Interfejs Elementora jest podzielony na dwie podstawowe części, trzeci obszar jest przeznaczony dla niektórych mniejszych ustawień. Użytkownicy mogą szybko znaleźć wszystkie kluczowe widgety i dodać je na stronę.

• Widgety/szablony – 5/5

W darmowej wersji Elementor zawiera 28 darmowych widgetów. Wersja Pro dodaje kolejne 30 widgetów, co daje w sumie 58 widgetów. Można także korzystać z cudzych rozszerzeń dla tego edytora, na przykład z wtyczek dostępnych na Elementor marketplace.

Darmowa wersja Elementora posiada także ponad 40 darmowych szablonów, a płatna – setki templatek. Oprócz tego płatne szablony można znaleźć na łamach popularnych marketplace.

• Opcje stylizacji – 5/5

Elementor zawiera rozbudowane opcje personalizacji. Oprócz podstawowych rzeczy, takich jak kolory, fonty i typografia, możecie Państwo także sterować bardziej zaawansowanymi ustawieniami. To są niestandardowe marginesy/paddingi oraz niestandardowe klasy CSS itd.

• Inne ważne funkcje – 5/5

Za pomocą Elementora można stworzyć szablony dla nagłówka, stopki oraz użyć jednakowego stylu dla całej strony. Oprócz tego gotowe szablony można używać na różnych stronach i rozszerzać ich za pomocą wewnętrznych widgetów.

• Czysty kod – 5/5

Po usunięciu Elementora, pozostawi on czysty kod na stronie. Na przykład, jeśli był stylizowany nagłówek <h3> za pomocą edytora, po wyłączeniu Elementora nagłówek <h3> zostanie. Po prostu będzie używany styl samego motywu.

Strona edytora: https://elementor.com/

 

Beaver Builder

Podany edytor powstał 4 lata temu i jest jednym z liderów wśród gotowych edytorów stron dla WordPress. Beaver Builder ma ponad 400 tysiący aktywnych instalacji. Edytor jest popularny zarówno wśród użytkowników prowadzących swoje strony, blogi jak i deweloperów. Wtyczka ciągle jest aktualizowana i dodawane są nowe funkcje.

Cena: Darmowa wersja jest ograniczona. Standardowa wersja kosztuje $99 do wykorzystania na jednej stronie.

Ocena edytora:

• Interfejs – 5/5

Beaver Builder oferuje unikalny interfejs dla użytkowników. Większość pracy wykonywane z paska bocznego, które znajduje się po prawej stronie. Ale te opcje paska bocznego pojawiają się tylko wtedy, gdy klikniemy przycisk na górnym pasku.

• Widgety/szablony – 4/5

W wersji darmowej Beaver Builder zapewnia dostęp tylko do 6 modułów, ale można również używać standardowych widżetów WordPress.

Z kolei płatna wersja zapewnia dostęp do 30 modułów. Moduły te są również modułowe, więc można je włączyć lub wyłączyć w razie potrzeby. Oprócz tego w płatnej wersji uzyskujmy dostęp do 56 szablonów stron, a także możliwość tworzenia własnego szablonu.

• Opcje stylizacji – 5/5

Aby nadać styl modułom i sekcjom, można użyć domyślnego okna wyskakującego oraz przypinać okno z boku, aby utworzyć pasek boczny. I chociaż wybór opcje zależy od modułu, Beaver Builder zapewnia całkiem dobrą kontrolę nad elementami, w tym niestandardowymi odstępami i elastycznymi kontrolkami.

• Inne ważne funkcje – 4/5

Edytora zawiera Beaver Themer – osobne rozszerzenie, która pozwala tworzyć szablony przez analogię do Elementora. Oprócz tego można korzystać z motywu Beaver Themer, który zapewni jeszcze większą kontrolę nad wyglądem witryny. Ale te opcje można zdobyć tylko w płatnej wersji.

• Czysty kod – 5/5

Podobnie jak Elementor, Beaver Builder pozostawia czysty kod z właściwym formatowaniem HTML.

Strona edytora: https://www.wpbeaverbuilder.com/

 

Divi Builder

Jest popularnym narzędziem do tworzenia stron w motywach od Elegant Themes. Mimo że jest najczęściej używany jako część motywu Divi, Divi Builder jest również samodzielną wtyczką i może być stosowany w cudzych templatkach. W przeciwieństwie do poprzednich dwóch wizualnych edytorów stron ten pozwala edytować zawartość za pomocą zarówno wizualnego interfejsu front-end, jak i interfejsu back-end. Jednak najczęściej jest stosowany tryb wizualny, o czym piszą twórcy wtyczki.

Divi Builder jest stosowany we wszystkich motywach od Elegant Themes. Więc obecnie używa się na ponad 500 tyś. sprzedanych templatkach.

Cena: Edytor dostępny w ramach członkostwa. Opłata za rok wynosi $89.

Ocena edytora:

• Interfejs – 4/5

Interface graficzny Divi Builder jest wyjątkowy. Na stronie nie znajduje się żaden panel boczny. Aby dodać element i zarządzać nim trzeba korzystać z pływających przycisków lub pop-up’ów. Więc musicie Państwo przejrzeć edytor, aby zrozumieć jak wszystko działa.

• Widgety/szablony – 5/5

Divi Builder zawiera 46 modułów, za pomocą których można dodawać różne elementy treści na stronie. Oprócz tego edytor zawiera 316 gotowych szablonów rozmieszczonych w 40 różnych zestawach układów. On także pozwala zapisywać własne projekty w postaci szablonów.

• Opcje stylizacji – 5/5

Podobnie jak Beaver Builder, Divi Builder pozwala stylizować elementy w wyskakujących okienkach, które można przenieść na bok. Przy tym edytor zawiera rozbudowane opcje zarządzanie wyglądem. W trzech kartach można skonfigurować różne ustawienia, w tym elastyczne kontrolki oraz niestandardowe odstępy. Można dodać niestandardowy styl CSS do głównego elementu lub przed/po głównym elemencie. Edytory CSS zawierają nawet podstawową weryfikację i autouzupełnianie

• Inne ważne funkcje – 5/5

Divi Builder zawiera funkcje „Testowanie A/B”. Żaden inny edytor wizualny dla WordPress nie zawiera takiej opcje w rdzeniu. Oprócz tego łączenie Divi Builder z motywem Divi zapewnia pełną kontrolę nad wyglądem witryny. Także warto wydzielić możliwość dostosowania tego edytora w odpowiedniości do roli w WordPress.

• Czysty kod – 3/5

Najsłabsza stroną Divi Builder to użycie shortcodów. Wiec po wyłączeniu edytora na stronie zostanie garść shortcodów, które trzeba usunąć ręcznie. Dobrze, że pojawiła się specjalna wtyczka Shortcode Cleaner, która pomaga w tym.

Strona edytora: https://www.elegantthemes.com/

 

Thrive Architect

Thrive Architect to ulepszona wersja wcześniejszego edytora Thrive Content Builder.  Jego nowy interfejs ma wiele podobieństw do Elementora. Ale edytor zawiera także własne ciekawostki.  Największą popularność Thrive Architect zdobył wśród blogerów i uczestników różnych programów partnerskich, ponieważ koncentruje się na współczynnikach konwersji.

Cena: Licencja do jednorazowego użytku wynosi $69.

Ocena edytora:

• Interfejs – 5/5

Interface edytora jest podzielony na dwie podstawowe części. Jeśli porównać ten interfejs z Elementorem, okaże się, że jest to „copy/paste”. Wyjątkowa rzeczy Thrive Architect to selektor menu nawigacyjnego, który pojawia się po kliknięciu elementu zagnieżdżonego. Ta funkcja jest bardzo przydatna, gdy trzeba szybko przeskoczyć między elementem a sekcją.

• Widgety/szablony – 4/5

Thrive Architect oferuje 40 różnych widgetów, w tym kilka ciekawych elementów. Oprócz tego edytor zawiera także setki szablonów podzielonych na 36 “zestawów”. Thrive Architect pozwala także tworzyć własne szablony.

• Opcje stylizacji – 5/5

Podany edytor posiada rozbudowane opcje zarządzania widgetami i działa w podobny sposób jak Elementor. Przy tym Thrive Architect udostępnia wszystkie opcje w jednej karcie.

• Inne ważne funkcje – 3/5

Thrive Architect nie posiada zbyt dużo dodatkowych funkcje. Oprócz tego edytor można integrować z innymi produktami Thrive Themes.

• Czysty kod – 5/5

Po wyłączeniu edytora strona nie będzie zawierała żadnych dodatkowych kodów.

Strona edytora: https://thrivethemes.com/

 

WPBakery Page Builder (Visual Composer)

WPBakery Page Builder, wcześniej znany jako Visual Composer, to kolejny bardzo popularny wizualny edytor dla WordPress. Duża część tej popularności wynika z faktu, że WPBakery Page Builder jest stosowany w 99% motywach umieszczonych na ThemeForest. Zgodnie z danymi ze strony producenta ten edytor jest stosowany na ponad 2 mln. stron na świecie.

Cena: $46

Ocena edytora:

• Interfejs – 3/5

Podobnie jak Divi Builder WPBakery Page Builder zapewnia zarówno wizualną edycję z front-endu, jak i edycję z back-endu. Dodawanie nowych elementów  oraz ustawienie odbywa się za pomocą wyskakujących okienek. Dlatego także trzeba znać wszystkie możliwości edytora, aby móc stworzyć profesjonalną stronę www.
Widgety/szablony – 3/5

Edytor oferuje 39 elementów i pozwala używać wszystkie podstawowe widgety WordPressa. Niektóre z tych elementów zostały połączone z innymi wtyczkami. Więc rzeczywista liczba to tylko 33 elementów. WPBakery Page Builder pozwala na korzystanie z 86 szablonów. I chociaż ich liczba nie jest duża, niektóre templatki zawiera dużo stron i dodatkowych sekcje do użytku.

• Opcje stylizacji – 3/5

W porównaniu do Elementora lub Divi Builder, opcje zarządzania wyglądem strony WPBakery Page Builder są nieco ograniczone. Edytor pozwala lekko zarządzać wierszami, ale ogranicza w sterowaniu poszczególnych elementamów. Dlatego aby dodać unikatowe style warto korzystać z CSS.

• Inne ważne funkcje – 3/5

WPBakery Page Builder nie posiada unikatowych funkcje w środku. Jednak do dyspozycji jest szeroki wybór dodatków tworzonych przez społeczność.  Dla tego edytora dostępnych jest ponad 250 ciekawych rozszerzeń.

• Czysty kod – 3/5

Tak jak Divi Builder, WPBakery Page Builder pozostawia po sobie garść shortcodes.

Strona edytora: https://wpbakery.com/

Bazując się na powyższych ocenach można przygotować następną tabele:

Wizualny edytor stron	Ogólna ocena	Interfejs	Widgety/szablony	Opcje stylizacji	Inne ważne funkcje	Czysty kod
Elementor	25	5	5	5	5	5
Beaver Builder	23	5	4	5	4	5
Divi Builder	22	4	5	5	5	3
Thrive Architect	22	5	4	5	3	5
WPBakery Page Builder (Visual Composer)	15	3	3	3	3	3

 

Jak widać WPBakery Page Builder dostał najniższą ocenę, chociaż jest to najczęściej stosowana wtyczka na stronach www. Ta ocena bazuję się na małym zestawie elementów, trudniejszym interfejsie użytkownika, małym wyborze opcje personalizacji i użyciu shortcodes. Lider podanego rankingu nie ma takich problemów. Oprócz tego Elementor posiada darmową wersję, która zawiera wszystkie kluczowe widgety do tworzenia profesjonalnej strony www. To wszystko pozwoliło mu w ciągu 2 lat zdobyć popularność wśród użytkowników WordPress.

Ale chcemy dodać, że wszystkie oceny są subiektywne. Więc jeśli z nimi Państwo się nie zgadzacie, możecie podzielić własnymi opiniami.

 

Podsumowanie

Rynek projektowania webowego zmienia się bardzo dynamiczne. Przykładem tego jest popularyzacja wizualnych edytorów. Aby pozostawać na szczycie tych zmian deweloperzy WordPress pracują nad przebudową systemu i przygotowują własnego Page Buildera czyli Gutenberga. Ale dla popularnego CMS można znaleźć wiele innych alternatywnych edytorów. Wybraliśmy 5 z nich, które są najczęściej stosowane przez użytkowników. Oprócz tego porównaliśmy te edytory według kluczowych paramentów. Dzięki temu możecie Państwo zapoznać się z nimi i wybrać ciekawe rozwiązanie dla własnej strony www.

A jeśli dawno już korzystacie z wizualnych edytorów, proszę powiedzieć jakie rozwiązanie wybraliście i dlaczego. 😉