Webflow: Strona Wszystkich Postów

0:00Cześć! Witaj w kolejnej lekcji. Przed nami następna strona. Zrobimy tym razem

0:04statyczną stronę wszystkich postów. To będzie bardzo proste, aczkolwiek stąd

0:09musimy pożyczyć sobie parę elementów, żeby łatwiej nam się pracowało.

0:12Cały ten element Fixed w zasadzie możemy nazwać go Blog menu, bo to jest nasze

0:17alternatywne menu dla bloga, a następnie zapisać go jako symbol

0:22Wybieramy "a", w Symbols możemy wybrać polecenie Create new symbol albo po prostu prawym

0:26przyciskiem myszy na tym elemencie kliknąć i wybrać polecenie Create symbol. Tutaj z menu

0:31nie jest to możliwe, ale, jeżeli klikniemy na tym elemencie to wybieramy

0:35teraz Create symbol i nadajemy mu nazwę Blog menu.

0:39I takie menu już będziemy mogli

0:42wykorzystać na wszystkich kolejnych podstronach.

0:44W związku z tym przechodzimy do podstrony

0:47Blog all posts i w pierwszej kolejności właśnie umieścimy tutaj to menu Blog menu.

0:52Kolejna sekcja, którą możemy w zasadzie pożyczyć sobie z bloga jest to ta sekcja Hero.

0:57Mamy Section blog hero i mogę całe to skopiować,

1:00a następnie wkleić do Blog all posts i, jeżeli będę dokonywał jakichkolwiek

1:05modyfikacji no to warto będzie dodać tu dodatkową klasę.

1:08Czyli chciałbym teraz wejść do środka i w

1:11zasadzie usunę cały ten Collection wrapper. Mamy coś takiego jak Blog hero title.

1:16Zobaczmy tę klasę.

1:17Mamy Blog hero title i Card big.

1:20W zasadzie tutaj chciałbym umieścić jeden

1:22dodatkowy element, czyli z symboli wybiorę Header section

1:27i dzięki temu, że Blog hero title ma ustawione Display na flex i to się

1:32wyrównuje do środka to wszystko działa poprawnie.

1:35Należałoby dla tego symbolu przejść w jego ustawienia, a następnie wpisać tutaj

1:39odpowiednie treści, czyli tutaj dodamy sobie Alll articles,

1:42tutaj w zasadzie będzie tylko wpisane blog, a ten tekst możemy na razie zostawić.

1:46Natomiast chciałbym na Blog hero title

1:48dodać jeszcze jakiś ekstra margines i ma on już specyficzne klasy, ale wybiorę

1:53Cmd + Return, Ctr + Enter i wpiszę tutaj dodatkowo All pages,

1:58To znaczy, że, mogę nawet pisać Blog all pages,

2:01będzie to po prostu wariant specyficzny dla tej strony

2:04Blog all pages, dzięki temu nie popsuję tego co miałem na poprzedniej stronie

2:08bloga, a będę mógł dodać sobie odpowiednio Padding z góry i z dołu za altem to zrobimy

2:13dla tej sekcji All articles dodamy 70, zróbmy sobie 80 pikseli Paddingu i od góry i od dołu.

2:21No i świetnie. Mamy to gotowe,

2:22a teraz przejdźmy do ustawienia kafelków.

2:24Kafelki oczywiście też znajdują się na blogu, możemy je stąd pożyczyć.

2:28Co więcej możemy nawet całą tę kolekcję,

2:31Czyli to Collection list wrapper i koniecznie musimy zaznaczać całe

2:34kolekcje, bo jeżeli będziemy chcieli wyciąć coś ze środka z kolekcji np.

2:37item, to niestety Webflow nie pozwoli nam tego zrobić wkleić w inne miejsce,

2:41a przynajmniej we wszystkie miejsca, więc

2:43cały Collection list wrapper możemy sobie stąd wziąć i na przykład również wstawić do

2:47naszego Style guide'a. Tu mam sekcję z tymi Cards, czyli to jest w zasadzie dobre miejsce

2:53żeby to umieścić w tym kontenerze, możemy sobie to wkleić.

2:56Może zmienimy tę nazwę Collection list

2:57wrapper na jakąś trochę bardziej intuicyjną np.

3:00Blog cards wrapper

3:01i teraz będziemy mogli sobie z tego skorzystać. W przypadku tej strony Blog all posts

3:05mogę nawet skorzystać z trochę szerszej struktury z bloga. Wejdźmy

3:09jeszcze na chwilę na tę stronę i skopiować to razem z tą główną sekcją i kontenerem,

3:14czyli mógłbym cały ten Blog category section sobie skopiować. To jest

3:18odpowiednia rzecz, żeby ją wkleić właśnie w Blog all postach,

3:22natomiast będziemy musieli oczywiście zmienić strukturę wyświetlanych postów.

3:27Na razie wklejam to tutaj i rzecz jasna pozbyć się niepotrzebnych

3:30elementów, czyli tej Header section jak również tego CTA button wrapper.

3:36Mamy teraz Collection list wrapper, który ma

3:38specyficzne ustawienia, a jedyną rzeczą, którą musimy tutaj zmienić to tak naprawdę

3:43wyłączyć opcję Limit items. Jeśli to zrobię Voila! - mam wyświetlone

3:47wszystkie wpisy i to co jeszcze można by było dostosować, jeżeli chcę zmienić trochę tę

3:52sekcję Cmd + Return i znowu tworzę sobie klasę Blog all posts zwykle właśnie taką,

3:58która jest specyficzna dla tej strony bo np.

4:00tutaj będziemy mogli zmienić ten margines

4:02i trochę go zmniejszyć, a widzę, że on nie działa dlatego, że jest ustawiony też

4:06margines na tym elemencie Section blog hero, to tutaj też moglibyśmy to zrobić.

4:11To jest specyfika CSSa zapadanie marginesów.

4:14Możemy tutaj wpisać Blog all posts

4:17Blog all posts, też stworzyć taką combo klasę i na

4:21tym elemencie zmniejszyć margines i wtedy jak zmniejszymy na tym elemencie np.

4:25na tym możemy go ustawić nawet na 0, wybierzmy wartość 0.

4:30I teraz ten margines, który mamy na Blog category section będzie determinował

4:34rzeczywiście

4:34jaki jest odstęp pomiędzy tymi elementami. Możemy zostawić to sobie tak. Myślę, że jest

4:39w porządku i to co możemy jeszcze dodatkowo zrobić, ponieważ na naszym blogu

4:43może być naprawdę mnóstwo wpisów, to chciałem pokazać jedną właściwość Collection list

4:47wrappera. Na kolekcji można ustawić coś takiego jak Pagination, czyli paginacja.

4:52Jeśli włączymy Paginate items będziemy mogli zadeklarować ile item'ów,

4:58Ile tych wyświetlanych elementów z CMSa

5:00chcemy mieć na jednej stronie. My chcemy mieć np.

5:035 i wtedy zobacz, że będziemy mieli 2 strony,

5:05możemy Preview czyli podgląd każdej strony wyświetlić, ponieważ mamy 10 postów

5:10zamockowanych no to, jeśli podzielimy to na 5 wyników możemy zrobić sobie np.

5:148 wyników albo nawet 9 po to, żeby było to na pierwszej stronie wyświetlane

5:20równo, czyli żebyśmy mieli równo 3 rzędy i później przycisk Next będzie prowadził

5:25nas do kolejnej strony, w tym przypadku będzie na niej tylko jeden wynik.

5:28No i ten przycisk oczywiście możemy też

5:31sobie dostylować, czyli przejdziemy do tego przycisku. Zobacz, że mamy możliwość

5:35jeszcze włączenia dla niego takiej opcji Show page count,

5:38czyli w momencie kiedy będziemy na drugiej

5:41stronie mamy informacje pod spodem, że jest to strona druga na dwie, wcześniej mamy

5:45informację, że jest to strona pierwsza na dwie.

5:48Jeśli chodzi o właściwości, o opcję tego przycisku, to w zasadzie to wszystko.

5:52Natomiast rzecz jasna można go ostylować,

5:55czyli mamy dwa przyciski Previous i Next

5:58W takiej sekcji paginacja i ewentualnie właśnie to Page count,

6:02więc możemy dowolnie zmienić style tych elementów.

6:05Zaznaczam teraz guzik Next, wybieram Cmd + Return i wpisuje dla niego klasę.

6:09Będzie to Button big, a jeszcze dodatkowo

6:11Cmd + Return zrobimy na to klasę Outline i to będzie taki specyficzny wariant

6:16przycisku, który mamy już przygotowany w Style Guidzie.

6:18Wygląda bardzo spoko i możemy to samo zrobić na tym przycisku Previous, co

6:22prawda go teraz nie widać, musielibyśmy przenieść się na drugą stronę.

6:25W ten sposób teraz możemy do tego przycisku dodać tę samą klasę,

6:30czy te same dwie klasy Button big i jeszcze Outline.

6:34Ok no to teraz mamy gotowe przyciski.

6:37Można by było jeszcze zająć się tym komponentem Page count,

6:40ale szczerze mówiąc ja go po prostu wyłączę, nie będę go stylował.

6:43On jest taki skomplikowany, natomiast sama

6:45paginacja warto, żeby dostała też jakąś dodatkową klasę np.

6:49Blog pagination

6:53i do niej możemy dopisać sobie jeszcze jakiś margines np.

6:57w ten sposób.

6:57Teraz zobaczmy jak to będzie działać w podglądzie.

7:00Jeżeli kliknę Previous

7:01to przechodzę na stronę poprzednią, a jak kliknę Next to przechodzę na

7:05stronę kolejną z wpisami, także wszystko działa zgodnie z oczekiwaniami.

7:09Jeśli chodzi o jakieś inne opcje paginacji

7:11np. wyświetlanie jakichś różnych stron w postaci numerów 1, 2, 3, 4 nie jest

7:16to możliwe. Opcje, które są dostępne są po prostu tutaj, możemy z nich skorzystać.

7:21To co możemy zrobić to jeszcze oczywiście

7:23zarządzać opcjami sortowania dla całego Collection list wrapper'a.

7:26Mamy tutaj sortowane od najnowszego do najstarszego wpisu, jeżeli chcielibyśmy to

7:31jakoś inaczej zrobić, możemy to zrobić. W tym przypadku jest to akurat w porządku.

7:35Więc w ten prosty sposób stronę mamy prawie gotową.

7:39I jeszcze dodamy tutaj kolejny symbol czyli Footer, który pojawi się na dole i to

7:44wszystko. Zobacz, że z gotowych komponentów

7:46zaczynamy już coraz szybciej składać poszczególne strony.

7:50Ta strona jest nazwana np. All posts,

7:52może nie jest to najszczęśliwsza

7:54nazwa, ale zauważ, że dzięki temu, że zrobiliśmy to w Blog menu, to teraz All posts

7:58możemy zmienić na All articles i zostanie to zmienione wszędzie, czyli

8:03zarówno na tej stronie, jak również na stronie bloga, będziemy mieli zmieniony ten

8:09link na All articles, więc wszystko działa jest dynamiczne i ułatwia nam w

8:14maksymalnym stopniu zmiany w przyszłości. To wszystko w tej lekcji. Do usłyszenia!