Webflow: Sekcja z Blogiem

Webflow 2020+

0:00Witaj. W kolejnej lekcji. Nasza strona

0:02prezentuje się już coraz bardziej okazale mamy zrobione FAQ. Teraz będziemy

0:06dorabiać kolejną sekcję czyli sekcję recent articles.

0:09Mamy tutaj trzy miniaturki. Skorzystamy z pewnego gotowca webflow.

0:13Ale zanim to zrobimy przejdźmy do tej

0:15sekcji to w zasadzie nie jest logo FAQ tylko musimy to zmienić na header FAQ

0:19chyba ostatnio źle nazwałem więc piszę header

0:23mogę teraz ten header. Powielić Command "C", Command "V", umieszcze go poniżej.

0:28Teraz to będzie header block.

0:31A także zrobimy tę sekcję FAQ

0:34możemy powielić. Zrobimy z tego block section. Naturalnie

0:40usunięte zawartość która znajduje się w naszym kontencie czyli kolumny,

0:44a do środka wstawimy coś innego potrzebujemy mieć trzy takie kafelki.

0:48Jeżeli przejdziemy do sekcji "A" czyli add do sekcji layout

0:51to tutaj na razie jest mało rzeczy ale będą sukcesywnie one dodawane w

0:57momencie gdy oglądasz być może jest już dużo więcej takich predefiniowanych blocków.

1:01One cechują się tym, że są bardzo fajnie

1:03zrobione jeśli chodzi o responsywość dobrze przygotowane technicznie.

1:06W związku z tym dlaczego by z tego nie skorzystać oczywiście jeśli jest taka

1:10możliwość a w tym przypadku nasze cart section do złudzenia przypomina ten

1:15komponent który możemy wykorzystać więc teraz klikam, przeciągam.

1:19Umieszczamy to w odpowiednim miejscu tak żeby się po prostu udało to umieścić

1:23np. tutaj.

1:24Natomiast nie będę potrzebował wszystkiego co jest cart section zawsze możemy sobie

1:27to wszystko rozwinąć zobaczyć co się znajduje interesuje nas cart grid container czyli

1:32te właśnie trzy miniaturki które mogę po prostu skopiować

1:37np. Command "C", wrzucić Command "V" do naszego

1:39kontentu, a całą cart section mogę teraz usunąć. W ten oto prosty sposób mamy

1:45pewność, że te elementy są fajne responsywne zostały dobrze przygotowane, że technicznie

1:50już ktoś za nas pomyślał o tym jak je wcześniej zrobić, a my tylko wsadzamy je do

1:54naszego głównego kontenera, dostosowuje opcję na card grid container

1:58może zmienię jego nazwę na block

2:01cards, a te pojedyncze elementy to będą po prostu card.

2:05Czyli dodam im klasę card na pierwszej.

2:09Oczywiście pozostałe się nie zmienią ale

2:11działają na razie na pierwszej karteczce czyli zmienimy kolor tła background na biały

2:18zobaczmy jakie to jeszcze zmiany musimy wykonać.

2:20Mamy delikatny shadow piętnaście po igreku. Trzydzieści pięć rozmycia przezroczystość jest sześć procent,

2:27a także dwanaście zaokrąglenie.

2:29Przejdźmy więc do cienia box shadow piętnaście,

2:33trzydzieści pięć. Dodatkowo jeszcze obrócimy w odpowiedni sposób i rozmycie sześć.

2:39To już powinieneś robić automatycznie.

2:42Następnie jeszcze zaokrąglenie w narożniku dwanaście.

2:45Co tutaj jeszcze mamy.

2:48Musimy zrobić jakiś padding dla tekstu rzędu.

2:51Zobaczmy zatem dwadzieścia osiem pikseli ale tak naprawdę nasze card dzieli się na dwie sekcje

2:55pierwsza jest obrazkiem druga jest to właśnie z tym paddingiem.

2:58W związku z tym można by było dodać jeszcze jeden element techniczny grupujący

3:02ten heading. Paragraf czyli wrócimy tutaj technicznego DiV-a.

3:06Do tego DiV-a widzimy nagłówek heading, a

3:09także akapit paragraf ale dorzucimy się do tego.

3:13Nie jest to jakieś super intuicyjne żeby

3:14tutaj przerzucać te elementy ale dorzucić do tego też jeszcze jeden element czyli

3:19zobacz tutaj się znajduje taki właśnie caption.

3:21Możemy to wrzucić po prostu jako text block i odpowiedniego formatu.

3:25Tyle że ten tekst był

3:28na samej górze. Teraz mając to wszystko w tym technicznym DiV-ie możemy nazwać

3:34np. card tekst

3:36Wrzucić na niego padding rzędu dwadzieścia osiem z każdej strony.

3:42Dzięki temu będziemy mieli padding na tym

3:44elemencie ale nie będzie on na obrazku dokończy formatowanie.

3:49Jeśli chodzi o ten element to heading trzeciego typu więc dobrze się zgrało.

3:53Mamy rozmiar trzydzieści, czterdzieści jeden. Tu też mamy heading trzeciego typu więc to też jest trzydzieści i czterdzieści jeden.

3:59Ten tekst będziemy musieli z formatować czyli kopiuje kolor.

4:03A jeśli chodzi o jego inne właściwości to mamy dziesięć, trzynaście dm sans bold więc zaznaczamy

4:09to sobie tutaj będziemy musieli dodać klasę caption

4:14autor.

4:17Następnie zmienimy wielkość tego tekstu na dziesięć .

4:20Dm sans jest ustawiony.

4:22Wysokość interlini trzynaście. Kolor tego tekstu wrzuce ten który mam już przygotowany.

4:28Następnie mogę skopiować imię i nazwisko. Osoby która pisała ten artykuł.

4:33Jeśli chodzi o tytuł też skopiujmy żeby zobaczyć jak to się rozkłada.

4:37Dobra i na samej górze mamy taki właśnie element w którym znajduje się z dm sans dziesięć bold.

4:43To jest nasz caption.

4:44Czyli my już korzystaliśmy z tego gdzieś tutaj powyżej.

4:48O właśnie w tym miejscu.

4:50Czyli to jest caption na dodatek

4:52mamy kolory

4:53np. brand jeden, brand dwa itd.

4:55Na razie zróbmy to samo klase caption

4:57command return. Użyjemy caption wybieramy tą pierwszą. To już jest w porządku.

5:04Natomiast dodatkowo będziemy musieli jeszcze zrobić do tego zielone tło i teraz

5:09jak zerkniemy na ten caption okazuje się że on ma właściwości ma właściwość display

5:13na block. W ten sposób zajmuje całą dostępną przestrzeń więc gdybyśmy zrobili

5:18tutaj background kolor no to niestety by nie zadziałało.

5:21Aczkolwiek my tak czy inaczej potrzebujemy

5:23dodać do tego background kolor jeszcze jedną klasę pomocniczą

5:26np. block category

5:28W tym miejscu już będziemy mogli zmienić wyświetlanie na display inline block.

5:34Ten sposób będzie można łatwo dla tego elementu ustawić sobie kolor tła.

5:38Proponuję żeby sam kolor tła też zrobić osobną klasą zaraz ale w tej klasie block

5:43category jeśli jest jeszcze tutaj jesteśmy to dodamy odpowiednio paddingi jest

5:48to osiem z lewej, prawej, cztery od góry i od dołu. Więc tutaj jeszcze robimy

5:52konstrukcję w związku z tym dodamy sobie na cztery

5:58od góry do dołu, osiem pikseli z lewej i z prawej można spróbować altem albo po prostu

6:04wpisać palca w ten sposób. Jeszcze dodatkowo musimy zaokrąglić

6:09na narożniki border radius ustawie na jakąś dużą wartość

6:13np. dwieście po to żeby były zaokrąglone.

6:15Natomiast nie dodaje tutaj koloru tła bo

6:17kolor tła mogę sobie dodać w kolejnej klasie i tutaj mogę

6:21np. stworzyć coś takiego jak category jeden. Przykładowo zrobić właśnie różne

6:26kolory różnych kategorii i w kategorii jeden. Weźmiemy sobie ten kolor

6:30zielony z skopiuje go stąd, a następnie jako background wrzucimy tą wartość szesnastkową.

6:36Wygląda to dobrze i dzięki temu

6:39zabiegowi też będziemy mogli po prostu zrobić sobie różne category: dwa category, trzy category

6:43kolory. Podmieniać w zależności od tego jakiego kategorii będzie dotyczył wpis.

6:49Zobaczmy teraz czy marginesy nam

6:51odpowiadają czyli tutaj mamy dziewięć pikseli tutaj będziemy mieli cztery piksele odstępu.

6:56Myślę, że można to wrzucić tymczasowo na

6:59ten heading ponieważ on rozsuwa górny element i dolny.

7:03Możemy dodać klasę block post tittle.

7:07Na nim ustawić odpowiednie odstępy czyli

7:10od górnej krawędzi margines osiem, od dolnej krawędzi margines cztery.

7:15Jest to odpowiednio rozsunięte.

7:17Czyli te konstrukcje na dole mamy

7:18skończoną, a teraz jeszcze zostały nam obrazki.

7:21Jest to skonstruowane tak, że mamy jeden

7:23kontener card image mask. A w środku znajduje się card image.

7:27Możemy to tak zostawić możemy dla card image mask po prostu podstawić obrazki

7:31jako tło ale w przypadku gdy będziemy czerpali te rzeczy właśnie z jakiegoś cms-a.

7:36To takie rozwiązanie jest jak najbardziej dobre, że będziemy podmieniać sobie

7:41obrazek wybieram polecenie choose image.

7:43Uploaduje obrazki które przygotowałem do tej lekcji to scene dwa , scene cztery , scene pięć.

7:47One wszystkie będą reprezentowały jakieś wpisy na blogu mogę umieścić tutaj

7:52pierwszy czyli scene dwa , a teraz zerknimy do właściwości bo ten obrazek jest

7:56pozycjonowany w całkiem ciekawy sposób. Mianowicie jest pozycjonowany absolutnie

7:59jest rozciągnięty do każdej krawędzi czyli przeciągnięty do góry do dołu do lewej do prawej.

8:04Dzięki temu ma jeszcze ustawiane weight i high na sto procent.

8:08On będzie się zawsze skalował dobrze w tym kontenerze, a sam kontener jest

8:13ustawiony w taki sposób, że ma ustawioną szerokość na sto ale dodatkowo ma padding na

8:19sto procent. To jest taki ciekawy zabieg który pozwala nam teraz wyłącznie samym

8:24paddingiem manipulować w ten sposób, że będziemy mogli zmienić rozmiar tego

8:30zdjęcia więc ja go zostawię w okolicach pięćdziesiąt paru procent

8:33bo to jest zbliżony do naszego designu i w

8:36zasadzie to prawie wszystko co powinienem zrobić.

8:38Jeszcze mam jakieś szare tło które mogę

8:41stąd pożyczyć. Nie wiem czy skopiowałem dobrą wartość ale generalnie po prostu chodzi o

8:46to żeby na card image mask wrzucić to tło. Wygląda całkiem nieźle.

8:50Te dwa DiV blocki które mi nie są potrzebne ,a

8:54kopiuje card, wklej je to dwa razy. Mogę po podmieniać.

8:57Rzecz jasna obrazki wybieram replase image

9:00wskazuje tutaj ten drugi obrazek, a tu wrócimy trzeci. Zobaczymy jeszcze czy to

9:05wszystko dobrze wygląda w wariantach responsywnych.

9:08Dlatego że w desktopie jest już ok.

9:10W tablecie myślę, że w porządku to jest najmniejsza ta wielkość.

9:15W związku z tym jak powiększymy zobacz,

9:16że jest jeszcze lepiej.

9:19A może jest trochę ciasno ale nawet zostawił bym te trzy kafelki.

9:22Jedyny problem jaki widzę to jest taki, że nie mamy zaokrąglonego do narożnika tutaj

9:26wróćmy jeszcze do wariantu desktopowego card image mask też zrobimy sobie border radius.

9:32Tyle, że chciałbym zrobić tylko górne

9:34krawędzie czyli wybiorę tę drugą opcję. Ustawić je na dwanaście pikseli.

9:39Tutaj z prawej strony też na dwanaście pikseli.

9:42Teraz jest to spójne z tym co mamy na dole

9:44przerzucimy się jeszcze do wersji mobilnej. Zobaczymy tą wersję mobile landscape.

9:51Wydaje mi się, że tutaj obrazek robi trochę za duży w związku z tym możemy w tej

9:57wersji kliknąć na card image mask po prostu zmienić jeden parametr czyli

10:02parametr paddingu po to żeby przyciąć sam obrazek się elegancko centruje i doskalowuje

10:07do tego więc jest super moim zdaniem na wariancie zwykłym mobilnym też jest ok.

10:13Te elementy są ułożone jeden pod drugim i

10:15możemy wrócić do podstawowego widoku w zasadzie jeszcze jedna ostatnia taka

10:18drobna rzecz którą moglibyśmy tutaj zrobić.

10:20Taka jest delikatna interakcja którą

10:22możemy zamodelować na samym elemencie card.

10:24Tyle, że nie będziemy tego robić na hover

10:26z tego powodu, że hover działał by zero : jeden, a

10:29my chcielibyśmy jednak żeby było to lekko animowane w związku z tym przechodzimy do

10:33panelu interakcji. A następnie w element trigger upewnić się, że jestem na card.

10:37Następnie dodaje sobie akcję mouse hover czyli po najechać myszą. Tutaj już

10:42będziemy tworzyli animacje będziemy mieli więcej kontroli jako akcję on hover

10:47możemy dać jakiś efekt predefiniowany albo przygotować sobie animacje więc wybieram

10:52polecenie start in animation i dodaje nową animację wpiszę dla niej animacje nazwę cart hover.

10:57A następnie dodam akcję i ta akcja będzie polegała na skalowaniu.

11:01Teraz osie iks i igrek są zablokowane kłódką

11:03więc będę mógł przez przeskalować delikatnie w dół ale nie

11:08np. do dziewięćdziesiąt procent.

11:09Tylko jeszcze chyba wybiorę

11:11np. wartość dziewięćdziesiąt pięć procent

11:13czyli dosłownie troszeczkę. Zmienię jeszcze duration tej animacji do zero dwie

11:17dziesiąte sekundy, a następnie wybiorę done. Tworzę kolejną animację on

11:22hover out czyli wybiorę akcję znowu start animation. Teraz zrobimy sobie nową.

11:28Będzie to hover out jako akcję.

11:31Dodam tu skalę znowu scale i będziemy tym

11:34razem skalą do wartości jeden przez kolejne dwie dziesiąte sekundy. Done.

11:40Zobaczymy jak to wygląda w podglądzie, a zanim to jeszcze zapisze to upewnij się, że

11:44trigger settings nie tylko ten element będzie działał tylko cała klasa czyli wszystkie

11:49elementy wszystkie karty niezależnie na który najadę będą miały tę samą animację

11:53najeżdżamy to się delikatnie zmniejsza. No ok fajnie było wrzucić na to jeszcze

11:58jakieś dodatkowe efekt być może cień być może fajnie by było zrobić tutaj jakieś

12:04ease in out linia nie wygląda koniecznie dobrze więc możemy ease in out wrzucić na

12:09jedną , na drugą animację. Już będzie to wyglądało trochę lepiej.

12:13Warto z tym po eksperymentować ale ja

12:15chciałem jeszcze przy okazji pokazać ten alternatywny sposób na robienie hovera

12:19mianowicie na wykonywanie go za pomocą animacji.

12:22Ostatnia już zupełnie rzecz to

12:25na tej klasie card najlepiej zjechać sobie na sam dół. Wybrać kursor.

12:29Będzie to pointer ponieważ całość będzie

12:31prawdopodobnie prowadziła do jakiegoś linku.

12:33Na razie jednak nie będziemy się tym przejmować dopiero przy okazji wspinania

12:37cms-a, a w bardziej zaawansowanym kursie będę ci mówił jak można to osiągnąć.

12:40Teraz to wszystko dziękuję bardzo za uwagę w tej lekcji .

12:43Do usłyszenia.