Webflow: Sekcja Delivery

Webflow 2020+

0:00Poprzedniej lekcji. Powiedziałem ci, że

0:01możemy mieć problem z tymi twardymi enterami

0:03Jednocześnie usunąłem go sprzed znaku four co trochę rozwaliło mi layout na stronie

0:08głównej więc jeśli chodzi o hero header. To proponuję żebyśmy sprawdzili jaką ma

0:12szerokość pięćset dwadzieścia trzy piksele i ustawili to jako max weight dla hero header.

0:18np. pięćset trzydzieści pikseli.

0:19I teraz wszystko będzie ok. W większych rozdzielczościach możemy trochę powiększyć.

0:23Teraz to wygląda dobrze jeszcze musimy

0:25teraz zmienić margines pomiędzy tymi dwiema sekcjami.

0:28On tutaj jest trochę większy czterdzieści pikseli musimy ustawić czyli na features.

0:33Mogę wrzucić

0:35np. od góry margines czterdzieści pikseli na razie tak to załatwimy.

0:38No i jeszcze jedna rzecz jest do stosowania ponieważ gdy zmieniam ten widok

0:42zobaczy że wszystko bardzo mocno przylega do lewej do prawej krawędzi.

0:47Jak mogę sobie z tym poradzić

0:49np. na naszą uniwersalną klasę kontent mogę dorzucić jakiś padding rzędu

0:54np. dwudziestu pikseli tyle, że jeżeli ja go dorzucę dwadzieścia pikseli z jednej i dwadzieścia pikseli z

1:00drugiej to tak naprawdę zmniejszy mi się ta dostępna przestrzeń o czterdzieści pikseli więc

1:05mógłbym o czterdzieści pikseli powiększyć tutaj to max weight żeby skompensować czyli

1:11dodaje czterdzieści. Mam jeden tysiąc dwieście osiemdziesiąt dwa i teraz dokładnie jest tak jak było

1:16ale mam za to trochę przestrzeni trochę oddechu od prawej i lewej krawędzi gdy

1:21będę skalował okna przeglądarki i to całkiem spoko wygląda.

1:25Następnie widok responsywnym czyli ten tabletowym.

1:28Przejdźmy do widoku w projekcie i zobaczmy jak prezentują się te odstępy marginesu.

1:34Tutaj mamy trochę mniejszy margines rzędu około stu pikseli no to mamy też mniej

1:38więcej około sto możemy spróbować tak to zrobić że ustawiamy sobie na tej sekcji

1:43margines on tutaj ma sto dwadzieścia trzeba go zwiększyć do około sto sześćdziesiąt.

1:47Dlaczego.

1:48Dlatego, że menu całe ma pozycję fixed w związku z tym jest poza obiegiem dokumentu

1:52i ten element jest pozycjonowany w ten sposób od samej góry.

1:55Natomiast dolny margines ustawimy na sto

1:59pikseli. To wygląda chyba nieźle na tablecie, a jest dziedziczone na mobile portrait i

2:04landscape.

2:05A tutaj już jest trochę za dużo więc zdejmiemy to i z projektem było tu

2:11ok. sto dwadzieścia pikseli co musimy zrobić a tutaj sześćdziesiąt pikseli w widoku tym małym telefonowym.

2:18Mamy jeszcze jedną zmianę do zrobienia

2:20ponieważ tutaj zmniejszy się w ogóle wielkość nagłówków do trzydziestu pięciu.

2:24Więc zaznaczam nagłówek i przeprowadzimy pewien eksperyment już

2:28pewnie wiesz jak on się zakończy jeżeli oglądałeś uważnie poprzednie lekcje.

2:32Jeśli teraz na wszystkie nagłówki H1

2:35ja zmienie wielkość na trzydzieści na trzysta pięćdziesiąt na trzydzieści pięć aczkolwiek muszę też zrobić

2:41dobrą interlinie czyli czterdzieści to okazuje się, że zmieni się to tylko w

2:46tym break poincie, a w tych pozostałych break pointa będę miał odpowiednią dużą

2:51wielkość więc nie musiałem tworzyć nowego selektora. Po prostu zmieniłem wszystkie

2:55nagłówki H1. Na mobilu na taką wielkość tutaj akurat marginesy zostawię są w porządku i

3:01to implikowało, że mamy zrobiony cały layout z dobrymi odstępami. Bardzo ładnie

3:06się skaluje i mamy przygotowaną całą stronę główną przynajmniej do tej

3:11rozdzielczości zwykłej desktopowej tych rozdzielczości wyższych na razie na razie nie robimy.

3:15Aczkolwiek to będzie

3:16bardzo proste żeby później je zrobić więc. Ok. Super zabieramy się za drugą sekcję.

3:21Przejdźmy do stworzenia odpowiedniej

3:24sekcji to co możemy zrobić to po prostu skopiować sobie features.

3:28Następnie w wkleić. Zmienimy nazwę ponieważ będzie to sekcja w której będzie nagłówek.

3:34We delive on time czyli na przykład możemy to usunąć.

3:39Remove klas i damy tutaj klasę delivery.

3:43Ze środka z kontentu usunięty features grid na razie

3:47teraz co potrzebujemy w kontencie dla tej sekcji. Będzie to struktura nagłówka czyli

3:53caption, nagłówek i tekst, a w tle będziemy mieli jakieś różne fajne rzeczy latające.

3:58Najpierw dodajmy tą strukturę czyli tekst

4:02kolejno będziemy mieli heading i kolejno będziemy mieli paragraf.

4:06Wszystko to zapakuje do osobnego

4:08kontenera który pomoże nam całość pozycjonować.

4:11Czy będzie to musiał być link.

4:12Nie w związku z tym używamy zwykłego DiV blocka.

4:16Pakujemy do niego tekst, heading i paragraf.

4:20Staramy się to zrobić już w tej dobrej docelowej kolejności.

4:23Następnie na całego DiV blocka ustawiamy

4:26szerokość. Zrobimy tutaj pięćset trzydzieści tam

4:29było to około pięćset trzydzieści zrobimy max

4:32weight, a następnie spróbujemy to z pozycjonować na środku.

4:37Po pierwsze wyrównanie tekstu w blocku

4:39będzie musiało być na środku ale musimy też umieścić na środku w ramach kontentu

4:43więc to może być pora na dodanie kolejnej klasy delivery do contentu.

4:48I teraz możemy zmienić jego wyświetlanie na przykład na flex - box i wycentrować to wszystko.

4:53Sama sekcja delivery będzie miała jakiś konkretny margines. My teraz

4:58Robimy tą wersję desktopową więc zobaczmy jaki ten margines jest sto osiemdziesiąt pikseli.

5:05Więc na the river wrzucam od góry margines rzędu sto osiemdziesiąt pikseli.

5:11Następnie przerzucamy teksty które się znajdują.

5:15Innovation in tech.

5:18To będzie tu zaraz zadbamy o to żeby

5:21wstawić odpowiednie nagłówki to jest akurat nagłówek jeden i on jest dobrze

5:25sformułowany, body kopii w akapicie jest dobrze z formatowany.

5:29Jedyne co musimy lepiej sformułować to

5:31jest caption. On ma dm sans dwanaście bold szesnaście czyli dwanaście rozmiar szesnaście Interlinia.

5:42To jest ok.

5:44Jeszcze musimy zmienić na capital lease

5:47I wygląda dobrze.

5:48To nie jest dokładnie to samo co tutaj.

5:50Więc zamiast tutaj mieliśmy klasę caption, a tutaj zrobimy sobie caption header.

5:56Zatwierdza i teraz jeszcze ten blok można było nazwać inaczej

6:00np. der section.

6:03Skopiuje sobie tą nazwę. Dlaczego.

6:04Dlatego, że już wiem że z tego będę chciał

6:06zrobić symbol command shift, a tworzy symbol wklej tamtą nazwę adres.

6:10Taka sama. I dlaczego robię z tego symbol ponieważ w

6:14naszym layoucie występuje wiele tego typu sekcji.

6:17Zobaczy tylko, że nie wszystkie są identyczne.

6:19I zaraz to sobie stosujemy na początek.

6:22Podziękujmy to jako nowy over right.

6:25Caption kolejne over right to będzie header link.

6:29I ostatni right który chcemy zrobić to

6:32paragraf czyli linku nowe i wpisujemy tutaj może skrypt.

6:37Dobra i teraz mając właśnie coś takiego

6:40już zrobione będziemy mogli bardzo łatwo zawsze sobie taką sekcję planować.

6:45Czyli jeśli bym teraz powiedział litery kopiuj wklej ja mam już znowu taką samą

6:50sekcję tyle że jak przejdę do head section to

6:53np. w the script.

6:54Jeżeli go nie potrzebuję mogę po prostu ten tekst usunąć.

6:57Co prawda on generuje jakieś jakąś

7:00przestrzeń ale tak naprawdę w przeglądarce ona będzie pusta.

7:03W związku z tym. Jak widzisz nie ma tutaj

7:05tej zbędnej przestrzeni. Jakiegoś marginesu więc to jest ok.

7:08W ten sposób będziemy mogli stworzyć sobie

7:10kolejne nagłówki. Bardzo łatwo podmienić wszystkie rzeczy które się tutaj znajdują

7:15na razie usunę te delivery ponieważ została nam jeszcze jedna rzecz do zrobienia.

7:19Właśnie w całym tym głównym kontenerze chcemy osadzić tę grafikę która będzie w tle.

7:24Specjalnie nie robiłem jej w symbolu bo w niektórych miejscach jej nie ma więc

7:28nie powinna być w symbolu natomiast tę grafikę będziemy chcieli

7:32osadzić jako tło najlepiej będzie eksportować ją w całości.

7:35Wcześniej już mamy ją eksportowaną z xd.

7:38Więc przechodzimy teraz do assetów wybieramy polecenie upload. Dorzucamy tutaj bg-shapes.svg

7:43następnie będziemy musieli to osadzić. Teraz pytanie czy osadzić jako

7:46obrazek czy osadzić jako tło w CSS-ie. Oczywiście jako tło w CSS-ie bo to nam da

7:51zdecydowanie większą kontrolę także na delivery.

7:53Przechodzimy do odpowiedniej klasy teraz wybieramy image and gradient. Wybieramy

7:58wskazujemy z pomocą choose image tą grafikę którą zaimportowaliśmy czyli background SVG. Wyłączamy

8:03dla niej na pewno dla niej powielanie. Pozycję ustawiamy na centralną w pionie i w

8:08poziomie, a najważniejsze ustawienie to dla nas size zmienimy custom gdzie stawialiśmy

8:13ręcznie wielkość piksela albo w innych jednostkach jeśli chodzi o wysokość czy szerokość.

8:16Skorzystamy z background size ustawionego na cover albo contain.

8:21To jest ogromna przewaga właśnie ustawiania tła w CSS-ie. Nad tym co

8:26moglibyśmy zrobić znaczniki img możemy ustawić cover contatin. W tej sytuacji

8:30grafika dopasowuje się do całej dostępnej dla nas przestrzeni.

8:33Różnica jest taka, że w wariancie cover dopuszczamy to, że ta grafika może być

8:39usunięta. Przyjęta tak jak mamy tutaj a w wariancie content będziemy mieli grafikę

8:44która dostosuje się wielkością w ten sposób że wypełni maksymalnie to miejsce w

8:48tym przypadku determinuje to miejsce wysokość. Zostanie przeskalowana w

8:52proporcjach tak aby do tej wysokości się dopasować.

8:55Czyli będzie to tak wyglądać to jak to zrobić zależy tylko. Wyłącznie od ciebie.

8:59Ewentualnie od specyfikacji jaką dostaniesz od dewelopera.

9:01W naszym przypadku skorzystamy z wariantu contain ale dla całego kontenera delivery

9:07zmienimy marginesy. Zamieniając je trochę na padding da nam miejsce w środku kontenera.

9:12Dzięki czemu grafika się powiększy.

9:14Gdybyśmy przykładowo dodali padding rzędu

9:17powiedzmy pięćdziesiąt pikseli od góry. Zobaczy jak to wygląda dodamy analogicznie pięćdziesiąt pikseli

9:22od dołu po to żeby grafika była w centrowana.

9:25Zmienimy ten margines tutaj już nie jest nam potrzebne sto trzydzieści.

9:28Gdybyśmy odeszli od tego pięćdziesiąt to będziemy mieli tego typu odstęp.

9:32Dokładnie tak jak było w projekcie. To sobie zostawiamy to co zostało nam na

9:36koniec to zadbanie o responsywność tego rozwiązania.

9:38Zobaczymy jak będzie się to skalować dla innych rozdzielczości. Tutaj jest ok.

9:42Rozdzielczości tabletowej również jest ok.

9:45Do tej większej super. Następnie mamy mobile landscape.

9:49Tu moglibyśmy już zastanowić się nad tym

9:51żeby tak po pierwsze zmienić trochę tę marginesy.

9:53Czyli w sekcji the delivery zobaczę już

9:55wielkość grafiki zaczęła definiować nie wysokość kontenera, a raczej jego szerokość.

10:00Więc teraz moglibyśmy to zmieniać w taki sposób że

10:04np. Niwelujemy ten margines powiedzmy do dwudziestu.

10:07Wygląda dużo lepiej, a jeśli chodzi o samą grafikę.

10:10Szczerze wydaje mi się, że moglibyśmy teraz ją ukryć.

10:13Nie usuwamy jej.

10:14To jest ważne ponieważ wtedy usunie ją ze

10:16wszystkich break pointów ale jeśli ukryjemy to zostanie ona ukryta.

10:20Tutaj i tutaj.

10:22Mamy wszystko dobrze zmniejszyły się nagłówki wygląda to naprawdę spoko na

10:25wszystkich responsywnych wersjach możemy w związku z tym przejść do kolejnej lekcji.