Webflow: Sekcja Hero

Webflow 2020+

0:00Cześć w kolejnej lekcji zaczynamy

0:01dokładnie tam gdzie skończyliśmy wcześniej.

0:03Jestem w widoku dektopowym usuwa akapit nie będzie nam potrzebne, a kontent jest

0:08przygotowany na to abyśmy stworzyli tę pierwszą sekcję.

0:10Chciałbym w pierwszej kolejności zająć się właśnie nagłówkiem czyli te

0:14nagłówki po lewej stronie oraz hero image, a także później zrobimy sobie kafelki,

0:18a dopiero później zrobimy sekcję menu i zobaczmy co tutaj mamy.

0:22Mamy caption mamy nagłówek, przycisk, a obok znajduje się obrazek

0:27jak można to rozmieścić w layoucie na wiele różnych sposobów.

0:31Tak naprawdę możemy nawet korzystać z

0:33predefiniowanego layotu hero i po prostu go przeciągnąć, i upuścić.

0:37Myślę że skorzystałbym z tego w pierwszej kolejności ale chciałbym żebyśmy jednak

0:40nauczyli się robić to od podstaw w związku z tym przejdźmy do elementów.

0:44I możemy zbudować to znów z różnych

0:46klocków możemy użyć kolumn natomiast one nie będą do końca wygodne jeśli chodzi o

0:51umieszczenie na przykład wycentrowania elementów.

0:53Do tego najlepiej sprawdzi się grid który możemy wykorzystać albo kontener któremu

0:59zmienimy display na flex i po prostu użyjemy flex-boxa.

1:02W zasadzie wszystkie te sposoby będą dobre a my wykorzystamy teraz flex-boxa i naczelna

1:06zasada jest taka że jeśli nie musimy to nie tworzymy w środku jakiś dodatkowych

1:10kontenerów czy nie wrzucamy jeszcze jednego kontenera i do niego jakiś DIV-ów

1:14po prostu spróbujmy zrobić tak żeby ten kontener był flex-boxem, a w nim znajdą

1:19się dwa elementy jeden DiV to będzie DiV w którym znajdzie się tytuł i przycisk,

1:24a po prawej stronie zrobimy kolejne DiV które będzie zawierał obrazek możemy

1:28bezpośrednio na nawigatorze wybrać command C i command V. Po to żeby po prostu

1:33zduplikować taki element te elementy oczywiście są to elementy

1:37blokowea więc będą układały się jeden po drugim gdzie w ogóle możemy sprawdzić czy

1:41to jest element blokowy czy element Inline itd.

1:44I zmienić te właściwości.

1:45Sekcji layout gdy zaznaczymy taki Div do przejdziemy sekcji Layout zobaczy że mamy tutaj

1:51zaznaczony blok element możemy zmienić to na flex.

1:54Możemy też zmienić na grida.

1:56Mamy do dyspozycji Inline blok oraz Inline więc gdybyśmy zmienili na Inline.

2:02Jak widzisz jeden mógłbyś jeden moglibyśmy umieścić obok drugiego.

2:05Moglibyśmy też zmienić na Inline blok.

2:07Będziemy często korzystać z tych właściwości.

2:09I liczę na to że przerobiłeś kurs HTML, a więc doskonale wiesz o co tutaj chodzi.

2:13Natomiast to są właściwości indywidualnych Divów.

2:16My natomiast chcemy cały kontent zmienić tak aby stał się on flex - boxem.

2:21Czyli to tutaj przechodzimy.

2:22I to tutaj wybieramy drugą opcję czyli flex - layout ustawiając to na kontencie.

2:27Mamy do dyspozycji wszystkie opcje flex, a m.in. położenie pionowe albo orientalne

2:32elementów i będziemy przestawiać w widokach mobilnych.

2:35Mamy też do dyspozycji wyrównanie i wyjustowanie, zostawmy na razie tak jak jest.

2:40Umieścić je wewnątrz Div-ów z kontentem.

2:44Te rzeczy które powinny się w nich znaleźć

2:45więc wybieram 'A' na samej górze znajduje się tekst typu Caption.

2:49To nie jest tak naprawdę ani Header, ani paragraf, ani nie jest to link.

2:54Jeśli nie jest to jedna z tych rzeczy.

2:56Heading, paragraf albo link to po prostu ustawiamy text blog. Text blog to będzie

3:00zwykłym DiV tekstem i całkiem nieźle się sprawdza.

3:03Następna rzecz którą chcemy tutaj dołożyć no to będzie Heading możemy go umieścić

3:08w odpowiednim miejscu od razu przeciągając tak chyba jest najłatwiej.

3:11I ostatnia rzecz którą chcemy umieścić to

3:13będzie przycisk button i musimy celować w nim bezpośrednio pod headingiem.

3:17Naturalnie można to wszystko jeszcze zmieniać.

3:20Tutaj w tym panelu warstw i reorganizować te elementy w związku z tym bardzo łatwo

3:25można albo przeciągnąć i przenieść do określonego elementu.

3:29W ten sposób albo umieścić tu naturalnie ta hierarchia od góry do dołu.

3:33Wewnątrz takiego Div-a też jest ważna i

3:35odpowiada ona za to jak te rzeczy renderowane w drugim DiV-ie.

3:40Możemy też przenosić się pomiędzy tymi elementami strzałami na klawiaturze.

3:44To jest ważne dlatego, że tak naprawdę często zaznaczała się coś

3:49tutaj to jest przycisk ale chcemy wejść do elementu rodzica.

3:52Wystarczy że wciśnięty strzałka w górę i już jesteśmy na rodziców.

3:55Dodatkowo możesz najechać na nazwę takiego

3:58elementu kliknąć na tą nazwę. To pokaże wszystkich rodziców których ma.

4:03Możemy sobie takiego rodzica wybrać zostanie on zaznaczone w nawigatorze.

4:07Jeśli nie masz nawigatora pod ręką możesz

4:10także z pomocą bread crumps które są na dole.

4:12Tutaj widzisz całą strukturę zagnieżdzenia i też możesz wejść aż do body zaznaczyć sobie to.

4:17To tak jakbyś klikał po nawigatorze więc

4:20sporo różnych opcji nawigacji i przenoszenia.

4:22Jest to wszystko bardzo intuicyjne.

4:24Kolejna chcemy zaznaczyć DiV block i do

4:27niego wrzucić tym razem obrazek. Mamy tutaj w media sekcję image po prostu wrzucamy

4:31ją do tego DiV blocka. Obrazek możemy łatwo dodać za pomocą opcji choose image.

4:35I wtedy zawsze włącza się nam ten panel asset.

4:38Możemy go wybrać przez "J" na klawiaturze.

4:40Będziemy tutaj mieli całe repozytorium naszych obrazków.

4:43Można zmieniać to jak się wyświetlają

4:45np. w postaci grida czy listy lub też małe listy, można je przeszukiwać.

4:49I mamy tu dwa obrazki które dodaliśmy

4:51wcześniej jako nasze favikonki zostały dziedziczone ale my będziemy potrzebowali

4:56wrzucić tu więcej obrazków oprócz obrazów znajdują się tutaj też dokumenty

5:00oraz pliki lottie i np. animacje.

5:02O tym będziemy też mówić sobie później natomiast

5:04ja chciałbym wrzucić tutaj dorzuci obrazki wiec mogę kliknąć upload albo zdecydowanie

5:09łatwiejszy sposób po prostu bierzemy jakiś dowolny obrazek i w momencie gdy mamy

5:14Asset otwarte to możemy po prostu przerzucić go tutaj zostanie on

5:17automatycznie, a uploadowany obrazek został wrzucony dokładnie w takich

5:20rozmiarach w jakich eksportowaliśmy go z xd i są one podane tutaj.

5:24Jedyna właściwość która została odziedziczona z tagu all images jest dla tego obrazka to maksymalna

5:28szerokość sto procent i to jest fajna sprawa ponieważ pozwala zachować obrazkom responsywność.

5:32Przykładowo gdybyśmy weszli widok tabletowy widzisz ten obrazek już jest

5:36troszeczkę mniejszy, a mimo to on ma tylko po prostu max sto procent

5:40czyli jeżeli będziemy mieli mniejszy ekran

5:41on będzie nam bardzo ładnie się skalował do całej dostępnej dla niego szerokości ale

5:46my oczywiście będziemy chcieli jakoś inaczej zarządzić w wersjach responsywnych.

5:49Na razie jednak zostawiamy to tak jak jest

5:51na tym obrazku nie będę już nic zmieniał. Dlatego zostawię go genetyczną nazwę i

5:55image wcisnę jednak strzałkę w górę i przeniose się do Div Blocka.

5:58W tym Div Blocku będę chciał zmienić jedną właściwość, a konkretnie będę chciał

6:02ustawić margines tak żeby obrazek był odsunięty o za daną wartość tekstu.

6:05Gdybym ustawił w tym momencie margines

6:08czyli zmienił to jakkolwiek to pamiętaj że automatycznie została stworzona nowa klasa

6:12i ta klasa bazuje na nazwie którą mamy tutaj.

6:15Może to być trochę mylące i rzeczywiście

6:18można wylądować z wieloma takimi różnymi klasami dziwnymi nazwami tutaj.

6:22Drugi sposób na zrobienie tego to możemy

6:25stworzyć klasę i jeszcze wcześniej przed zadaniem właściwości czyli jakby uprzedzić

6:30trochę ruchy webflow robimy to z pomocą Command Enter.

6:33Jeśli wcisnę teraz Command Enter to przejdę do

6:35selektora i będę mógł wpisać swój własny czyli np.

6:38w Hero image i zatwierdzić go Enter tworząc w ten sposób nowe.

6:41Mogę też z pomocą klawiatury wybrać jeden

6:43z istniejących i teraz go stworzyłem. Mogę przejść do margin

6:46np. kliknąć raz, a następnie wybrać predyfiniowany margines czterdzieści pikseli ten

6:50margines zostanie zresztą fajnie pokazany w momencie gdy najadę sobie

6:54na tego DiV-a i na margin. Zobacz że on się pokazuje jako niebieskie linie.

6:59Na moment kiedy to nagrywam

7:01ma chyba jakiś malutki bug polegający na tym że nazwa tego głównego sektora powinna

7:05zostać odziedziczona i zmieniona także tutaj. Ten DiV block powinien się zmienić hero image.

7:09Moim zdaniem ma to miejsce w przypadku elementów nadrzędnej czyli przykładowo

7:14jeśli weźmiemy sekcję command enter i piszemy Hero to teraz zobaczy że ta nazwa

7:18się zmienia ale nie dzieje się tak w przypadku elementów zagnieżdżonych.

7:21Myślę że też tak powinno być.

7:23Natomiast moja strategia pracy jest taka

7:25że jeśli tylko nie muszę to nie zmieniam żadnych właściwości i tym samym nie tworzy

7:29dodatkowych klas bo zawsze jest to więcej roboty.

7:32I teraz chciałbym zatrzymać się bo jest to.

7:33Dobra okazja na wyjaśnienie takiej drobnej pomyłki którą zrobiliśmy i raczej zrobiłem.

7:37Ją celowo po to żeby pokazać Ci że bardzo łatwo jest zmienić na przykład jakąś klasę.

7:43Nawet o tym nie wiedzieć, a tymczasem zmieni się ona np.

7:47na wszystkich naszych podstronach.

7:49Zrobiliśmy tak w przypadku content gdzie zmieniliśmy tutaj layout na flex box.

7:53Tymczasem powiedziałem ci że nasza

7:55strategia pracy będzie taka że będziemy wybierali sobie najpierw sekcję rzucali.

7:59Ją poniżej następnie będziemy wybierali kontener i wrzucali go do tej sekcji teraz

8:04Control Enter i wystarczy że zjedziemy klawiaturą w dół na klasę kontent.

8:08Wybierzemy ją i powinno już wszystko działać.

8:10Tymczasem nie dla wszystkich tych

8:12kontenerów będę chciał żeby był to flex box dlatego muszę cofnąć się do tej klasy.

8:18Kontent i zmienić display na ten domyślny który tutaj był.

8:22To co powinniśmy zrobić na samym początku zanim zmieniliśmy ten flex to

8:25powinniśmy pomyśleć o tym żeby stworzyć combo klasę.

8:28Czyli zawsze zastanów się proszę zanim

8:31zaczniesz przesuwać jakiekolwiek suwaki tutaj i właściwości.

8:34Zastanów się jakie będzie miało to konsekwencje w przypadku klas.

8:38Jeżeli modyfikacja którą chcesz wprowadzić ma dotyczyć wielu elementów na twojej

8:42stronie to do tego przypisz do tego uniwersalną klasę z której będziesz korzystać.

8:47Jeżeli ma dotyczyć tylko jednego

8:48konkretnego elementu na którym pracujesz musisz w tym momencie stworzyć combo klasę

8:53czyli wybrać Command enter i teraz możesz dopisać do tego.

8:57np. Hero w tym momencie jesteśmy bezpieczni

9:00ponieważ klasa content zachowa display blok tak jak to było wcześniej.

9:03Natomiast klasa content hero będzie Display flexem i w tym momencie

9:10jeśli przejdziemy do tego drugiego kontentu który wyrzuciłem zobaczy on ma.

9:13Display block czyli dokładnie tak jak chcieliśmy.

9:15Przenosimy się w związku z tym tutaj po poprawieniu tej drobnej pomyłki, a

9:19następnie zmieniamy pewne właściwości przede wszystkim Inline.

9:22Mamy tutaj od góry do dołu

9:24te elementy które się rozkładają na gridzie chcielibyśmy żeby te dzieci były po

9:28prostu wycentrowane i to już wygląda lepiej.

9:31Teraz zmienimy jeszcze opcję wyjustowania

9:34Zerknijmy co autor miał na myśli tworząc layout.

9:35Mamy tutaj równo odstęp równy odstęp, a tutaj mamy odstęp trochę

9:39powiększony co zresztą załatwił tą wielkością czterdziestu pikseli.

9:43Natomiast sam flex box ma też dwie

9:45właściwości jeśli uczyłem się o flexboxie to jest nasz.

9:48Jest to Space i space between.

9:49Możemy więc ustawić to tak aby zachować

9:51równe odstępy pomiędzy elementami w środku lub pomiędzy marginesem i elementami

9:55w środku w tym przypadku akurat nie będzie miało to aż tak wielkiego znaczenia.

9:59Jeżeli chcemy żeby te elementy były trochę bliżej siebie.

10:02Wybierzemy drugą opcję.

10:03Ewentualnie pamiętaj proszę że na Div blocku daliśmy jeszcze ten zadany margines czterdzieści .

10:08On cały czas to będzie jeszcze dodatkowo.

10:10Działał więc to co możemy zrobić to zmienić go na zero.

10:12Będą te elementy bliżej siebie.

10:14Ja jednak zostawię ten margines czterdzieści to będziemy mieli mniejszy odstęp, a tu będzie

10:18delikatnie większe aczkolwiek najlepiej będzie to widać dopiero wtedy kiedy już

10:22będziemy mieli treści wypełnione i odpowiednią ostylowanie.

10:24Teraz wiemy jak to wygląda w rozdzielczościach mobilnych,

10:26na tablecie mamy dalej układ poziomy, na telefonie portret landscape

10:31też mamy układ poziomy i tu już nie wygląda to jakoś super dobrze więc

10:35to co możemy zrobić to widok landscape i tak żeby było dziedziczone to na portret

10:39możemy zmienić kierunek flexa z horizonal. Na vertical, a przypominam że mamy zaznaczone

10:44kontent bo on jest jak z flexboxem rodzicem dzieci które będą teraz przedstawione.

10:48Ewentualnie możemy też zmienić ich

10:49kolejność gdybyśmy chcieli obrazek umieścić na górze.

10:52Użyjemy tych strzałek.

10:53No i działa pytanie czy rzeczywiście taki

10:55był zamysł artysty czyli osoby która przygotował layout i okazuje się, że w

10:59tych mniejszych widokach chcemy w ogóle ukryć ten obrazek.

11:03Pytanie czy zrobić to już na widoku tabletowego.

11:05Czy tutaj jeszcze wygląda to w miarę spoko.

11:08Trudno ocenić gdybyśmy mieli już gotowe

11:10heading moglibyśmy to powiedzieć ale to jak mamy to zaprojektowane to już w tym

11:14widoku siedemset sześćdziesiąt osiem tego obrazka nie ma więc cofnijmy zmiany które nadaliśmy tutaj.

11:18One nie są potrzebne bo zawsze najpierw

11:21wychodzimy od tego większego ekranu i w tym większym ekranie zaznaczam że cały

11:26DiV block który tutaj jest a nie sam obrazek i po prostu go ukryjmy.

11:29W sekcji layout znajduje się ostatnia właściwość która pozwala nam ukryć

11:32elementy i wybieramy po prostu none aby ten element został ukryty.

11:36Zwróć uwagę na to że nie usunął tego

11:38elementu czy backspace na nim bo wtedy on usunął się z

11:41całej struktury dokumentu czyli nie byłby nigdzie widoczny.

11:44Ja go tylko odkryłem, a ponieważ odkryłem go tylko w tym break poincie

11:48tabletowym to będzie dziedziony na wszystkie break pointy niżej czyli tutaj nie mam

11:52ale wyżej będzie już widoczny dokładnie tak jak chcieliśmy.

11:55Jeszcze jedna rzecz jest tutaj do

11:56zrobienia ponieważ w layoucie mamy w momencie gdy przechodzimy do tablet view.

12:01Mamy nagłówek w wyśrodkowany i przycisk oraz caption.

12:05W związku z tym trzeba było przejść do widoku tabletowego.

12:08No i oczywiście flexbox ma taką możliwość

12:11ale zobaczymy jesteśmy teraz wyżej w hierarchii.

12:13Czyli tak naprawdę to powinno być teraz

12:16rodzicem na to byśmy musieli dać flex - a i dla jego dzieci musielibyśmy je wyrównać.

12:22Najprościej jest jednak w tym przypadku

12:24zrobić to w ten sposób że po prostu w tym miejscu włączymy sobie opcję Inline center.

12:29Ona wpływa na wszystkie obrazki i wszystkie teksty na przyciski również w

12:32związku z tym z pomocą tej jednej prostej zmiany uda nam się to zmienić.

12:36Nie musimy przełączać tego na flex.

12:38Gdybyśmy mieli bardziej skomplikowane layot to moglibyśmy przełączyć na flex i dopiero

12:42teraz centrować ale nie musimy tego robić więc cofamy tą zmianę.

12:45Tak czy inaczej ta zmiana spowodowała ponieważ wcześniej nie było żadnych

12:49właściwości zmieniane na DiV blocku spowodowała że została automatycznie utworzona klasa.

12:53W związku z tym to jest ok.

12:55Możemy zmienić jej nazwę na hero header. Zatwierdzić to enterem.

12:59Widzę że trochę zwariował webflow bo teraz akurat

13:01zmienił nazwę tej zagnieżdżonej klasy a tego bloga nie chciał mi zmienić.

13:05Nie wiem dlaczego. Trudno mi powiedzieć ale coś jest nie tak.

13:09No w każdym razie mamy dokładnie tak jak chcieliśmy.

13:12Wszystkie widoki responsywne zrobione

13:14oraz dobrze przygotowaną strukturę layout-u Teraz możemy przejść do stylowania.

13:17Do usłyszenia w kolejnej lekcji.