Webflow: Wariant responsywny zakładek

Webflow 2020+

0:00Witaj w kolejnej selekcji.

0:01Kontynuujemy

0:02zabawę z tabami. Ten tab pane będzie zawierał wszystkie elementy

0:06pierwszego slajdu więc zrobimy sobie Div-a block który po prostu rzucę wybierzmy block.

0:12Formatujemy go tym kolorem różowym łososiowym.

0:17W ten sposób, że jako background wrzucimy ten

0:20kolor. Zaokrąglamy te narożniki. Do dwunastu. Przerzucimy do tego dwa akapit tekstu

0:27czyli, "A" teraz wybierzemy paragraf i wrzucimy tekst.

0:33Szerokość tego elementu może ustaw maksymalnie na pięćset pikseli.

0:38Mamy tutaj przenieść się do DiV blocka pięćset pikseli max

0:43weight.

0:45Dodatkowo potrzebny będzie padding rzędu trzydzieści piksel.

0:48Już sprawdziłem to na projekcie.

0:50Musimy jeszcze zmienić ten tekst to jest dm sans dwadzieścia cztery, trzydzieści siedem, tu mamy biały kolor czyli dwadzieścia cztery wielkość.

0:59Trzydzieści siedem interlinia, a kolor wybierzemy biały ok.

1:05Wydaje mi się, że symbol trzeba też zmienić na normal. Super.

1:09Można powiedzieć, że mamy jakieś, a zrobiłem to na paragraf.

1:13Wydaje mi się że lepiej by było zrobić to

1:14na tym DiV blocku jednak jak to tak formatujemy, że tutaj zmienimy bold na normal.

1:20Można powiedzieć, że mamy jakieś wyjściowy tab możemy chwilowo nazwać go tab jako klasę.

1:25Będziemy z niej korzystali też na potrzeby innych tabów.

1:27Na razie jednak przejdźmy do samego ten tap pane. Spróbujmy zwiększyć na nim padding.

1:32Dlaczego.

1:33Po to żeby rozsunąć te elementy od siebie mniej więcej takich mamy w projekcie.

1:36Przypominam, że tutaj się musi zmieścić jeszcze jakiś obrazek.

1:39Właśnie ten obrazek powinniśmy teraz dodać.

1:41Czyli wybieram "A" następnie rzucę sobie image.

1:44Dodam go jako obraz w HTML-u tak będzie

1:46prościej. Wgrałem tutaj już table i keyboard.

1:50Wybierzmy sobie teraz table.

1:52Możemy pozycjonować go na różne sposoby najprostszy chyba jest to

1:57wykorzystanie ujemnych marginesów. Przesunięcie marginesu w ten sposób a

2:01także nasunięcie stolika.

2:05Tutaj moglibyśmy też to zrobić pozycjonowania absolutnym i kreatywnym.

2:09Wydaje mi się, że teraz jest całkiem w porządku teraz drugi tap powinien

2:14wyglądać w ten sposób może skopiuje od razu kolor wypełnienia.

2:18Będziemy tutaj przerzucać różne elementy więc moim zdaniem chyba

2:23najlepiej byłoby na całe tabs czy na cały tabs content który zawiera taby

2:29ustawić stałą szerokość może być szerokość

2:32np. sześćset pięćdziesiąt pikseli ok.

2:35Później to jeszcze może dostosujemy ale generalnie. Teraz mamy pewność, że nic nam

2:39się nie przesuwa i taby zostaną w tym samym miejscu, a my możemy skopiować sobie wkleić

2:43po prostu ten tap który mieliśmy ten sobie usunę, a ten command "C" and "V" . Kleimy jako tab pane dwa.

2:51Teraz właśnie przesuwając jeśli przejdziemy do tego tabu oczywiście muszę

2:55dodać do niego jakąś combo klasę czyli tab second.

2:58Mogę to zrobić no to teraz przesuwając

3:00przykładowo nawet dając ujemny margines za, że nic nam nie lata. Wszystko zostaje w

3:05tym samym miejscu co było czyli przesuńmy to tutaj.

3:07To samo jeśli chodzi o obrazek.

3:09Dla niego też będę musiał być alternatywną

3:11klasę możemy zrobić najpierw klasę tab image.

3:14Teraz tab image second bo też będę chciał go przesunąć.

3:20Najpierw jednak zmienię ten obrazek replaces

3:22włączy sobie tutaj cabord. Teraz przesune go w

3:27to miejsce do góry. Oczywiście możemy to zrobić trochę dokładniej.

3:31Zgodnie z designem ale myślę, że najważniejsze jest żeby pokazać

3:35jak to powinno być zrobione koncepcyjne, a tu jeszcze do tego naszego Taba second.

3:41będę mógł zmienić kolor tła i teraz chyba jest już wszystko ok teraz na całe taby

3:46mogę jeszcze dodać jakiś ekstra margines żeby to rozsunąć, a jednocześnie żeby też

3:52później nie skakało mi się poglądzie. Zobaczymy jak to wygląda.

3:55Wygląda dobrze taby sie zmieniają dokładnie tak jak chcieliśmy, a my możemy tych tabów

4:00teraz jeszcze zrobić trochę więcej czyli skopiować sobie tab target wrzucić go

4:05jeszcze dwa razy. Skopiować treści. Mamy education.

4:12Później wklejmy goverment.

4:16Business indiviuals.

4:23No i świetnie

4:25powinno wszystko ładnie działać. Trzeba będą się teraz zmieniać te zakładki.

4:29Ostatnia rzecz która została do zrobienia to warianty responsywne.

4:32Przejdźmy do rozdzielczości tabletowej.

4:34Po pierwsze już tutaj możemy ukryć

4:37obrazki czyli tab image i ten tab bo przypominam, że mamy dwa

4:41taby więc musimy oba obrazki ukryć. W ogóle warto pamiętać, że musimy się

4:44przełączać pomiędzy jednym i drugim żeby podejrzeć jak to wygląda.

4:48Same taby chciałbym zostawić tak jak chcą czyli

4:50po lewej i prawej stronie natomiast z tabs menu.

4:53Zobaczmy tutaj.

4:55Ok. Tab z menu nie istotne ale

4:58ustawienie jeśli chodzi o tab content będziemy musieli zmienić także szerokość

5:03sześćset pięćdziesiąt mogę już teraz zmienić przykładowo na sto procent.

5:06To oczywiście nie pomoże bo dalej na poszczególnych tabach są ustawione max

5:12weight. Max weight też zmienię tutaj na sto procent.

5:15Jeśli zmienie na tym tabie powinna zmienić się też na tym. Natomiast dalej mamy

5:21ustawione paddingi które trzeba wyzerować. Ok. Czyli na tym. Na tym też jest wyzerowane.

5:28Tutaj z kolei przesunęli się z ujemnym

5:29marginesem więc też trzeba to wyzerować. Teraz powinno już wszystko być ok czyli

5:33pierwszy panel , drugi panel chcieliśmy trochę wartości wyzerować. Po prostu

5:38rozciągnąć to na sto procent żeby było w porządku.

5:41Teraz jest ok.

5:43Myślę, że tak mogłoby to zostać. W wariancie mobilnym

5:47chciałbym za to umieścić teraz na górze menu, a na dole treść.

5:52Czyli jeśli mamy tutaj flex-boxa to można to bardzo łatwo zrobić zmieniając

5:56direction na wersji vertical jeszcze z tabs-menu w wyśrodkować.

6:00To też jest flex - box na szczęście więc mogę to bardzo łatwo w wyśrodkować.

6:04Jeśli chodzi o ten margines który jest na górze to zmieńmy go

6:09zmniejszymy znacznie ten margines ale za to chciałbym ustawić mały margines

6:14pod tabs menu żeby trochę rozdzielić z samą treścią.

6:19Teraz wydaje mi się, że jest w porządku.

6:21Zobaczmy pierwszy tap. Drugi tap jest ok.

6:24Na wersji mobilnej też powinno być wszystko w porządku.

6:28Myślę, że możemy to tak zostawić.

6:30Podejrzyjmy to teraz całość jak się prezentuje od tej wersji mobilnej

6:34spróbujmy to zmienić działa przez wersję tabletową aż do wersji desktopowej.

6:40Na tabletowej też ładnie działa moglibyśmy tam wrzucić ewentualnie jakieś większe

6:46paddingi czy większy margines ale wydaje mi się, że jest ok.

6:50Może tak zostać.

6:51Naturalnie możesz to na wszystkie sposoby jakie chcesz dopracować.

6:55Po co zmieniać. Ustawić tę wersję jest reponsywne trochę inaczej.

6:58Ja zostawię to w ten sposób.

6:59W kolejnej lekcji zajmiemy się następnymi sekcjami.

7:02Do usłyszenia.