Webflow: Sekcja Features

Webflow 2020+

0:00Cześć. Witaj w kolejnej lekcji.

0:01Przed nami cztery kafelki które powinniśmy dodać.

0:04Poniżej pod hero. Możemy w zasadzie trochę uporządkować nazewnictwo.

0:09Pierwsza sekcja będzie to header albo

0:12nawigacja nazwijmy ją header. Sekcja druga to będzie hero. Chociaż w zależności od

0:18preferencji możesz tutaj również do tej sekcji do kontentu wrzucić te kafelki ale

0:23my chyba zrobimy je w osobnej sekcji czyli w tej nazwijemy command features

0:28i zrobimy w środku oczywiście tam znajduje się kontent w środku

0:32dodamy do niego link block czyli podobnie jak w menu ponieważ będzie całość będzie

0:36linkiem który będzie kierował do jakiejś przestrzeni na naszej stronie.

0:40Teraz zobaczmy jak to wygląda.

0:41Mamy rozmiar dwieście osiemdziesiąt osiem na sto czterdzieści.

0:44Pytanie czy my ten rozmiar chcemy zrobić

0:46Fixed czyli czy chcemy żeby rzeczywiście nic się tu już nie mogło ruszyć.

0:50Czy chcemy zaplanować sobie to tak żeby

0:52ewentualnie można było mieć jakąś przestrzeń na

0:56dostosowywanie responsywne

0:57Wydaje mi się, że powinniśmy tak zrobić i zobaczyć nawet do tej szerokości te

1:01elementy mogą spokojnie się zmniejszyć czyli do jakichś dwustu dwadziestu jeden pikseli więc

1:06zamiast określać szerokości na sztywno możemy zrobić

1:11minimalną szerokość dwieście dwadzieścia jeden pikseli i minimalną wysokość.

1:18Spróbujemy zrobić to

1:21np. teraz to wygląda jeszcze dobrze, a czyli mamy sto pikseli wysokości.

1:25Cofne te zmiany. Zrobimy.

1:27Max min height

1:29sto pikseli.

1:30To oznacza że nigdy nie będzie to mniejsze

1:34niż zadeklarowana wartości ale może być większa i dokładnie o to nam chodzi.

1:38Jeżeli weźmiemy teraz background ustawmy

1:40kolor tła na kolor biały zaokrąglenie narożników wybierzmy na osiem.

1:45Zdaje się że tak powinno to być.

1:47Zobaczmy jeszcze na te właściwości nie dwanaście jednak cień zero , piętnaście, trzydzieści pięć i oppacity.

1:54Zobaczmy zobaczymy sześć procent.

1:58Ok czyli zmieniamy na dwanaście dodajemy box shadow.

2:04Teraz chcemy przesunąć to po "Y" grecku.

2:06Tylko wybierzmy więc piętnaście i trzydzieści pięć i alfa sześć procent.

2:13koloru czarnego.

2:15Mamy takie delikatne rozmyte tło teraz to powinno znaleźć się w środku.

2:19Link blocku zobaczmy mamy jakiś tekst.

2:21Drugi tekst, podtytuł i obrazek więc

2:24pytanie czy to są rzeczywiście nagłówki albo czy to są akapity.

2:27Nie są czy to są linki.

2:29Raczej nie bo wszystko jest linkiem.

2:30Więc to będą zwykłe teksty dodajemy je z

2:33pomocą "A" i wybieramy tekst block i jeszcze raz "A" tekst block

2:37i teraz mamy na dwa sposoby możemy zrobić albo dodać obrazek albo dodać Div blocka który

2:42będzie zawierał obrazek . Podłożony w CCS kiedy które rozwiązanie wybrać.

2:46Co do zasady jeżeli chcemy mieć zdecydowanie większą kontrolę nad pozycją

2:50takiego obrazka i jego wyrównaniem no to osadzamy go w CSS-ie jako tło

2:54np. dla Div-a. Dzięki temu też pozwoli nam to akurat w

2:57tym konkretnym przypadku ponieważ mamy tylko minimalne wymiary określone pozwoli

3:02nam to zachować jakąś strukturę czy inne nadamy jakąś wielkość dla tego DiV-a i ona

3:06będzie taka sama we wszystkich kafelkach bo gdybyśmy mieli

3:09np. różne rozmiary obrazków mogłoby się okazać że te całe kafelki będą różnych szerokości,

3:14a tego byśmy nie chcieli więc pomoże nam to lepiej trzymać strukturę.

3:19Tak samo wydaje mi się że te dwa tekst block-i

3:22można by było wrzucić do jednego DiV-a po to żeby też trochę łatwiej można było

3:27zarządzać ich strukturą i pozycją wrzuce je w ten sposób

3:31no i będziemy mogli ustawić jeden obrazek jako tło dla ich DiV blocka wybieram jego

3:37preferencje image and gradient wybieram plusik następnie choose image i wskazuje

3:41obrazek którego jeszcze tu nie ma ale w plikach źródłowych do tej lekcji w

3:44folderze. Znajdują się wszystkie cztery które chcemy zaimportować mogę wszystkie

3:49zaznaczyć. Zostaną tutaj wrzucone i teraz pierwszy z nich został zaczytany.

3:54My musimy ustawić go na razie zróbmy to

3:56tak na środku bez powielania i rozmiar zmniejszymy. Zobaczmy jaki

4:02rozmiar ma ta ikonkę sześćdziesiąt pikseli wysokości pięćdziesiąt dwa szerokości.

4:08Myślę że wysokość jest

4:10dla nas kluczowa bo zobaczy że szerokość jest różna w tych elementach, a wysokość

4:14pozostaje niezmieniona czyli sześćdziesiąt pikseli także chcemy ustawić wysokość nie na

4:20auto, a na sześćdziesiąt pikseli natomiast szerokość na auto wystarczy, że wpisujemy

4:25auto i jest może zmienimy ten save na ikonkę z komputerem bo to ona powinna się

4:29tutaj znaleźć. Wygląda w porządku dla całego link blocku.

4:32Proponuję ustawić wyświetlanie na flex

4:35zmienimy zresztą jego nazwę na features block.

4:39Porównajmy to w pionie, a także

4:40rozmieszczenie do lewej i prawej te elementy.

4:42Zaraz dojdzie nam więcej elementów więc będą one miały konkretną szerokość.

4:45Na razie nie mają maksymalnej szerokości więc wszystko jest w porządku.

4:49Dalej mamy właściwości tekstu które powinniśmy pobrać stąd.

4:53Czyli to będzie DM Sans z dziesięć bold i

4:56wypełnienie robimy kolorem zielonym wybierzmy właściwości DM Sans bold. Rozmiar

5:02wybierzemy na dziesięć i to nam stworzy automatycznie klasę.

5:06Przypominam więc możemy ją od razu jakoś nazwać.

5:09Może to być caption i będziemy mieli wielkością dziesięć przecież

5:13wszystkie te rzeczy zrobiona jedyna rzecz którą będą się różnić to kolor.

5:18W związku z tym zrobimy caption zostawimy

5:20dla niego jeszcze wybierzmy dla niego more type options czyli Capital light.

5:25Ostatnia rzecz to wysokość interlini była na trzynaście pikseli.

5:28Teraz już możemy przejść i dodać tutaj kolejną combo klasę czyli to będzie nasza

5:32podstawa, a będzie będą się zmieniać tylko kolory więc dodajmy

5:35klasę która oznaczy namy nam kolor tylko pytanie czy dobrym rozwiązaniem jest np.

5:40wpisać tutaj nazwę green albo nie wiem jakąś nazwę koloru.

5:44Nie do końca z tego powodu, że później

5:47gdybyśmy to zmienili na niebieskie to klasa będzie green a będzie pod spodem

5:50kolor niebieski. Zdecydowanie lepiej jest to nazywać

5:52np. nazwami naszych brand kolorów

5:54np. brand jeden, brand dwa itd.

5:56Albo nazywać to nazwami akcji.

5:58Często mamy też kolory błędu czyli np.

6:01można było klasę nazwać error

6:03albo kolory accept czyli zielone albo working powiedzmy pomarańczowe czy żółte.

6:09W naszym przypadku nazwijmy to po prostu może brand jeden na razie

6:14ale pamiętaj że będzie to zmiany.

6:17Czyli warto będzie się zastanowić nad tą nomenklatura.

6:19Natomiast my teraz wybierzemy kolor

6:22kopiuje wartość szesnastką i wrzuca ją w kolor.

6:25Czyli ta klasa brand jeden będzie nam nadpisywała tylko i wyłącznie kolor dzięki

6:30czemu zaraz tworząc kolejne rzeczy na razie przekopiujmy tu tekst będziemy mogli

6:35bazować na klasie Caption, a dodawać sobie tylko kolejne klasy z kolorami

6:41software services.

6:43I przy okazji istotna informacja ponieważ

6:45tutaj mieliśmy twardy enter wystawiony w narzędziu graficznym.

6:48Dzięki temu, a raczej przez to twardy enter

6:51wstawił przed serwis możemy wcisnąć backspace aby go usunąć.

6:55I na razie możemy tak zrobić ale

6:56warto mieć świadomość tego kiedy to robić, a kiedy nie.

6:59Kiedy rzeczywiście. Chcemy złamać taki tekst możemy wcisnąć enter i wtedy

7:02dostaniemy HTML- u po prostu zawsze będzie to złamany.

7:06Na ogół nie jest to dobra praktyka na ogół

7:09powinniśmy zostawić tak jak jest bo może się okazać że w blokach później responsownych

7:13będzie nam łamać tekst . Jeszcze gdzieś indziej

7:16np. będziemy mieli taki długi tekst przed

7:18Services, a później my jeszcze za for twardy

7:21break line byśmy zrobili to wtedy wyglądałoby to kiepsko każde słowo by

7:25np. było w osobnej linii więc możemy jako stan

7:28wyjściowy zostawić sobie bez tego twardego break line.

7:31I teraz jeszcze warto na tym całym

7:32elemencie ustawić margines ustawia go z każdej strony na trzydzieści pikseli.

7:36Dlaczego. To jest dosyć dobre rozwiązanie bo jak

7:39będziemy mieli więcej linii tekstu to też ewentualnie ten margines zostanie

7:42zachowany choć akurat nie wiem czy to będzie dobry pomysł bo wysokość

7:46tych całych kafelków też ma znaczenie ale na razie nie martw się.

7:51Zrobimy tutaj nazwę klasy features text, a na samym obrazku też wypadałoby

7:56ustawić margines ale tylko z prawej strony trzydzieści pikseli.

7:59I to będzie features image.

8:03No to teraz zajmijmy się kontentem i tym jak tutaj pracować z tego typu elementami

8:09Wybieramy command return możemy dodać do niego kolejną klasę.

8:13Nie chciałbym żeby to było hero ale możemy na chwilę skorzystać z tej klasy hero.

8:16Dlaczego dlatego że ona jest flex-boxem.

8:19Zrobiliśmy ją i gdybyśmy do flexboxa teraz zaczęli ładować

8:23te elementy to one bardzo ładnie będą się już rozkładać. Możemy nimi zarządzać.

8:28Ale wydaje mi się że w tej sytuacji cofne

8:30na to i zamiast pracować na kontencie dodawać tu kolejną klasę.

8:34To tak naprawdę będzie mi wygodnie pracować z grid.

8:37Będę miał większe możliwości pozycjonowania rozmieszczenia tych

8:40elementów tych elementów w gridzie. Gdzie zaraz pokaże też dlaczego.

8:43Więc dodam jeszcze jeden pomocnicze kontent czyli jeszcze jeden block który

8:47teraz trafił w złe miejsce ale umieszcze go bezpośrednio pod kontentem i wrzuce do DiV-a

8:52tego dwa features-block , a sam DiV. Będziemy chcieli zrobić żeby miał display grid

8:58Grid-em zarządziły w ten sposób że będzie miał cztery kolumny i jeden rząd czyli

9:03jeden rząd usunięty. Zostawiając domyślne opcje będziemy mieli

9:07odstęp szesnaście pikseli i wielkości jednej frakcji.

9:11Co to znaczy jedna frakcja że w relacji do

9:12pozostałych będzie to wszystko jeden do jednego.

9:15Możemy to zmieniać że to jest zero, siedemdziesiąt pięć a te są

9:17po jednej przykładowo więc w ten sposób rozmieszczamy. U nas mają być równe.

9:21Więc rzeczywiście mają być po jednej frakcji ewentualnie później możemy jeszcze.

9:25Dodać sobie wariant min i max czyli minimum

9:27np. dwieście pikseli tak jak zrobiliśmy wtedy i nie będzie nam to się zmniejszało.

9:32Poniżej tych dwieście pikseli więc można by w

9:34zasadzie było to dodać ale na razie zostawmy to.

9:37Bez tego jeżeli coś zadziała w deafulcie to czemu to zmieniać wybieram polecenie done.

9:42Features block mogę teraz skopiować i wklej jeszcze trzy razy m.in..

9:47Fajną zaletą takiego rozwiązania jest to że mamy elementy umieszczone. Centralnie od

9:52lewej i prawej strony, a ten odstęp pomiędzy nimi będzie się zmieniał.

9:56W przypadkuf flex- boxa musielibyśmy nadać im

9:58jakieś konkretne odstępy od siebie czyli marginesy.

10:01I gdybyśmy nadali z prawej strony no to

10:03byśmy mieli też margines gdybyśmy z lewej to tło byśmy mieli margines. Wtedy trzeba

10:07by było raczej skorzystać z customowego CSS-a, a żeby dopisać żeby któryś z tych

10:11elementów nie miał marginesu czyli dodać do niego jeszcze jakąś inną klasę więc

10:15wydaje mi się że to jest bardziej eleganckie rozwiązanie.

10:17A poza tym daje nam naprawdę sporo

10:19możliwości nazwijmy to features -grid i zobaczymy jak będzie się zachowywać w

10:23widoku Responsywnym. W widoku tabletowym przejdę do ustawień i mogę tu wyrzucić

10:27jedną kolumnę i drugą kolumnę. W ten sposób automatycznie wszystko przeleci mi

10:32i musimy utworzyć tutaj jeszcze jeden rząd żeby było ok.

10:35Wybieram escape i teraz nawet skalowanie tego działa bardzo dobrze

10:39no bo mamy tylko minimalna szerokość określoną wszystko jest ok.

10:44W wariancie telefonowym. Zobaczmy co my chcemy tutaj mieć to dalej jest ok.

10:48Aż do takiego rozmiaru.

10:50Myślę że jest w porządku i tyle.

10:52Ujawnił się problem który

10:54właśnie powiedziałem wcześniej o nim że mamy twardą spacje wpisaną tutaj.

10:58Więc to jest element HTML-owy możemy tą

11:01twardą space usunąć. Jestem upewnić się, że twarde spacji zostały usunięte.

11:05No i teraz ten tekst się trochę lepiej rozlewa więc wydaje mi się że tutaj też

11:10jest to ok więc jedyne miejsce gdzie chcemy to zmienić to tutaj w widoku

11:14telefonowym. Gdzie chcemy uzyskać jedną kolumnę i cztery rzędy.

11:19I teraz jest w porządku. Command Shift "P"

11:22spróbujmy to podejrzeć jest ok. Cały czas aż do końca jest w porządku.

11:28Poza jednym problemem mianowicie nie

11:29wyświetlają się ikonki dlaczego się nie wyświetlają zaznaczony features image.

11:33Co prawda obrazek jest tutaj podłożony komputery svg ale w momencie gdy

11:37podkładamy z pomocą CSS-a nie wystarczy zadeklarować tutaj np.

11:41minimalnej szerokości po prostu HTML.

11:43Nie widzi żadnej szerokość żadnej. Wielkości tego kontenera i nie wyświetla.

11:48I może to jest jakiś mały back w podgląd webflow.

11:51Powinno to być rzeczywiście widoczne.

11:53A może nie może tak powinno być więc to co możemy zrobić to zadeklarować tutaj np.

11:57minimalną szerokość i minimalną wysokość na sześćdziesiąt pikseli.

12:01I teraz już wszystko powinno być dobrze również w HTML u wyświetla wyświetlana

12:05poprawnie te obrazki, a więc ostatnia rzecz która została nam tutaj do zrobienia to

12:10przygotowanie tego kontenera tak aby był uniwersalny pod obrazek ponieważ nie

12:14podmieniamy samego obrazka, a będziemy musieli podmieniać go w CSS-ie to musimy mieć inną

12:19klasę. Więc features image z warto żeby teraz zresetować. Ten obrazek wyrzucić go stąd

12:26i zostawić tą klasę generyczną natomiast dodać teraz combo klasę np. Komputer

12:31Komputer będzie miał już image gradient wystawiamy odpowiedni obrazek chyba jest to

12:39metoda trochę bardziej pracochłonne niż gdybyśmy zrobili z tego

12:45to zostawimy auto

12:47i wysokość sześćdziesiąt niż gdybyśmy zrobili z tego symbol ale nie wiem trudno powiedzieć.

12:53Ma to swoje wady i zalety co robimy teraz

12:55m.in. spora kontrola nad tymi obrazkami w CSS-ie i musimy jeszcze przykleić teksty

13:02Wkleiłem to już marketing automation ale jeszcze muszę prześledzić samo marketing

13:08i zadbać o to żeby nie było to brand jeden to mogę usunąć zrobimy z tego Brand dwa.

13:14Możesz to oczywiście skipnąć.

13:16Jeśli już dokładnie wiesz o co tutaj chodzi bo to będzie tylko kopiowanie i wklejanie.

13:20A może trochę tych wartości stąd skopiować

13:22ale chcę żeby ten materiał był kompletny więc chcę ci to wszystko też pokazać

13:26wklejamy kolory i to będzie brand dwa jeśli chodzi o features image tutaj znowu.

13:32dodajemy będziemy musieli najpierw dać combo klasę czyli jak.

13:38No właśnie bo jeżeli nie dodaliśmy combo klasy zobacz wszędzie ten features image

13:41nam skoczył więc cofnijmy najpierw dodam combo klasę.

13:44To będzie kolejna ikonka.

13:47Czyli możemy powiedzieć że to jest marketing i wrócimy tutaj.

13:51Image gradient. Wskażemy chyba to.

13:57Znów auto tutaj sześćdziesiąt no trzeba tych czynności trochę powtórzyć.

14:04Ale w ten sposób mamy dobrze przygotowane komponenty teraz mobile.

14:10I znów zmienie software na mobile wyrzuce tą klasę zrobię Brand trzy.

14:17To będzie trzeci kolor.

14:18Pobiorę sobie stąd ten kolor wartość szesnastkową do schowka.

14:24I mamy jeszcze features image do którego dorzuci się mobile.

14:31I teraz ustawi na niego obrazek z telefonem.

14:34Właśnie dzięki temu że zrobiliśmy to w CCS-ie.

14:37No to teraz np.

14:39jeśli ten obrazek jest troszeczkę inny niż

14:41pozostałe będziemy mieli sporą kontrolę nad tym jak on się wyświetla możemy go

14:45wyświetlić na środku ale możemy też dodać go do lewej do prawej

14:49nawet co do procenta tutaj określić czy piksela takiej kontroli nie mielibyśmy jak

14:53gdybyśmy to robili za pomocą zwykłych obrazków.

14:56Kolejna zaleta zwykłych obrazków

14:58stawianych dzięki img jest znaczników głębia jest taka to

15:03upewnij się że nie ma jeszcze twardych spacji bo po kopiowałem

15:06jest taka, że są one czasem trochę bardziej przyjazne jeśli chodzi o SEO ponieważ

15:10jeśli osadzamy się coś w CSS-ie nie jesteśmy w stanie dodać znaczników alt

15:14do takiego elementu czyli nie możemy tego tekstu alternatywnego dodać.

15:18Czasem nie jest to dobre jeśli chodzi o indeksowane w wyszukiwarkach.

15:21To już będzie brand cztery.

15:23Zbliżamy się do końca.

15:25Wklejam ten kolor.

15:27I ostatnia rzecz która została mi do

15:28zrobienia to tutaj blockchain jako combo klasa i dodajemy obrazek.

15:34Trochę trzeba było klikać, a wydaje mi się,

15:37że tak czy inaczej jest to w miarę szybka sprawa.

15:40Auto, a tutaj sześćdziesiąt pikseli. To na środku i w ten sposób mamy zrobione kolejne komponent.

15:47Teraz musimy jeszcze zadbać o te wszystkie

15:49odstępy aby były one poprawne zwłaszcza w wersjach responsowych.

15:52Do usłyszenia.