Jak zbudować stronę w Gutenbergu

Gutenberg to nowy edytor wizualny w WordPressie. Pojawienie się Gutenberga wraz z aktualizacją WordPressa do wersji 5.0 wzbudziło niemałe zamieszanie w środowisku użytkowników popularnego CMSa. Jak zbudować stronę w Gutenbergu? Pokazujemy jak poradzić sobie z blokami.

Jeżeli jesteście dopiero na początku swojej przygoty z WordPressem to Gutenberg będzie dla Was ułatwieniem w budowaniu strony. Pomysł twórców projektu był bowiem taki by tworzenie treści w WordPressie stało się bardziej intuicyjne i nie wymagało od twórcy zaawansowanej wiedzy technicznej. Za chwilę pokażę Wam jak dodać najpopularniejsze bloki w Gutenbergu tak, by stworzyć prostą stronę wizytówkę.

Za przykład posłużyły mi usługi fotograficzne, a strona budowana była na motywie dedykowanym pod Gutenberga – Atomic Blocks.

Nagłówek i okładka w Gutenbergu

Pokazałam Wam jak szybko dodać nagłówek do naszej strony oraz okładkę. To będzie dobry wstęp dla Waszej wizytówki. Jak widzicie, okładkę można dopasować do swoich gustów – Gutenberg daje nam możliwość dodania tła modalnego, ustawiania przezroczystości i unieruchomienia okładki.

Kolumny i przyciski

W kolejnym kroku dodajemy kolumny, w których można osadzić kolejne elementy. Ja zdecydowałam się na dodanie 3 kolumn, w których umieściłam obrazki przedstawiające główne usługi oferowane przez fotografa.

Dla każdego dodanego obrazka po prawej stronie w ustawieniach bloku można wybrać rozmiar, wprowadzić szerokość i wysokość, a także ustawić odnośnik i wpisać tekst alternatywny. Pod obrakami możecie także dodać podpisy. Ja zdecyowałam się pominąć ten krok i dodałam kolejne bloki w kolumnach.

Przyciski, które dodacie na stronie mogą przenieść Waszych klientów na podstrony z ofertami. Mogą one być także dobrym narzędziem do zachęcenia do subskrypcji Waszych kanałów w mediach społecznościowych bądź nakłonienia do zakupu. Przyciski można także dostosować do swoich estetycznych wymagań.

Cytaty w Gutenbergu

Gutenberg wprowadził także blok do prostego dodawania cytatów.

Blok media i tekst

Ciekawym blokiem, który może posłużyć np. do przedstawienia siebie, usługi lub produktu na stronie jest moduł media i tekst. Moduł można rozszerzyć na całą szerokość ekranu podobnie jak inne bloki. W prosty sposób można także zamienić tekst i media stronami. Edycja bloku daje również możliwość powiększenia pierwszej litery tekstu (inicjału).

Dodajemy galerię

Jednym z moich ulubionych bloków w Gutenbergu jest galeria.  Dla wielu użytkowników WordPressa ustawienie obrazków znajdujących się obok siebie w edytorze klasycznym było problematyczne. Teraz galeria to kilka kliknięć. Sami zdecydujecie o liczbie wyświetlanych zdjęć i ich wielkości.

Budując dalszą część strony ponownie skorzystałam z bloku kolumny oraz obrazek i cytat. Tym razem dzięki nim stworzyłam dział z opiniami o usługach.

Przekształcanie bloków w Gutenbergu

Gutenberg zmusza nas do wielu kliknięć dlatego dobrym narzędziem na ułatwienie sobie pracy jest funkcja przekształcania bloków. Jeżeli dodamy blok akapit ale zmienimy zdanie i będziemy chcieli zrobić z niego inny blok, wystarczy, że klikniemy na strzałki symbolizujące zmianę i wybierzemy jedną z proponowanych opcji.

Przemieszczamy bloki

W Gutenbergu każda wprowadzona treść, po której klikniemy enter tworzy nowy blok. Na szczęście można te bloki później poukładać według potrzeb. Wystarczy, że złapiecie strzałki widoczne po lewej stronie każdego z bloków i umieścicie go w wybranym miejscu.

Tworzenie strony głównej możecie zakończyć okładką.

Prowadzicie bloga? W Gutenbergu znajdziecie blok o nazwie ostatnie wpisy, za pomocą którego szybko dodacie linki do najnowszych postów na Waszym blogu.

I to już koniec – strona wizytówka gotowa 😉 Dajcie nam znać co sądzicie o Gutenbergu. Zdecydowaliście się już na aktualizację swoich WordPressów do wersji 5? Jeżeli nowy edytor nie przypadł Wam do gustu, pamiętajcie, że możecie go w prosty sposób wyłączyć.

A jeżeli szukacie sprawdzonego hostingu dla swojego WordPressa, sprawdźcie ofertę LH.pl i bezpłatnie przetestujcie hosting w dowolnym pakiecie.