Jak pisać w edytorze Wordpressa? Podstawowe możliwości edytora Gutenberg.

W ramach Wordpressa, edytora Gutenberg używamy zarówno przy dodawaniu WPISÓW jak też przy dodawaniu STRON.

W obu powyższych przypadkach mamy możliwość edytowania i dodawania tekstu, tytułów, zdjęć, galerii, list numerowanych i nienumerowanych, tworzenia pustych przestrzeni oddzielających zawartość, dodawania video z YouTube i całe mnóstwo różnych innych możliwości.

Poniżej zestawienie najbardziej podstawowych z nich. Nasze przykłady wykonamy na bazie WPISU, niemniej w przypadku STRONY, byłoby to dokładnie tak samo.

Widok wpisu, który utworzymy.

wygląd wpisu utworzonego w Wordpress

Warto jednak zaznaczyć, że w zależności od ostylowania samego MOTYWU, pewne efekty mogą być odmienne.

Niemniej w większości przypadków sam proces dodawania zawartości będzie przebiegał w opisany poniżej sposób.

Tworzymy tytuł Wordpressowego wpisu.

Najpierw musimy zainicjować tworzenie wpisu. Klikamy: WPISY / DODAJ NOWY.

Przy tworzeniu nowego wpisu, jako pierwsze pojawi nam się pole: DODAJ TYTUŁ.

To właśnie tutaj wpisujemy treść, która będzie określała temat dla całego WPISU.

W naszym przypadku tytuł to: „Wpis”.

Po dodaniu tytułu 2-krotnie wciskamy przycisk PUBLIKUJ.

Poniżej widok kokpitu z dodanym tytułem.

Jak utworzyć wpis w blogu opartym na Wordpressie

Widok strony internetowej od frontu – po dodaniu tytułu.

dodajemy tytuł wpisu

Jak dodać zwykły tekst do naszego wpisu?

Za dodanie zwykłego tekstu do edytora Gutenberg odpowiada opcja (blok): AKAPIT.

Aby uzyskać dostęp do tej możliwości KLIKAMY „+” a następnie KLIKAMY ikonę/blok AKAPIT.

dodajemy akapit - zwykły tekst - w edytorze Gutenberg

Wklejamy przykładowy tekst i klikamy: ZAKTUALIZUJ.

publikujemy wpis na stronie internetowej Wordpress

Poniżej podgląd wpisu na froncie.

podgląd akapitu we wpisie

Jak dodać tytuł wewnątrz strony/wpisu?

Ponownie KLIKAMY „+”, który umożliwia nam dodanie nowego bloku.

dodajemy blok z nagłówkiem w edytorze Gutenberg

Po czym wybieramy ikonę: NAGŁÓWEK

ikona nagłówka w edytorze Wordpress

Nasz przykładowy nagłówek to tekst: Tytuł wewnątrz wpisu – 1

dodajemy tytuł wewnątrz wpisu

Tu warto nadmienić, że do wyboru mamy nagłówki typu: h2, h3, h4.

Wybór zależy od tego, czy jest to nagłówek bardziej, czy też mniej istotny.

Jeśli będzie to nagłówek nadrzędny, to nadamy mu wartość h2, jeśli podrzędny – to h3 a potem h4.

jak dobrać nagłówek h2, h3, h4 w edytorze Wordpress

W naszym przypadku wybraliśmy nagłówek h2. Klikamy: ZAKTUALIZUJ. Poniżej podgląd na stronie od frontu.

podgląd nagłówka h2 na froncie strony internetowej

Dodajemy do strony/wpisu zdjęcie.

KLIKAMY „+”

dodajemy w kokpicie blok obrazka

Wybieramy blok: OBRAZEK

wybieramy ikonę z obrazkiem w bloku Gutenberg

Jeśli nasze zdjęcie jest już w bibliotece mediów – to KLIKAMY: BIBLIOTEKA MEDIÓW.

W naszym przypadku w Wordpressie nie mamy jeszcze interesującego nas zdjęcia, a zatem KLIKAMY: WYŚLIJ NA SERWER.

pobieramy zdjęcie z serwera

Wybieramy zdjęcie, które chcemy zamieścić we wpisie.

dodajemy obrazek do biblioteki mediów Wordpress

Zdjęcie pojawia się w bloku OBRAZEK. Klikamy: ZAKTUALIZUJ.

aktualizujemy wpis w Wordpressie

Podgląd zdjęcia na froncie Wordpressa

podgląd zdjęcia na stronie frontowej

Zdjęcie to można w naszym edytorze Gutenberg bardzo łatwo pomniejszyć. W tym celu „chwytamy” prawy bok fotografii i ściągamy zdjęcie do lewej strony. Klikamy: ZAKTUALIZUJ.

Poniżej podgląd – na froncie widzimy już pomniejszone zdjęcie.

zmniejszamy zdjęcie w edytorze Wordpressa

Po zapisaniu zmian włączamy podgląd na front, gdzie widzimy pomniejszone zdjęcie.

podgląd pomniejszonego w edytorze Gutenberg zdjęcia

Zamieniamy kolejność bloków

W naszym przypadku będziemy chcieli przenieść zdjęcie, aby znalazło się ono powyżej nagłówka: Tytuł wewnątrz wpisu – 1. Ale, aby było poniżej naszego przykładowego tekstu: Lorem ipsum...

Myszką najeżdżamy w pobliże lewej krawędzi bloku ze zdjęciem. Wówczas pojawi się nam ikona strzałki oraz napis: PRZENIEŚ W GÓRĘ.

przesuwanie bloków w edytorze Gutenberg

Po kliknięciu w widoczną strzałkę blok ze zdjęciem „powędrował” do góry.

Pozostaje KLIKNĄĆ: ZAPISZ ZMIANY.

zapisujemy zmiany kolejności bloków edytora Wordpress

Jak widzimy – na froncie zdjęcie znajduje się już powyżej naszego wewnętrznego tytułu.

podgląd zmian kolejności bloków na froncie strony internetowej

Wypośrodkowanie zdjęcia w bloku Wordpress

Chcąc wyrównać nasze zdjęcie na stronie, zaznaczamy ikonę: WYRÓWNAJ DO ŚRODKA.

ikona do wypośrodkowania zdjęcia w edytorze

Zdjęcie w naszym edyturze przesunie się do środka.

wypośrodkowanie obrazu za pomocą edytora Gutenberg

Analogicznie zdjęcie zachowa się na froncie naszej strony.

podgląd na wypośrodkowane zdjęcie we wpisie Wordpress

Jak do wpisu dodać galerię zdjęć?

Kolejnym dodawanym przez nas blokiem będzie galeria zdjęć. Nasza galeria będzie składała się z 3 fotografii.

Ponownie KLIKAMY w „+” (czyli dodaj blok), aby następnie wybrać ikonę bloku GALERIA.

dodajemy galerię do bloga w Wordpress

Podobnie jak to miało w sytuacji dodawania pojedynczego zdjęcia, KLIKAMY: WYŚLIJ NA SERWER.

przesyłamy zdjęcia do galerii strony Wordpress

Zaznaczamy 3 zdjęcia, które trafią do galerii.

zaznaczamy zdjęcia dla galerii

Wszystkie zaznaczone fotografie umieściły się w bloku GALERIA.

wgranie zdjęć do galerii strony internetowej

Analogicznie wygląda to od frontu strony.

podgląd galerii utworzonej w edytorze Gutenberg Wordpress

Jak do wpisu czy strony dodać odstęp – pustą przestrzeń?

Dodajemy odstęp – pustą przestrzeń pomiędzy blokami. Zrobimy to dokładnie pomiędzy pojedynczym zdjęciem, a galerią zdjęć. Dzięki temu pomiędzy tymi blokami pojawi się większy „oddech”.

Tradycyjnie klikamy „+”, co oznacza dodanie nowego bloku. Tym razem szukamy ikony: ODSTĘP. Znajdziemy ją w segmencie: UKŁAD STRONY.

jak w Wordpressie dodać odstęp pomiędzy blokami

Odstęp możemy regulować chwytając dolny fragment bloku. Przesuwając myszką w górę lub w dół decydujemy o odległości pomiędzy otaczającymi ODSTĘP blokami.

ustawiamy wielkość odstępu we wpisie

Przechodząc do podglądu naszego WPISU możemy zobaczyć jak bardzo zwiększyła się odległość pomiędzy zdjęciem i galerią zdjęć. A w razie potrzeby wszystko można skorygować, pamiętając o zapisywaniu zmian w kokpicie.

widok na powiększony odstęp na stronie bloga

Wstawiamy nienumerowaną oraz numerowaną listę.

Klikamy „+” i wybieramy ikonę LISTA

dodajemy listę nienumerowaną w edytorze Gutenberg

Przy zaznaczonej liście nienumerowanej wpisujemy naszą przykładową listę:

  • linia - 1
  • linia - 2
  • linia - 3
  • linia - 4
ikona listy nienumerowanej w edytorze

A to już podgląd na naszą nienumerowaną listę od frontu.

podgląd listy nienumerowanej w edytorze Wordpressa

Aby utworzyć blok z listą numerowaną – tak jak to było we wcześniejszym przypadku KLIKAMY „+”, klikamy LISTA. Tyle, że tym razem zaznaczamy ikonę z LISTĄ NUMEROWANĄ.

Wstawiając kolejne linie z tekstem: linia – numerowana, wszystkie otrzymają kolejne numery.

lista numerowana

Podgląd na listę numerowaną.

podgląd listy numerowanej na stronie

Do strony Wordpressa dodajemy film z YouTube

Najpierw znajdujemy film na YouTube, który będziemy dodawać do naszej strony internetowej i zaznaczamy adres internetowy tego filmu.

kopiujemy link YouTube

Aby dodać blok pozwalający osadzić video z YouTube, klikamy „+” a następnie w sekcji: OSADZONE TREŚCI wybieramy YOUTUBE.

w sekcji osadzone treści edytora Gutenberg wybieramy ikonę YouTube

Pojawi nam się pole, do którego wklejamy skopiowany adres internetowy filmu i klikamy: OSADŹ.

osadzamy film YouTube na stronie internetowej Wordpress

W ten sposób fim został osadzony w naszym bloku edytora Gutenberg.

osadzone w edytorze video z YouTube

A tak film prezentuje się na froncie.

widok filmu wideo YouTube na blogu opartym o Wordpressa

Jak do wpisu/strony dodać przycisk?

Analogicznie jak wcześniej, KLIKAMY „+”, ale tym razem w sekcji UKŁAD STRONY wybieramy PRZYCISK.

dodajemy przycisk znajdujący się w sekcji - układ strony edytora

Jeśli do przycisku będziemy chcieli dodać link jakiejś konkretnej strony lub podstrony, to wystarczy wpisać adres internetowy tej strony w pole, które pojawiło się pod przyciskiem.

W naszym przypadku dodamy podstronę, którą mamy już w naszym Wordpressie. Ta podstrona ma nazwę: PRZYKŁADOWA STRONA (to jest tytuł tej strony – strony dodawane są w kokpicie w zakładce: STRONY).

Wystarczy zatem, że wpiszemy tytuł tej naszej strony.

linkujemy przycik edytora Gutenberg

Adres internetowy prowadzący do tej strony (podstrony naszego Wordpressa) uzupełni się samodzielnie. W naszym przypadku adres prowadzi do lokalnego serwera. W praktyce będziemy widzieli tam adres podstrony znajdującej się na naszej domenie internetowej.

podgląd na link przycisku Wordpress

Pozostaje już tylko dodać tekst przycisku. Najeżdżamy myszką na przycisk, a dokładnie na tekst: DODAJ TEKST i wpisujemy to co chcemy mieć wewnątrz przycisku na naszej stronie.

Miejsce na własną nazwę przycisku

Niech to będzie np. WIĘCEJ.

Wpisujemy własny tekst przycisku

Podgląd frontu i naszego przycisku.

Podgląd na przycisk z własnym tekstem na stronie Wordpress

Ponieważ podlinkowaliśmy przycisk do naszej Przykładowej Strony, po kliknięciu zostaniemy przeniesieni na tą właśnie podstronę.

przycisk przenosi nas na przykladową stronę Wordpress