Jak dodawać i edytować podstrony w WordPress (edytor Gutenberg)
Edytor Gutenberg popchnął do przodu WordPressa w temacie tworzenia stron przy pomocy wbudowanego edytora treści. Gutenberg ma wiele opcji, które pomagają w tworzeniu coraz bardziej rozbudowanych podstron naszej witryny. W tym poradniku dowiesz się jak tworzyć podstrony przy pomocy wbudowanego edytora treści WordPress.
Chcąc stworzyć stronę internetową w WordPress mamy do czynienia z ogromem narzędzi, które możemy użyć do budowania witryny. Niektóre narzędzia są darmowe, inne płatne ale istnieją także narzędzia wbudowane. W tym wypadku mowa tutaj o wbudowanym edytorze treści Gutenberg. Ten edytor treści stał się dla wielu alternatywą dla wielu bardziej zaawansowanych page builderów takich jak Elementor czy WPBakery. Swoją lekkością i nieskomplikowanym kokpitem przekonał użytkowników do tworzenia prostych stron w WordPress z jego użyciem.
Spis treści
- Jak dodać nową podstronę Gutenberg?
- Jak dodać nagłówek z obrazem w tle – Gutenberg
- Jak dodać kolumnę w Gutenberg?
- Publikacja podstrony w Gutenberg
- Podsumowanie
Jak dodać nową podstronę Gutenberg?
Znajdując się w kokpicie nawigacyjnym naszej witryny, przechodzimy do menu administracyjnego i najeżdżamy kursorem na sekcję Strony. Wyświetlą nam się dwie opcje: Strony – które przekierują nas do wszystkich podstron naszej witryny oraz opcja Dodaj nową. Wybieramy Dodaj nową i przechodzimy do tworzenia naszej podstrony.
Zostaniemy przeniesieni do okna dodawania nowej strony edytora Gutenberg.
Jak dodać nagłówek z obrazem w tle – Gutenberg
Strony internetowe zaczynają się zazwyczaj od tzw. hero image (duży obraz w tle głównego nagłówka) i nagłówka strony. Spróbujemy stworzyć taką sekcję przy użyciu Gutenberg.
Tworzymy przykładową podstronę w naszym przypadku będzie to Galeria. Tworzymy pierwszy blok – wybieramy blok o nazwie Obrazek i wybieramy zdjęcie, którego użyjemy jako tło nagłówka.
Po wybraniu obrazu wybieramy ikonkę pozycjonowania obrazu i zaznaczamy opcję pełna szerokość.
Mamy już obraz na pełną szerokość ekranu. Teraz trzeba dodać nagłówek na środek obrazu. W tym celu klikamy obraz i następnie wybieramy ikonkę z literką A – Dodaj tekst nad obrazem.
Gutenberg automatycznie dodaje ciemną nakładkę (warstwa nad obrazem) na obraz, aby tekst był bardziej czytelny i domyślnie ustawia tekst na kolor biały. Zarówno tło jak i tekst można dowolnie zmieniać – kolor tła, przezroczystość, kolor tekstu, wielkość itp. Ważną opcją jest ustawienie minimalnej wysokości bloku, aby nasza sekcja odpowiednio się wyświetlała na urządzeniach o mniejszej rozdzielczości.
Jak dodać kolumnę w Gutenberg?
Dodawanie elementów w Gutenberg takich jak kolumny bardzo ułatwia pracę z pozycjonowaniem elementów na stronie. Jak się okazuje jest to również bardzo proste.
Jak każdy blok dodajemy przy pomocy ikonki z plusem. Wybieramy blok o nazwie Kolumny. Otworzy nam się okno z możliwością wyboru układu kolumn, który chcemy użyć. Trzeba się zastanowić jaki widok chcemy stworzyć i wybrać najbardziej pasujące proporcje. W naszym przypadku będzie to proporcja 30/70, która nam stworzy dwie kolumny – jedną o szerokości 30% a drugą o szerokości 70%.
Teraz możemy dodawać kolejne bloki wewnątrz kolumn. Przykładowo dodamy do lewej kolumny nagłówek natomiast po prawej stronie dodamy obraz. Wystarczy kliknąć ikonkę plusa wewnątrz danej kolumny i wybrać element, który chcemy dodać.
Publikacja podstrony w Gutenberg
Gotowe! Dodaliśmy trochę treści do naszej podstrony i teraz możemy przejść do publikacji. Aby, opublikować stronę wystarczy w prawym górnym rogu naszego okna edycji kliknąć przycisk Opublikuj.
Podsumowanie
W tym poradniku pokazałem w jaki sposób dodawać treści w Gutenberg, ale to tylko kilka możliwości edytora Gutenberg. Aby, poznać wszystkie funkcje edytora trzeba spędzić trochę więcej czasu, natomiast funkcjonalności, które dziś pokazałem powinny się przydać każdemu użytkownikowi Gutenberga.
