Jak zbudować stronę za pomocą Gutenberga w WordPressie

Pod koniec 2018 roku miłośnicy WordPress dostały długo oczekiwaną odnowę dla swego systemu. Tym razem praca nad nową wersją 5.0 trwała ponad 2 lata, co było związane między innym z wprowadzeniem Gutenbergu. Jest to wizualny kreator, który zastąpił wcześniejsze rozwiązanie bazujące się na edytorze TinyMCE. Dzięki temu możecie Państwo nie tylko dodawać zawartość, lecz także tworzyć całe strony za pomocą metody „Przyciągnij i Upuść”. Mówiąc w prosty sposób obecnie dla dodania strony na WordPress nie musicie Państwo edytować kod. Wystarczy wybrać potrzebne bloki i za pomocą myszki umieścić ich na stronie. Oprócz tego każdy blok ma swoje unikatowe opcje. To pozwala w lekki sposób zmodyfikować elementy na stronie według własnych potrzeb.

Jednak nowa funkcjonalność systemu została negatywnie podejrzana przez jego użytkowników. O tym wspominałem w poprzednim wpisie o Gutenbergu, więc nie chcę się powtarzać. Dodam tylko, że moja pierwsza znajomość z tym edytorem nie była zachwycająca. Wcześniej pracowałem z innymi edytorami dla WordPress, w tym Elementorem. Mają one nie tylko dużo więcej opcje, lecz także posiadają wygodniejszy interfejs oraz szybciej działają. Ale warto zauważyć, że te edytory istnieją na rynku już od kilku lat. Dlatego one były dopracowane przez zespoły twórców. Oprócz tego inne użytkownicy przygotowały szereg rozszerzeń do popularnych edytorów. Gutenberg na pewno czeka podobna historia. Przynajmniej spodziewam się na to. 🙂

W dzisiejszym artykułu nie chcę chwalić Gutenberga (chociaż jestem sympatykiem tego rozwiązania). Lepiej pokażę jak wygląda tworzenie prostej strony na zasadzie tego edytora. Więc jeśli planujecie aktualizować WordPress do wersji 5.x i zacząć pracę z Gutenbergiem, ten temat na pewnie się przyda.

Najpierw zaczniemy z motywu. Musicie Państwo upewnić się, że on jest kompatybilny z Gutenbergiem. Jeśli Pańska strona funkcjonuje od kilku lat i wasz motyw nie był zaktualizowany po wydaniu WordPress 5.0, z dużym prawdopodobieństwem templatka nie wspiera nowy edytor. Także warto zauważyć, że przejście na nową wersję systemu także jest ryzykowne. Więc przed podjęciem takiej decyzji warto zrobić kopię zapasową strony! Wtedy w razie awarii witryny będą Państwo mogły jej odnowić. W moim przypadku skorzystam się ze standardowego motywu Twenty Nineteen, który został wydany razem z nową wersją WordPress. Jak mogliście Państwo zrozumieć on jest na 100% kompatybilny z Gutenbergiem.

A teraz przejdę do tworzenia strony za pomocą nowego edytora. Dlatego w panelu administracyjnym wybieram sekcję Strony – Dodaj nową (rys. 1).

Okno edytora Gutenberg

Otworzy się nowe okno edytora, które jest podzielone na 3 obszary:

  1. Obszar główny, który znajduje się po centrum. Tutaj dodajemy naszą zawartość.
  2. Obszar po prawej stronie oraz panel boczny. W nim znajdziecie ustawienia dotyczące strony oraz wybranego bloku.
  3. Obszar górny także jest dodatkowym panelem. Na nim znajdują się przyciski dotyczące dodania bloków, cofania zmian, zapisania zmian, podglądu strony i jej publikacji.

Dlatego aby dodać pierwszy element (w Gutenbergu to się nazywa blok) na stronę warto kliknąć przycisk (+). On jest dostępny na panelu górnym oraz pojawia się na obszarze głównym po najechaniu myszką na blok z tekstem „Proszę zacząć pisać aby wybrać typ bloku”. Klikając po tym przycisku otworzy się nowe okno z dostępnymi blokami do wyboru (rys. 2).

Dodanie nowego bloku na stronę

Na początku wybieram okładkę, do której wstawię obrazek tematyczny (rys. 3).

Dodanie bloku Okładka

Obrazek, który planuję dodać mam w bibliotece, dlatego podłączam go z tego źródła.

Dodanie obrazku do Okładki

Jak widać z rynku 4 na panelu bocznym pojawiły się dodatkowe opcje dla personalizacji tego bloku. Każdy blok ma swoje ustawienia, które możecie Państwo poznać po bliższym zapoznaniu z elementami edytora.

Do okładki dodam tekst powitalny i wybiorę nakładkę o kolorze czarnym (w przejrzystości 60%), aby trochę przyciemnić obrazek. Dalej wybiorę położenie okładki na stronie. W moim przypadku to pełną szerokość (rys. 5).

Personalizacja Okładki

Następnie dodam trochę informacji o sobie. Warto zauważyć, że każdy nowy akapit to osobny blok. Na poniższym rysunku podałem przykład jak wygląda dodanie nagłówku (rys. 6).

Dodanie nagłówku na stronę

Poniżej nagłówku dodałem blok, który się nazywa Media i tekst. Za jego pomocą można razem połączyć obrazek i zawartość tekstową (rys.7).

Dodanie nagłówku na stronę

A teraz stworzę 2 kolumny (niestety standardowa funkcjonalność Gutenberga nie pozwala tworzyć 3 i więcej kolumn) do których dodam informacje o oferowanych kategoriach produktów. Zrobię to w taki sposób: do każdej kolumny dodam okładkę i podłączę obrazek tematyczny oraz odpowiedni tekst (rys. 8).

Dodanie okładek do kolumn

Dalej dodam przyciski, które będą prowadziły do tych kategorie produktów. Odpowiedni blok można znaleźć wśród dostępnych elementów Gutenberga (rys. 9).

Dodanie przycisków do kolumn

Jak widać z rysunku 9 jeden przycisk zrobiłem niebieskiego koloru, a inny – bordowego. Oprócz tego można zmieniać kolor tekstu oraz styl przycisków.

No i na sam koniec dodam jeszcze akapit tekstowy i wideo z YouTube. Warto dodać, że Gutenberg zawiera wygodne widgety do podłączenia różnej zawartości z zewnętrznych źródeł. Wystarczy wybrać odpowiedni widget i dodać link. W moim przypadku to YouTube (rys. 10).

Dodanie wideo na stronę

Po dodaniu odnośnika wideo będzie załadowane na stronę (rys. 11).

Dodanie wideo na stronę

A teraz można opublikować wpis i sprawdzić jak on wygląda (rys. 12).

Strona stworzona za pomocą Gutenbergu

Jak widać z rysunku wszystko wygląda fajnie. Oczywiście można jeszcze pozmieniać rozmiary oraz połażenie bloków, aby wszystkie one były umieszczone po centrum. No i poprawić błędy w pisownie. 🙂 Ale to już drobiarski. Główny ceł został osiągnięty. Stworzyłem pierwszą stronę na Gutenbergu w krótki czas i nie dodałem żadnej linijki kodu. Dlatego można powiedzieć na pewno, że ten edytor jest ciekawszy za TinyMCE, który używał się wcześniej.

I chociaż obecnie Gutenberg nie zawiera tyle opcje jak inne edytory dla WordPress, ale znaczniej uprasza tworzenie stron i dodawanie zawartości w trybie witalnym. A jeśli wyniknie potrzeba użyć nowe bloki, można skorzystać z płatnych lub darmowych wtyczek dla podanego edytora. Ich liczba cięgle rośnie. 😉

Jeśli w końcu zdecydowaliście przejść na WordPress 5.x i użyć Gutenberg na pewno będą Państwo potrzebowały funkcjonalnego motywy? Wybrałem ciekawe motywy WordPress z ofert TemplateMonster, które są całkiem kompatybilne z nowym edytorem. Zapraszam więc do ich przejrzenia.

Yamiz

Podany motyw jest przeznaczony do tworzenia strony dla piekarni oraz cukierni. On ma charakterystyczny projekt w którym główny nacisk został zrobiony na jakościowe obrazki i dużą typografie. Warto także wydzielić ciekawe efekty animacyjne, dzięki którym elementy strony „ożywają” podczas poruszania myszką. Jednak tamte efekty nie odwracają uwagi użytkowników od poszukiwania potrzebnej informacji na stronie.

Podany motyw zawiera kluczowe funkcje do tworzenia profesjonalne strony. Do użytku dostępne są MegaMenu, galeria i mediateka, manager pasku bocznego itd. Oprócz tego do templatki był włączony Elementor i dodatkowe wtyczki rozszerzające jego możliwości. Jednak nie koniecznie Państwo musicie korzystać z tego edytora. Można go wyłączyć i tworzyć wpisy oraz strony za pomocą Gutenberga.

Szczegóły |
Demo

Momex

Jeśli poszukujecie motyw dla firmy oferującej usługi finansowe oraz doradcze, ten motyw idealnie nadaje się do tego celu. Chociaż nie ma żadnego problemu dopasować go pod inne tematy biznesowe. Motyw ma nie tylko wygodne opcje zarządzania wyglądem, lecz także wszystkie niezbędne rozszerzenia w środku. Oprócz tego w paczce z templatką znajdziecie Państwo szereg obrazków komercyjnych do użytku.

Funkcjonalność motywu została realizowana o popularne wtyczki i widgety Cherry. Oprócz tego motyw jest całkiem kompatybilny z popularnymi dodatkami z repozytorium WordPress. Więc możecie Państwo szybko rozszerzyć funkcjonalność witryny. Templatka również wspiera fonty webowe Google i technologię Regina. Ona jest całkiem responsywna i kompatybilna z popularnymi przeglądarkami internetowymi.

Szczegóły |
Demo

Glitron

Nowoczesne rozwiązania dla studio zajmującego się fotografiami oraz projektowaniem. Oprócz stylowego projektu motyw posiada szereg rozbudowanych funkcje do użytku. Warto także wydzielić wygodne opcje zarządzania wyglądem strony oraz obecność zdjęć tematycznych paczce. Dzięki temu możecie szybko dopasować projekt templatki do własnych potrzeb.

Wybierając ten motyw możecie Państwo korzystać z rozwijanego menu, galerii, newslettera i popupu orz opcje mediów społecznościowych. Oprócz tego templatka posiada widgety do opinie klientów, krótkiego przedstawienia usług i dodania informacji o pracownikach. Motyw także jest całkiem kompatybilny z popularnymi wtyczkami z repozytorium WordPress. On również ma czysty kod i jest przyjazny dla SEO.

Szczegóły |
Demo

Flexor

Ten motyw jest przeznaczony do tworzenia strony dla serwisu remontowego. Templatka ma ciekawy projekt, który został wykonany w biało-czarnych kolorach z dodaniem pomarańczowej barwy. Za pomocą ostatniej wyróżniane są ważne informacje na stronie, w tym nagłówki i przyciski nawigacyjne. Warto także wydzielić wygodną nawigacje. Dostać się do potrzebnych rozdziałów witryny można za pomocą menu w nagłówku i stopce oraz elementów na stronie domowej.

Oprócz wtyczek Cherry do templatki były dodane Revolution Slider i JetElements. Motyw także posiada manager zamówień, rozszerzenia dla blogu i e-sklepu WooCommerce. Możecie także używać popularne wtyczki dla WordPress. Podany motyw będzie kompatybilny z nimi.

Szczegóły |
Demo

Musclex

Podany motyw jest przeznaczony do tworzenia różnych typów stron biznesowych. On posiada 6 układów strony domowej, które poświęcone są popularnym tematom niszowym. Do użytku także dostępne są gotowe układy nagłówku, stopki, blogu oraz szeroki wybór wtyczek. To wszystko pozwala szybko dopasować wygląd strony do własnych potrzeb.

Motyw Imperion opiera się o Cherry Framework 5.1 i posiada kluczowe wtyczki Cherry. Oprócz nich do templatki były dodane Revolution Slider, Elementor, paczka JetElemets rozszerzająca wizualny edytor stron, JetMenu i rozszerzania dla WooCommerce. Motyw także jest kompatybilny z popularnymi wtyczkami dla WordPress.

Szczegóły |
Demo

Jak zbudować stronę za pomocą Gutenberga w WordPressie
5 (100%) 1 głosów

Dodaj komentarz

This site uses Akismet to reduce spam. Learn how your comment data is processed.

  Subscribe  
Powiadom o

Zobacz też

Popularne:

Sprawdź też:
Dobry hosting jest równie ważny jak treść i oryginalna oprawa…
Ludzie Internetu Sklep internetowy Social Media Strony internetowe Wideo online Zwiększanie zasięgu
10 stron z darmowymi zdjęciami do celów komercyjnych
10 stron z darmowymi zdjęciami do celów komercyjnych
wybór firmy pozycjonerskiej
5 rzeczy na które należy patrzeć kiedy wybiera się firmę pozycjonerską
facebook
Jak promować się na Facebooku
Biuro Ciekawostki Gospodarka Pomysły na biznes Prowadzenie firmy
bmw auto firmowe
Gdzie szukać zamienniki do opon do auto firmowego
Dlaczego telefon z Dual SIM świetnie się sprawdzi jako telefon służbowy?
foodtruck
Jak uruchomić własny foodtruck i ile to kosztuje?
Inwestycje Kredyty Oszczędzanie
inwestycja
Gdzie warto trzymać swoje pieniądze
Jaki biznes otworzyć, czyli w co warto inwestować
Jaki biznes otworzyć, czyli w co warto inwestować
święta
Kiedy przed świętami zabraknie pieniędzy
Czy warto inwestować w studia MBA?
wynagrodzenia
Rzut okiem na wynagrodzenia, czyli plany podwyżkowe w toku
Ile tak naprawdę zarabiają prezydenci miast
Ile tak naprawdę zarabiają prezydenci miast
Oto największy koszmar polskich pracowników