Webflow: Strona Główna - Ostatnie Artykuły

0:00Witaj w kolejnej lekcji, gdzie zajmiemy się następną sekcją, czyli sekcją Recent Articles.

0:03Będzie ona wyświetlała dla nas ostatnie artykuły z bloga i na tej samej

0:08zasadzie przygotujemy sekcje, które będą później wyświetlały

0:10ostatnie artykuły, które ukazały się w poszczególnych kategoriach.

0:13Zabieramy się do pracy. Sekcję blog hero,

0:16którą przygotowałem jako taką trochę odrębną i tak chciałbym, żeby to pozostało,

0:21czyli zarówno ten kontener jak i blog hero section będzie miała unikalne klasy.

0:26Natomiast te wszystkie rzeczy, które zrobimy teraz, będą już miały takie same

0:29klasy, czyli zrobimy sobie blog category section.

0:32Coś takiego. Wpiszemy sobie blog category section.

0:37W zasadzie tutaj damy tylko jedną właściwość zrobimy margines

0:42od góry w wysokości stu pikseli.

0:46I tak będą od siebie oddzielone te sekcje.

0:48Natomiast w środku zrobimy kontener techniczny jak zwykle i ten kontener też

0:53będzie miał konkretne właściwości, czyli max width 1282. W ogóle

0:57nadajmy mu odpowiednią klasę, a nie kontener 4.

1:00Możemy zrobić blog content container. Ustawmy jeszcze dla niego wyświetlanie jako

1:06Flex. Zrobimy tutaj vertical i wycentrujemy go zarówno w poziomie jak i w pionie.

1:11Następnie wstawimy do tego element.

1:13Będzie to symbol i mam tutaj coś takiego jak Header section - to jest właśnie coś z

1:18naszego Style Guide'a, co mi się tutaj przyda. Jeśli chodzi o ten nagłówek,

1:22czyli Captions, zmienimy to na From The Blog.

1:24Pod spodem będziemy mieli Heading Recent Articles.

1:27A ten cały tekst po prostu usuniemy.

1:29Co prawda on się tutaj wyświetla, ale nie będzie widoczny w podglądzie.

1:33Oprócz tego, wstawimy tu Collection list

1:36wrappera i w ramach tego Collection list wrappera

1:39będą nasze wszystkie posty.

1:40Czyli mamy Collection list i Collection item.

1:42Najpierw spróbujmy ostylować Collection list

1:45i zmienimy może klasę tego elementu na blog card list, coś takiego dodamy.

1:52Ponieważ chciałbym, żeby te item'y były wyświetlane jako grid

1:57Na przykład, możemy to zrobić, żeby mieć

1:59naprawdę dobrą kontrolę nad tym gridem i ustawienia tego grida.

2:03Zróbmy sobie Gap na 24 piksele. Jeśli chodzi o rzędy

2:07też zrobimy 24 piksele, zostawiamy Rows i dodamy jeszcze jedną kolumnę. Natomiast

2:13usuniemy ten niepotrzebny 1 rząd i będziemy mieli teraz trzy elementy obok siebie.

2:19Zostawiamy to tak, a jeśli chodzi o ustawienia to na razie możemy również

2:22zestawić. Jak widzisz Collection list item'y się tu nam ładnie wyświetlają.

2:26Oczywiście musimy je połączyć z właściwą

2:28sekcją, czyli jako Source z CMSa musimy wybrać standardowo blog posty.

2:32No i właśnie teraz chcemy przejść do

2:34ustawień tych blog postów, a następnie zawęzić ich wyświetlanie do trzech item'ów.

2:40Czyli chcemy wybrać znowu polecenie Limit items i zrobić sobie trzy.

2:44Wybieramy Return, a te które będziemy

2:47chcieli wyświetlać Sort order, to będą oczywiście po dacie publikacji i po prostu

2:52wszystkie najnowsze posty chcemy tu wyświetlić.

2:54Teraz, jeśli przejdziemy do Collection

2:56itemów to będą one miały również dziedziczone style z grida, czyli jako

3:01Grid child będziemy mogli ustawić tutaj opcję Align.

3:04Chciałbym na razie ustawić tylko opcję

3:06Stretch, żeby one rozciągały się od lewej do prawej krawędzi natomiast to, co nas

3:11interesuje w środku to wstawienie kolejnego link block'a, bo cały znowu ten

3:16kafelek będzie linkiem i standardowo, tak jak zrobiliśmy poprzednio,

3:19będziemy chcieli, żeby on linkował do Current blog posta.

3:23Po kliknięciu w cały ten kafelek będzie ktoś mógł po prostu pójść do

3:27właściwego posta, dla tego link block'a dodajmy klasę np.

3:31blog card. W ten sposób, a na cały Collection item może

3:35zmienimy tutaj też klasę na blog card collection item.

3:39I teraz w środku będziemy już stylować i dodawać elementy do poszczególnych kart.

3:44Zacznijmy budować tę strukturę od

3:46technicznego div block'a, którego nazwiemy Tags wrapper.

3:51Będzie on zawierał tagi i możemy zamodelowwać tutaj np.

3:55dwa text block'i, czyli jeden tag to będzie

3:58ten dotyczący posta featured, a drugi dotyczący kategorii. OK.

4:02Następna rzecz, którą chcę tutaj umieścić to kolejne techniczn div block i będzie to

4:07div block, który będzie zawierał obrazek, czyli np.

4:09Cards image container

4:12Albo wrapper i będziemy chcieli od razu

4:16wstawić do niego obrazek, czyli wybierzmy image i też dodajemy od razu do niego

4:20klasę Card image. Kolejno zrobimy następny div block, który będzie zawierał

4:26tytuł, excerpt oraz footer, które przygotujemy, czyli

4:30imię i nazwisko autora oraz do jakiej kategorii należy post, także

4:33będzie to kolejny element, który nazwiemy card text.

4:36Card text do tego card text'u wrzucimy sobie następujące elementy.

4:42Pierwszy div block, może znowu konstrukcyjny, będzie zawierał tytuł, czyli Card title.

4:49A drugi taki konstrukcyjny div block

4:53Będzie zawierał ten footer, czyli weźmy sobie div block i wpiszemy card footer.

5:00I teraz możemy dodać jeszcze do tego div block'a

5:04card title elementy. Będziemy chcieli mieć tutaj tytuł Blog post'a, czyli heading typu

5:09trzeciego, a także po prostu akapit tekstu czyli Paragraph, tyle że ten akapit będzie

5:16naszym opisem, czyli excerpt'em. W samym footerze strukturę przygotujemy

5:20następująco. Wrzucimy text block'a i w sumie powielimy go trzy

5:25razy, dlatego że będziemy mieli najpierw autora, a dajmy mu klasę card author

5:31card author.

5:33Kolejno będziemy mieli taki separator, możemy nazwać go Card separator.

5:39Będzie to słowo in,

5:40a później będziemy mieli kategorię, czyli możemy zrobić tutaj card category.

5:46Ja miałem wcześniej już zamodelowane

5:48podobne kafelki, ale naprawdę chciałem, ponieważ jest to element dosyć ważny

5:51konstrukcyjny, który będzie nam się powielał mnóstwo razy, to chciałem go

5:56przygotować od podstaw i pokazać Ci jak go zrobić tutaj, więc mamy strukturę gotową.

6:00Teraz trzeba będzie jeszcze pobierać dynamiczniee dane.

6:03Czyli tak, po pierwsze

6:05Heading 3, możemy bardzo łatwo pobrać tutaj dane, z blog post'a i bierzemy jego name.

6:11Następnie w miejsce tego akapit tu będziemy chcieli pobrać excerpt.

6:15Kolejne pole to autor i przejdźmy może do jego ustawień block settings, żeby było nam

6:20wygodniej wybrać to z listy. Wybieramy author name, w tym miejscu po prostu wpiszemy in,

6:25ponieważ to będzie w wewnątrz kategorii i tu zrobimy card category, czyli pobierzemy sobie Get

6:31i przejdziemy do sekcji category, category name.

6:35No i wygląda to całkiem nieźle.

6:37Jeszcze tylko zdjęcie. Card image, wybieramy z blog postów.

6:40I tutaj też wybieramy zdjęcie 16 na 9.

6:43Ok. Wygląda na to, że strukturę mamy gotową.

6:47W końcu chcemy pokazać tutaj czy post jest featured, czy nie.

6:50Więc możemy zrobić po prostu featured.

6:53Natomiast w tym polu tekstowym pobierzemy

6:55sobie tag, czyli przechodzimy do tag name i jest w porządku, jeśli chodzi o strukturę.

7:00Wszystko mamy. Teraz trzeba będzie zająć się stylami.

7:03Po pierwsze, te

7:04blog tagi będą łatwe do zrobienia. Zobaczmy jaką mamy tu klasę caption i blog tag, więc

7:10obie te klasy musimy zastosować. Najpierw klasa caption, następnie blog tag.

7:19I tutaj zrobimy to samo, zrobimy sobie caption

7:24i zrobimy klasę blog tag, z tym, że

7:27będziemy chcieli pobrać dynamicznie kolor

7:30dla tego elementu i mamy te kolory zdefiniowane w bazie.

7:33W związku z tym możemy przejść do właściwości i mamy Dynamic style settings.

7:38Teraz możemy dla caption ustawić sobie

7:41Background color z blog postów, a pole to będzie to, do którego mamy reference, czyli tag color.

7:49Zobacz, że automatycznie te kolory zmieniły się na te, które mamy w bazie.

7:53Bardzo fajna sztuczka.

7:54To, co jeszcze możemy zrobić to oczywiście w niektórych tylko

7:58możemy wyświetlać, a w niektórych nie będziemy wyświetlać tego, że jest featured w związku

8:02z tym przejdźmy do featured i ustawmy tutaj Condition visibility.

8:06Będziemy to wyświetlać tylko wtedy, kiedy flaga featered switch jest włączona.

8:11Wybieramy polecenie Save i jak widzisz dla tych dwóch postów featured jest włączony,

8:15a dla tego nie. W związku z tym zostało ukryte.

8:18W ten prosty sposób zrobiliśmy całą

8:20strukturę i mamy dane z CMSa. W kolejnej lekcji zajmiemy się ostylowaniem kafelków.

8:24Do usłyszenia.