10–15 minut
WordPress Gutenberg czy Elementor?
Cześć! W tym artykule porównam dwa edytory stron w WordPress: Gutenberg i Elementor. Każdy z nich ma swoje wady i zalety, więc zobaczymy, który może być lepszy do stworzenia strony bądź blogu.
Spis treści
WordPress Gutenberg
Gutenberg to domyślny edytor treści w WordPress, wprowadzony w wersji 5.0 (grudzień 2018). Jest to edytor blokowy, który zastąpił klasyczny edytor WordPress (TinyMCE). Działa na zasadzie układania treści w blokach, co daje większą elastyczność i nie wymaga znajomości kodowania. WordPress korzystał z klasycznego edytora TinyMCE (przypominał edytor Worda).
Wprowadzenie niestandardowych układów wymagało krótkich kodów, HTML-a lub kreatorów strony. Po wprowadzeniu Gutenberga (WordPress 5.0+), zamiast jednego pola tekstowego pojawił się system bloków (tekst, obrazy, wideo, kolumny, przyciski).
Stopniowo rozbudowywano edytor: dodano bloki dynamiczne, układy stron, a w WordPress 5.9 (2022) wprowadzono pełną edycję witryny (Full Site Editing, FSE).
Obecnie Gutenberg konkuruje z popularnymi kreatorami stron jak Elementor, oferując coraz więcej opcji personalizacji.
WordPress Elementor
Elementor to wtyczka do WordPress wprowadzona w 2016 roku, będąca edytorem wizualnym typu „przeciągnij i upuść”. Pozwala użytkownikom na budowanie stron bez kodowania, oferując zaawansowane opcje personalizacji.
Elementor od początku miał układ blokowy i boczny panel edycji, ale z czasem wprowadzono wiele nowości:
2016 – Wersja podstawowa Elementor.
2018 – Wprowadzenie Elementor Pro, dodającego edycję nagłówków i stopki.
2020-2022 – Większa optymalizacja kodu, poprawa szybkości, nowe widżety i szablony.
2023-2024 – Elementor stał się głównie płatny (darmowa wersja ma mniej funkcji), a WordPress wprowadza Gutenberg FSE jako konkurencję. Elementor zyskał więcej opcji, ale stał się cięższy (wymaga optymalizacji)
Wady i zalety
Gutenberg
Zalety:
– wbudowany w WordPress, nie wymaga dodatkowych wtyczek
– jego kod jest lekki przez to strony ładują się szybciej
– lepiej łączy się z WordPressowymi motywami
– jest możliwość edycji wpisów i stron w jednym narzędziu
– łatwiejsza konfiguracja menu jak i stopki
– możliwość dostosowania wyglądu za pomocą kodu CSS
Wady:
– problem z responsywnością czyli widoku strony na urządzeniach mobilnych
w momencie układania strony i dostosowania wielkości obiektów na stronie i uruchomienia jej online,
zdarza się, że wygląd strony nie jest adekwatny do tego co stworzyliśmy. Jak sobie z tym poradzić?
Osobiście stosuje trzy sposoby, pierwszy uruchamiam stronę online i sprawdzam na swoim smartfonie.
Drugi sposób to zmiana okna przeglądarki, wtedy również zmienia się rozdzielczość strony i widzę co należy poprawić.
Trzecim sposobem jest sprawdzenie różnych rozdzielczości, zwłaszcza na smartfonie w narzędziu developerskim.
Aby do niego się dostać wystarczy na stronie kliknąć prawym przyciskiem myszki, z listy wybrać Zbadaj element i
znajdujemy się z narzędziu developerskim. Z reguły w górnym panelu możemy się przełączyć na urządzenia mobilne
i zmieniać rozdzielczość ekranów smartfonu np. 600×900 pikseli jak i 480×600 pikseli.
– trudności z zarządzaniem galeriami zdjęć o różnych rozdzielczościach
kiedy mamy zdjęcia o różnych rozdzielczościach i chcemy dodać galerię na stronę, dostosowujemy ich wysokość i szerokość,
zdjęcia tracą na jakości.
– zaawansowane opcję do strony, wprowadzenie poprzez wtyczki lub motyw
Elementor
Zalety:
– pełna swoboda projektowania, możesz układać elementy dowolnie
– szybkie przełączanie między stronami bez wychodzenia z edytora
– rozbudowana personalizacja, można ustawić indywidualne style, margines wewnętrzny i zewnętrzny
– możliwość dostosowania wyglądu za pomocą kodu CSS
Wady:
– problem z responsywnością, czyli widoku strony na urządzeniach mobilnych, podobnie jak w Gutenberg
– różne układy strony w ustawieniach mogą, powodować zamieszanie
– konflikty wtyczek np. do menu
– wtyczka do menu jest wymagana w wersji darmowej, tylko w wersji PRO można umieścić menu bez dodatkowej wtyczki
WordPress Gutenberg
Tak wygląda czysty WordPress Gutenberg, bez motywu, wtyczek, jest tylko standardowy motyw.
Możemy dostosować standardowy motyw do swoich preferencji. Wchodzimy na zakładkę Wygląd – Motywy i klikamy na przycisk aktywnego motywu Dostosuj.
Wcześniej zmieniłam na ciemniejszy kolor, ze względu na to, że lepiej mi się pracuje na takim. W zakładce Nawigacja widzimy wszystkie nasze strony.
W zakładce Style zmieniamy kolor naszego motywu i dostosowujemy do naszych preferencji.
Również w zakładce Strony widzimy nasze witryny m.in. te, które zostały Opublikowane, Oczekujące, Usunięte itp.
Możemy skorzystać z szablonów do budowania strony, które dostarcza nam motyw.
Podobnie jak z szablonem od motywu, możemy także wykorzystać wzorce do budowania strony.
Celem stworzenia nowej strony przechodzimy na zakładkę Strony a następnie Utwórz Stronę.
W lewym górnym rogu obok logo WordPress znajduje się +, po kliknięciu, na plus ukazują się nam elementy, które możemy umieścić na stronie. Składające się z Akapitów, Nagłówków, Obrazków, Galerii itp. Sam podstawowy motyw od WordPress oferuje tylko podstawowe elementy, jeżeli chcemy posiadać ich więcej, należy dodać dodatkowy motyw.
Zaczniemy od nadania nazwy strony jako Strona Główna, następnie po lewej stronie z dostępnym elementów wybierzemy nagłówek i ustawimy jego wielkość czcionki na H1.
Jako nagłówek dodałam zdanie do stylizacji. Po prawej stronie mamy możliwość zmiany wyglądu tekstu nagłówka. Zaczniemy od wielkości czcionki, ustawimy ręcznie na 30 pikseli. Oczywiści jest opcja, by wybrać z dostępnego rozmiaru czcionki, zaczynając najmniejszego rozmiaru.
Obok słowa Typografia znajdują się trzy pionowe kropki, po ich naciśnięciu można włączyć wszystkie dostępne opcję. Oprócz wielkości czcionki, dostępny jest jej wygląd, wysokość linii, odstęp między literami czy ich wielkość. Poniżej Typografii znajdują się wymiary mianowicie margines zewnętrzny i dopełnienie, czyli margines wewnętrzny. Na samym końcu widnieje obramowanie, jego wielkość i promień. To wszystko, jeżeli chodzi o stylizowanie tekstu z podstawowym motywie WordPress Gutenberg.
Kolejnym krokiem będzie dodanie Galerii. Po lewej stronie wybieramy galerię, następnie korzystamy z Biblioteki mediów lub przesyłamy zdjęcia z komputera.
Wcześniej już umieściłam zdjęcia w Bibliotece, wystarczy je zaznaczyć i u dołu okienka kliknąć Utwórz galerię.
Po dodaniu galerii, wraz ze zdjęciami na stronę, wygląda to w ten sposób. Zdjęcia są przycięte, by pasowały do kontenera, trzy górne są nie dopasowane, a czwarte ułożyło się na pełną szerokość kontenera.
Z racji tego, że są cztery zdjęcia, zmieniłam ilość kolumn na 2, mimo tego zabiegu zdjęcia górne są większe od zdjęć dolnych, co nie wygląda zbyt estetycznie.
Ponownie dokonałam zmiany w liczbie kolumn, tym razem zastosowałam cztery. Zdjęcia może i są równej wysokości i szerokości, ale są obcięte, by dostosować się do kontenera.
Wstawione zdjęcia do galerii mają różne rozdzielczości, zamiast pełnego rozmiaru wybrałam miniaturę i w tym momencie zdjęcia mocno straciły na jakości. Po kolei wybierając Średnią rozdzielczość czy Pełną zdjęcia odzyskują jakość.
Przełączyłam wygląd strony z widoku monitora na tablet. Zdjęcia ułożyły się w takim sam sposób przy czterech kolumnach jak na monitorze komputera.
W następnej kolejności przełączyłam widok na urządzenia mobilne, czyli smartfony. Zdjęcia ułożyły się w ten sposób, że górne są większe od tych umieszczonych na dole. Niestety nie wygląda to estetycznie.
Poza galerią umieściłam dodatkowe zdjęcie. Po prawej stronie można wybrać samodzielnie jego wysokość i szerokość w pikselach lub rozciągnąć je chwytając kropkę u dołu zdjęcia bądź po prawej stronie.
Powiększyłam zdjęcie sposobem powyżej, czyli klikając na kropkę, rozciągnęłam zdjęcie.
Zmieniłam widok na tablet i tak teraz wygląda zdjęcie. Podobnie jak na ekranie monitora komputera.
Zdjęcie wyszło poza kontener na urządzeniach mobilnych, zatem należy je zmniejszyć celem dopasowania do ekranu smartfonu.
Zmiana wielkości zdjęcia na urządzeniach mobilnych, w celu dopasowania do ekranu smartfonu i wyrównanie z galerią powyżej.
Ostatnim krokiem jest publikacja strony. Do wyboru mamy Opublikowanie Publiczne, Prywatne i Zabezpieczone hasłem oraz można to zrobić natychmiast bądź wybrać datę i godzinę publikacji.
W momencie posiadania jednej witryny już możemy ustawić, żeby strona była statyczna, co znaczy, że jej treść będzie stała i nie zmienia, w przeciwieństwie do blogu. Przechodząc na zakładkę Ustawienia i wybierając czytanie, zaznaczamy Statyczna strona, z listy rozwijanej Strona Główna i zapisujemy zmiany.
WordPress Elementor
WordPress Elementor to wtyczka, zatem by móc z niego korzystać należy ją zainstalować. W tym celu przechodzimy na zakładkę Wtyczki, u góry strony klikamy Dodaj nową, po prawej stronie w Szukaj wtyczek wpisujemy słowo kluczowe, jakim jest Elementor. Pojawi się lista wtyczek, nas interesuje pierwsza z nich o nazwie Elementor Kreator witryn. Klikamy zainstaluj, a następnie Włącz. Pojawi się Kreator, w którym do wyboru będzie wersja Darmowa i Pro, czyli płatna oraz konieczność założenia konta. Skorzystam z wersji darmowej.
Utworzyłam stronę, zaczynając od lewej strony i klikając na ikonę Elementor mamy do wyboru: Kreator motywów, Historię, Preferencję użytkownika, Skróty klawiszowe i wyjście do WordPress.
Następny przycisk dotyczy Ustawień globalnych, w nich ustawiamy wielkość czcionki, tło czy główne kolory witryny.
Obok Ustawień globalnych znajduję się Struktura. W niej widzimy kontenery i ich zawartość np. obrazek czy akapit.
Na samym środku obszaru roboczego do wyboru widok monitora komputera, na powyższym widok ze strony tabletu i ostatnia opcja widok na smartfonach, można dowolnie się przełączać i dostosować stronę pod dany ekran.
Koło nazwy strony mieści się koło zębate, a w nim układ strony. Do wyboru jest Domyślnie – widoczna jest menu oraz stopka. Elementor Canvas – widok jak powyżej bez nazwy strony, bez marginesów i bez menu oraz stopki. Elementor Cała szerokość i Motyw – widok jak przy Domyślnym ustawieniu.
Dodałam kontener, wybierając go za pośrednictwem plusa po lewej stronie i dodatkowo umieszczając w nim Nagłówek. Jak widać, wpisałam krótkie zdanie w Nagłówku.
Klikając na kontener, a konkretnie na samym środku kropki, wchodzimy do jego edycji i mamy do wyboru jeden kontener w Nagłówku czy parę kontenerów, zmieniając z Flexbox na Siatkę. Pozostanę przy jednym kontenerze.
Zostawiłam jeden kontener, dodatkowo zmieniłam ustawienia układu strony z Domyślnego na Elementor Canvas.
Kiedy znajdujemy się na końcu kontenera, w jego środku po prawej jest ołówek po jego kliknięciu, przechodzimy na edycję Nagłówka. Po lewej stronie pierwsza opcja to Treść, np. jaki tytuł ma mieć Nagłówek. Następnie jest Styl, w nim znajduje się wielkość czcionki czy obramowanie. W zaawansowane ustawia się margines wewnętrzny, jak i zewnętrzny.
Zmienię kolor tytułu Nagłówka, na czarny robię to, przechodząc na zakładkę Styl, wykonam wyrównanie do Środka i u dołu zmienię kolor na czarny w zaznaczonym miejscu.
Tak wygląda strona po wprowadzonych wyżej zmianach.
Elementor posiada również darmowe szablony, niestety jest tego niewiele oraz gotowe strony, które można wprowadzić na stronę. W wersji darmowej są 4 strony do wykorzystania. Aby to zrobić, na środku strony klikamy środkową ikonę przypominającą folder.
Szablony.
Strony.
Kolejnym krokiem jest umieszczenie Galerii na stronie, z plusa po lewej stronie wybrałam Galerię Podstawową, zdjęcia już posiadałam z Biblioteki Gutenberg następnie Utworzyłam galerię. Jak widać zdjęcia, od razu ułożyły się w powyższy sposób. Dodatkowo nie są one w pełnej szerokości i wysokości, ale mają wymiar 150×150 pikseli.
Rozdzielczość 300×300 tu już widać dużą zmianę. Pierwsze zdjęcie jest pionowe, więc nie dostosuje się do zdjęć poziomych. Niestety zarówno w Gutenbergu, jak i Elementor, gdy zdjęcia mają różną wielkość, nie mam możliwości dostosowania ich indywidualnie w Galerii.
A tu widok na pełnej rozdzielczości, wygląda to nieestetycznie.
W Style jest możliwe ustawienie odstępu między zdjęciami. Powyżej ustawiłam maksymalny odstęp między nimi.
Przełączyłam widok na tablet, nie zmieniając odstępu, nie wygląda to estetycznie.
Zdjęcia na smartfonie ułożyły się pionowo, jedno pod drugim, lecz wielkość tych zdjęć nie jest dopasowana do reszty, jedno zdjęcie jest mniejsze, następne większe.
Jeżeli chodzi o WordPress Gutenberg i usunięcie elementu na stronie przez przypadek, zawsze możemy cofnąć usunięcie strzałką, która znajduje się u góry po lewej stronie. Inaczej jest w przypadku Elementor. Brakuje mi możliwości cofnięcia za pomocą strzałki. W Elementor, naciskając na jego ikonę, jest opcja jak historia. Jeżeli usunęliśmy jeden element, to będzie to pierwsza opcja u góry do przywrócenia. W przypadku gdy usuniemy więcej elementów na stronie, będzie trochę szukania w historii.
Przydatną funkcją w Elementor jest to, że z poziomu jeden strony możemy przejść na kolejną, klikając strzałkę w dół obok tytułu strony lub Dodać nową stronę.
Wychodząc z Elementor do WordPress, na zakładce Strony widzimy Utworzone strony. WordPress odróżnia witryny, jak widać powyżej, jest odznaczony Elementor a bez odznaczenia to Gutenberg.
Skonstruowanie menu, jak i stopki w WordPress Gutenberg jest wbudowane. W tym celu przechodzimy na zakładkę Wygląd i pod zakładkę Menu. Dodajemy nowe menu i nadajemy mu nazwę. Kolejną czynnością jest z kolumny lewej dodanie stron i ułożenie ich. W ten sam sposób postępujemy ze stopką.
Wcześniej już przygotowałam nagłówek, w którym umieściłam link do Strony Głównej, z lewej strony jest nazwa witryny a z prawej nazwa strony.
Elementor w wersji darmowej nie ma wbudowanego menu i stopki. Dodaje się za pomocą wtyczki. Zatem przechodzimy, na zakładkę wtyczki w słowie kluczowym wpisujemy nazwę wtyczki Templately – tylko ona mi zadziałała – zainstalujemy i włączymy. Korzystanie ze wtyczki wiąże się z założeniem konta.
Z panelu bocznego po lewej stronie wybieramy nazwę wtyczki Templately, a następnie opcję Theme Builder. U góry strony dodajemy nowe i pojawi się okienko do wyboru Elementor i Gutenberg oraz co chcemy utworzyć, w przypadku menu – header, a stopki – footer. Można również nadać im nazwę. Po wybraniu odpowiednich opcji jak Elementor header lub footer przechodzimy dalej.
Wybranie szablonu do menu lub stopki wiąże się z wejściem w ikonę wtyczki, którą zaznaczyłam na powyższym obrazku.
Po włączeniu ukazuje się nam okienko, w którym po kolei zaznaczamy: Block, po lewej wybieramy Header lub Footer w zależności co chcemy umieścić na stronę. Przypomnę Header – Menu, Footer – stopka. Następnie po prawej zaznaczamy Starter, czyli darmowe szablony i ukazuje się nam lista dostępnych szablonów. Wybieramy ten, który nas najbardziej interesuje i instalujemy za pomocą Insert. Wtyczka sprawdzi, czy mamy odpowiednie komponenty po to, by móc ją wdrożyć na stronę i to wszystko. Potem czeka nas już tylko dopasowanie czcionki, kolorystyki czy usunięcie elementów lub ich dodanie.
Ograniczenia do co ilości szablonów w Elementor można obejść w następujący sposób: przechodzimy po lewej stronie paska bocznego i wybieramy Motyw, następnie dodajemy nowy np. Astra. Po włączeniu motywu przechodzimy na samą wtyczkę i po prawej stronie instalujemy Spectra.
Klikamy w ikonę wtyczki Spectra i tutaj instalujemy Starter Templates.
Wchodząc na edycję strony w Elementor, na samym środku klikamy na ikonę Starter Templates, po czym ukazują się nam szablony.
To są dostępne szablony z motywu Astra, które możemy dostosować do własnych preferencji.
WordPress Gutenberg ma dostęp do szablonów z motywu Astra bezpośrednio. Dodajemy nową stronę, przechodząc, na edycję u góry strony klikamy Biblioteka projektowa, po czym przechodzimy na zakładkę Kits i tam wybieramy interesujący nas szablon, a następnie w prawym dolnym rogu przyciskamy Insert Template i to wszystko.
Podsumowanie
Jeżeli chcesz łatwość i szybkość – wybierz Gutenberg. Posiada rozbudowany kokpit, do którego można się przyzwyczaić
i możliwość wprowadzenia menu i stopki w jednym miejscu.
Jeżeli chcesz pełną kontrolę nad wyglądem wybierz Elementor. W wersji darmowej jest niewielkie pole manewru,
ale można go połączyć z motywem lub opłacić wersję PRO.
Dajcie znam w komentarzu, którego edytora używacie.
Zobacz, również różnice w wprowadzeniu animacji kodem CSS w WordPress Gutenberg i Elementor zamiast stosowania wtyczek, linki poniżej.
Strona działa, ale nikt się nie odzywa – co sprawdzić?
Strona działa, ale nikt się nie odzywa. Co sprawdzić? Wchodzisz do sklepu, wszystko wygląda…
Strona działała, ale Google jej nie widział. Sprawdziłam te ustawienia WordPress
Strona działa, można ją otworzyć z linku, więc pojawia się pytanie:
dlaczego nie wyświetla się…
Formularz kontaktowy nie wysyła wiadomości
Pewnego dnia dzwoni klient i mówi:
Wysłałam tydzień temu zapytanie przez formularz na stronie,
ale…
WordPress to nie tylko szablon.
WordPress to nie tylko szablon. Co decyduje o tym, czy strona naprawdę działa Na…
SEO-wiec, copywriter i marketer czym się różnią i jak wpływają na stronę
Gdy planujesz stronę internetową albo chcesz ją poprawić, pojawiają się trzy pojęcia:
SEO, copywriting…