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

Jak budować strony na WP 5.0WordPress 5.0 jest już dostępny i ma nowy edytor. Chciałam sprawdzić, czy w nowym edytorze WordPressa da się zbudować stronę, która wygląda w miarę przyzwoicie.

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:

  • 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ść)
  • nie używać CSSa
  • 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:

  • kopiowanie bloków (i tylko podmienianie treści)
  • używania klawisza / (slash) do wstawiania bloków (zamiast naciskanie myszą znaku +)
  • 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?

6 myśli do „Jak tworzyć strony w WordPress 5.0 i nowym edytorze – przykład i filmik”

  1. Cześć Aga, ale fajnie, że zrobiłaś takie demo!
    Ja używam Gutenberga od jakiegoś czasu, w niektórych projektach, iwrażenia mam dobre. Ale ja jestem mały miki i jeszcze nie wiem, co to znaczy prawdziwa deweloperka WordPressa, więc dla mniej jako początkującej, Gutenberg jest ciekawym rozwiązaniem, które pozwoli mi nie korzystać z page builderów, kiedy potrzebuję zrobić stronę w ciągu weekendu (no zobaczymy). Szczególnie się przyglądam reusable blocks, które może, może dadzą radę zastąpić custom post type. Serdeczności!

    1. Cześć Kasia,
      to ciekawe, co piszesz, bo to się pokrywa mniej więcej z obserwacjami ekipy Gutenberga, że dla początkujących osób (chociaż po zajrzeniu na Twój blog nie nazwałabym Cię początkującą) faktycznie Gutenberg jest obiecującym rozwiązaniem. No i ciekawa teoria z tymi reusable block, które miałaby zastąpić custom post types.

  2. Z tego co widzę po twoim demo, to mi się nie podoba fakt, iż tekst nie może opłynąć jakiegoś bloku. Co szczególnie widać na przykładzie z YT. Gdzie dla pola txt są w jednej kolumnie i dopiero pod kolumnami możesz dać cały (pełnej szerokości) blok tekstu. Ale nie zachowasz ciągłości tego tekstu.

    1. SpeX, opływanie bloków można robić. Tylko to trochę nieintuicyjne faktycznie. Trzeba tak: dodajesz tekst (blok typu Akpit/Paragraph), pod nim obrazek, obrazek wyrównujesz do prawej/lewej ikonką, a potem ten blok co był na nim przesuwasz (np. strzałką) w dół i wówczas obrazek się obleje tym tekstem.

  3. Hej,
    a ja mam takie pytano: wszystko fajnie w tym nowym edytorze tylko jak dodać tam własne przyciski?
    Mam kilka własnych shortcodów i teraz chciałbym aby się wstawiały automatycznie po kliknięciu w daną ikonkę. Da się to jakoś połączyć z Gutnebergiem?
    Pozdro 🙂

    1. Idea jest taka, żeby shortcody przerabiać na bloki. Czyli jak jesteś devem, to musiłabyś się nauczyć, jak tworzyć własne bloki w Gutenbergu. Wbrew pozorom nie jest to taka prosta sprawa.

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *

Wyrażam zgodę na przetwarzanie przez Webfaces Agnieszka Bury, ul. Rymarska 42/3, 53-206 Wrocław NIP: 9111769381, REGON: 021997379, moich danych osobowych w celu dodania komentarza na blogu webfaces.pl. (Sorry, takie są wymogi RODO, więcej informacji w Polityce prywatności).