Wordpress: Praca z Blokami

0:00Witaj w kolejnej lekcji! W międzyczasie dodałem kilka obrazów do naszej biblioteki mediów.

0:04A teraz mogę już przenieść się do wpisów i wybrać polecenie Edytuj. Następnie

0:08będę mógł przejść do obrazka i pokazać Ci, jakie opcje możemy tutaj zastosować. Przede wszystkim

0:12mamy możliwość złapania za tę kuleczkę i zmiany wielkości obrazka. Teraz w

0:16zależności od tego, jakie są opcje wyrównania, zauważ, że ten

0:20obrazek automatycznie nam się ustawi na przykład po lewej stronie od tekstu. Możemy

0:25naturalnie ustawić go też po prawej stronie. Możemy także go wyśrodkować i wtedy

0:29będzie samotny w tym jednym rzędzie. Możemy też zrobić zwiększoną

0:34szerokość. To znaczy, że obrazek będzie nieco szerszy niż cała zawartość

0:38strony. I w końcu możemy powiększyć go tak, aby był rozciągany od

0:43lewej do prawej krawędzi strony. W przypadku takiego obrazka w proporcji 1 x 1 ta pełna szerokość

0:47nie do końca jest szczęśliwa. W związku z tym proponuję inne rozwiązanie. Wystarczy odkliknąć

0:52się z tej pełnej szerokości i mamy możliwość zmiany tego przekształcenia

0:57ze zwykłego obrazu w tak zwaną okładkę. Okładka jest o tyle fajna, że automatycznie

1:01zostanie przycięta od góry i do dołu do określonych proporcji. Co więcej,

1:06możemy ustawić ją jako nieruchome tło, co

1:10znaczy, że tło będzie w fajny sposób - jeśli podejrzymy to

1:14w szkicu - pozostawało w tym momencie na stronie z

1:18takim efektem paralaks, jak widzisz. W przypadku tego obrazka akurat może

1:22ten efekt nie działa tak rewelacyjnie, więc wyłączmy tę opcję. Ale

1:26zawsze możemy też zrobić tak zwaną aplę i tutaj na przykład wybrać

1:31jeden z customowych kolorów, który być może jest zgodny z jakimś kolorem

1:35naszego brandu, i dodać jako taką aplę, dodatkowo

1:40modyfikując jej przezroczystość. Bardzo fajne, nie musimy korzystać z żadnego narzędzia

1:44do postprodukcji i dodatkowo możemy tutaj wpisać tytuł,

1:48czyli na przykład Domowa Granola. Teraz możemy przejść do właściwości całego bloku. No i

1:53ten blok możemy również... na przykład zrobić dla niego powiększoną szerokość albo całą szerokość, co

1:57w tym przypadku może wyglądać całkiem nieźle, może nawet z nieruchomym tłem. Zobaczmy,

2:01jak to wygląda. No i jak widzisz, całkiem ciekawy

2:05efekt naprawdę małym kosztem udaje nam się tutaj uzyskać. Więc warto z tym poeksperymentować. Oprócz

2:11przekształcenia tego w okładkę możemy wrócić z powrotem do obrazka. Obrazek

2:16może mieć podpis, w tym przypadku ten podpis został automatycznie tutaj przeniesiony

2:20na dół. I możemy jeszcze z tego ewentualnie zrobić galerię. Jeśli

2:24wybierzemy opcję Galeria, to w tym momencie mamy możliwość

2:28kliknięcia do środka i wgrania czy dodania dodatkowego obrazka do galerii. Ale

2:33w naszym przypadku wygodniej w zasadzie nawet taką galerię będzie zrobić od podstaw. Więc usunę

2:37ten blok. Dodam blok raz jeszcze. Wybiorę jako blok Galeria i wybiorę

2:41z biblioteki mediów, zaznaczę wszystkie obrazki. Jak zaznaczyć więcej niż jeden obrazek? Możesz

2:46to zrobić z wciśniętym Ctrl czy Cmd. Jak widzisz, zaznaczyłem teraz dwa. Możesz

2:50też odznaczać, a możesz też kliknąć na pierwszy i z Shiftem kliknąć na ostatni

2:54obrazek po to, aby wybrać wszystkie te, które są po drodze. Teraz wybieram

2:59polecenie Stwórz nową galerię. Możemy ewentualnie alternatywnie wstawić podpisy, nie

3:04musimy. Wybieram polecenie Ok i zobacz, że galeria została w bardzo fajny sposób

3:08automatycznie stworzona. Możemy zarządzać właściwością jej kolumn, na

3:12przykład podzielić to, zrobić na jedną kolumnę, dwie, trzy, no w tym przypadku cztery

3:17ułożą nam po prostu wszystkie obrazki obok siebie. Kolejna opcja przycinania obrazków

3:21jest bardzo fajna, ponieważ jeśli obrazy mają inny aspect ratio, czyli

3:25inne proporcje, to gdy wybierzemy Przycinaj obrazki, zostaną one

3:29dopasowane do siatki, ewentualnie trochę powiększone i przycięte, ale dalej wygląda

3:33to dużo lepiej. Jeśli chodzi o opcje odnośników, możemy zrobić jedną stronę załącznika

3:38albo plików multimedialnych, czyli po kliknięciu w taki obrazek będzie on otwarty na przykład

3:42na nowej karcie. Ja wybieram tutaj zwykle Brak, ponieważ i tak nie jest to taka

3:46pełnoprawna galeria, nie mam jakichś fajnych opcji przesuwania i tak dalej, więc po prostu

3:50zostawiam ją jako statyczne zdjęcia. Pamiętaj jednak, że możesz tę galerię

3:54również wyrównywać, a także zrobić powiększoną szerokość, a nawet

3:58możesz ją poszerzyć na całą stronę. I tak prawdopodobnie wyglądałaby

4:03naprawdę fajnie, ale musielibyśmy pozbyć się tego jednego zdjęcia. Zaznaczam

4:07więc to zdjęcie i usuwam. Ewentualnie alternatywą mogłoby być zrobienie jej

4:12w tym momencie w czterech kolumnach i na całą szerokość strony. Zobaczmy, jak

4:16wyglądałoby to w przeglądarce. No, myślę, że nasz wpis naprawdę

4:20zdecydowanie zyskał tutaj na atrakcyjności. Ewentualnie możemy

4:24zostawić tak, jak było, czyli po prostu odznaczyć tę opcję i też

4:28podejrzeć i zobaczyć, czy przypadkiem tak nie podoba nam bardziej. Jak widzisz,

4:32ten edytor, jak również sama koncepcja bloków, jest bardzo pojemna i pozwala nam w ramach

4:36jednego motywu tworzyć bardzo ciekawe i zróżnicowane wpisy. Przykładowo

4:41możemy tutaj dodać blok i wyszukam sobie cytatu. Mam dwie opcje

4:45podstawowe, czyli zwykły cytat albo cytat wyróżniony. Wybiorę sobie wyróżniony cytat

4:49i wkleję tutaj kawałek treści. Mogę też przełączyć

4:53go na cytat z tłem. Na przykład może wyglądać w ten sposób. Możemy

4:57to cofnąć. Możemy też dodać kolejny blok i znów coś

5:02tutaj wyszukać. Zauważ, że mamy też możliwość wstawiania treści dynamicznych. Są to

5:06treści z sekcji widgety, gdzie możemy wstawić na przykład jakieś nasze komentarze czy

5:10wpisy z bloga, ale także treści osadzone z innych

5:15witryn, przykładowo z YouTube'a, Twittera czy Spotify lub Vimeo. Więc

5:19jeżeli chcielibyśmy wstawić przykładowo film z YouTube'a, możemy to bardzo prosto zrobić. Kopiując

5:24sobie link do takiego filmu bezpośrednio z paska adresu na

5:28YouTubie i wybierając polecenie Osadź. W tym momencie mamy już film

5:32zrobiony, możemy spróbować zarządzić tutaj ułożeniem tych

5:36elementów i tego filmu i jego wyświetlaniem. Zobaczmy, jak to będzie wyglądało

5:41na stronie. No i wygląda całkiem fajnie. Jak widzisz, mamy tutaj dołączony

5:45filmik. Film oczywiście mógłby pochodzić też z naszej biblioteki mediów. Oprócz

5:50tego, że... zapiszmy te zmiany, zaktualizujemy wpis... oprócz

5:54tego, że do mediów możemy dodawać obrazki, możemy też tutaj wrzucać elementy

5:58wideo i audio, a później na przykład sortować to po tych plikach audio czy

6:02wyłącznie po filmach. I następnie osadzenie takiego dołączonego filmu

6:06jest dziecinnie proste. Robimy to analogicznie do tego, jak osadzaliśmy obrazki. Ponieważ

6:11samo osadzanie elementów oraz działanie tych pozostałych bloków jest bardzo intuicyjne i jest

6:16ich bardzo dużo, nie będę tego pokazywał Ci w tej lekcji, ale jeszcze tym kursie wrócimy

6:21do niektórych fajniejszych elementów i do bardziej zaawansowanych technik. Na teraz to

6:25tyle. Dziękuję Ci za uwagę i do usłyszenia!