Webflow: Strona Główna - Pozostałe Sekcje

0:00Cześć! Witaj w kolejnej lekcji, gdzie dokończymy sekcję

0:02główną Bloga, czyli tą główną podstronę, natomiast chciałbym jeszcze zrobić w tym

0:06Blog category section, a w zasadzie Section container, jedną

0:10dodatkową techniczną sekcję. Wstawię div block'a, który będzie zawierał przycisk.

0:14Przycisk dodam z symboli i będzie to Button big.

0:18Gdzie on jest? Tutaj.

0:20Chciałbym, żeby ten guzik kierował do

0:24wszystkich postów, czyli do wszystkich postów z tej kategorii Recent articles.

0:29To, co najpierw zrobimy to trochę dostylujemy ten div block. Może nadam mu jakąś klasę np.

0:34CTA button wrapper.

0:36I teraz będę chciał zrobić dodatkowy margines albo Padding

0:41Może zrobimy sobie Padding np.

0:4232 piksele od góry i chcę jeszcze upewnić się, że ten guzik będzie na środku.

0:49Zostawiamy. W zasadzie, ponieważ to wszystko jest wyrównane do

0:52środka we Flex box'ie to będzie się zawsze wyświetlać dobrze, natomiast na samym

0:56przycisku przejdźmy do właściwości i tekst Get the quote zmienimy na

1:01View All Articles i ustawienie tego guzika zrobimy, zmienimy z External URL na Page

1:08ten link i będziemy linkować do strony Blog all posts, czyli do wszystkich

1:13postów na Blogu. To będzie strona, która będzie agregowała wszystkie wpisy.

1:18No i to tyle. Zostawiamy to tak jak jest.

1:20Mamy w zasadzie gotową całą sekcję Blog

1:23category section. W związku z tym możemy ją teraz powielić

1:27i możemy ją wkleić dla każdej z kolejnych sekcji.

1:30Czyli mamy cztery sekcje: Software, Marketing, Mobile

1:34i Blockchain, więc wklejam to teraz 4 razy, łącznie będziemy mieli 5.

1:37Przechodzę do pierwszej z tych sekcji

1:39i zamiast Recent articles będę chciał pobrać tutaj informacje o tym, jakie są

1:45ostatnie artykuły w pierwszej kategorii, czyli w kategorii Blockchain.

1:48No i teraz mamy tutaj symbol. Do tego

1:51symbolu nie chcę do środka dodawać żadnych dynamicznych danych z kolekcji.

1:55Dlaczego?

1:55Dlatego, że to popsułoby nam wszystkie inne nagłówki na stronie. W związku z tym

1:59kliknę prawym przyciskiem myszy i wybioram Unlink from symbol albo wcisnę cmd + shift + A.

2:04Czy to popsuje mi tak naprawdę ten cały

2:07symbol, czy on nie będzie się zmieniał zgodnie z tym, co zrobię w symbolu?

2:10Będzie się i tak zmieniał, dlatego że mamy tu odpowiednie klasy np.

2:14klasę Header section, które pozostaną niezmienione

2:17i wtedy również zmiany do tych całych nagłówków będą tego dotyczyć.

2:22I w ten sposób mogę też usunąć stąd niepotrzebny paragraf.

2:25Kolejno zastanówmy się nad tym, jak

2:28tutaj pobrać nazwę sekcji, bo moglibyśmy oczywiście wpisać tutaj na sztywno Blockchain,

2:33ale nie chcemy tego robić, dlatego że, jeżeli zmieni się nazwa tej kategorii w

2:37bazie danych, chcielibyśmy, aby ta nazwa też była dynamiczna.

2:42Moglibyśmy wstawić tutaj Collection list i podlinkować to do kategorii,

2:48natomiast nie jest to takie oczywiste rozwiązanie. Dlaczego?

2:51Dlatego, że w momencie, gdy Source wybierzemy jako kategorię, przejdźmy do

2:54ustawień, no to mamy tutaj możliwość filtrowania, mamy możliwość ograniczenia

2:59itemów, no na pewno chcielibyśmy ograniczyć item do jednego, bo chcemy pobierać tylko jedną

3:04kategorię stąd, natomiast to jaka to będzie kategoria,

3:08w zasadzie nie mamy za bardzo na to wpływu,

3:10to znaczy będzie brana kategoria, która jest zgodnie z sort orderem, możemy

3:14oczywiście też zrobić tak, żeby sortować to np.

3:17po Created date, czy Published date, możemy Created i Newest/Oldest i

3:22wybieram Save i wtedy np.

3:24mamy zgodną kolejność z bazą danych, czyli jeśli mamy kategorię Software tutaj na

3:29pierwszym miejscu w bazie danych, przejdźmy do Categories,

3:32to Software będzie się wyświetlał zawsze jako pierwszy, Marketing jako drugie itd.

3:36Natomiast pamiętaj proszę, że my później

3:38musimy, tak czy inaczej, połączyć to z tymi wpisami, które się tutaj wyświetlają.

3:43No, bo zobaczmy jakby to wyglądało i warto

3:45się nad tym zastanowić, żeby zrozumieć te różne powiązania między kategoriami.

3:48To jest tak, że tutaj mamy wyświetlane Blog posty, więc musimy korzystać z Source jako

3:54Blog post, bo musimy po prostu mieć dane o blog postach i teraz

3:57jak mieć pewność, że te Blog posty, które się wyświetlają są z kategorii Blockchain,

4:02a jednocześnie tutaj jest ustawiona kategoria Blockchain?

4:06Niestety z poziomu jednej kolekcji, czyli z poziomu kolekcji Blog postów, nie mamy

4:10dostępu do dat publikacji itemów w innej kolekcji, czyli w tej kolekcji

4:15kategorii. Musielibyśmy w związku z tym zrobić to trochę naokoło.

4:18Ale tak, czy inaczej nie mielibyśmy pewności, czy przypadkiem nie zmieni się to

4:23i nie rozjedzie nam się ten tytuł z zawartością, w momencie, gdy ktoś np.

4:27z bazy danych pousuwa jakieś kategorie, pododaje nowe itd.

4:30W związku z tym musielibyśmy bazować na

4:33jednym, niepewnym połączeniu, które nie do końca lubię w CMSie.

4:36To znaczy moglibyśmy oczywiście tutaj wpisać to na sztywno, czyli Blog posty

4:40łatwo połączyć, ponieważ mamy jako Source wybrane Blog post, teraz przechodzimy do

4:46Card Collection item. Następnie będziemy chcieli wskazać, że

4:50tutaj mają się znaleźć posty zgodnie z filtrem. Wybieramy sobie filtr, plus i teraz

4:57nie będziemy szukać po nazwie, będziemy szukać kategorii,

4:59która ma tutaj Reference, w związku z tym są

5:02jeden do jednego dokładnie podlinkowane te kategorie, które są przypisane do postów i

5:07tutaj możemy wybrać je z listy, więc super, jeśli możemy wybrać je z listy,

5:11to jeżeli wybierzemy tutaj Blockchain, będą pojawiały się tylko posty z Blockchain'u,

5:15mamy tylko jeden taki post i w tej sytuacji, jeżeli ktoś się zmieni np

5:20nazwę kategorii Blockchain, ponieważ wybraliśmy to z listy, zostanie to uwzględnione.

5:24Jeżeli ją usunie to będziemy musieli dokonać zmiany w poście i zmienić po

5:28prostu kategorię, więc wszystko będzie działać.

5:30Więc tutaj jest OK.

5:32Natomiast, jeżeli chcielibyśmy

5:34tutaj połączyć tę kategorię i upewnić się, że to jest Blockchain,

5:38musielibyśmy tu skorzystać z innego filtra. Filtr w ramach tej jednej kolekcji, który

5:42wyświetli nam odpowiedni Item, nie ma Dropdown'a, a po prostu możemy na przykład znaleźć

5:48sobie po nazwie i wpisać jakąś wartość, czy jest równa

5:52nazwa, czy nie jest równa, jeżeli Equals wpisalibyśmy Blockchain,

5:56to wtedy wybierając Save, mielibyśmy rzeczywiście tę kategorię Blockchain.

6:00Wtedy nie musielibyśmy nawet startować tego w żaden sposób.

6:03Mogę wyrzucić ten sort order.

6:05Wyświetlany jeden Item, który w nazwie ma Blockchain i to zawsze będzie kategoria Blockchain.

6:10W tym momencie, jeśli przerzucimy do niej Heading

6:13i zmienimy oczywiście ten Heading tak, aby brał tekst z kategorii i wybierzemy pole Name,

6:20no to zawsze będzie Blockchain.

6:22Ale problem stworzyliśmy sobie już

6:24wcześniej. Problem stworzyliśmy w tym miejscu,

6:26definiując w filtrze nazwę, którą wpisaliśmy tu z palca.

6:30Dlaczego?

6:30Dlatego, że nie jest to rozwiązanie dość elastyczne.

6:33Wyobraź sobie, że teraz ktoś wchodzi do bazy nasz klient np.

6:36i zmienia nazwę tej kategorii z Blockchain na Blockchain and Crypto.

6:39W tym momencie już całość przestaje

6:41działać, ponieważ my tutaj mamy filtr, którego nazwa musi być równa

6:45Blockchain, więc nie jest to, że zawiera, czy coś

6:47takiego, po prostu musi być to zawsze to co wpisane tutaj z palca i to się nie będzie

6:52zmieniało tak jak te rzeczy wybierane z listy,

6:54zgodnie ze zmianami w naszej bazie. W związku z tym takie rozwiązanie,

6:58rozwiązanie bazujące na filtrze, nie jest do końca dobre i staram się jego unikać,

7:04zwłaszcza właśnie wtedy, kiedy wiem, że coś się może pozmieniać, a ja bazuję na, czymś co

7:09jest równe temu, co wpisałem w edycji, więc korzystamy teraz z ikonki kosza, aby usunąć

7:14ten filtr i zastanówmy się, jak można zrobić to lepiej.

7:17Jak pewnie zauważyłeś, w momencie kiedy

7:19pole jest referencją w innej kolekcji, to w tej kolekcji tak np.

7:24jak mamy tutaj, w momencie, gdy dodajemy filtry, mamy właśnie tę listę i o to nam

7:28chodzi, bo te zmiany zostaną uwzględnione, jeśli zostaną wykonane w bazie.

7:32W związku z tym fajnie by było, gdybyśmy

7:34mieli do dyspozycji również tutaj taką listę, więc nie możemy skorzystać

7:39bezpośrednio wtedy z kolekcji kategorii, a raczej powinniśmy jako Source dodać tutaj kolekcję

7:46Blog postów również i wtedy mielibyśmy możliwość rzeczywiście skorzystania z

7:50rozwijanej listy i wyciągnięcia tej nazwy kolekcji poprzez referencje.

7:54Problem polega na tym, że teraz nie możemy już tego Source'a zmienić.

7:58Jest tak dlatego i mamy wyświetloną tam małą kłódkę,

8:01że wewnątrz Item'a znajduje się już coś, co jest podlinkowane

8:06do tej kategorii, więc musimy najpierw usunąć wszystkie linki, odlinkować.

8:11Wszystko musi być,

8:13jeżeli mamy coś w Collection item'ie to musi być nie na fioletowy, tylko po prostu na biało.

8:17I teraz możemy iść do Collection list wrappera i możemy zmienić kolekcję.

8:22Nie będziemy korzystali z kategorii tylko z blog postów.

8:25Teraz jest taki problem, że tyle ile jest

8:27blogpostów to wyświetli nam tych Heading 1, czyli Collection item'ów.

8:30No, więc przechodzimy do właściwości. Limitujemy item'y

8:32Limitujemy item'y do jednego,

8:35Wtedy będziemy mieli wyświetlany jeden item,

8:36ale już w tym miejscu, w filtrach , będziemy mogli użyć listy rozwijanej,

8:42Czyli wybieramy nie Nema, a po prostu

8:45Category i głos i wybieramy Blockchain. Polecenie Savei

8:51teraz mamy dane z właściwej kolekcji.

8:54Teraz możemy wejść na Heading 1, a

8:57następnie Get text from Block Posts i wybrać sobie, że będziemy chcieli skorzystać z

9:02linku do kategorii i wybrać nazwę kategorii, którą wskazaliśmy.

9:07W ten sposób zachowamy jak największą elastyczność dotyczącą tych zmian w bazie.

9:13Mogłoby ci też przyjść do głowy to, żeby na cały ten cały ten Blog content container

9:18zrobić właśnie jedną dużą kolekcją, kolekcją postów i w środku sobie

9:22korzystać z tych różnych danych. Natomiast Tu, tu i tu.

9:24Natomiast to nie jest optymalne rozwiązanie, bo zawsze jest tak, że, jeżeli

9:29dodajemy kolekcje to te Collection itemy będą nam się duplikowały w zależności od

9:34tego jaką ich ilość wybierzemy. Jeśli wybralibyśmy trzy,

9:37To dałoby zduplikowałoby nam cały Heading razy trzy

9:39i trudno by było sobie z tym poradzić.

9:41Co prawda jest jakieś obejście, ale moim zdaniem po prostu tak jest lepiej, żeby

9:46dodawać sobie osobne kolekcje i być trochę uczulonym na te filtry,

9:50jeżeli wpisujemy je z palca, a raczej

9:52starać się wtedy wybrać taką kolekcję, która ma dane z tej docelowej naszej

9:57kolekcji, które chcemy wyświetlać w pewien sposób.

10:00Bo wtedy będziemy mieli dostęp do listy i

10:02tak samo zrobimy sobie w tym guziku View All Articles. Tutaj problemów będzie kilka.

10:06I już pokazuję jak sobie z nimi poradzić.

10:09Po pierwsze chcemy Cmd + Shift + A rozgrupować to w ten sposób, żeby już nie

10:13było symbolem, czyli z osobnym przyciskiem, który możemy teraz edytować

10:17i chciałbym tutaj wpisać nazwę kategorii, czyli View blockchain articles.

10:23W związku z tym zamiast frazy All,

10:25chciałbym przekazać dynamiczne dane, czyli dane o naszej kategorii.

10:28Istnieje w Webflow pewien ciekawy sposób, który intuicyjnie mógłbyś tutaj

10:32wykorzystać i mógłby nam zdecydowanie pomóc. Jeżeli zaznaczysz coś w obrębie

10:36fragmentu tekstu, nawet wewnątrz guzika, możesz wybrać opcję Wrap with span.

10:41Czyli możesz obwieźć ten specyficzny kawałek tekstu

10:45osobnym znacznikiem html-owym, czyli

10:47spanem. Intuicyjnie powinno to rzeczywiście dla nas zadziałać.

10:51Czyli wybiorę tutaj Wrap with span.

10:53Dzięki temu wewnątrz przycisku Button big znajduje się dodatkowy tekst span.

10:58Jeśli tylko wrzucę to wszystko w kolekcję,

11:00zaraz to zrobię, to powinienem mieć możliwość zaciągnięcia tutaj tylko do tego

11:04span'a dynamicznych danych i będę miał View blockchain articles.

11:07W praktyce jednak to nie zadziała. Zaraz pokażę Ci jak można to obejść, ale najpierw

11:12dodajmy tę kolekcję. Wybieram "a", następnie Collection list

11:15i wrzucam całą kolekcję może do CTA button wrapper. Teraz wewnątrz tego Collection list,

11:22aha jeszcze może skonfigurujemy ją odpowiednio od razu tak, żeby sama kolekcja

11:26połączmy ją z danymi o Blogu postach,

11:29koniecznie, znowu nie o kategoriach, bo nie

11:32chcemy filtrować po nazwie, tylko po Blog postach, gdzie będziemy mogli filtrować po

11:37liście i musimy limitować ilość itemów do jednego.

11:41Natomiast, jeśli chodzi o filtr, wybierzemy

11:43tutaj link do kategorii, a następnie wskażemy kategorię Blockchain.

11:48No i teraz dane mamy dobrze zaciągnięte.

11:51Natomiast jak możemy sobie poradzić z tym przyciskiem. Powinniśmy go przerzucić do

11:55Collection item'a i teraz, jeżeli próbujemy to zrobić może nam się czasem udać,

11:59Czasem może się nie udać, nie trafić.

12:01Generalnie polega to trochę na tym, żeby

12:04dobrze trafić również z położeniem poziomo, nie tylko pionowo tutaj, ale, jeżeli np.

12:10pionowo będziesz chciał wstawić to, gdzieś

12:12z boku będzie na czerwono i pojawi się informacja, że nie można tego wstawić.

12:16Zwykle w takich sytuacjach posiłkuje się

12:18następującą metodą - po prostu zaznaczam coś, kopiuję,

12:21następnie wchodzę do Collection item'a i cmd + V wklejam to i wtedy zawsze jest OK.

12:25A ten drugi Button mogę zwyczajnie usunąć.

12:28No i teraz intuicja podpowiada nam, że

12:30w text spanie moglibyśmy wstawić, wstrzyknąć dynamiczne dane,

12:34w ten sposób, że będzie to wyświetlało tę nazwę kategorii.

12:37Niestety okazuje się, że we właściwościach

12:39text span'a, przynajmniej na ten moment w Webflow, nie wiem być może już to naprawili,

12:43ale nie ma możliwości wziąć tych danych dynamicznie. Jeżeli chodzi o Button to

12:47moglibyśmy te dane zaciągnąć.

12:49Jak widzisz możemy skorzystać z Get text

12:52from blog posts i tutaj podlinkować do nazwy kategorii.

12:56Natomiast wtedy na guziku dostajemy jedną frazę Blockchain

12:59i to mi się nie podoba, bo tutaj powinno

13:01być po prostu View blockchain articles albo View all blockchain articles albo Section coś takiego,

13:06natomiast Blockchain nie jest intuicyjny.

13:08Co musimy zrobić w tej sytuacji? Musimy po prostu odtworzyć strukturę tego przycisku,

13:13co zresztą nie będzie trudne, bo możemy

13:15stworzyć po prostu dodatkowy link block i wewnątrz tego link block'a zaraz dodamy

13:20właśnie kolejne text block'i, czyli zrobimy jeden i to będzie Text view,

13:28następnie do kolejnego text block'a, mogę skopiować ten,

13:32przekażemy i od razu, może usunę go, i od razu ustawmy dla niego właściwe parametry,

13:37czyli Display ustawiamy na inline block.

13:40Zrobimy tak, że ten tekst powielimy i powielimy go jeszcze raz

13:45i tutaj będzie nazwa kategorii, czyli nasz Blockchain, zaraz go tutaj wstawimy,

13:50a tutaj będzie Articles. Zaraz jeszcze dorobimy to jakiś margines,

13:54ale odtwarzając to w ten sposób, rzeczywiście będziemy mogli wstrzyknąć

13:58do tego środkowego text block'a, przejdźmy do jego preferencji, Get text from blog post

14:02I tutaj wstrzykniemy sobie nazwę kategorii Name. Czyli mamy View, Blockchain. Articles.

14:09Teraz to, co chcemy jeszcze zrobić to

14:13oczywiście dla tego link block'a dodać odpowiednie style.

14:15Na szczęście mamy style do przycisku

14:17przecież, z których możemy skorzystać, więc skorzystamy z klasy Button big,

14:21a jeśli chodzi o te text block'i to możemy dla nich zastosować klasę, usunę sobie klasę text block

14:27i wpiszę tutaj Button text. Tworzymy nową klasę.

14:32Jeszcze raz ustawimy dla niej Display na inline block i dodatkowo kolor ustawimy na

14:38kolor biały. Teraz mamy to zastosowane do pierwszego Button text'u,

14:42ale ten drugi Button text też możemy tak zrobić, czyli Remove class, Button text.

14:50To samo zrobimy w przypadku trzeciego.

14:53Remove i Button text. OK.

14:57I teraz jeszcze trzeba by było na ten Button text dodać jakiś delikatny

15:02margines z lewej i z prawej strony. Dodajmy combo klasę Category

15:07i ustawimy dla tej kategorii Padding z lewej i z prawej strony. Zobaczmy optycznie jaki

15:12będzie nam pasował około 5, 6 pikseli powinien być OK.

15:16No dobra. Teraz rzeczywiście mamy dobrze to

15:19podlinkowane, mamy dynamiczne dane, natomiast Button big możemy po prostu się pozbyć.

15:23OK teraz wygląda na to, że dość istotnie

15:25zmieniła nam się struktura Blog category section, więc zaraz to sobie skopiujemy, ale zanim

15:28jeszcze to zrobię, to chciałbym może ostatnią rzecz dorobić, czyli Header section.

15:33Może dodamy do tego

15:35jakąś subklasę Blog section i taką combo klasę będziemy chcieli

15:40wyposażyć w margines na dole rzędu 48 pikseli, żeby to odsunąć.

15:45No i teraz mamy już właśnie tę trochę lepszą strukturę,

15:48więc możemy usunąć te, które wcześniej skopiowaliśmy Blog category sections i

15:52wkleić to,skopiować i wkleić to jeszcze trzy razy.

15:55Teraz zacznijmy pracować na właściwych

15:57kategoriach, czyli po pierwsze mamy Recent articles i to jest OK, ponieważ zwraca wszystkie

16:02ostatnie artykuły i linkuje do wszystkich ostatnich artykułów.

16:06Teraz tu będziemy musieli zmienić ustawienie Collection list wrappera

16:09pierwszego, w ten sposób, że będziemy filtrować

16:12może zamiast właśnie Blockchain

16:13to spróbujmy tutaj klikamy filtrować od pierwszej kategorii, czyli Software. Save.

16:18Pokazuje się Software. Tak samo zrobimy z List wrapper'em na

16:22poszczególne Blog posty. Zmienimy to na Software po to, żeby

16:27wyświetlać posty z Software. Wybieram polecenie Save.

16:29I to samo zrobię z ostatnim Collection list wrapper'em. Zamiast Blockchain podlinkujmy

16:33go do Software, pamiętaj żeby zawsze to zapisać.

16:36I tak samo musimy zrobić w kolejnych kolekcjach, czyli otwieramy sobie drugą

16:42drugą kategorię, którą będzie Marketing. Save. Tutaj Collection list wrapper, robimy

16:48też Marketing, Save i guzik na dole Blockchain zmieniamy na Marketing, Save.

16:54To samo robimy niżej, to już tylko

16:56powtarzanie tych kroków. Collection list wrapper ustawiamy kategorie tym razem na Mobile

17:02I zrobimy to samo w przypadku Collection list wrappera. Ustawiamy, zmieniamy Blockchain na Mobile,

17:09Save koniecznie i tak samo robimy z list wrapper'em dla

17:13przycisku i to jest wszystko, co musimy zrobić, ponieważ ostatni jest Blockchain

17:17i rzeczywiście ten Blockchain tutaj już jest, więc mamy View blockchain articles.

17:22Można powiedzieć, że cała strona główna bloga jest praktycznie gotowa.

17:27Przechodzę teraz do nawigatora. Klikam tę małą ikonkę Expand/Collapse all po to, żeby zwinąć

17:32wszystkie sekcje. No i nie mam jeszcze tylko Footer'a. Na dole powinien wyświetlać się

17:36Footer. Wciskam trzy razy "a", aby przejść do symboli.

17:38Tutaj mam symbol z Footer'em.

17:40Upewnijmy się, że Body jest zaznaczone,

17:42widzę, że jest, więc spoko. Mogę teraz wybrać

17:45Footer, który zostanie automatycznie wklejony na sam dół i w związku z tym

17:49moja strona kategorii, strona główna bloga jest gotowa.

17:54Ma też podlinkowane wszystkie elementy odpowiednio.

17:57Mogę iść do kategorii Software.

17:59Mogę iść do konkretnego wpisu.

18:01Oczywiście tutaj jeszcze nic nie ma, bo

18:02musimy te strony przygotować, ale wszystko działa i jest dobrze pospinane.

18:06Więc to by było na tyle jeśli chodzi o stronę bloga,

18:08a my widzimy się w kolejnej lekcji. Do usłyszenia!