Elementor vs Gutenberg – Showdown 2021: Który kreator stron jest lepszy?

Czy jesteśmy w stanie przypomnieć sobie czasy, kiedy WordPress funkcjonował bez kreatorów stron?

Czas leci, postęp technologiczny, a WordPress ze swoimi bardzo ograniczonymi możliwościami jest teraz tylko niejasną pamięcią , dzięki funkcjonalności motywów WordPress, ale zwłaszcza wtyczkom WordPress, takim jak kreatory stron.

W tym artykule omówimy dwa najpopularniejsze kreatory stron wśród użytkowników OceanWP – Elementor i Gutenberg . Informacje, które tutaj przedstawimy, nie opierają się wyłącznie na naszej osobistej opinii i doświadczeniu, ale także na opiniach użytkowników OceanWP, które otrzymujemy codziennie.

Niech rozpocznie się konfrontacja!

Co to jest elementor?

Ze średnią oceną 4,7 na 5 i ponad 5 milionami aktywnych instalacji – nie ma co do tego wątpliwości: Elementor jest najpopularniejszym kreatorem stron wśród użytkowników WordPressa .

Elementor został po raz pierwszy wprowadzony w 2016 roku i bardzo szybko przejął prowadzenie. Powodem jego niemal natychmiastowej popularności była różnica między wizualnym kreatorem przeciągania i upuszczania Elementora a zwykłym edytorem tekstu WordPress (epoka przed Gutenbergiem).

Użytkownicy WordPressa w końcu zyskali coś, co nie przypominało Microsoft Worda – elastyczny edytor, który pozwolił zabłysnąć ich kreatywności , a wszystko to dzięki różnym widżetom, które ograniczyły potrzebę wszelkiego rodzaju niestandardowego kodowania lub tworzenia niestandardowych szablonów HTML / PHP / CSS.

A jeśli szukasz nowych szablonów stron internetowych Elementor WordPress? Sprawdź naszą najnowszą kolekcję HubSpot.

W tym porównaniu Elementora i Gutenberga zajmiemy się tylko funkcjami darmowej wersji Elementora.

Co to jest Gutenberg?

Gutenberg, znany również jako edytor bloków , jest domyślnym edytorem stron/postów WordPress. Został wprowadzony po raz pierwszy w 2018 roku, wraz z wersją WordPress Bebo 5.0.

Zespół WordPressa zrozumiał potrzeby społeczności dotyczące bardziej zaawansowanego i intuicyjnego edytora domyślnego , a także trendy w budowaniu stron internetowych. Tak powstał edytor Gutenberga i zastąpił swojego poprzednika – klasycznego edytora.

Mimo że Gutenberg nie jest jeszcze w pełni rozwinięty, a jego szczyt jest spodziewany w nadchodzących latach , zespół WordPressa dostarczył to, co obiecał – prosty, ale potężny edytor wizualny , który przeszedł z edytora treści do kreatora stron.

A jeśli szukasz szablonów witryn Gutenberg WordPress, sprawdź naszą najnowszą kolekcję szablonów WooCommerce, które korzystają z Gutenberga.

Elementor kontra Gutenberg: Porównanie

Elementor kontra Gutenberg: Łatwość użycia

Każdy użytkownik WordPressa, który miał przyjemność korzystać z obu narzędzi, powie Ci coś, na co również możemy się zgodzić – Elementor wygrywa porównanie łatwości użytkowania .

Dzięki ogromnej elastyczności i mobilności Elementor naprawdę przypomina zaawansowane narzędzia do edycji obrazu. Po prostu wybierz potrzebny widget i umieść go w dowolnym miejscu w treści – to wszystko.

Chcesz stworzyć sekcje? Lub sekcje z inną liczbą kolumn? Wybierz inny projekt lub obrazy dla różnych urządzeń? Również nie ma problemu. Elementor naprawdę pozwala skonfigurować całą zawartość aż do perfekcji. Nie wspominając już o różnych animacjach, które lubią projektanci stron internetowych (choć narzędzia do pomiaru prędkości nie są).

Z drugiej strony Gutenberg to czysty i prosty program do tworzenia stron . W przeciwieństwie do Elementora, Gutenberg nie oferuje bardzo lubianej funkcji przeciągania i upuszczania (przynajmniej jeszcze nie). Mimo że możesz łatwo dodawać i przesuwać bloki, sprawy nie są tak proste, jak w przypadku Elementora. Poza tym stylizacja bloku może być nieco trudna, szczególnie dla tych, którzy są przyzwyczajeni do luksusowego środowiska, jakie zapewnia Elementor.

Gutenberg jest domyślnym edytorem WordPressa od 3 lat, ale wciąż są ludzie, którzy nie chcą go wypróbować . Tacy użytkownicy nie faworyzują żadnego kreatora stron – przedkładają klasyczny (treściowy) edytor WordPressa ponad wszystko inne.

Ponieważ wszyscy jesteśmy stworzeniami nawyków, uważamy, że nie byłoby obiektywne oznaczanie Gutenberga jako nieintuicyjnego i trudnego w użyciu tylko dlatego, że klasyczny edytor jest łatwiejszy w użyciu. Ale możemy Ci powiedzieć jedno – gdy utworzysz jeden post z Gutenbergiem i pokonasz tę początkową krzywą uczenia się, będziesz nadal z niego korzystać .

Elementor kontra Gutenberg, który wybrać? Odpowiedzią jest zawsze OceanWP, ponieważ używamy obu

PS Jeden z bloków Gutenberga jest również blokiem Classic, więc nie ma powodu, aby używać dodatkowych wtyczek, aby korzystać z funkcji starej szkoły

Elementor vs Gutenberg Podsumowanie łatwości użytkowania

Elementor oferuje zaawansowane widżety i narzędzia do edycji, dzięki czemu jest łatwiejszy w użyciu niż Gutenberg, ale może stać się równie trudnym zadaniem, gdy pojawi się potrzeba dostosowania stron internetowych do responsywności .

Gutenberg ma własną krzywą uczenia się, którą można łatwo pokonać. Zrozumienie, jak działa Gutenberg, pomoże Ci zarządzać wszystkimi innymi programami do tworzenia stron , w tym Elementorem.

Elementor kontra Gutenberg: Funkcje

Elementor ma widżety, Gutenberg ma bloki – to proste.

Termin widżet jest jednak używany w WordPressie od dłuższego czasu w odniesieniu do funkcji, która wykorzystuje połączone elementy . Na przykład obraz z nagłówkiem, lista postów na blogu z różnymi opcjami zapytania itp.

Widgety Elementor działają w podobny sposób – udostępniając funkcje z pogrupowanymi opcjami oraz wieloma ustawieniami zapytań i stylów. Oczywiście widżety Elementora oferują znacznie więcej opcji i wszechstronności niż widżety WordPress (Wygląd> Widgety).

Gutenberg zaczął od bardzo podstawowych bloków , takich jak blok akapitu, obraz, wideo itp. Mimo że bloki oferują również opcje stylizacji, funkcje te nie są tak bogate ani tak intuicyjne jak w przypadku Elementora. Ale szczerze mówiąc, jeśli chodzi o ustawienia przyjazne dla użytkownika, Elementor zdecydowanie wiedzie prym – nie tylko w porównaniu z Gutenbergiem, ale w porównaniu z prawie wszystkimi dostępnymi narzędziami do tworzenia stron.

Z drugiej strony „problem zbyt prostych” bloków można łatwo rozwiązać za pomocą niektórych dodatkowych wtyczek Gutenberga, które oferują wysoce funkcjonalne bloki z większą liczbą funkcji i opcji użytkownika .

A skoro już o tym mowa, czy miałeś okazję zapoznać się z naszym najnowszym produktem – blokami Ocean Gutenberg? Jeśli jesteś klientem, ta wtyczka jest już dostępna na Twoim pulpicie nawigacyjnym do pobrania i używania. Jeśli rozważasz przejście na pro, sprawdź naszą najnowszą ofertę.

Podsumowanie funkcji Elementora i Gutenberga

Elementor używa widżetów, Gutenberg używa bloków. Bezpłatna wersja Elementora zawiera wiele zaawansowanych widżetów , których każdy projektant witryn może wykorzystać do zbudowania fantastycznej witryny. Aby zdobyć garść bardziej zaawansowanych bloków, potrzebne są dodatkowe wtyczki do Gutenberga – takie jak Ocean Gutenberg Blocks.

Elementor kontra Gutenberg: Wydajność

Możesz zauważyć , że celowo użyliśmy terminu „wydajność” zamiast „szybkość strony”.

Powód jest prosty i prosty – większość narzędzi internetowych mierzy wyniki witryny, które nie odzwierciedlają szybkości witryny . Poza tym jest zbyt wiele czynników, od których zależy szybkość witryny . Niestety, sukces witryny internetowej nie zależy wyłącznie od motywu lub wtyczek, które używasz.

Nie wspominając o tym, że właściciele witryn zwykle zapominają , że te narzędzia nie odzwierciedlają stanu całej witryny – tylko strony przypisanej do testowanego adresu URL . Krótko mówiąc, dbaj o wszystkie strony witryny tak samo, jak o stronę główną .

Jednak jakość motywu i wtyczek może mieć istotny wpływ na ogólną wydajność witryny . Podobnie jak twórcy stron.

Porównanie konfiguracji WordPress

Zanim zaczniemy, chcielibyśmy przedstawić krótkie wprowadzenie do tworzenia szablonów WordPress . W ten sposób wyniki porównania Elementora i Gutenberga mogą być w pełni zrozumiane.

Szablony WordPress to przykładowe treści stron internetowych (strony, posty na blogu, gotowe i stylizowane). Szablony te służą do przyspieszenia procesu budowania lub inspirowania. W przypadku szablonów Ocean Website, gdy używany jest kreator stron Elementor, jest on używany wyłącznie na stronach głównych (strona główna, kontakt, informacje itp.).

Wszystkie inne strony, takie jak posty na blogu, sklep, strony produktów, strony archiwum, są domyślnymi stronami WordPress zarządzanymi przez motyw OceanWP.

W tym małym eksperymencie wykorzystaliśmy nasze dwa szablony WordPress: Agenda i Gutenberg Agenda .

Na pierwszy rzut oka i po prostu patrząc na obrazy, czy byłbyś w stanie odróżnić te dwa i zgadnąć, który z nich został zbudowany przy użyciu Elementora, a który przy użyciu Gutenberga?

Obie strony znajdują się na tym samym serwerze i mają absolutnie taką samą konfigurację:

• Oprogramowanie: Apache/2.4.51 (Unix)
• MySQL: (Ubuntu) v5.7.36
• PHP: 7.4.24
• WordPress: 5.8.1
• Limit pamięci WordPress (PHP): 256 mln
• Motyw WordPress: OceanWP (miganie)

Obie strony mają większość wspólnych wtyczek WordPress :

• Ekstra ocean
• Udostępnianie produktów oceanicznych
• Udostępnianie społecznościowe w oceanie
• WooCommerce
• Lista życzeń TI WooCommerce
• WPforms Lite
• Przyklejony nagłówek oceanu
• WP Rocket (nieużywany przy tworzeniu szablonów WordPress).

Szablon programu WordPress:

• Elementor
• Widżety Ocean Elementor

Szablon WordPress Agenda Gutenberga:

• Bloki Ocean Gutenberg

Jak widać, wersja Gutenberga nie wymaga do uruchomienia żadnych dodatkowych wtyczek . Wszystko czego potrzebujesz to domyślny edytor bloków WordPress – Gutenberg .

Elementor kontra Gutenberg: Google Page Speed ​​Insights

Dla wszystkich tych, którzy pominęli fragmenty tekstu i przyszli od razu tutaj – warto podkreślić, że Google Page Speed ​​Insights nie mierzy szybkości witryny . Zamiast tego ocenia witrynę, biorąc pod uwagę różne czynniki.

Co więcej, należy również pamiętać, że wyniki mogą być nie tylko fałszywie pozytywne (niskie wyniki, ale szybka strona internetowa i odwrotnie), ale często nie oddają prawdziwego obrazu. Jeśli chodzi o mobilne wyniki PSI (Page Speed ​​Insights), Google zbiera informacje od prawdziwych użytkowników, którzy przeglądają Twoją witrynę za pomocą telefonów komórkowych .

Oznacza to, że rzeczywista sytuacja stanie się widoczna z czasem – nie od razu. Oznacza to również, że subtelnie sugerujemy, abyś nie sprawdzał swoich wyników i próbował nad nimi pracować w momencie instalacji WordPressa lub tworzenia strony – informacje nie są dokładne.

Aby w pełni zrozumieć, jak działa gromadzenie danych o wydajności witryny i przetwarzaniu danych, zalecamy zapoznanie się z tą odpowiedzią pracownika Google. Nie ma nic lepszego niż uzyskanie odpowiedzi bezpośrednio ze źródła.

Niemniej jednak rozumiemy, że wyniki są ważne dla użytkowników. I dlatego dzielimy się z Tobą wynikami.

Jeśli chodzi o wyniki mobilnego PSI , w wyścigu Elementor vs Gutenberg zwycięzcą jest Gutenberg .

Różnice między wszystkimi danymi są dość oczywiste i na korzyść Gutenberga.

Wynikiem, który zaskoczył nas najbardziej, jest różnica w całkowitym czasie blokowania (TBT). W przypadku strony zbudowanej przez Elementora TBT wynosił 310 ms, podczas gdy TBT na stronie zbudowanej przez Gutenberga wynosił tylko 50 ms .

Czy możesz sobie wyobrazić, jakie byłyby wyniki, gdybyśmy faktycznie zoptymalizowali obrazy w witrynie przed prawidłowym przesłaniem i konfiguracją WP Rocket, zamiast korzystać z ustawień domyślnych? Nie bądź taki jak my – zoptymalizuj swoje obrazy i znajdź optymalne ustawienia buforowania dla swojej witryny .

W porównaniu desktopowego Elementora i Gutenberga różnice nie są aż tak drastyczne, mimo że wyniki są nieco na korzyść Gutenberga . Przynajmniej nie według PSI.

Dlatego przechodzimy na inne narzędzie, które często polecamy naszym użytkownikom – GTmetrix.

Elementor kontra Gutenberg: Porównanie GTmetrix

GTmetrix wydaje się być zadowolony z obu wersji naszego szablonu Agenda WordPress – Elementor i Gutenberg.

Nie możemy jednak zignorować ogromnej różnicy między Time to Interactive a DOM Interactive Time – obie metryki na korzyść Gutenberga.

Czas na interaktywność : Elementor vs Gutenberg : 912 ms vs 408 ms .

DOM Interactive Time: Elementor vs Gutenberg : 714 ms vs 405 ms .

Jeśli chodzi o porównanie Elementor vs Gutenberg Structure, GTmetrix ponownie pokazuje nam zielone zamiatanie.

Ale jest jedna rzecz, która od razu przykuła naszą uwagę – rozmiar DOM . Ponownie wyniki są na korzyść Gutenberga.

Unikaj nadmiernego rozmiaru DOM : Elementor vs Gutenberg : 1251 elementów vs 929 elementów .

Niezależnie od tego, czy jesteś fanem Gutenberga, czy nie, musisz przyznać, że 300+ mniej elementów na stronie o niemal identycznej treści to ogromna wygrana . Nie wspominając o tym, że jest to również wygrana po wyjęciu z pudełka.

W sumie wykresy przemówiły. Chociaż wyniki wydajności i struktury są dokładnie takie same, obie strony internetowe uzyskały stopień A GTmetrix, wynik wydajności 100% i wynik struktury 98% – istnieje wiele statystyk na korzyść Gutenberga , które mogą być dla Ciebie ważne, jeśli jesteś ogromnym fanem optymalizacji i wydajności.

Sądząc po GTmetrix, sprawy są przejrzyste. Jeśli chodzi o porównanie wydajności Elementor vs Gutenberg side-by-side – Gutenberg jest absolutnym zwycięzcą .

Ale poczekaj chwilę. Czy to oznacza, że ​​Elementor jest zły i nie powinien być używany? Nie, ponieważ osiągnięcie satysfakcjonujących wyników, z których możesz być dumny, można również osiągnąć za pomocą Elementora .

Wyniki pokazują tylko, że Gutenberg zapewnia natychmiastowe, bezproblemowe i awangardowe wygrane , podczas gdy w przypadku Elementora musisz być doświadczonym i odpowiedzialnym projektantem stron internetowych.

Podsumowanie wydajności Elementora i Gutenberga

Żaden z naszych szablonów stron internetowych nie został zoptymalizowany pod kątem szybkości / wyników i używamy domyślnych ustawień buforowania WP Rocket w obu. Gutenberg oferuje więcej out-of-the-box wygranych wydajności, a niektóre różnice w metrykach są dość drastyczne w porównaniu do Elementora , w szczególności metryki Całkowity czas blokowania, rozmiar DOM, czas do interaktywności i czas interaktywny DOM.

Doświadczeni projektanci stron internetowych z zaawansowanymi umiejętnościami optymalizacji, którzy postępują zgodnie z najlepszymi praktykami tworzenia stron internetowych i używają odpowiednich narzędzi, nie będą mieli problemów z osiągnięciem najlepszej szybkości lub wyników przy użyciu Elementora.

Witryny obsługiwane przez Gutenberga wymagają również mniej zasobów , głównie limitu pamięci WordPress, aby działać płynnie w porównaniu do witryn Elementora w połączeniu z różnymi dodatkowymi wtyczkami Elementora.

Elementor kontra Gutenberg: Korzyści

Jeśli chodzi o porównanie korzyści Elementor vs Gutenberg, trudno jest zdecydować.

Każdy kreator stron ma swoje własne zalety i powody, dla których warto skorzystać . Podobnie każdy kreator stron ma swoje wady. Zarówno plusy, jak i minusy mogą mieć charakter subiektywny .

Oczywiście wszyscy kochamy Elementora ze względu na jego funkcję przeciągania i upuszczania, ale korzystanie z Gutenberga też nie jest takie trudne .

Ustawienia responsywności Elementora i możliwość ukrywania sekcji lub elementów opartych na urządzeniach lub całkowicie stylowych elementów opartych na urządzeniu, to jeden z dodatkowych powodów, dla których warto go pokochać . Teraz są to te same funkcje, które mogą sprawić, że początkujący poczują się zniechęceni i przytłoczeni, gdy dopiero zaczynają, ponieważ zdają sobie sprawę, że tworzenie stron internetowych wymaga więcej wysiłku niż kiedyś czytali o tym na różnych blogach.

Jeśli chodzi o przyjazne dla użytkownika użytkowanie i uwolnienie kreatywności, głosujemy na Elementor .

Ale kiedy nasi użytkownicy pytają nas o alternatywy dla Elementora, wymieniają stabilność jako główny powód potrzeby zmiany . Żeby było jasne, błędy i błędy zdarzają się nawet firmom takim jak Facebook. I bez względu na to, jaką konfigurację prowadzą właściciele i programiści witryn, odpowiedzialność i przestrzeganie najlepszych praktyk jest koniecznością, aby uniknąć niedogodności . Tak, mówimy o robieniu kopii zapasowych lub testowaniu nowych aktualizacji na obszarach pomostowych.

Rzeczywiście, nawet doświadczeni użytkownicy stosujący te praktyki mają trochę urazy z powodu innowacji i zmian Elementora, które często pozostawiają ich bez możliwości [właściwego] korzystania z tego narzędzia przez pewien czas.

Jeśli chodzi o Gutenberga, jako programiści cenimy sobie jego wydajność (zarówno frontend, jak i backend), dostępność i stabilność . Pamiętaj, że niektóre wtyczki Gutenberga mogą dodać tyle samo lub nawet więcej rozdęć do HTML, co inne edytory stron innych niż Gutenberg, więc wybieraj mądrze.

Pomimo tego, że Gutenberg nie wydaje się tak przyjazny dla początkujących jak Elementor, zdecydowanie zachęcamy początkujących do wypróbowania go . Nasza rekomendacja opiera się dokładnie na braku niektórych zaawansowanych funkcji, które wymagają bardziej profesjonalnego lub doświadczonego podejścia (takich jak edycja w trybach responsywnych i dostosowywanie treści do różnych urządzeń).

Można również śmiało powiedzieć, że ci, którzy zajmują się i uczą, jak radzić sobie z Gutenbergiem, będą również mieli szybki dostęp do wszystkich innych kreatorów stron – w tym Elementora.

Podsumowanie korzyści Elementor vs Gutenberg

Opcje i ustawienia responsywności Elementora mogą pomóc każdemu dostosować projekt strony internetowej dla wszystkich urządzeń , nawet w inny sposób, jeśli zajdzie taka potrzeba. Ale są to również te same ustawienia, które mogą drażnić początkujących WordPressa , gdy zdadzą sobie sprawę, że tworzenie stron internetowych wymaga nieco więcej czasu, wysiłku i praktyki, niż o tym czytali.

Gutenberg może na początku wydawać się onieśmielający i całkowicie nieintuicyjny , ale w rzeczywistości jest niesamowitym punktem wyjścia do nauki. Pokonanie Gutenberga pomoże wszystkim lepiej zrozumieć wszystkie kreatory stron . Ponadto Gutenberg oferuje większą stabilność, dostępność, SEO i ogólną wydajność .

Elementor vs Gutenberg: Który kreator stron jest lepszy?

Wiesz, co mówią – jeden but nie będzie pasował do każdej stopy, ale nie będziesz tego wiedział, chyba że najpierw spróbujesz buta.

Niektórzy użytkownicy uwielbiają Elementora, niektórzy Gutenberga i stoją za tym różne powody. Ponieważ mówimy o Twojej witrynie, ważne jest, aby dowiedzieć się, co pasuje do Ciebie i Twoich potrzeb .

Gdy nasi użytkownicy zwracają się do nas po porady dotyczące korzystania z Elementora bez narażania stabilności, wydajności, SEO, dostępności i wielu innych rzeczy, które są kluczowe dla budowania witryny , zalecamy, aby korzystali z Elementora w taki sam sposób, w jaki używamy go do tworzenia szablonów witryn WordPress . Używaj Elementora na głównych stronach, które muszą być atrakcyjne i atrakcyjne – pozostaw wszystko inne WordPressowi i Twojemu motywowi.

Krótko mówiąc, unikaj tworzenia niestandardowych szablonów archiwów, zwłaszcza jeśli nie jesteś doświadczonym projektantem lub masz niewielkie doświadczenie w ogólnej optymalizacji witryny.

Jeśli jesteś początkującym i chcesz mniej martwić się o dodatkową edycję i stylizację lub jesteś profesjonalistą, który nie ma nic przeciwko włożeniu trochę więcej wysiłku w projektowanie stron internetowych (mamy na myśli brak funkcji przeciągania i -drop) i nie sprzeciwiaj się brakowi różnych opcji animacji, to zdecydowanie powinieneś wybrać Gutenberg . Zwłaszcza biorąc pod uwagę wszystkie korzyści związane z wydajnością i fakt, że za pomocą Gutenberga można tworzyć projekty o równie wysokiej jakości .

Jedyną rzeczą, której absolutnie nigdy nie powinieneś robić, a widzieliśmy takie projekty, jest tworzenie niestandardowych szablonów za pomocą Elementora, a następnie używanie Gutenberga w połączeniu z nim do dodawania treści. Nie utrudniaj sobie życia, niż powinno być i nie zabijaj swojej witryny

Niezależnie od tego, czy wybranym przez Ciebie twórcą stron jest Elementor czy Gutenberg, odpowiedzią jest zawsze OceanWP i pakiet Ocean Core Extensions, ponieważ oferujemy zarówno widżety, jak i bloki, aby osiągnąć pożądany projekt witryny

Jaki jest twój werdykt? Jaki jest twój ulubiony kreator stron i dlaczego? I tak, możesz wybrać i używać obu.

Gdy już odpoczniesz od budowania stron internetowych, zostaw komentarz i daj nam znać, co myślisz.