strona-wizytówka

Strona-wizytówka w Elementorze czy w Gutenbergu?

Atrakcyjna witryna internetowa, zoptymalizowana pod kątem wyszukiwarek, pozwala klientom znaleźć Twoją firmę, a Tobie umożliwia dotarcie do szerszej grupy docelowej.  Jest doskonałym narzędziem promocji Twoich usług i produktów. 

O powodach, dlaczego strona internetowa jest obecnie tak ważna, pisałam już na blogu – 5 powodów dlaczego potrzebujesz strony internetowej. Dziś przybliżę jeden z rodzajów witryn internetowych, czyli stronę typu one-page, inaczej zwaną stroną-wizytówką. A dodatkowo, porównam dwie tego typu strony – jedną utworzoną w edytorze blokowym Elementor https://pecywit.pl/, drugą we wbudowanym w WordPress Gutenbergu https://electro-invest.com/

Czym jest strona-wizytówka? 

Strony internetowe typu one-page są obecnie niezwykle popularne. Coraz więcej firm, chcąc zaprezentować swoją markę w internecie, wybiera taką opcję zamiast rozbudowanej witryny wielostronicowej.

Czym dokładnie jest strona one-page, lub inaczej strona-wizytówka?

To po prostu witryna zawierająca tylko jedną stronę HTML. Nie ma żadnych dodatkowych i osobnych podstron, zawierających na przykład ofertę lub kontakt.

Taki model witryny służy firmom lub osobom prywatnym przede wszystkim do prezentacji marki lub promocji i ma mnóstwo zalet:

  • witryny jednostronicowe są przejrzyste i zrozumiałe
  • są bardzo intuicyjne – nawigacja jest liniowa
  • zwiększają liczbę konwersji – przez mniejszą ilość treści i zakładek, użytkownicy szybciej rozpoczynają proces zapoznania się z ofertą, bez odwracania uwagi, czy zagubienia w zakładkach
  • są responsywne – dzięki niewielkiej ilości treści możesz łatwo dostosowywać witryny jednostronicowe do mniejszych ekranów i urządzeń. Ponadto przewijanie jednej strony jest łatwym i naturalnym ruchem
  • przeglądarki łatwo odnajdą Twoją firmę
  • w prosty i czytelny sposób możesz zaprezentować oferowane produkty i usługi
  • możesz klarownie przedstawić profil działalności firmy
  • widoczne dane kontaktowe niezbędne do nawiązania współpracy
  • są łatwiejsze do wykonania oraz można je zbudować w znacznie krótszym czasie
  • dużo szybciej się ładują, co znacznie wpływa na odbiór przez użytkowników

Pamiętaj! Z przeprowadzonych badań wynika, że 47% użytkowników internetu oczekuje, że strona, którą odwiedzają, załaduje się w ciągu 2 sekund. Gdy czas jej wczytywania przedłuża się, na przykład do 3 sekund, 40% z nich najprawdopodobniej zrezygnuje i nigdy nie zapozna się z Twoją ofertą. Nikt nie lubi wolno działających witryn!

Co powinno się znaleźć na stronie typu one-page?

Jeśli dojdziesz do wniosku,  że witryna typu one-page jest tym, czego potrzebujesz, powinieneś dokładnie zastanowić się, co chcesz na niej zamieścić.

Kluczowe są:

  • prezentacja firmy
  • prezentacja oferty
  • kontakt

Opcjonalnie możesz dodać opinie o firmie/referencje, cennik itd.

Odwiedzający Twoją stronę nie mogą mieć wątpliwości, czym się zajmujesz. Z łatwością powinni odnaleźć Twoją ofertę i sposób, w jaki mogą się z Tobą skontaktować. Nie wolno również zapomnieć o Call to action (CTA)! 

Czym jest Call to action? To wezwanie do działania, czyli krótka informacja na Twojej stronie,  która niejako “nakazuje” użytkownikowi wykonać określone czynności. Wezwanie do działania jest zwykle zapisywane jako polecenie lub wyrażenie akcji, takie jak „Zarejestruj się” lub „Kup teraz” i zazwyczaj ma postać przycisku lub hiperłącza.

Jak powstają strony-wizytówki?

Teraz kiedy masz już całkiem spore pojęcie o stronach typu one-page, porównajmy witryny powstałe na dwa różne sposoby. Na pierwszy rzut oka wyglądają podobnie i obie zostały wykonane w WordPressie (tzw. CMS – system zarządzania treścią napisany w języku PHP). W rzeczywistości różnią się zasadniczo – jedna powstała przy pomocy edytora blokowego Elementor, druga zaś z udziałem wbudowanego w WordPress Gutenberga. Która opcja jest lepsza? Przekonajmy się.

strona-wizytówka WordPress elementor

Czym zachwycił mnie Elementor?

Kiedy “odkryłam” połączenie WordPress + Elementor, wpadłam w euforię. Dopiero co ukończyłam kurs, który nauczył mnie jak tworzyć funkcjonalne strony i dzięki Elementorowi proces ten wydawał mi się wówczas niezwykle prosty, łatwy i przyjemny. A do tego niewymagający zbyt wiele czasu. Oczywiście wkrótce zadziałała stara zasada – “im więcej się uczysz, tym mniej wiesz” (ale o tym przekonałam się nieco później). Przez chwilę jednak byłam wręcz zachwycona własnymi umiejętnościami. 😉

Czym jest Elementor? To najpopularniejszy kreator (tzw. wtyczka) stron WordPress z pięcioma milionami instalacji (stan na maj 2020 r.). Od czasu jego uruchomienia w 2016 r. liczba instalacji tej wtyczki stale rośnie.

Jest to darmowy (istnieje również wersja pro) edytor WordPress typu drag and drop (przeciągnij i upuść), który pozwala tworzyć eleganckie witryny WordPress w prosty i szybki sposób.

W praktyce działa to w następujący sposób – instalujesz wtyczkę Elementor na swoim Wordpressie i praktycznie z miejsca możesz projektować stronę na interfejsie witryny, po prostu układając odpowiednie bloczki i elementy. Oczywiście zabierając się za tworzenie strony, musisz te bloczki znać i powinieneś wiedzieć sporo innych przydatnych rzeczy. Niemniej sam proces tworzenia jest naprawdę intuicyjny i dosyć łatwy. Do użytku mamy również widżety, szablony, wtyczki dodatkowe itp. Wachlarz możliwości może oszołomić (zwłaszcza początkującego użytkownika).

Dlaczego więc sięgnęłam po Gutenberga?

Interesuję się tematem budowania stron i czytam w związku z tym sporo artykułów, wpisów i ciekawych informacji z tym związanych. W wielu publikacjach spotkałem się z krytycznymi opiniami na temat Elementora oraz osób budujących strony tym sposobem. 

Zaintrygowało mnie wówczas, dlaczego tak “idealne” narzędzie jest krytykowane? Otóż okazało się, że poza wieloma niewątpliwymi zaletami, Elementor ma również sporo istotnych wad. I nieporównywalnie lepszą opcją jest… Gutenberg.

Co ma wspólnego niemiecki drukarz ze stronami internetowymi?

Gutenberg to nie tylko twórca przemysłowej metody druku, ale i nazwa edytora blokowego opracowanego przez specjalistów od WordPress. Został on wydany w 2018 roku wraz z WordPress 5.0 i jest domyślnym edytorem treści podczas korzystania z najpopularniejszego CMS na świecie.

Powodem, dla którego WordPress stworzył Gutenberga, było usprawnienie projektowania, budowania i publikowania stron internetowych. Wprowadzono w nim system bloków modułowych, nieco podobnych w założeniu do Elementora. 

Jedną z kluczowych zalet edycji bloków Gutenberga jest możliwość podglądania, jak będzie wyglądać gotowa strona podczas edycji – funkcja, której brakuje w klasycznym edytorze tekstowym. Dzięki temu użytkownicy mogą dostosowywać rozmiar, odstępy i konfiguracje w czasie rzeczywistym, zamiast przełączać się w tryb podglądu po utworzeniu strony lub wpisu.

System oparty na blokach pozwala również użytkownikom wstawiać niestandardowe bloki dla określonych zastosowań i efektów. Gutenberg jest nieustannie rozwijany, można się zatrem spodziewać, że będzie coraz lepszy i coraz bardziej intuicyjny. 

strona-wizytówka WordPress elementor

Pojedynek Elementor VS Gutenberg

Po tym wprowadzeniu przechodzimy do najważniejszego punktu dzisiejszego wpisu – czas zacząć pojedynek i wybrać zwycięzcę. Edytory ocenię (subiektywnie) pod kątem: łatwości obsługi, funkcji, responsywności, szybkości strony oraz ceny.

1. Łatwości użytkowania

Edytor bloków Gutenberga jest bardzo przejrzysty, a dodawanie różnych typów bloków jest proste, choć może nie do końca intuicyjne. Możesz korzystać z wielu różnych opcji – od najprostszego bloku typu akapit do pisania treści, po bardziej skomplikowane, jak kod i niestandardowe bloki HTML.

Co więcej, dzięki różnymi wtyczkom typu Kadence, możesz “podrasować” swojego Gutenberga i tworzyć bloki niemal tak zaawansowane jak w Elementorze.

Przyznam szczerze, że potrzebowałam chwili na oswojenie się z tym edytorem, jednak obecnie uważam, że jest bardzo wygodny w użyciu. To wyłącznie kwestia praktyki.

Elementor ma dużo bardziej intuicyjny i przyjazny dla użytkownika interfejs. Jest tak – posiada zdecydowanie więcej elementów do wyboru, co poszerza wachlarz naszych możliwości przy tworzeniu strony.

Można powiedzieć, że na chwilę obecną Elementor jest jakby starszym i większym bratem Gutenberga, jednak pewne jest, że ten stan nie potrwa długo.

2. Funkcjonalność

Gutenberg jest świetnym narzędziem do pisania wszelkiego rodzaju treści – posiada wiele dostosowanych do tego bloków np. typu akapit, różne rodzaje cytatów itp. Łącząc podstawową wersję Gutenberga z dodatkami, możliwości urozmaicania bloków są niemal nieograniczone.

Wielką zaletą bloków Gutenberga jest również to, że są one stosunkowo lekkie i szybko się ładują.

Elementor ma do wyboru szeroką gamę wbudowanych widżetów, bloków, elementów i innych dodatków. Dostępny jest również kreator motywów i biblioteka szablonów, które ułatwiają i przyspieszają rozpoczęcie pracy.

Zarówno Gutenberg, jak i Elementor są edytorami typu „przeciągnij i upuść”, Elementor jest jednak na ten moment narzędziem dużo bardziej rozbudowanym – ma dużo więcej opcji i większą elastyczność.

Korzystając z Elementora, trzeba uważać na aktualizacje! Za ich przyczyną strona może się od czasu do czasu mocno posypać, a jej naprawienie, czy dojście do tego, która zaktualizowana wtyczka ją zepsuła, może być dosyć czasochłonne. Przeważnie jest to kwestia wyczyszczenia pamięci podręcznej – cache, nie zawsze jednak mamy taką możliwość, lub po prostu nie wiemy, że coś się, mówiąc kolokwialnie, rozjechało.

Tego typu sytuacje mogą znacznie popsuć odbiór naszej strony i wywołać niezadowolenie klienta (jeśli wykonana została dla kogoś innego). Przy stronach wykonanych w Gutenbergu taki problem nie występuje.

3. Responsywność

W związku z tym, że obecnie strony internetowe są przeglądane głównie na urządzeniach mobilnych, powinny być idealnie do nich dostosowane.

Zarówno Gutenberg, jak i Elementor są kompatybilne z ekranami mobilnymi, dzięki czemu strony tworzone przy ich pomocy są responsywne.

Elementor daje sporo kontroli, jeśli chodzi o wygląd strony na telefonie. Możesz wybrać, które widżety będą widoczne w mobilnej wersji Twojej witryny. Możesz również ukryć obrazy, które są zbyt duże, aby wyświetlić je na ekranie telefonu komórkowego. Itp. Itd.

Gutenberg niestety nie pozwala w tak prosty sposób dostosowywać widok strony na urządzeniu mobilnym. Trzeba liczyć na responsywny motyw WordPress, lub zainstalować dodatkową wtyczkę. Jednak różnego rodzaju dodatki do Gutenberga, typu Kadence czy Stackable, dają w tym zakresie dużo więcej możliwości.

Podsumowując. Zarówno Gutenberg, jak i Elementor są doskonale responsywne. Możesz użyć jednego z nich, aby stworzyć świetnie wyglądającą mobilną wersję swojej witryny. Jeśli jednak potrzebujesz dokładniejszego dopasowania elementów w widoku na telefon czy tablet, Elementor jest znacznie lepiej dostosowany do takich działań.

4. Szybkość strony

Szybkość strony odnosi się do szybkości ładowania treści w Twojej witrynie i pod tym względem Gutenberg wyraźnie wygrywa z Elementorem. 

Elementor to dodatkowa wtyczka, która powoduje, że strona nadpisuje bardzo dużo kodu, który stronę obciąża. Zwłaszcza przy budowaniu małych stron (one-page) starajmy się uniknąć takiego obciążenia. Przecież właśnie po to m.in. tworzymy prostą wizytówkę, żeby mieć gwarancję szybkości ładowania. 

Gutenberg jest natomiast wbudowany w WordPress, co sprawia, że strona jest dużo lżejsza i szybsza.

5. Cena

Gutenberg jest darmowy i wbudowany w WordPress. Co więcej, ekosystem Gutenberga nieustannie się rozwija i dodawanych jest do niego coraz więcej darmowych bloków (oraz bloków premium), takich jak wspomniane już Stackable czy Kadence. 

Z kolei Elementor ma darmową wersję i możesz go używać na dowolnej liczbie stron internetowych. Ta wersja umożliwia jednak dostęp tylko do podstawowych widżetów i szablonów. Dopiero edycja płatna oferuje naprawdę bogatą bibliotekę szablonów, bloków i elementów.

strona-wizytówka WordPress guttenberg

Gutenberg vs Elementor: który lepszy? 

Ja wybrałam Gutenberga. Mimo tego, że początkowo przysporzył mi nieco problemów. Tak jak wspomniałam, jest mniej intuicyjny i nieco trudniejszy w użyciu. Jednak tylko na początku – jeśli zapoznasz się z nim lepiej i dodasz dedykowane wtyczki, otrzymasz świetne narzędzie do tworzenia stron.

Jeśli nadal nie potrafisz się zdecydować, którą drogą podążyć, powinieneś wypróbować aktualizację Elementora, zapewniającą pełną kompatybilność między Elementorem i Gutenbergiem. Tak, tak. Elementor stworzył bloki Elementor dla Gutenberga!

Elementor Blocks to osobna wtyczka, którą można pobrać z repozytorium WordPressa. Pozwala ona jednym kliknięciem osadzić szablony Elementora w edytorze Gutenberg. Niestety, nie podzielę się wrażeniami z jej użytkowania, ponieważ nie korzystałam jeszcze z tej opcji i na razie, nie mam takiej potrzeby. Praca w Gutenbergu całkowicie mnie na ten moment zadowala.

Przeczytaj również, w jaki sposób powstają moje strony w Gutenbergu: Case study: budowa strony internetowej WordPress.