top of page

Jak tworzyć strony w WordPress 5.0 i nowym edytorze – przykład i filmik


Jak budować strony na WP 5.0

Utworzyłam stronę dla fikcyjnej firmy. Zobacz przykład strony głównej, opartej w całości na Gutenbergu. Mam też filmik, jak to robić to samemu krok po kroku.

Przykładowa strona w nowym edytorze WordPressa 5.0

Przyjęłam takie założenia:

  1. użyję motywu, który ma pełne wsparcie pod Gutenberga (żeby można było rozciągać niektóre elementy na pełną szerokość)

  2. nie używać CSSa

  3. nie używać żadnych wtyczek, czyli tylko to, co daje nam sam edytor i goły WordPress

Powstała taka oto strona – kliknij w link poniżej, żeby zobaczyć przykład.

https://webfaces.pl/wp5/

Jak zbudowana jest ta strona

Strona wykorzystuje darmowy motyw Atomic Blocks. Wybrałam ten motyw, bo ma pełne wsparcie dla Gutenberga.

Ale potem przyłączyłam się na kilka innych motywów, z pełnym wsparciem na Gutenberga lub nie i wszędzie strona wyglądała dość dobrze.

Na motywie Twenty Ninteen strona ta wygląda bardzo podobnie.

A teraz kilka słów co w niej znajdziemy:

Obrazek Cover

Zaczęłam od dodania bloku Cover. Jest to obrazek z podpisem, który umieszcza się na obrazku.

I tu od razu przydało się rozciąganie na pełną szerokość strony. Ale jeśli Twój motyw nie ma wsparcia pod Gutenberga, to ikonek rozciągających obrazki niestety nie zobaczysz.

Obrazek typu Cover

Obrazek typu Cover


Blok Media & Text

Kolejnym elementem jest blok Media & Text. Tutaj brakowało mi możliwości dodania podpisu pod obrazek, ale generalnie z tego bloku korzysta się znacznie sprawniej w Gutenbergu, niż z bloku Kolumny.

Blok media-text

Blok media-text


Układy kolumnowe w nowym edytorze WordPressa

Z innych ciekawszych elementów w nowym WordPressie są układy kolumnowe, choć myślę, że tutaj jeszcze trochę pracy przed ekipą Gutenberga będzie. O tym za chwilę.

Poniżej układ 3-kolumnowy, gdzie każda kolumna składa się z dwóch bloków, wyżej jest obrazek Cover a niżej blok typu Button (przycisk).

Układ trzykolumnowy, obrazki cover i przyciski

Układ trzykolumnowy, obrazki cover i przyciski


Z kolumnami miałam ten problem, że ciężko dostać się do właściwości bloku dla kolumny. A trzeba to zrobić, żeby zwiększyć liczbę kolumn z domyślnych dwóch na trzy. Musiałam robić sztuczkę typu: ustaw się na poprzednim bloku, a potem wciśnij klawisz tab.

Układ trzykolumnowy, zwykłe obrazki i tekst

Układ trzykolumnowy, zwykłe obrazki i tekst


Jeśli kolumny chcemy rozciągnąć na pełną szerokość strony, to motyw też musi dodać specjalne wsparcie, o czym wspominałam wcześniej w przypadku dodawania obrazka Cover. Inaczej ikonek rozciągających nie zobaczymy.

Filmik z YouTube

Filmik z YouTuba też można wstawić w jedną z kolumn:

Układ 2-kolumnowy, YouTube

Układ 2-kolumnowy, YouTube


Ostatnie wpisy z bloga

Fajnie, że można wstawiać ostatnie wpisy z bloga w formie bloku. Wpisy można wyświetlić liniowo, jeden link pod drugim, ale ja wybrałam wersję grid.

Blok ostatnie wpisy

Blok ostatnie wpisy


Bloki Media & Text – szachownica

Potem kilka raz wykorzystałam blok Media & Text, ale ustawiałam obrazek raz po prawej, raz po lewej, żeby uzyskać efekt szachownicy.

Przydaje się też użycie opcji Drop Cap w bloku typu akapit (paragraf), żeby powiększyć pierwszą literę.

Blok typu media-text

Blok typu media-text


Cytaty w kolumnach w połączeniu z obrazkami

Ciekawy efekt można też uzyskać w układzie 4-kolumnowym wstawiając naprzemiennie blok typu cytat i zwykły obrazek:

Układ 4-kolumnowy, cytat

Układ 4-kolumnowy, cytat


A na koniec dodałam galerię. To akurat jest bardzo proste i intuicyjne. Na koniec przekształciłam galerię w blok do ponownego użycia (Reusable block), żeby można tę samą galerię wstawiać w kilka innych miejsc na stronie.

Galeria zdjęć przekształcona w blok reusable (do ponownego wykorzystania)

Galeria zdjęć przekształcona w blok reusable (do ponownego wykorzystania)


Jak zrobić taką stronę w nowym edytorze – filmik


Nowy edytor jest w miarę intuicyjny, ale nie wszystko jest oczywiste. Na przykład, jak wstawić układ 3-kolumnowy.

Na filmiku pokazuję krok po kroku, jak można samemu zbudować taką stronę.

Ogólne wrażenia

Taką stronę robi się bardzo szybko, jak się już nabierze trochę wprawy.

Żeby odtworzyć stronę z przykładu potrzebowałam około 30 minut (filmik trwa krócej, bo poprzycinałam zbędne pauzy i dodałam przyspieszenie w paru miejscach, żeby nie przynudzać).

Co pomaga w budowaniu stron na Gutenbergu:

  1. kopiowanie bloków (i tylko podmienianie treści)

  2. używania klawisza / (slash) do wstawiania bloków (zamiast naciskanie myszą znaku +)

  3. wiedza, który motyw ma wsparcie dla rozciągania bloków (obrazki i kolumny) na pełną szerokość. Dla przykładu nowy motyw WordPress, Twenty Ninteen ma

Uważny obserwator z pewnością dostrzeże kilka defektów w takiej stronie.

Stronom tworzonym w Gutenbergu daleko jeszcze do pięknych stron budowanych w page builderach, ale z pewnością można już teraz w nowym edytorze wyklikać coś znacznie ciekawszego, jeśli chodzi o układ stron (podział na sekcje i kolumny) niż we wcześniejszych wersjach WordPressa.

A czy Ty już używasz nowego edytora?

Jak wrażenia?

#Gutenberg

0 wyświetleń0 komentarzy

Ostatnie posty

Zobacz wszystkie