Webflow: Style dla sekcji Hero

Webflow 2020+

0:00Witaj w kolejnej lekcji w której przed nami zadanie ostylowania nagłówków

0:03oraz tekstów, a także przeniesienie treści które znajdują się w adobe xd.

0:07W momencie gdy projektowaliśmy, robiliśmy to

0:09już na rzeczywistych danych czyli wszystkie te treści

0:12np. mamy w arkuszu kalkulacyjnym z którego je zaczytywaliśmy dynamicznie do xd .

0:16Natomiast nie chcę wprowadzać takiego trochę szumu informacyjnego. Teraz nie pokazywać

0:21różnych wielu różnych narzędzi aczkolwiek istnieją bardziej efektywne sposoby

0:25przeniesienia tego niż to co zrobimy teraz czyli na zasadzie copy - paste.

0:29Tak naprawdę. Natomiast wydaje mi się, że na

0:33tym etapie nie chcemy się rozpraszać tylko raczej chcemy jak najszybciej

0:37przerobić te najważniejsze elementy które tutaj się znajdują czyli

0:40możemy po prostu skopiować i wkleić tekst. To samo będzie ze stylowaniem na

0:44stylowanie też jest dużo fajniejszych pomysłów niż bezpośrednio sprawdzanie tego

0:49jakie są style tutaj w jednym z kursów xd. Przygotowaliśmy style quide , później

0:53rozbudowaliśmy go aż o zalążek design systemu. W dużych projektach w większych stronach, a

0:58nawet w mniejszych ale tych które zawierają

1:00np. kilka, kilkanaście podstron.

1:02Warto by było wyjść od tego żeby najpierw zbudować sobie bibliotekę wszystkich

1:05stylów, a później nakładać je na odpowiednie miejsca i też ewentualnie

1:09jakoś automatycznie sobie treści importować.

1:11Natomiast na tym etapie nie chciałbym abyśmy się rozpraszali ale chcę mówić o

1:14layoucie o głównych funkcjach webflow. Także w adobe xd też tutaj w palecie stylów zdefiniowaliśmy sobie

1:21tzw. character style i przykładowo nagłówek

1:24który zaznaczyła Dm sansz dwanaście bold. Możemy przełączyć się w taki właśnie tryb

1:29gdzie zobaczymy rozmiary Dm sans dwanaście bold jest tutaj oznaczony jako Caption Big i w ten

1:35sposób możemy go przenieść także tutaj czyli dodać do

1:39niego klasę command enter. Zaznacze ten element, a następnie

1:43command enter i wpisuje Caption Big zatwierdza nową klasę enterem.

1:48Jeśli chodzi o samo nazewnictwo strukturę nazw stosuje tutaj spacji jest

1:52stosuje duże litery więc zupełnie inaczej niż gdybym pisał to w czystym CSS.

1:56Dla prostych projektów praktycznie zawsze tak robię.

1:58Jeśli projekty są bardziej złożone

2:01i np. korzystam z CSS robię to trochę inaczej

2:03ale myślę że możesz spokojnie uznać to za dobrą praktykę możemy tak

2:07robić i teraz zmieniamy odpowiednie właściwości.

2:10Jeśli chodzi o rozmiar to zmienimy go na dwanaście i wysokości linii zmienimy na szesnaście.

2:14Zdaje się że to były jedyne ustawienia

2:16które tutaj są do zmiany reszta pozostaje taka jak była.

2:20Kolor też pozostaje taki sam. Jeżeli chodzi o nagłówek to spróbujmy go odnaleść to

2:22jest DM serii w Display pięćdziesiąt cztery i sześćdziesiąt jeden Interlinia.

2:29Przechodzimy więc do nagłówka typu heading jeden H1 i zmieniamy te style.

2:34Jednak w przypadku nagłówków pamiętaj

2:36proszę o tym że są one w obrębie całej naszej strony i powinny być takie same.

2:40Więc zanim zaczniesz dokonywać zmian warto

2:44sprawdzić selector i zaznaczyć sobie o all H1 headings.

2:47Warto żebyśmy właśnie w ten sposób za adresowali mieli sobie nagłówki zarówno: H1, H2,

2:52itd ustali dla nich pewne wyjściowe bazowe preferencje.

2:56Przykładowo wszystkie nagłówki H1 dla nas będą miały pięćdziesiąt cztery i sześćdziesiąt jeden,

3:03a jeśli chodzi o wysokość linii i zobaczmy czy rzeczywiście się to zgadza

3:07oprócz tego że musimy zmienić jeszcze DM sans na DM serif display.

3:12Wygląda to że wszystko jest OK.

3:14Weight wybierzemy sobie na normal i teraz nagle wszystko stało się spójne z designem.

3:18Poza tym że innovation in tech powinniśmy zrobić wielkimi literami.

3:22Mamy na to osobną klasę.

3:24W związku z tym możemy bardzo łatwo przejść do opcji i wybrać polecenie more type options,

3:28a następnie wybrać opcję Capital lise nigdy nie piszemy wszystkiego

3:32wielkimi literami. Jeśli będziemy chcieli możemy zawsze to zmienić.

3:35Tutaj też są opcje capitalize case czyli każde

3:38słowo może być z wielkiej litery jak również lowercase i możemy sobie to zmieniać.

3:42Po to aby było to jeszcze spójne z designem musimy zająć się odstępami

3:47między heading H1, a między Caption big jest nadane pewien margines.

3:50Tymczasem w designie tego marginesu nie ma.

3:53I teraz jeśli przejdziemy po wszystkich tych elementach i spojrzymy czy tutaj spacing

3:57zostało nadane jakieś marginesy okaże się że właśnie dla Heading 1

4:01mamy nadany margines. On jest oczywiście dziedziczony z tej klasy ale all H1 heading .

4:05Więc musimy ją zaznaczyć i spróbujmy ten margines zdjąć czyli po prostu wybiorę zero.

4:10Jeśli chodzi o margines od górnej krawędzi,

4:12a jeśli chodzi o dolny margines cóż na razie możemy zostawić dziesięć, a później

4:16jeszcze to pewnie sobie będziemy modyfikować.

4:18Ważne jest jednak to że modyfikuje wszystkie nagłówki H1 żeby było to spójne.

4:23Następnie należałoby się zająć przyciskiem.

4:25Przycisk jest także komponentem w ramach

4:27naszego projektu i ma on nazwę button Big więc z tej nazwy też skorzystamy.

4:32A jeśli chodzi o jego właściwości i Commandem kliknę żeby zaznaczyć tło

4:35kolor wypełnienia to kolor nasz generyczny granatowy kopiuje go na chwilę do schowka

4:40zaokrągleniu krawędzi wynosi dwanaście i tekst jest w środku taki sam jak mieliśmy.

4:45Tyle że jest biały czyli ten główny DM sans z osiemnaście Bold ale

4:50mamy tekst który jest białego koloru i dodatkowo jeśli klike na sobie na tło.

4:55Z altem teraz najadę nad tekst to zobaczę że padding na tym tekście jest ustawiony trzynaście.

5:00Przyciski nie mają na sztywno ustawionych rozmiarów czyli np.

5:03wysokości pięćdziesiąt .

5:05Zamiast tego ustawiamy na padding na tekst . Wtedy uzyskujemy dokładnie ten efekt o

5:10który nam chodzi czyli teraz przejdźmy do webflow zaznaczmy sobie taki przycisk.

5:14Następnie wybieram command enter i wpisuje

5:17button big czyli nadaje mu taką samą klasę jak nazwa komponentów adobe xd.

5:22Następnie wybieram tutaj jest coś takiego jak background color.

5:27Wklejam po to żeby zmienić kolor tła, a następnie przechodzę do właściwości border radius..

5:31I tutaj możemy osobno dla każdego narożnika ustawić zaokrągleniu albo dla

5:34wszystkich naraz zrobimy to we wszystkich naraz ustawiamy na dwanaście pikseli,

5:38a następnie przejdziemy do sekcji padding. Padding chcielibyśmy ustawić na trzynaście pikseli

5:43z każdej strony z altem mogę przeciągnąć i ustawić tutaj na trzynaście. Z altem ustawić tutaj na trzynaście.

5:49Może uda mi się trafić po to żeby zrobić z każdej strony identyczny padding.

5:53A jeśli chodzi o tekst który znajduje się w środku to mamy dm sans bold natomiast

5:59nie wygląda on dokładnie tak jak w naszym projekcie.

6:02Zobaczmy na wszelki wypadek najpierw

6:05skopiujmy ten tekst i wklej go tutaj żeby zobaczyć i porównać.

6:08No i sam tekst mimo że zawiera identyczne ustawienia to jest trochę inaczej renderowany.

6:13Ten można powiedzieć jest delikatnie chudszy mimo że jest też w wariancie

6:17tym samym czyli w wariancie bold więc to co ewentualnie moglibyśmy zrobić to na

6:21przycisku moglibyśmy zmienić to na wariant semi bold albo medium.

6:25Ale szczerze mówiąc ja zostaję bo bold mi to wcale nie przeszkadza.

6:29Wygląda całkiem nieźle, a poza tym musimy

6:31przyzwyczaić się do tego że różne silniki renderujące fonty będą troszeczkę inaczej

6:35interpretować również w każdej przeglądarce.

6:38Może to wyglądać delikatnie inaczej.

6:40Zostawiamy tak jak jest tutaj.

6:42Ale to co chciałbym zrobić to zmierzyć odstęp między nagłówkiem, a przyciskiem i teraz klikam

6:47na nagłówek z commandem zaznaczam go przytrzymanym altem najeżdżam przycisk i widzę

6:51że jest to dwadzieścia jeden mogę to uśrednić do dwudziestu.

6:55I teraz podstawowe pytanie jest takie czy

6:57chcemy wyłączyć margines na przycisku który teraz go nie ma.

7:00Z żadnej strony ma tylko padding czy może

7:02powiększyć do dwadzieścia ten margines na wszystkich nagłówki H1.

7:06I pytanie egzystencjalne w zasadzie. Natomiast jeżeli już się na to zdecydujemy

7:10to pamiętaj że będzie to dotyczyło wszystkich przycisków które tworzymy.

7:14Wydaje mi się że przycisk powinien tak czy inaczej mieć jakiś margines.

7:17Od góry do dołu. Zwykle to robię.

7:19W związku z tym możemy z altem po to żeby

7:22zarówno zrobić to na górze jak i na dole wybrać. Tutaj wartość dziesięciu.

7:26I teraz jest to odsunięte już o dwadzieścia

7:27dokładnie tak jak w projekcie, a ostatnia rzecz która została nam do zrobienia to

7:31dodanie cienia pod przyciskiem ten cień jest co prawda bardzo delikatny ale jest

7:35commandem klikamy i widać że on jest odsunięty o sześć pikseli w pionie.

7:40Następnie mamy rozmycie rzędu sześć. Kolor jest czarny. A jego przezroczystość trzynaście procent.

7:45To wszystkie rzeczy które nam są potrzebne.

7:46Aczkolwiek bezpośrednio nie da się za bardzo tego przełożyć na webflow.

7:50Tutaj jest trochę inny mechanizm jak przejdziemy do sekcji efektów znajduje się

7:54box shadow to działa dokładnie tak jak CSS-ie się bo jest oczywiście oparte o CSS.

7:59Teraz jeżeli chcemy cień oczywiście chcemy na zewnątrz outside, a nie wewnątrz.

8:03Jeśli chcemy cień odsunąć do góry to, ta kuleczka musi być u góry. Set angle.

8:08Jeśli chcemy go przesunąć w górę jeśli chcemy w prawo no to musi być trochę

8:12bardziej w prawo jeśli chcemy go przesunąć w dół musi być w dół czy sto osiemdziesiąt stopni.

8:16A tak to rozumiem. I tak to jest chyba najłatwiej zapamiętać.

8:20Więc chcemy go przesunąć w dół ustawiamy kropkę w dół i robimy tutaj sześć pikseli w

8:24dół jeśli chodzi o rozmycie to też jest sześć pikseli tak jak w xd.

8:28Size zostawiamy color black ale jego oppacity zmienimy tak aby był to trzynaście procent.

8:35Mogę wpisać z palca alpha trzynaście i teraz

8:38cała ta właściwość CSS po zatwierdzeniu tych zmian mogę od kliknąć się.

8:42Klikniemy jeszcze raz na guzik wygląda tak mamy sześć, sześć, zero i alpha trzynaście.

8:48Możemy to zobaczyć jak wygląda.

8:51Wygląda dokładnie tak jak w projekcie możemy podejrzeć, wyłączyć, włączyć, ewentualnie

8:54usunąć taki efekt jak widzisz możemy takich efektów dodawać też wiele.

8:58Ważne że mamy to zrobione dokładnie tak

9:01jak zaprojektowaliśmy w adobe xd więc cała sekcja Hero jest teraz zrobiona, a ja w

9:06kolejnej lekcji jeszcze pokażę ci jak można zrobić różne stany.

9:09Takiego przycisku i stworzyć z niego komponent do usłyszenia.