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.

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.

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.

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

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.

Wklejamy przykładowy tekst i klikamy: ZAKTUALIZUJ.

Poniżej podgląd wpisu na froncie.

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

Po czym wybieramy ikonę: NAGŁÓWEK

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

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.

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

KLIKAMY „+”

Wybieramy blok: OBRAZEK

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.

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

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

Podgląd zdjęcia na froncie Wordpressa

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.

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

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

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

Pozostaje KLIKNĄĆ: ZAPISZ ZMIANY.

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

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

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

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

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.

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

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

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

Analogicznie wygląda to od frontu strony.

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.

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.

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.

Klikamy „+” i wybieramy ikonę LISTA

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

• linia - 1
• linia - 2
• linia - 3
• linia - 4

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

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.

Podgląd na listę numerowaną.

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

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

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

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

A tak film prezentuje się na froncie.

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

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.

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.

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.

Niech to będzie np. WIĘCEJ.

Podgląd frontu i naszego przycisku.

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