Webflow: Strona Główna - Sekcja Featured

0:00Witaj! W kolejnej lekcji pracujemy dalej z naszym Blogiem, czyli z jego główną stroną.

0:04Teraz dodam tutaj element sekcji Section.

0:06Oczywiście muszę go wyciągnąć poza

0:09nawigację. Wewnątrz tej sekcji znajdzie się kontener,

0:12standardowo i wewnątrz tego kontenera mogę

0:15zrobić kolejny techniczny div block, który nazwę blog hero title.

0:21Będzie to część tytułowa tego elementu bloga, czyli w kontenerze znajduje

0:27się taki element, sekcja, może dostanie margines od razu, żeby

0:31była oddzielona odpowiednio od nawigacji górnej. Sam blog hero title

0:37będzie miał też pewne właściwości. I teraz można pomyśleć sobie o tym, żeby te

0:41właściwości starać się zapisać sobie na później, czyli mieć je w naszym Style Guidzie.

0:46Jeżeli przykładowo robimy karty to zawsze one mają białe tło, zaokrąglone narożniki i

0:50zawsze mają jakiś cień i ten cień w zasadzie zależny jest od tego, czy ta karta

0:54jest duża, czy mała. Jeśli jest duża to ma też odpowiednio bardziej

0:58rozmyty cień, jeśli jest mała ma trochę mniejszy, więc to, co moglibyśmy zrobić to

1:02usunąć na chwilę tę klasę blog hero title, nadać jakąś inną ogólną klasę np.

1:08Card Big.

1:09W ten sposób

1:11i będzie ona zawierała te podstawowe właściwości, czyli kolor tła, który

1:15wybierzemy na biały, jak również zaokrąglone narożniki Border

1:19Radius 12 i Box Shadow, który dodamy będzie to 180 stopni, 20, 30 i 6% Alpha

1:26opacity.

1:28I w tym momencie zdefiniowaliśmy sobie taką fajną pomocniczą klasę.

1:33Gdzie ona jest?

1:42Którą będziemy mogli reużywać na elementach, więc, jeśli teraz usunę Card Big i skorzystam

1:47z tej klasy blog hero title, którą stworzyłem, ale dodatkowo dodam tutaj Card Big

1:53to będę miał to ładnie ostylowane. W ten sposób możemy zrobić sobie właśnie takie

1:58typowe na przykład tła które mamy na stronie,

2:01typowe elewacje tzn.

2:02jakieś wielkości cieni, które możemy tutaj np.

2:06elevation 1, 2, 3 i zrobić sobie cień, który będzie

2:09największy, później mniejszy, później trochę mniejszy, więc można robić też te elementy

2:13Style Guide'a właśnie z pomocą takich klas, które później zresztą warto

2:18jest przerzucić do samego Style Guide'a, czyli do samej podstrony Style Guide.

2:22Czyli mogę przejść teraz tutaj. Dlatego, że często zapominamy o tym

2:26jak zrobimy, że mamy jakąś klasę, której moglibyśmy użyć w takiej sytuacji.

2:32Możemy np.

2:34wstawić sobie tutaj jeszcze jedną taką sekcję, która będzie się nazywała Building Blocks.

2:40I do tej sekcji wstawimy sobie

2:44tę przykładową kartę, czyli blog hero title.

2:47Możemy jeszcze dodać jakiś nagłówek H3 tutaj.

2:51I wpisać, że będzie to Cards.

2:53Stąd możemy usunąć teraz obie klasy i wybrać tylko klasę Card

2:57Big, ponieważ to ona zawiera te style, które stworzyliśmy.

3:00Dobrze by było jeszcze zrobić z tego osobną całą sekcję, może

3:05Style Guide Section skopiuję i wkleję tutaj i będzie, to jest ta część z Building Blocks,

3:10więc umieścimy ją tutaj, a te pozostałe rzeczy, które się tu znajdowały usunemy.

3:14Znajdą się one w Style Guide Section pod spodem, czyli tu.

3:18A z niej usuniemy

3:19cały Building Blocks, czyli mamy teraz

3:22Building Blocks, a pod spodem dopiero znajdują się elementy sekcji.

3:27No i świetnie. Mamy uzupełniony Style Guide.

3:29Wracamy do strony bloga.

3:31Teraz przed nami najciekawsze zadanie, czyli umieszczenie w środku danych z CMSa.

3:35Jeśli przejdziesz do designu to właśnie ten element będziemy robić,

3:39a tutaj ma wyświetlać się najnowszy post,

3:42ale dodatkowo taki, który jest oznaczony flagą featured.

3:46W związku z tym będziemy musieli po

3:48pierwsze umieścić tu element kolekcji, od tego zawsze zaczynamy.

3:51Czyli dodaję sobie CMS Collection list i wskazuję, że będę korzystał z kolekcji

3:57blog postów. Tutaj będzie wyświetlany jeden z blog postów, jego dane.

4:01Wszystkie blog posty zostały tutaj automatycznie

4:03załadowane, w związku z tym musimy w jakiś sposób to ograniczyć. Wybieram polecenie Show all settings,

4:07czyli przechodzę do zakładki Settings i w tym miejscu mogę wybrać rozmaite opcje,

4:12które pozwolą wyfiltrować, a także posortować wyniki i odpowiednio je

4:16wyświetlić. Przede wszystkim chcemy wyświetlić tylko jeden, najnowszy post.

4:20Jak to zrobić?

4:21Jest tutaj opcja Limit items, czyli będziemy limitować, ograniczać ilość

4:26item'ów, która jest wyświetlana i chcemy ograniczyć tę ilość do jednego item'a.

4:30Teraz musimy jeszcze sprawdzić, który z tych postów jest postem.

4:35najnowszym, bo ma się tutaj pojawić

4:37najnowszy post, w związku z tym wybierzemy Sort order, czyli kolejność sortowania.

4:41Dodam, z pomocą Plusa, sortowanie i będziemy

4:45chcieli to zrobić po dacie opublikowania posta.

4:47Mamy to automatycznie w prezencie od Webflow dodawane do każdego wpisu, czyli każdy

4:52taki element kolekcji będzie dostawał datę Published on, kiedy został opublikowany,

4:57a my teraz musimy się upewnić, że to sortowanie jest od najnowszego do

5:00najstarszego, czyli najnowszy post będzie zwracany jako pierwszy.

5:04Wybieram Save.

5:05Ale to jeszcze nie wszystko, ponieważ my musimy nie tylko wybrać najnowszy post, ale

5:09też taki, który jest oznaczony flagą Featured i do tego skorzystamy z filtrów.

5:14Filtry pozwalają nam ograniczyć w ramach tych pól, które dodaliśmy, ograniczyć

5:19wyniki. Będziemy chcieli tylko i wyłącznie te posty wyświetlać, które flagę Featured

5:24mają włączoną, czyli jej ustawienie jest na ON. Wybieram polecenie Save.

5:28I w tym momencie już mam skonfigurowany ten

5:30wynik. Podsumowując, będzie tutaj wyświetlany tylko jeden post,z

5:33pomocą opcji Limit items.

5:35Zgodnie z sortowaniem od najnowszego,

5:39a także tylko ten post, który ma zaznaczoną flagę Featured na ON.

5:43No i teraz możemy zająć się wnętrzem, czyli

5:46Item'em. Wchodzę do Collection list i wybieram polecenie Collection item.

5:51Spójrzmy na chwilę na nasz projekt.

5:53Mamy tu po prawej stronie zdjęcie, po lewej

5:55stronie będzie flaga Featured, tytuł, excerpt oraz guzik.

5:58W zasadzie nic nie stoi na przeszkodzie,

5:59żeby cały ten kafelek linkował po prostu do tego ostatniego posta.

6:03W związku z tym, już na tym etapie, ja dodam Link block, który będzie linkował do strony i

6:09tutaj, jeśli wybierzemy stronę fioletową z CMSa to będziemy mogli linkować do Current

6:13blog post, czyli właśnie do tego posta, który jest wyświetlany.

6:16I, jeśli chodzi o ustawienia to w sumie

6:18zmienię to tylko na Flex box tak, żeby wyświetlało się to na całą szerokość i teraz

6:22wewnątrz tego Link block'a będziemy tworzyli kolejne elementy.

6:25Możemy rozdzielić obie sekcje po prawej i po lewej stronie Zróbmy najpierw sekcję po

6:28lewej. Zrobimy div block'a, któremu nadamy od razu nazwę blog post hero.

6:33Niech to będzie blog post hero np.

6:38Wpiszę tutaj blog hero.

6:42Niech to będzie blog hero, a następnie dodamy od razu do niego elementy, czyli będziemy

6:46chcieli mieć Caption na górze i możemy stworzyć z pomocą prostego text block'a.

6:51Kolejno będziemy mieli Heading i będzie to Heading 1. Kolejno

6:57będziemy chcieli dodać Paragraph, czyli excerpt, który tutaj wstawimy też dynamicznie i

7:02ostatni element, który potrzebujemy, to ten przycisk Read now, aczkolwiek, jeżeli

7:07zrobiliśmy całość jako link, to w zasadzie to może być już po prostu zwykły text

7:11block, który tutaj wstawimy pod spodem. Wewnątrz tego tekst block'a

7:15wystarczy, że wkleimy sobie ten tekst Read now, będzie on stały

7:19i kolejnym stałym tekstem, który się tutaj znajdzie będzie Caption, czyli napis

7:24Featured. Heading jest dobrze ostylowany, ponieważ ma styl Heading 1. Natomiast

7:29tutaj chcielibyśmy zmienić to stylowanie paragrafu i zrobimy sobie tutaj Blog Hero Excerpt.

7:36Blog Hero Excerpt.

7:44Nie mamy takich stylów jeszcze w

7:46Style Guidzie, więc ewentualnie będziemy mogli je później dodać.

7:49To, co będę chciał zrobić to ustawić dodatkowo marginesy np.

7:53od góry ustawię margines na 12, z dołu ustawię na 24

7:57i właściwości, które tutaj jeszcze zmienię to Weight wybierzemy na 400,

8:01jak również kolor tekstu zmienimy na kolor szary i będzie to kolor 8d8d8d OK.

8:09I to w zasadzie wszystkie właściwości, które chciałbym tutaj zmienić. Jeżeli będę

8:14ten element wykorzystywał wiele razy, można było tutaj zrobić uniwersalną klasę i

8:18dodać go rzeczywiście do Style Guide'u, aczkolwiek on jest wyjątkowy, na mojej

8:22stronie jest tylko jeden taki element, więc po prostu zostawię go jako osobna klasa.

8:26Jeszcze jeden element do ostylowania to ten text block featured i ja mam coś

8:31takiego jak Caption, czyli klasę, która pozwoli mi odpowiednio sformułować ten

8:34tekst, ale oprócz tego chciałbym jeszcze stworzyć nową subklasę tego Caption

8:40i będzie ona w miarę uniwersalna, ponieważ będzie tutaj zarówno do Featured jak i np.

8:44do tych elementów, które są

8:45tagami, kategoriami, więc możemy to nazwać przykładowo blog tag.

8:51Zmieńmy ustawienie na display inline

8:55Block, w ten sposób. Następnie będziemy mogli, jeśli mamy inline block dodać tutaj padding i

9:01dodamy z altem z lewej i z prawej strony 8 pikseli i z altem od góry i od dołu dodamy 4

9:07piksele. Jeszcze dla tego elementu akurat musimy też włączyć zaokrąglanie narożników.

9:13W tym przypadku zrobimy to na 4 i Color background, czyli kolor tła zrobimy na

9:19kolor żółty, później będziemy ten kolor jeszcze dynamicznie zmieniać, ale to jest

9:23dokładnie już tak jak chcemy, żeby to wyglądało, więc mamy te rzeczy ostylowane.

9:28A teraz ciekawa rzecz, ponieważ chcielibyśmy podłożyć dynamiczne dane z

9:32CMSa do nagłówka i do exceptu, więc klikamy sobie na Header 1, następnie na jego właściwości i

9:38wybieramy polecenie Get text from Block Post.

9:40Teraz możemy wybrać pole i zobacz, że mamy

9:43pola kategorii, czyli Name, Decription itd., które są dziedziczone z kategorii, ale

9:49także mamy te główne pola dotyczące blog posta, czyli Name i excerpt.

9:53Wybieramy tutaj w związku z tym Name,

9:55a w tym miejscu klikamy na Ustawienia i wskazujemy, że ma to pobierać excerpt,

10:00czyli ten krótki opis posta.

10:01No i mamy to zrobione jest dynamiczne.

10:04Jeśli chodzi o całą sekcję, czyli całe blog hero to w zasadzie potrzebuję dodać tu

10:08tylko padding, więc zrobimy padding rzędu 48,

10:11tak było w designie, z każdej strony. Natomiast

10:15nie wyrównuję tego jakoś do lewej specjalnie dlatego, że cały link block jest

10:18ustawiony na Display Flex, więc wystarczy, że do tego link block'a teraz dodam kolejny

10:23div block, któremu nadam na przykład taką klasę blog hero image wrapper.

10:28To będzie nowa klasa, a do niej do środka wstawię obrazek, czyli

10:32wybiorę "a", wstawimy image, obrazek i teraz znów możemy obrazek pobrać z

10:37Blog postów. Wybieram polecenie Get image from blog post

10:40i wybieramy, który obrazek nam pasuje.

10:42Chcemy ten obrazek 16 na 9 pobrać.

10:45I, jeżeli chodzi o jego właściwości to

10:47chciałbym po pierwsze nadać mu odpowiednią klasę.

10:49Będzie to blog hero image.

10:52Stworzymy taką nową klasę, w ramach której chciałbym na pewno zmienić wypełnienie

10:57tego obrazka na cover, tak, żeby on wypełniał całą dostępną przestrzeń. Pokażę

11:02Ci jeszcze, na chwilę to cofnę i pokażę Ci, co by się stało gdybym np.

11:05wybrał height 100 proc. .

11:06Obrazek będzie zniekształcony, a w momencie gdy ustawię go na cover, wtedy będzie

11:11dobrze się wyświetlał. Dla tego obrazka też ustawiamy na sztywno, tak jak było w designie.

11:15Zaraz pokażę ci, jak może nam to pomóc. 650,

11:19dzięki temu on też jest wyświetlany, ponieważ jest fit cover i height 100 proc.

11:23. No to będzie dobrze wyświetlane w tym

11:25kontenerze, ale powinien zajmować jeszcze więcej miejsca.

11:28Natomiast na początek, musimy sobie jeszcze

11:29wrócić do sekcji kontenera, ponieważ chciałem ją trochę lepiej wyrównać.

11:35Jest za dużo odstępu po lewej i po prawej stronie.

11:38Zacznijmy może od tej głównej sekcji. Warto by było jakoś sensownie ją nazwać np.

11:42Section Blog hero.

11:43I tutaj w zasadzie możemy zrobić takie

11:45ustawienie, że zrobimy 120 pikseli marginesu od góry i 120 pikseli od dołu.

11:51Natomiast interesuje nas bardziej kontener, który chcielibyśmy ustawić mu max width

11:55na 1282 piksele. To było dokładnie tak jak w designie i teraz już

12:00rozciąga się to fajnie i zresztą to samo powinniśmy zrobić dla tego kontenera menu.

12:04Czyli to jest kontener 2 możemy zrobić, że tutaj jest blog menu container,

12:11po to, żeby nie zmieniło nam to parametrów ze Style Guide'u, ale tutaj 1282 piksele

12:16wstawimy jako szerokość i też będzie wyglądało dużo lepiej.

12:20Kolejną rzeczą jest zmiana tego jak wyświetla się zdjęcie, aby było to w

12:23proporcjach, bardziej sensownie i specjalnie zrobiłem tutaj w div block'u Display

12:27Flex po to, żebym mógł pokazać Ci, że, jeśli mamy dzieci Flex box'a to one też mają

12:32swoje specyficzne właściwości, które są oznaczone w sekcji Flex child.

12:36I mamy tutaj taką opcję Sizing. Sizing możemy ustawić na zmniejszaj

12:40szerokość, jeśli to tylko możliwe, zwiększaj szerokość, jeśli to tylko możliwe.

12:44Albo możemy ustawić to na opcję Don't shrink

12:47or grow, czyli nie zwiększaj, ani nie zmniejszaj.

12:49Jeżeli ustawiliśmy na blog hero image 650

12:52pikseli szerokości, to gdybyśmy na jego wrapper ustalili sekcję nie zwiększaj i nie

12:56zmniejszaj to mielibyśmy dokładnie ten rozmiar.

12:59Czyli w tym momencie zostaniemy dokładnie w tym rozmiarze.

13:01Natomiast ta sekcja, czyli sekcja blog hero,

13:04może dostać na przykład ten parametr Grow if possible,

13:06czyli, jeśli tylko jest miejsce to powinna

13:09się rozszerzać. I to powinno responsywnie całkiem nieźle nam zadziałać.

13:13Jedna opcja, którą jeszcze warto by było

13:14zmienić, bo dostrzegłem, że zdjęcie nie ma tutaj zaokrąglonych krawędzi.

13:17Możemy nawet na sam blog hero image ustawić radius na krawędziach z prawej

13:22górnej i z prawej dolnej strony i w tym momencie będą one zaokrąglone.

13:26No i może jeszcze szybko sprawdźmy wersje

13:28responsywne, więc nie będę jakoś szczególnie się na nich koncentrował, jeśli masz trochę

13:31więcej czasu to warto na pewno poświęcić tutaj chwilę.

13:35Natomiast ja po prostu zrobię jakieś

13:37szybkie fixy, żeby to wyglądało w miarę dobrze.

13:39Jednocześnie zmienię blog hero title,

13:41żeby na wersjach mobilnych, włącznie z tabletem, dostał już jakiś mały margines

13:45z lewej i z prawej strony. Tak to wygląda lepiej.

13:47Wydaje mi się też, że na tej sekcji blog hero moglibyśmy zmniejszyć trochę padding.

13:52W sumie z każdej strony. Zróbmy to w ten sposób.

13:55I jeszcze wygląda na to, że w momencie gdy

13:59rozszerzemy właśnie menu tutaj jest źle wyrównane, jeśli zaznaczymy block menu container,

14:04który ma Display Flex ustawione to wyrównanie justify.

14:08Po prostu ustawmy na do środka i moim zdaniem tak już będzie OK.

14:12W tej wersji mobilnej możemy już zrobić tak, że cały link block, który jest flex box'em

14:16ustawimy dla niego Direction vertical i zrobimy to tak, że odwrócimy kolejność.

14:22Czyli wybierzmy Reverse i będzie trzeba jeszcze dla tego block'u

14:26link block Hero image wrapper, ustawić inne właściwości, a w zasadzie na zdjęciu mamy

14:32300 pikseli i to dlatego. To może to zmieńmy na z powrotem na 650 pikseli.

14:37Teraz powinno być OK.

14:38Jak również pozbędziemy się zaokrąglonych narożników z prawej dolnej części, a wrzucimy

14:45to na górę i zobaczmy jeszcze tę wersję małą, mobilną.

14:47Wydaje mi się, że jest OK. Także udało nam

14:50się zrobić też w zasadzie na szybko, ale są działające te

14:53wersje responsywne, możemy przejść do kolejnej lekcji.