Webflow: Podstawy layoutu

Webflow 2020+

0:00W kolejnej lekcji chciałbym w niej pokazać

0:01jak zrobić bardzo podstawowy etap setup layoutu na którym zasadza się większość

0:06stron które ja projektuje webflow, a który pozwoli nam tak się przygotować

0:09aby te odstępy które mamy tutaj w adobe xd i wszystkie szerokości kontenerów.

0:15Pozwoliły nam jeden do jednego praktycznie przenieść to na webflow.

0:18Jeśli chodzi o xd to możemy włączyć tu z pomocą command średnik linie pomocnicze i

0:23zobaczyć jakie są odstępy jakie tu są marginesy jest sześćdziesiąt dwa z każdej strony

0:28w zasadzie bardziej nas interesuje to jaka jest szerokość całego kontenera klikamy na

0:32kontener i widzimy że jego szerokość to jest tysiąc dwieście czterdzieści dwa piksele.

0:38Więc gdybyśmy chcieli osadzić taki kontener tysiąc dwieście czterdzieści dwa piksele przechodzimy do

0:43sekcji add i teraz już zaczniemy korzystać ze skrótów klawiaturowych.

0:46Ja specjalnie w poprzednich lekcjach

0:47jeździłem myszką po interfejsie ale prawie nigdy tego nie robię webflow.

0:51Zawsze korzystam ze skrótów musimy się ich nauczyć są niezwykle istotne.

0:55Tutaj jedna ważna informacja ja jestem na

0:57macu w związku z tym dla mnie skróty są trochę inne ale tylko trochę po prostu

1:01zamiast control-a, mam command w momencie gdy będę mówił command, a jeśli jesteś na

1:05Pc-ie to zawsze wciskasz control czyli jeśli ja mówię command shift A np.

1:11to jest control shift A. Ok. Nie będę powtarzał tego że to dla peceta taki skrót,

1:15a dla Maca taki. Będę korzystał ze skrótów macowych, a w momencie gdy usłyszysz

1:19command to po prostu wciska control i tyle.

1:21Natomiast generalnie wiele tych skrótów z commandem nie ma.

1:24Większość z nich to po prostu wciśnięcie jednego klawisza na klawiaturze.

1:27Jeśli grałeś w gry komputerowe zwłaszcza

1:29jakiś FPS to znasz dobrze konwencję wsad czyli granie w oparciu o wszystkie skróty

1:35umieszczone w lewej części klawiatury i dokładnie tak jest w webflow.

1:39Po to żeby było wygodniej i jeżeli chcesz coś dodać to wciskaj A czyli

1:44"A" to jest add jeśli teraz będę ściskał "A" dalej to mogę

1:47przełączać się po zakładkach element layout i symbol.

1:50Natomiast drugi ważny skrót to z

1:52"Z" to nawigator który pokaże nam po prostu strukturę naszego dokumentu.

1:57"A" "Z" to dwa najważniejsze do zapamiętania skróty do zapamiętania w tej lekcji.

1:59Tak jak powiedziałem w pierwszej lekcji wprowadzającej.

2:01Powinieneś też znać HTML, a przynajmniej podstawy.

2:04Dobrze jeżeli znasz go w trochę bardziej

2:06zaawansowanym stopniu natomiast ja nie będę tutaj tłumaczył takich elementarnych

2:10rzeczy w HTML - u jak czym są marginesy albo padding.

2:13Nie będę też tłumaczył od podstaw modelu

2:15pudełkowego bo zakładam że go po prostu znasz.

2:18Jeśli nie cofnie się do kursu HTML od podstaw, a my teraz wybieramy "A" czyli

2:21dodajemy tutaj element i będziemy chcieli zrobić szkielet naszej strony

2:25czyli zgodnie z tym modelem pudełkowym będziemy chcieli zaprototypować layout.

2:30Natomiast to co zdecydowanie warto

2:32wyjaśnić. Na tym będziemy się koncentrować to jest to.

2:34Jak webflow się traktuje kontener kiedy użyć. Kontenera kiedy użyć sekcji kiedy użyć Div - a.

2:38No bo może to nie jest do końca intuicyjne w końcu nie ma natywnie

2:42czegoś takiego jak kontener. Gdy klikniemy na znak zapytania okaże się że to jest zwykły

2:46znacznik Div ale ma on jakieś konkretne zastosowanie.

2:50I to wszystko my musimy odkryć.

2:51Podstawowym budulec naszej strony będą

2:53sekcje podobnie jak zrobiliśmy to w adobe xd.

2:57Tam już starałem się przekazać taką strukturę. Taki schemat że gdy będziemy

3:01tworzyć naszą stronę to mamy ją zbudowaną właśnie w oparciu o : sekcje pierwsza,

3:06druga, trzecia, czwarta. Ona one zawierają po prostu kolejne ekrany naszej strony.

3:12I tak samo w oparciu o sekcję zbudujemy sobie szkielet layotu kiedy przeniesiemy

3:16sekcję czyli po prostu chwycimy ją webflow i opuścimy. Na znacznik body.

3:20Zostanie ona dodana jako dziecko znacznika, body, a my możemy przejść dalej i zacząć

3:25dodawać kolejne sekcje czyli przykładowo to będzie sekcja która będzie na menu.

3:29A my teraz chcemy dodać następną.

3:31Jeżeli upuścimy to wewnątrz znacznika tutaj akurat webflow pokaże nam że sekcja nie

3:36może być w środku sekcji więc nie możemy tego zrobić.

3:39Możemy przenieść się tutaj. Opuścić ją niżej.

3:41Jak widzisz teraz są one na jednym poziomie znaczniku body.

3:45Czyli mamy sekcję na menu i mamy sekcję na główną stronę.

3:49Sekcję jak widzisz automatycznie rozciągają się na całą szerokość strony.

3:51Gdybyśmy do wnętrza którejkolwiek z sekcji dodali

3:55np. akapit, paragraf. Przeciąga go wewnątrz

3:58sekcji to jest on także rozciągnięty na całą szerokość.

4:01Nie jest to do końca pożądane działanie dlatego w każdej sekcji dodamy coś jeszcze

4:06moglibyśmy dodać zwykły div ale webflow ma coś takiego jak kontener.

4:10Kontener to jest zwykły Div ale jako domyślną ma dodaną maksymalną

4:15szerokość dziewięćset czterdzieści pikseli, a także jest wycentrowany.

4:18To znaczy że jeśli przeciągnimy i upuścimy

4:20taki kontener wewnątrz sekcji zostanie on zawsze wycentrowany.

4:24I teraz gdybyśmy przykładowo chcieli do

4:26tego kontenera dodać jakiś akapit będzie on wyglądał zdecydowanie lepiej.

4:30Co więcej kontener fajnie skaluje się

4:32również na urządzenia. Przykładowo na tablecie mamy trochę mniejszy margines na

4:37telefonie nie mamy żadnego marginesu i na tym na tej wersji w telefonie też nie.

4:41Więc będziemy mogli go później jeszcze oczywiście dostosować wszystkie te

4:44właściwości wszystkie te parametry ale kontener jest dobrym punktem wyjścia.

4:48Tak naprawdę struktura prawie wszystkich

4:50stron które robię w webflow opiera się właśnie na tym że buduje sobie poszczególne sekcje

4:55dla każdego z widoków, a w środku ma kontener którego właściwości dostosowuje.

5:00Jedyną właściwość jaką ustawiamy jest

5:02szerokość tego kontenera tylko pytanie czy będzie to zadana sztywna szerokość.

5:07Oczywiście nie dlatego że my chcemy żeby

5:09ten kontener pozostał elastyczny. Żeby mógł być responsywny i zmniejszać się w

5:14momencie kiedy mamy rozdzielczość tabletową czy telefonową .

5:17Tutaj mamy zdecydowanie węższy ten kontener i nie chcemy zrobić go na tysiąc dwieście czterdzieści dwa

5:22tak jak jest tutaj bo wtedy na telefonie też taki by był.

5:25W związku z tym nawet webflow jest na tyle inteligentne że nie pozwoliłoby nam tego

5:29zrobić mówi że jeśli chciałbyś się zadać tutaj szerokość to jest bez sensu.

5:33No bo on nie będzie mógł być elastyczny natomiast możemy ustawić oczywiście jego max with czyli

5:37jeden tysiąc dwieście czterdzieści dwa to będzie maksymalna szerokość w jakiej chcemy się teraz poruszać.

5:41Dzięki temu zrobiliśmy dokładnie taki margines mimo, że tu mamy tysiąc czterysta trzydzieści dziewięć, a tu tysiąc trzysta sześćdziesiąt sześć.

5:48To tak naprawdę nie istotne bo udało nam się osiągnąć ten efekt gdzie mamy jeden tysiąc dwieście czterdzieści dwa szerokości

5:52i dzięki temu wszystkie rozmiary nam tutaj będą działać które

5:56będziemy mogli mierzyć, a jednocześnie mamy kontener czyli mamy

6:00też kontent wyśrodkowany w momencie gdy będę zmieniał szerokość

6:04okna przeglądarki on zawsze pozostanie na środku wykonując jakąkolwiek zmianę w

6:08sensie spowodowali że webflow automatycznie jak zwykle stworzył dla nas nową klasę dla

6:13tego elementu którą nazwał zgodnie z jego nazwą czyli kontener.

6:16Warto zmienić nazwę

6:17np. na kontent albo box kontent albo kontener kontent cokolwiek co spowoduje, że później

6:23dodając nowe kontenery nie będzie nam się to mylił więc. Będziemy mieli taką

6:26strukturę zawsze będziemy mieli sekcję, a później zawsze będziemy mieli kontent

6:30który trzyma wszystko na środku nie jest oczywiście wykluczone że w innych

6:34rodzielczościach będziemy chcieli zmienić tę właściwość. Zobacz że Max with jest

6:37dziedziczone ale ponieważ jest to maksymalna szerokość będzie to dobrze działać.

6:41Dlatego że będziemy mieli mniejszą szerokość ale nie przekroczy ona

6:45maksymalnej to samo będzie na telefonie to samo w tym widoku.

6:48My będziemy w tych widokach mogli albo

6:50zmienić albo dodać jakieś inne właściwości i jak to robimy robimy to na ogół od

6:55największego dlatego, że jeśli zrobimy coś w widoku tabletowym to te ustawienia

6:59zostaną dziedziczone na wszystkie widoki które idą w prawo.

7:02Gdybyśmy zrobili to na ostatnim widoku telefonowym i przykładowo zadali padding.

7:06Jeśli wejdę padding mogę z alt-em kliknąć po

7:09to żeby dodać padding z jednej i z drugiej strony.

7:12Zadajmy tutaj np. padding tu osiem pikseli.

7:14Co się stanie w widoku tego paddingu nie ma.

7:17A gdybyśmy cofnęli tą zmianę i zadali to

7:19taki padding w widoku tabletowym. Zróbmy to.

7:22Dodajmy padding rzędu.

7:25Tutaj możemy np. dodać szesnaście pikseli.

7:26Przejdźmy na widok telefonowy szesnaście pikseli czyli to co dodamy wyżej jest dziedziczone w prawo.

7:31Tak samo z tego widoku jest dziedziczone w lewo o tym jeszcze

7:35porozmawiać sam sobie później ale zadaliśmy tutaj padding.

7:38Tutaj go nie będzie, tutaj będzie i tutaj będzie, tutaj będzie.

7:40Teraz jeśli chcemy go zmienić możemy go zmienić

7:44np. w widoku telefonu, portretowym.

7:47Ustawić tutaj padding, rzędu osiem pikseli i

7:50zostanie on automatycznie dziedziczony na ten widok telefonu.

7:54Czyli tutaj też mamy. osiem.

7:55Czy teraz mamy szesnaście ,a tu osiem, a tu osiem.

7:57No i jak to jest możliwe, że

8:00teraz nie powstała nowa klasa cały czas mamy klasa kontent.

8:03Tymczasem tu jest osiem, tu jest szesnaście, tutaj też jest szesnaście, a tutaj jest zero.

8:07Otóż jest to możliwe dlatego że są również

8:09webflow również tle tworzy dla nas odpowiednie Media Query.

8:12I w tej klasie ta klasa kont jest identyczna ale jest zróżnicowana jeszcze

8:17tym że powstało Media Query siedemset sześćdziesiąt osiem, pięćset sześćdziesiąt osiem i trzysta dwadzieścia.

8:21I właśnie w tych Media Queris są zadane te właściwości które określimy.

8:27Jest to bardzo bardzo sprytne i dzięki temu my będziemy

8:30np. mogli w tych widokach większych czyli

8:32przykładowo jeden tysiąc sześćset jeden, jeśli stwierdzimy że tutaj chcemy powiększyć ten kontent zrobić

8:38trochę mniejszy margines to my po prostu zmienimy Max with i

8:42np. zrobimy to że będzie jeden tysiąc dwieście osiemdziesiąt dwa albo

8:46np. jeden tysiąc trzysta dwadzieścia.

8:48I czy to wpłynie na pozostałe break pointy. Nie tutaj będziemy mieli dalej tysiąc dwieście czterdzieści dwa i tą samą klasę.

8:53Dlatego że Media Queris zadbały o to żeby ta instrukcja warunkowa

8:57włączyła się dla tej klasy. Tylko wtedy kiedy przekroczymy jeden tysiąc sześćset pikseli.

9:01W ten sposób będzie działał schemat

9:04framework całego naszego box modelu w obrębie tej strony i polecam ci to robić.

9:08Ja tak robię w przypadku praktycznie wszystkich moich projektów o ile nie są

9:11jakieś zupełnie inne konstrukcyjne ale myślę że schemat sześćdzieściąt, siedemdziesiąt proc.

9:15stron które robimy wygląda właśnie tak to

9:18wszystko na teraz do zobaczenia już za chwilę.