Bezpłatna konsultacja
Wtyczka Elementor dla WordPress to rewelacyjne narzędzie, które rewolucjonizuje możliwości edycji zawartości i struktury witryny. Niemniej jednak, z aktualizacją edytora WordPress, znanego jako Gutenberg, platforma ta również wprowadziła szereg funkcji zbliżonych do tych oferowanych przez Elementor. Ten artykuł przybliży Ci różnice między edytorem Elementor a nowym edytorem WordPress (Gutenberg), pomagając w wyborze odpowiedniego narzędzia do Twojego projektu strony internetowej.
spis treści:
Nowy edytor WordPress, czyli Gutenberg, wprowadził rewolucyjne zmiany w redagowaniu treści. To nie tylko klasyczny edytor tekstu, ale system oparty na blokach, co oznacza, że każdy element - od tekstu po multimedia - jest traktowany jako oddzielny blok. To ułatwia dodawanie, przesuwanie i edytowanie różnych komponentów strony za pomocą intuicyjnego interfejsu „przeciągnij i upuść”.
Elementor to narzędzie, które choć działa w podobny sposób, to jednak wciąż uznawane jest za najbardziej popularne narzędzie do budowy stron internetowych, wykraczając poza granice możliwości standardowego edytora WordPress. To platforma, która umożliwia tworzenie stron o dużej funkcjonalności. W płatnej wersji PRO, oferuje nawet możliwość konstruowania kompletnych szablonów, uwzględniając stopkę, nagłówek czy układy stron blogowych.
Gutenberg i Elementor to dwa popularne konstruktory stron dla WordPress, które różnią się od siebie funkcjami i możliwościami dostosowania. Wybór między nimi zależy od indywidualnych potrzeb i preferencji użytkownika.
Gutenberg jest wbudowanym edytorem WordPressa, który oferuje prosty i intuicyjny sposób tworzenia treści oparty na systemie bloków. Jest to idealne narzędzie dla blogerów, właścicieli małych firm lub tych, którzy chcą szybko i łatwo tworzyć podstawowe strony i posty. Jego główną zaletą jest prostota użytkowania oraz fakt, że jest darmowy i w pełni zintegrowany z WordPress.
Elementor to z kolei rozbudowany konstruktor stron typu premium, który umożliwia tworzenie bardziej skomplikowanych i zaawansowanych układów bez znajomości kodowania. Oferuje bogaty zestaw narzędzi i funkcji, w tym niestandardowe nagłówki, stopki, wyskakujące okienka oraz zaawansowane animacje i efekty. Jest idealny dla osób, które potrzebują większej kontroli nad wyglądem i funkcjonalnością swojej witryny, jak projektanci czy deweloperzy.
Główną różnicą między Gutenbergiem a Elementorem jest zakres możliwości dostosowania i zaawansowania funkcji. Gutenberg zapewnia podstawowe narzędzia, podczas gdy Elementor oferuje znacznie więcej opcji dla zaawansowanego projektowania. Jednak Elementor jest płatny, z planami cenowymi wahającymi się od 49 do 199 dolarów rocznie.
Reasumując, jeśli potrzebujesz prostego i podstawowego narzędzia do tworzenia treści, Gutenberg będzie odpowiednim wyborem. Jeżeli jednak zależy Ci na większej elastyczności, zaawansowanych funkcjach i niestandardowym projektowaniu, Elementor będzie lepszym rozwiązaniem.
Zobacz również 5 najszybszych motywów wordpress
Page builder to praktyczne narzędzie, które umożliwia tworzenie stron internetowych poprzez przeciąganie i upuszczanie różnych elementów oraz bloków. Jest to jak interaktywny zestaw narzędzi, gdzie dodawanie tekstu, obrazów czy przycisków odbywa się w intuicyjny sposób, bez konieczności pisania kodu HTML od podstaw. To sprawia, że tworzenie stron staje się bardziej dostępne nawet dla osób, które nie są ekspertami w programowaniu.
Jednak, choć page buildery ułatwiają proces tworzenia stron, warto zdobyć przynajmniej podstawową wiedzę z zakresu HTML. Znajomość tych podstaw pozwala podejmować bardziej świadome decyzje podczas budowy strony, takie jak struktura kodu czy odpowiednie używanie nagłówków. Mimo to, w dużej mierze to narzędzie decyduje o tym, jaki kod HTML zostanie wygenerowany z danego elementu czy bloku.
Porównując różne page buildery, można zauważyć, że wizualnie tworzone sekcje wyglądają podobnie, jednak kod generowany przez różne narzędzia może być znacząco różny. Teraz, aby zobaczyć jak te różnice prezentują się w praktyce, porównamy te same sekcje stworzone za pomocą dwóch popularnych page builderów: Gutenberg i Elementor.
Różnice między Elementorem a nowym edytorem WordPressa to niezwykle istotna kwestia przy wyborze narzędzia do budowy stron internetowych. Elementor i jego wersja Pro zapewniają szereg funkcji, które przenoszą możliwości edycji na wyższy poziom niż oferuje to standardowy edytor WordPressa. Mimo to, należy zwrócić uwagę na kilka aspektów, które mogą mieć wpływ na wybór ostatecznego rozwiązania.
Jednym z głównych czynników jest prędkość wczytywania strony. Elementor wprowadza dodatkowy kod, który może wydłużyć czas ładowania, co może negatywnie wpłynąć na wyniki w wyszukiwarce Google. Z drugiej strony, WordPress jest znacznie lżejszy i szybszy, co może być kluczowe ze względu na czynnik rankingowy.
Doświadczenie twórców to również istotny aspekt. Elementor działa na rynku od 2015 roku, co pozwoliło jego twórcom zgromadzić większe doświadczenie i w pełni dopracować narzędzie. Nowy edytor WordPressa jest jeszcze stosunkowo młody, co może oznaczać, że wciąż wymaga dalszych ulepszeń i rozwoju.
Elementor oferuje sprawdzone widgety, nawet w swojej wersji PRO. Z kolei WordPress wykorzystuje wtyczki z biblioteki, co choć daje szersze możliwości, może jednocześnie zwiększyć ryzyko niekompatybilności lub problemów z nieaktualnymi wtyczkami, co może być potencjalnym zagrożeniem dla naszej witryny.
Na rynku znajdziesz szereg innych page builderów, na przykład Brizy, Brics Builder, Beaver Builder, Visual Composer (który wydaje się być powiązany z WPBakery lub miał z nim wspólną historię), Oxygen Builder czy też nowszy Zion. I to tylko niektóre z nich, bo w rzeczywistości tego typu narzędzi jest o wiele więcej.
Wspomniane przeze mnie platformy mają niewielki udział w rynku, dlatego skupmy się raczej na tych dwóch najważniejszych - Elementor i Divi. W przypadku Divi przewagą jest dostępność wersji lifetime, co oznacza, że można nabyć licencję na całe życie, bez ograniczeń co do liczby stron. Jednakże, czy to stanowi przewagę dla klientów, to już zależy od indywidualnych preferencji i potrzeb.
To ciekawa kwestia, czy model oparty na subskrypcji rocznej, jak w przypadku Elementora, może sprzyjać szybszemu rozwojowi platformy, ze względu na potencjalnie wyższe przychody z abonamentów. To w gruncie rzeczy rozmowa, którą moglibyśmy poruszyć w formie podcastu, dotycząca różnych modeli płatności, jakie mogą być stosowane w biznesie.
Brak Divi w tych statystykach może wynikać z tego, że Divi to również motyw, który obejmuje stronę. Gdy korzystamy z Divi, nie używamy innego motywu – to Divi pełni rolę motywu i page buildera jednocześnie, co różni go od innych rozwiązań. Jednakże, wszystkie te narzędzia trafiają do kategorii page builderów.
Mam nadzieję, że ta kwestia jest wyjaśniona dla osób, które nie są zaznajomione z technicznymi terminami lub wcześniej nie miały styczności z takimi definicjami. Jeśli nie, śmiało pytaj. Jestem do dyspozycji poniżej, a jeśli moje wyjaśnienie było niewystarczające, chętnie podam dodatkowe informacje.
Kiedyś, tworzenie niestandardowych elementów na stronie było wyzwaniem. Było to często związane z dodawaniem kodu i korzystaniem z wtyczek, takich jak ACF, cenionych przez deweloperów. To wymagało większego wysiłku i umiejętności, szczególnie jeśli chodzi o elementy niestandardowe, które nie były częścią pierwotnych założeń motywu. Teraz, nawet bez page buildera czy w Gutenbergu, proces ten nie był tak prosty ani intuicyjny jak dzisiaj.
Nasza oferta tworzenia stron :
Chciałbym zakończyć analizę, zwracając uwagę na aspekt techniczny. Jedną z kluczowych wad page builderów, podobnie jak w przypadku WordPressa, jest sposób, w jaki są używane przez użytkowników. Często to, jak ludzie wykorzystują te narzędzia, stanowi największą trudność, podobnie jak w przypadku WordPressa, gdzie nieodpowiednie wykorzystanie platformy jest jednym z głównych problemów.
Zauważyłem, że wiele osób korzysta z tutoriali online, gdzie można w krótkim czasie - 10 minut, godzinę, czy więcej - stworzyć stronę internetową, importując gotowe elementy, dodając różne wtyczki. W efekcie strona działa, ale osoba, która to robi, nie zdobywa głębszych umiejętności programistycznych czy technicznych. To trochę skrócone podejście, które oczywiście jest możliwe.
W takich przypadkach mamy pewną cenę do zapłacenia. Strona stworzona z gotowych elementów będzie miała spory rozmiar i ładować się wolniej. To najlepszy scenariusz, gdzie największą wadą jest właśnie wolniejsze ładowanie. Ale istnieje też ryzyko niekompatybilności między elementami. Kiedy instalujemy wiele gotowych rozwiązań, czasem jedna wtyczka robi za dużo rzeczy, a potem instalujemy kolejną, która z kolei próbuje zrobić jeszcze więcej.
Zobacz również:
Postanowiliśmy przeprowadzić szybkie zestawienie, więc zainstalowaliśmy motyw Astra, który dostarcza gotowe przykładowe strony startowe do zaimportowania. Niektóre z tych przykładów umożliwiają wybór page buildera, którym dana strona została stworzona. To daje świetną możliwość porównania dwóch identycznych przykładowych stron utworzonych przy użyciu różnych kreatorów stron.
Na pierwszy rzut oka widać subtelne różnice między szablonem do edytora blokowego a wersją stworzoną w Elementorze. Chociaż niektóre elementy dekoracyjne mogą być nieco uboższe w przypadku wersji do edytora blokowego, ogólnie rzecz biorąc, strony są dość zbliżone. Nawet strona utworzona w edytorze blokowym nie odbiega znacząco pod względem jakości wzornictwa od tej stworzonej w Elementorze.
Jednakże, jeśli chodzi o sam proces edycji, korzystanie z Gutenberga niestety jest mniej intuicyjne niż w przypadku Elementora. Motyw Astra, podobnie jak większość motywów z repozytorium WordPressa, nie jest w pełni zoptymalizowany pod kątem edytora blokowego. Brakuje tutaj perfekcyjnej zgodności stylów między backendem a frontendem, co wpływa negatywnie na doświadczenie użytkownika podczas edycji.
Jednak należy pamiętać, że te niedogodności dotyczą jedynie panelu administracyjnego i mogą być uciążliwe dla osób redagujących stronę. Jeśli chodzi o sam wygląd strony dla użytkowników, został on dostosowany w miarę dobrze. Pozytywnie też wypada fakt, że twórcy motywu wykorzystali jedynie standardowe bloki WordPressa do tworzenia stron startowych, nie wymuszając instalacji dodatkowych wtyczek z blokami.
Podsumowując, mimo pewnych niedoskonałości po stronie panelu administracyjnego, zestaw Astra z edytorem blokowym pozwala na stworzenie całkiem solidnej strony firmowej. Wizualnie nie odbiega ona znacząco od tego, co można osiągnąć przy użyciu Elementora.
Zobacz również nasze strony internetowe tworzone autorsko lub na builderze Kadence
Drzewo DOM, czyli model obiektowy dokumentu, to taka struktura danych, którą przeglądarka tworzy na podstawie kodu HTML strony podczas jej wczytywania. To jak mapowanie strony, które przeglądarka używa, aby zrozumieć i wyrenderować wszystkie elementy na stronie. To jak plan, na podstawie którego przeglądarka organizuje i prezentuje treści w oknie przeglądarki.
Im bardziej skomplikowane i rozbudowane jest drzewo DOM, tym więcej pracy musi wykonać przeglądarka, aby zinterpretować i wyrenderować stronę. To oznacza, że większe drzewo DOM może spowolnić ładowanie strony, ponieważ przeglądarka potrzebuje więcej czasu na przetworzenie wszystkich danych. Właśnie dlatego rozmiar drzewa DOM ma znaczenie dla prędkości ładowania strony, a także wpływa na doświadczenie użytkownika pod względem szybkości działania strony. To jedno z kryteriów branych pod uwagę w audycie Core Web Vitals, które ocenia jakość użytkowania strony internetowej.
Bierzemy teraz nasze dwie strony i skupmy się na porównaniu choćby jednej sekcji, na przykład tej z nagłówkiem umieszczonym u góry strony. W jednej kolumnie umieszczony jest tytuł wraz z krótkim wprowadzeniem i przyciskiem, natomiast w drugiej kolumnie znajduje się obraz.
Na pierwszy rzut oka zauważamy znaczącą różnicę, chociaż obie sekcje wyglądają niemal identycznie wizualnie. Jednakże, kod wygenerowany przez Elementor jest bardziej rozbudowany. Każdy element zawiera dodatkowo dwa zbędne divy, pełniące rolę wraperów, co stanowi niepotrzebne rozszerzenie struktury.
W porównaniu z Elementorem, kod wygenerowany przez Gutenberga jest prostszy i przypomina ten, który stworzylibyśmy samodzielnie, ręcznie kodując tę sekcję.
W sekcji, której analizę przeprowadziliśmy, można zauważyć różnice w liczbie elementów HTML:
Gutenberg: 13 elementów HTML
Elementor: 34 elementy HTML
W całej sekcji strony głównej, liczba elementów w drzewie DOM wygląda w ten sposób:
Gutenberg: 283 elementy
Elementor: 539 elementów
Jeśli zrezygnujemy z Elementora na rzecz edytora blokowego WordPressa, strona zostanie stworzona z bardziej prostego i wysokiej jakości kodu HTML.
Inne znaczniki HTML, z wyjątkiem <div> i <span>, przypisują sens poszczególnym elementom na stronie. To pozwala treściom na stronie być poprawnie zinterpretowanym przez różne urządzenia (np. czytniki ekranowe dla osób niewidomych) i algorytmy, takie jak boty Google.
Poprawne użycie semantycznych tagów HTML sprawia, że strona staje się dostępna dla różnych grup użytkowników, nawet dla tych, którzy nie mogą korzystać ze strony w standardowy sposób. To także umożliwia programom poprawne interpretowanie treści na stronie. Dodatkowo, stosując semantyczne tagi, zyskujemy korzyści w oczach Google, co może przyczynić się do lepszego pozycjonowania witryny.
Podczas tworzenia strony za pomocą page buildera, nie kontrolujemy bezpośrednio generowanego kodu z poszczególnych bloków czy modułów, ale sami wybieramy, które z tych elementów chcemy zastosować. To decyzje o wyborze konkretnych bloków czy modułów wpływają na semantykę kodu, którą generuje dany page builder.
Za pomocą funkcji Kolumny możemy stworzyć sekcję, gdzie każda kolumna zawierać będzie logotyp w postaci obrazka. W takim ułożeniu obrazy logotypów zostaną umieszczone w znacznikach <div>, które są częścią struktury generowanej przez blok Kolumny.
Możemy też użyć bloku Galeria, by umieścić w nim obrazy logotypów. To spowoduje wygenerowanie listy <ul>, co lepiej odzwierciedla semantykę listy logotypów.
Kiedy zagłębimy się w Gutenberga, zauważymy, że deweloperzy tego narzędzia przykładają wielką wagę do tworzenia semantycznie poprawnego kodu.
To się sprowadza do tego:
To są elementarne tagi HTML, ale nawet bardziej skomplikowane moduły, takie jak Media i Tekst czy Okładka, generują bardzo przejrzysty kod.
W przypadku Elementora, jeśli chodzi o semantykę, nie ma tu dużych problemów, ale wszystkie semantyczne tagi są otoczone dodatkowymi divami, które działają jako wrappery, na przykład:
To całkowicie nadmiarowe i właśnie to powoduje, że drzewo DOM w Elementorze jest dwukrotnie większe niż w przypadku Gutenberga, o czym wspominałam wcześniej.
Zachęcam do przyjrzenia się kodowi strony, którą stworzyłeś/aś za pomocą ulubionego page buildera. Porównanie kilku builderów pod względem jakości kodu może rzucić światło na różnice w ich wydajności i jakości generowanego kodu.
Liczba żądań i objętość przesyłanych danych to wskaźniki, które wpływają na budżet wydajności strony internetowej. Są także istotne dla wyników w narzędziach oceny Core Web Vitals.
Tymczasem, jeżeli wiele żądań to pliki CSS i JS, istnieje ryzyko, że większa część ich zawartości nie jest faktycznie używana na stronie. To z kolei obniża ocenę w narzędziach typu Core Web Vitals i aktywuje ostrzeżenia, takie jak: "Ogranicz nieużywany JavaScript" oraz "Ogranicz nieużywany kod CSS".
W nadmiarze kodu CSS i JS może kryć się problem zasobów blokujących renderowanie strony, co zostanie zasygnalizowane w postaci ostrzeżenia: "Wyeliminuj zasoby blokujące renderowanie".
Ilość i wielkość plików ładowanych na stronie mają ogromne znaczenie dla szybkości jej ładowania oraz wyników w Core Web Vitals. W przypadku użycia page builderów lub motywów typu all-in-one, które często zawierają nadmiarowe zasoby, np. te dostępne na platformach takich jak Themeforest, trudniej jest uzyskać dobre wyniki w ramach testów Core Web Vitals.
Przyjrzyjmy się teraz liczbie zapytań HTTP, które są niezbędne do pobrania wszystkich plików na naszych testowych stronach. Warto sprawdzić to szczególnie dla plików CSS, JS, mediów, fontów i innych zasobów.
Na pierwszy rzut oka zauważalne jest, że strona korzystająca z Elementora przesyła dwukrotnie więcej plików. Dodatkowo ilość przesyłanych danych jest ponad dwukrotnie większa niż w przypadku drugiej strony.
To wyjaśniając, ta różnica wynika głównie z wtyczki Elementor. Na stronie z Elementorem jest dodatkowo 8 plików CSS oraz 10 plików JS (zawierających biblioteki, takie jak Swiper o wielkości 139 kB).
Jeśli spojrzymy wyłącznie na pliki JavaScript, różnica w przesyłanych kilobajtach jest ogromna - wynosi ponad 15-krotność więcej w przypadku jednego z tych page builderów.
Sprawdźmy teraz, ile kodu w plikach CSS i JS pozostaje nieużyte. Do tego celu użyjemy narzędzia Coverage dostępnego w Google Chrome Tools. Od razu widać, że wiele zasobów Elementora pozostaje nieużyte, chociaż są w pełni wczytane na stronie.
Liczba zapytań do bazy danych oraz czas ich wykonania wpływają na TTFB (time-to-first-byte), co mierzy czas oczekiwania na pierwszy bajt danych z serwera. Kiedy mamy dużo zapytań do bazy danych lub zapytania SQL nieoptymalne, opóźniają one reakcję serwera. Dlatego ważne jest ograniczanie liczby takich zapytań. W WordPressie możemy to osiągnąć, na przykład usuwając wtyczki, które generują zapytania do bazy danych i spowalniają stronę.
Na naszych stronach testowych wykorzystamy wtyczkę Query Monitor. To narzędzie, które umożliwia nam w prosty sposób monitorowanie zapytań SQL wysyłanych do bazy danych. Pokazuje, skąd pochodzą te zapytania, na przykład czy są związane z określoną wtyczką, i pozwala nam zlokalizować te zapytania, które powodują opóźnienia.
Elementor w tym zestawieniu wytwarza aż 66 zapytań, co stanowi dwie trzecie całkowitej liczby zapytań do bazy danych podczas procesu ładowania strony. W przeciwieństwie do tego, wbudowany w WordPress edytor blokowy nie generuje dodatkowych zapytań poza domyślnymi operacjami wykonywanymi przez samą platformę WordPressa.
Edytor blokowy WordPressa nie generuje dodatkowych obciążeń dla prędkości ładowania strony. Funkcjonuje podobnie do klasycznego edytora, prezentując statyczny HTML wczytany z bazy danych na etapie ładowania WordPressa i renderowany przez motyw.
Elementor to narzędzie autonomiczne, które po instalacji i aktywacji staje się nakładką na domyślny edytor blokowy w WordPressie. Jest wyposażone w własne zasoby, jak pliki CSS czy JS, posiada unikalną logikę działania oraz dedykowany zespół programistów, którzy odpowiadają za jakość implementowanych rozwiązań. Oprócz tego, ma także własne cele biznesowe, co czasem może sprawić, że priorytetem staje się maksymalizacja zysków, a nie zawsze doskonała jakość generowanego kodu.
Świetny wynik strony z edytorem blokowym może być jeszcze lepszy przy wyborze (lub samodzielnym stworzeniu) bardziej lekkiego motywu. To jednak już bardzo dobry wynik, zwłaszcza biorąc pod uwagę, że na stronie nie przeprowadzano jeszcze żadnych optymalizacji.
Porzucenie Elementora na rzecz edytora wbudowanego w WordPressa ma klarowne korzyści, zwłaszcza w kontekście istotności wyników Core Web Vitals jako czynnika rankingowego w Google. Ponadto, generowany kod HTML jest na tyle porządny, że nawet webdeveloper może zrobić stronę z bloków z czystym sumieniem
Z drugiej strony, Gutenberg nie koncentruje się na oferowaniu obszernych możliwości dostosowywania stylów dla każdego bloku indywidualnie, gdyż nie jest głównie narzędziem do kreowania projektów stron. Jego głównym celem jest generowanie kodu HTML. Twórcy tego narzędzia skupiają się na przestrzeganiu dobrych praktyk dotyczących stron internetowych. Zasadniczo większość wytworzonego kodu HTML ma odziedziczyć style z ustawień globalnych, zamiast być ustawianą oddzielnie dla każdego bloku.
I mogę sobie wyobrazić, że dla osób, które nie są zaznajomione z zasadami tworzenia stron internetowych, a jednocześnie przyzwyczaiły się do różnorodnych funkcji oferowanych przez Elementor, przejście na coś innego może być trudne.
Gutenberg stale ewoluuje, rozszerzając swoje możliwości. Choć jego pełny potencjał wyjdzie na jaw za kilka lat, obecnie oferuje sporo funkcji. Już teraz umożliwia stworzenie całkiem solidnej i przede wszystkim szybkiej strony firmowej.
Agencja digital Hauerpower sp z o.o.
31-408 Kraków, Al. 29 Listopada 85
NIP 945-225-31-35
Copyrights 2010-2023
