Elementarz edycji blokowej, czyli Twój przewodnik po świecie Gutenberga

Witaj w nowej erze tworzenia stron internetowych! Czy wiesz, że WordPress napędza już ponad 43% wszystkich witryn w Internecie? To potężne narzędzie, które ewoluowało z prostego systemu blogowego dla osób, które marzyły o swoim blogu w sieci, w zaawansowany silnik do budowy dowolnych serwisów i rozbudowanych platform internetowych. Ale! Ale! By wszystko działało na Twojej stronie, jak należy i byś Ty pracował_ z nią jak najbardziej efektywnie, zacznij od przyswojenia sobie podstaw pracy z edytorem treści WordPressa.

Swoją drogą bardzo, bardzo dawno temu sama zaczynałam tworzyć ten właśnie blog w oparciu o Visual Composer, a później zakochałam się w Elementorze. Z czasem jednak i rozwojem bloga widziałam, jak staje się on mozolniejszy, cięższy i “zamulony” w działaniu. Na korzystanie z Gutenberga przniosłam się dopiero, gdy stał się już odpowiednio dopracowany (tak, kilka lat po samym jego wprowadzeniu). Ale gdy się już przeniosłam – nie zamieniłabym na nic innego!

Dziś więc przed Tobą Gutenberg – domyślny edytor WordPressa, który sprawi, że budowanie Twojej witryny stanie się tak proste i przyjemne, jak zabawa ulubionymi zabawkami z dzieciństwa.

pssst. Wolisz lalki czy samochodziki? Bo ja, odkąd pamiętam, byłam #teamSamochodzikiorazPociagi 😉

Twoja strona to trochę jak zestaw klocków LEGO!

Wyobraź sobie, że Twoja strona internetowa to wielka płyta konstrukcyjna, a każda treść, którą chcesz na niej umieścić – tekst, zdjęcie czy przycisk – to osobny klocek LEGO. Dawniej, w tzw. edytorze klasycznym (TinyMCE), treść była jedną, zbitą masą tekstu, przypominającą pracę na maszynie do pisania. Niestety nie tak łatwo było podzielić treści na zwracające uwagę układy (kolumny, wiersze itp), co skutkowało wszechobecnym użyciem tzw. page builderów (jeśli wciąż korzystasz z Elementora, Divi, Visual Composera lub innych tego typu rozwiązań – koniecznie zajrzyj do tego wpisu). Gutenberg, choć naprawdę rodził się w bólach, na szczęście całkowicie to zmienił, wprowadzając system blokowy.

Przejście na bloki to prawdziwa rewolucja z trzech kluczowych powodów:

• brak konieczności kodowania – nie musisz znać języka HTML, CSS, czy PHP, aby stworzyć zaawansowany i estetyczny układ strony i podstron,
• wizualna intuicyjność – widzisz niemal dokładnie to, co zobaczy Twój czytelnik, już w trakcie tworzenia (system WYSIWYG),
• swoboda używania i przesuwania elementów – każdy fragment treści to osobny klocek, który możesz złapać i przenieść w inne miejsce bez ryzyka, że “rozsypiesz” resztę dokumentu.

Dla początkującego użytkownika model blokowy jest lepszy, ponieważ daje pełną kontrolę nad każdym detalami bez strachu o techniczne błędy. Zanim jednak zaczniemy układać pierwsze klocki, musimy wiedzieć, na jakim fundamencie je stawiamy.

Fundamenty, czyli WordPress.org vs WordPress.com – gdzie budujemy?

Zanim otworzysz edytor, musisz zrozumieć różnicę między dwiema platformami o niemal identycznej nazwie. Choć obie korzystają z Gutenberga, oferują zupełnie inny poziom swobody i możliwości biznesowych.

Wybór WordPress.org (czyli instalacja WordPressa na własnej domenie i hostingu) zdecydowanie nam tu zwyciężył. Takie rozwiązanie daje pełną kontrolę nad “bebechami” witryny. Oczywiście z darmowej wersji WordPress.com jak najbardziej możesz korzystać. Przydaje się dla projektów zero-budżetowych, hobbystów lub dla sprawdzenia, czy konkretny pomysł ma w ogóle rację bytu.

Anatomia bloku – poznaj składowe Gutenberga

W Gutenbergu każda informacja to taka jakby autonomiczna jednostka. Oto trzy najważniejsze bloczki (“klocki”), od których najprawdopodobniej zaczniesz.

1. Akapit (Paragraph) – podstawowy bloczek do pisania. Każde naciśnięcie klawisza Enter tworzy nowy, niezależny blok akapitu.

Bloczek akapitu to podstawowy klocek do pisania treści na stronie. Umożliwia wprowadzanie i formatowanie tekstu: zmienisz wyrównanie, pogrubisz lub pochyliś wybrane fragmenty, dodasz linki, a także ustawisz kolor tekstu i tła. To właśnie z akapitów składa się większość opisów, artykułów i treści informacyjnych.

2. Obrazek (Image) – blok dedykowany multimediom. Pozwala na błyskawiczne wstawienie grafiki.

Bloczek obrazka pozwala dodać zdjęcie lub grafikę do treści strony. Tu możesz wgrać plik z komputera, wybrać go z biblioteki mediów albo wkleić adres URL obrazka. Daje możliwość ustawienia wyrównania, rozmiaru, dodania podpisu oraz tekstu alternatywnego (ważnego dla dostępności i SEO). Idealny do wizualnego urozmaicenia treści.

3. Lista (List) Służy do tworzenia punktów, co czyni treść czytelniejszą.

Bloczek listy punktowanej służy do porządkowania informacji w czytelnej formie. Sprawdza się przy wyliczeniach, instrukcjach, korzyściach czy cechach oferty. Możesz łatwo dodawać i usuwać punkty, zmieniać ich kolejność oraz przełączać listę punktowaną na numerowaną, a wszystko to bez kombinowania z formatowaniem.

Ważne. Edycja jednego bloczka nie wpływa na pozostałe. To daje ogromne poczucie bezpieczeństwa – możesz eksperymentować z kolorami jednego akapitu, wiedząc, że reszta konstrukcji pozostanie nienaruszona.

Nawigacja i układ, czyli przesuwanie, kolumny i organizacja

Interfejs Gutenberga jest zaprojektowany tak, by nie rozpraszać uwagi, ale musisz wiedzieć, gdzie szukać narzędzi:

1. ikona „plusa” (+): znajduje się w lewym górnym rogu ekranu (tzw. Primary Toggle) oraz wewnątrz obszaru treści. To Twój „magazyn klocków”.
2. pasek narzędzi bloku (Block Toolbar): pojawia się bezpośrednio nad aktywnym klockiem. Służy do szybkich zmian, jak pogrubienie tekstu.
3. boczny panel ustawień (Settings Sidebar): widoczny po prawej stronie. Pozwala na zaawansowaną konfigurację wyglądu bloku.
4. lista widoku (List View): znajdziesz ją na górnym pasku (ikona trzech kresek). To „spis treści” Twojej strony, który pozwala łatwo nawigować między klockami, zwłaszcza gdy są one poukładane jeden w drugim.

Budowanie układu na stronie

By zacząć cokolwiek pisać w edytorze wystarczy ustawić się kursorem i… pisać. Dodawanie kolejnych układów bloczków wygląda następująco:

1. kliknij „plus” (+) w lewym górnym rogu i wyszukaj blok Kolumny (Columns).
2. wybierz interesujące Cię proporcje (np. dwie równe sekcje).
3. w każdą sekcję wstaw mniejsze bloczki (tekst, zdjęcia) “do środka”.

Dzięki funkcji Przeciągnij i upuść (Drag & Drop) możesz dowolnie zmieniać kolejność elementów, łapiąc za uchwyt (ikona sześciu kropek) na pasku narzędzi bloku.

Wzorce zsynchronizowane: Twoje szablony na żądanie

Jeśli stworzyłeś idealny układ bloczków, np. wezwanie do działania (CTA) z Twoim numerem telefonu, nie buduj go od nowa na każdej podstronie. Skorzystaj z funkcji, która dawniej nazywała się blokami wielokrotnego użytku, a dziś to wzorce zsynchronizowane (Synced Patterns).

Pro-tip. Aby zapisać taki element, kliknij w trzy kropki na pasku narzędzi bloku i wybierz „Utwórz wzorzec” (Create Pattern). Upewnij się, że opcja „Zsynchronizowano” jest włączona. Teraz ten element znajdziesz w magazynie klocków (zakładka Wzorce -> Moje wzorce). Każda zmiana wprowadzona w tym wzorcu automatycznie zaktualizuje się na wszystkich stronach, gdzie go użył_ś!

Bezpieczny i szybki plac zabaw!

Trzy powyższe bloczki to dopiero początek. Rzeczywistość Gutenberga wygląda dziś tak, że praktycznie “Sky is the limit”, a w układaniu treści na stronie ogranicza Cię tylko Twoje wyobraźnia (no, może trochę również zasady UI i UX 😇). Kilka kolejnych bloczków Gutenberga znajdziesz poniżej.

Nagłówek
Bloczek nagłówka służy do porządkowania treści i budowania struktury strony. Dzięki niemu dzielisz tekst na logiczne sekcje (np. tytuły i podtytuły), co ułatwia czytanie użytkownikom i pomaga Google zrozumieć zawartość strony. Możesz wybrać poziom nagłówka (H1–H6), wyrównanie oraz podstawowe style tekstu.

Przycisk
Bloczek przycisku pozwala dodać wyraźne wezwanie do działania, np. „Kup teraz”, „Zapisz się” czy „Skontaktuj się”. Możesz ustawić link, kolor, kształt, wyrównanie i szerokość przycisku. To jeden z kluczowych elementów na landing page’ach i stronach ofertowych.

Cytat
Bloczek cytatu służy do wyróżniania fragmentów tekstu, np. opinii klientów, ważnych myśli albo podsumowań. Wizualnie odróżnia się od zwykłego akapitu, dzięki czemu przyciąga uwagę i przełamuje monotonię długiego tekstu.

Separator
Bloczek separatora dodaje wizualną przerwę między sekcjami treści. Pomaga „oddychać” stronie i sprawia, że całość jest bardziej czytelna. Może mieć formę linii lub prostego odstępu – zależnie od motywu.

Kolumny
Bloczek kolumn umożliwia układanie treści obok siebie, np. tekst + obrazek albo trzy opisy usług w jednym rzędzie. Pozwala łatwo tworzyć bardziej zaawansowane układy bez użycia kodu i dobrze dopasowuje się do urządzeń mobilnych.

Wideo
Bloczek wideo pozwala osadzić film (np. z YouTube lub Vimeo) albo wgrać własny plik. Świetnie sprawdza się przy kursach online, prezentacjach, instrukcjach czy materiałach sprzedażowych.

Grupa
Bloczek grupy służy do łączenia kilku bloczków w jedną całość. Dzięki niemu możesz nadać wspólne tło, marginesy lub inne ustawienia kilku elementom naraz. To bardzo pomocny bloczek, gdy chcesz mieć większą kontrolę nad wyglądem sekcji.

Kadence Blocks – bo zabawa może być jeszcze przyjemniejsza!

Kadence Blocks to zestaw dodatkowych bloczków do edytora Gutenberg, który znacząco rozszerza jego możliwości bez konieczności używania page builderów. Dzięki tej wtyczce możesz tworzyć bardziej rozbudowane, estetyczne i elastyczne układy stron, nadal pracując w natywnym edytorze WordPressa. Co zyskujesz?

Większa kontrola nad wyglądem. Kadence Blocks daje Ci znacznie większą kontrolę nad wyglądem poszczególnych elementów. Możesz ustawiać marginesy, odstępy, kolory, tła, obramowania i typografię z dokładnością, której brakuje w podstawowych bloczkach Gutenberga. Co ważne – to wszystko bez pisania nawet kawałka kodu.

Zaawansowane układy sekcji. Dzięki bloczkom takim jak Row Layout czy Section, Kadence pozwala budować pełnoprawne sekcje stron: hero, oferty, listy korzyści czy call to action. Łatwo ustawisz liczbę kolumn, ich szerokość oraz zachowanie na urządzeniach mobilnych, tabletach i desktopach.

Gotowe elementy do stron sprzedażowych. Kadence Blocks oferuje bloczki idealne do stron ofertowych i landing page’y, takie jak: zaawansowane przyciski, ikony, boxy informacyjne, testimonialsy czy liczniki oraz ich zaawansowane ustawienia (moje ulubione: Animate on scroll, atrakcyjne graficznie separatory góry i dołu sekcji, czy dodatkowe podświetlenia tekstów i wiele, wiele innych). Pozwalają one szybciej budować strony nastawione na konwersję, bez instalowania kilku osobnych wtyczek.

Responsywność bez bólu głowy. Każdy bloczek Kadence ma wbudowane ustawienia responsywności. Możesz decydować, jak dany element wygląda na różnych urządzeniach, bez kombinowania i testowania „na oko”. To ogromne ułatwienie, zwłaszcza dla początkujących.

Spójność z Gutenbergiem. Kadence Blocks działa jak naturalne rozszerzenie Gutenberga – interfejs jest spójny, intuicyjny i nie przytłacza ilością opcji. Jeśli znasz podstawowe bloczki WordPressa, bardzo szybko odnajdziesz się w Kadence.

Alternatywa dla page builderów. Dzięki Kadence Blocks wiele osób rezygnuje z ciężkich page builderów na rzecz lżejszego, szybszego i bardziej przyszłościowego rozwiązania. Strony oparte o Gutenberga i Kadence są łatwiejsze w utrzymaniu, szybsze i bardziej odporne na zmiany w WordPressie.