Investnet.pl > Poradniki > WordPress > Jak dodawać i edytować podstrony w WordPress (edytor Gutenberg)

Jak dodawać i edytować podstrony w WordPress (edytor Gutenberg)

5/5 - (6 opinii)
2021-05-21

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

  1. Jak dodać nową podstronę Gutenberg?
  2. Jak dodać nagłówek z obrazem w tle – Gutenberg
  3. Jak dodać kolumnę w Gutenberg?
  4. Publikacja podstrony w Gutenberg
  5. 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.

Dodawanie nowej podstrony w WordPress
Dodawanie nowej podstrony w WordPress

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.

Jak stworzyć nagłówek z tłem w Gutenberg
Jak stworzyć nagłówek z tłem w Gutenberg

Po wybraniu obrazu wybieramy ikonkę pozycjonowania obrazu i zaznaczamy opcję pełna szerokość.

Ustawianie pełnej szerokości obrazu w WordPress
Ustawianie pełnej szerokości obrazu w WordPress

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.

Dodawanie nagłówka na środku obrazu Gutenberg
Dodawanie nagłówka na środku obrazu Gutenberg

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.

Nagłówek z obrazem w tle - Gutenberg
Nagłówek z obrazem w tle – Gutenberg

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%.

Dodawanie kolumny w Gutenberg
Dodawanie kolumny w Gutenberg

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ć.

Edytor treści Gutenberg - dodawanie bloków
Edytor treści Gutenberg – dodawanie bloków

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.

Publikacja podstrony w Gutenberg
Publikacja podstrony w Gutenberg

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.

blank
Autor
Jakub Wiśniewski

Specjalista WordPress - programista z zawodu, wykształcenia oraz z pasji. Wolny czas spędza czytając o nowych technologiach, grając w siatkówkę i ćwicząc grę na perkusji.

Sprawdź również
Raporty – jak zarządzać raportami w WooCommerce WooCommerce
2021-07-13

Raporty – jak zarządzać raportami w WooCommerce

Raporty w WooCommerce są generowane automatycznie i w tym poradniku dowiesz się jak korzystać z tego typu raportów. […]

...
Jakub Wiśniewski
Zamówienie wirtualnego produktu w WooCommerce WooCommerce
2021-07-13

Zamówienie wirtualnego produktu w WooCommerce

W tym poradniku dowiesz się jak działa zamówienie wirtualnego produktu w WooCommerce. Pokażę Ci jak zamówić produkt wirtualny […]

...
Jakub Wiśniewski
Zamówienie WooCommerce od strony administratora WooCommerce
2021-07-13

Zamówienie WooCommerce od strony administratora

W tym poradniku omówię jak wygląda zamówienie WooCommerce od strony administratora. Ważną umiejętnością w prowadzeniu sklepu internetowego jest […]

...
Jakub Wiśniewski
Zamówienie WooCommerce od strony klienta WooCommerce
2021-07-13

Zamówienie WooCommerce od strony klienta

Zamówienie w sklepie WooCommerce może odbywać się na różne sposoby w zależności jak skonfigurowaliśmy nasz sklep. Prześledzimy ścieżkę […]

...
Jakub Wiśniewski