Webflow: Sekcja Standards

Webflow 2020+

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

0:02W której zajmiemy się sekcją our standards. Ta sekcja łudząco jest podobna do sekcji hero.

0:07W związku z tym ja niewiele się

0:09zastanawiając po prostu kopiuje i wklejam. Sekcję hero teraz przesune ją na sam dół.

0:14Chciałbym ją opatrzyć labelem standard więc wyrzuce sobie tamtą poprzednią klasę

0:21żeby nie zmieniać tej poprzedniej tylko po prostu stworzono standard.

0:25Teraz wchodzimy do środka i mamy taki header

0:28Znów wyrzucamy tę klasę. Stworzy dla niej hero standard.

0:34Na przykład wygląda to trochę inaczej ale

0:37zawiera elementy które potrzebujemy. Obrazka w zasadzie nie musimy zmieniać

0:41poza tym że wybierzemy replay. Na tym elemencie html-owym.

0:44To nie jest podłożony w CSS więc bardzo

0:46łatwo taki obrazek można zastąpić co prawda jeszcze go tutaj nie ma więc muszę

0:51wybrać, a upload obrazka do pliku źródłowych do lekcji.

0:55Został wstawiony ten drugi obrazek, a ja teraz mogę przejść do stylowania tej właściwej

0:59sekcji czyli hero standards co tutaj potrzebujemy.

1:02Potrzebujemy jeszcze jeden akapit tekstu czyli możemy po prostu kliknąć

1:08tutaj wejść do " A ". Wstawić paragraf, a wstawić automatycznie pod spodem.

1:13Jeśli chodzi o szerokość tej sekcji

1:15zobaczmy jak ona jest sześćset sześć pikseli więc wybierzmy sobie max weight

1:20sześćset sześć pikseli na razie wygląda dużo lepiej, a my musimy jeszcze

1:24tutaj wrzucić białe tło, a następnie zaokrąglić krawędzie do dwunastu.

1:29Ostatnia rzecz to padding w środku.

1:30Wcześniej go sprawdziłem powinien wynieść

1:32czterdzieści cztery piksele więc czterdzieści cztery piksele robimy z każdej strony.

1:37Przerzućmy teraz odpowiednie treści czyli

1:40ours standard bo nagłówka. Teraz jeszcze treść tego akapitu.

1:45Będziemy mieli trochę inny przycisk który będzie trzeba przeformatować.

1:48A tu jeszcze jest cień który chciałbym skopiować piętnaście, trzydzieści pięć i sześć procent.

1:55tych przezroczystości.

1:56Ok na tym elemencie dodamy box shadow

2:00piętnaście, trzydzieści pięć.

2:05Musimy zmienić oppacity alfa na sześć procent. Ok.

2:10Teraz dodamy

2:12czy zmienimy przycisk jak można zmienić ten przycisk ponieważ jest to symbol.

2:16Niestety jako over right nie możemy zmieniać kolorów więc po prostu klikne

2:20prawym przyciskiem myszy. Wybiera polecenie unlink from symbol czyli teraz

2:23mam osobną instancje przycisku którą mogę zmieniać.

2:26Ale uwaga uwaga.

2:27Mimo, że ten przycisk jest osobną instancją to pamiętajmy o tym, że ma on

2:32na daną klasę button big czyli gdybym teraz pozmieniał to nadpisze się nam też ten główny

2:37przycisk bo ma tę samą klasę. Tutaj pomysłem na to żeby zrobić to trochę

2:42bardziej spójne potrzebujemy zmienić po prostu kolory.

2:45Mogłoby być stworzenie takich osobnych klas dla przycisków np. button style jeden.

2:50Zawsze oczywiście można później zmienić tą nazwę ale button style jeden

2:56przyjąłby dla nas odpowiednie wartości koloru czyli kolor tła byśmy

3:01sobie zmienili na pomarańczowy, a kolor tekstu zmienili byśmy na granatowy.

3:05Teraz jeśli mielibyśmy więcej takich klas czyli

3:09np. button style dwa, button style trzy zielone przyciski niebieskie i jakieś jeszcze inne to

3:13moglibyśmy bardzo łatwo na button big po prostu dodawać te combo klasa button

3:17z określonym numerkiem. Zmieniało by się wszystkie parametry włącznie z tą klasą z

3:23pseudo klasą hover którą teraz możemy na ten element nałożyć.

3:27Ona była wcześniej na button big więc teraz mamy zupełnie inną konstrukcję tej klasy

3:31możemy zmienić kolor przykładowo na jakiś kolor delikatnie

3:36np. jaśniejsze ok. Dobra zmienimy na delikatnie jaśniejszy kolor.

3:39Możesz z tym zrobić cokolwiek się podoba.

3:41Moim zdaniem jest teraz ok.

3:43pod spodem musimy dodać trzy takie sekcje gdzie mamy. Wybierzmy "A" następnie wstawimy

3:50może zwykłe DiV block ten nie będzie linkiem więc wystarczy nam zwykły DiV block .

3:53W środku w tym DiV blocka mamy jakiś kawałek tekstu.

3:57Czyli to jest nagłówek konkretnie, a później pod spodem mamy kawałek jakiegoś

4:02zwykłego tekstu ale to jest tekst którego już używali wcześniej. On ma klasę caption.

4:07Więc możemy spokojnie sobie na ten tekst wrzucić po prostu klasa caption.

4:12Już jest on dobrze ostylowany. Nagłówek jest też dobrze ostylowany.

4:16My powinniśmy wszystko w tym DiV-ie środkować

4:19czyli po prostu wyśrodkowuje tekst. Jeszcze z tego co widziałem to tutaj jest

4:24zdecydowanie mniejszy te dwie rzeczy zachodzą na siebie czyli będziemy

4:27potrzebowali zrobić ujemny margines. Dlatego caption oczywiście nie chcemy

4:31Całej klasy w ten sposób nadpisać możemy tu więc dodać caption, że to jest standard.

4:36Trzymanie się takiej struktury

4:39nazewnictwa gdzie mamy jakiś hero standard, caption standard. Standard ma oczywiście sens

4:43jeżeli tylko jest to element reużywalny w jakichś wielu różnych miejscach.

4:47Teraz jeśli chodzi o margin to tutaj potrzebujemy marginesu ujemny.

4:52Przesuniemy to w ten sposób. Ja jeszcze skopiuje tekst sto pięćdziesiąt plus nadgłówka.

5:00Potrzebujemy project delivered który nawet przy

5:02okazji sprawdza szerokość tego elementu to jest około stu sześciu pikseli więc to co

5:07zrobimy to po prostu na cały DiV block wrócimy max weight sto sześć pikseli.

5:11Teraz potrzebujemy trzy takie ułożyć obok siebie.

5:17Naturalnie będzie nam potrzebna jakaś konwencja w której chcemy osadzić czyli

5:20dodatkowy element który będzie je wszystkie trzymał razem.

5:23To jest element techniczny więc wystarczy zwykły DiV

5:26wrzućmy do niego ten DiV block trzy zmieńmy teraz nazwę tego DiV blocka.

5:31Będzie to start standards.

5:34Skopiuje to. To będzie pojedynczy state, a cały DiV będzie się nazywał states w

5:40liczbie mnogiej to też jest w miarę dobra konwencja. Możemy teraz po prostu skopiować.

5:45Wkleje to jeszcze dwa razy, a na wszystkie state.

5:50DiV który zawiera wszystkie elementy wrzucić np. flex - boxa.

5:53Wyrównać to w ten sposób. Mamy gotowe po sprawdzałem tutaj jeszcze marginesy.

5:58Wygląda na to, że

6:00powinienem mieć trochę większy margines tutaj około pięćdziesiąt pikseli między przyciskiem,

6:05a tym tekstem jest trzydzieści więc też spróbujmy to zobaczyć czy jest ok.

6:10Na pewno musimy odsunąć state standard czyli

6:13wyrzucić margines od góry rzędu trzydzieści pikseli.

6:17Teraz wygląda to dużo lepiej.

6:19My tymczasem mamy kolejną sekcję prawie

6:21gotową do sprawdzenia jak ona działa w RWD. Wygląda to naprawdę dobrze.

6:25Ten obrazek ma automatycznie sto procent więc będzie dobrze się skalował w

6:29momencie gdy będziemy zmieniać rozdzielczość.

6:31Właśnie ciekawa sprawa ponieważ nie zmieniliśmy klasy tego obrazka.

6:36W związku z tym on w mniejszych rozdzielczości nam po prostu zniknie

6:39dokładnie tak samo jak to miało miejsce w headerze.

6:42Moim zdaniem to jest ok.

6:44Jedyna rzecz którą bym tutaj zmienił jest

6:47to margines na elemencie content, a konkretnie na content hero jest ustawiony margines.

6:52Ja szczerze mówiąc staram się margines bardziej umieszczać na całych

6:57sekcjach jeśli to jest możliwe ale to powikłanie po tym , że skopiowaliśmy go stąd

7:02bo to jest content hero, a nie zwykły content. Ten content hero rzeczywiście ma

7:06ustawiony margines aczkolwiek pamiętam że ustaliliśmy na hero też sto sześćdziesiąt, sto.

7:11W związku z tym nasz content nie

7:13potrzebuje tego marginesu jeżeli go wyzeruje to nic się nie zmieni bo ten margines.

7:17Tak jest ustawiony tak jak powinien być na całą zawierającą sekcję.

7:22Tymczasem teraz zdecydowanie lepiej wygląda ta całość.

7:25Gdybym chciał ustawić jakiś margines to zrobiłbym to na sekcji standard czyli

7:29np. tutaj możemy ustawić sobie jeszcze

7:31dodatkowo czterdzieści, a nawet więcej może osiemdziesiąt tak żeby było to zgodne z projektem.

7:36W ten sposób rozsunąć tę sekcję jako osiemdziesiąt kolejne.

7:39Mogę też dołożyć z dołu dzięki temu bardzo

7:42łatwo jeśli teraz zwiniemy będziemy bardzo łatwo mogli zarządzać tymi odstępami

7:46rozmieszczeniem poszczególnych sekcji w kolejnych break pointach ponieważ te

7:50odstępy są zdeterminowane przez nasze główne

7:54blocki które obejmują.

7:56Następnie przejdziemy do mobilnej wersji.

7:58Zobaczymy jak to wygląda też jest dobrze obrazek nam zniknął margines zostaje.

8:04Chyba wydaje mi się że jest ok.

8:06Jest tutaj odpowiednia ilość oddechu nie wiem czy nie będzie to za dużo odstępu na

8:10wersji mobilnej ale chyba też nie może ewentualnie ten delivery troszeczkę

8:15zmniejszył czyli moglibyśmy zmniejszyć margines powiedzmy do pięćdziesięciu.

8:20Też na dole możemy też sobie trochę zmniejszyć ten margines.

8:25A jeszcze teraz widzę, że z jakiegoś powodu ten obrazek w tle widoczny.

8:29Wydawało mi się, że włączyłem ten obrazek w widoku już mobilnym, a okazuje się, że nie.

8:33Ale dobra to przejdźmy do content. Może tylko o tym mówiłem.

8:36Tego nie włączyłem to co chcemy zrobić to dla the delivery.

8:39Chcemy ukryć obrazek w tym wariancie. Jednocześnie on zostanie ukryty w

8:43wariancie mobilnym teraz wszystkie wersje responsywne. Mamy już zrobione.

8:47Zobacz jak przyjemne jest dostosowanie tych wersji bez responsywnych w

8:50momencie kiedy mamy wszystko dobrze ustawiane.

8:53To jest tak naprawdę formalność kilka kliknięć.

8:55Będzie wszystko wyglądać. Prezentować się świetnie.

8:59To wszystko w tej lekcji. Do usłyszenia już za chwilę.