Webflow: Wariant po najechaniu

Webflow 2020+

0:00Witaj w kolejnej lekcji gdzie pracujemy dalej nad submenu.

0:02Teraz naszym zadaniem jest tworzenie stanu hover.

0:05Jednak zanim to zrobimy chce wprowadzić jedną ważną koncepcję.

0:08Jeżeli oglądałeś kurs adobe xd to wiesz, że

0:11robiliśmy komponenty w trakcie projektowania ale jednocześnie ich wersję

0:15Master zawsze wyrzucaliśmy na jeden dodatkowy artboard.

0:19Poza naszym layoutem nazwaliśmy go komponents.

0:22I tutaj wszystkie mastery są dzięki temu możemy bardzo łatwo wyedytować sobie te

0:27komponenty i będą one zmieniać się w całym naszym designie, podobną strukturę.

0:32Zdecydowanie warto zachować w przypadku webflow i ogólnie tworzenia stron internetowych.

0:36Więc stworzymy sobie osobną stronę wybieramy page klikam.

0:41Na page home i dodaje nową stronę click new page którą nazwiemy style quide.

0:46Nawet dla małych stron warto to robić dla dużych.

0:48Będziemy mieli taki style quide który będzie

0:50ewoluował w kierunku pewnie jakiegoś design systemu ale to oczywiście nie jest

0:54materiał na ten kurs natomiast my teraz tworzymy nową podstronę.

0:57Zostawiam wszystkie inne ustawienia bez

0:59zmian wybieram polecenie create i mamy nasz style quide.

1:03Teraz na style quide z pomocą "A" będziemy mogli przejść do symboli i przykładowo dodać tutaj submenu block.

1:07Dzięki temu bardzo łatwo wyłapać teraz te

1:09symbole i po prostu je edytować tutaj one będą się zmieniać

1:13na naszej stronie. Więc przechodzę do submenu

1:15block i będę potrzebował dodać do niego stan hover.

1:19Natomiast zanim dodamy do niego stan hover.

1:21zobaczmy jak on w ogóle powinien wyglądać.

1:23Okazuje się, że w tym stanie hover musimy zmienić kolory, a także musimy zmienić

1:28kolor tła i dodatkowo dochodzi tutaj pewien margines.

1:31Nie chcemy jednak żeby ten komponent nam skakał.

1:33Jeśli chodzi o margines dopiero jak najedziemy żeby ten margines się robił w

1:37związku z tym margines trzeba zadać już tutaj.

1:41Na tym etapie dla całego tego elementu i zobaczmy w ogóle ile ten margines wynosi.

1:44Jeśli zaznacza środek tutaj chyba

1:47z każdej strony jest inny ale powinniśmy zrobić zdecydowanie taki sam.

1:51Więc proponuję go zrobić na czternaście pikseli więc dla samego submenu block.

1:55Przejdźmy do sekcji padding i ustawmy z shiftem dla niego

1:59padding na czternaście pikseli.

2:01To trochę pozmienia jeśli chodzi o układ tego elementu czyli zmieniliśmy to

2:07globalnie, a teraz jeśli przeniesiemy się na stronę zatwierdzimy tę zmianę przez done

2:11albo escape. Następnie przeniesiemy się na główną stronę czyli do home.

2:16No i zobaczmy jak po rozwinięciu nawigacji jest dropdowna. Zachowa się ten element.

2:21Okazuje się że te odstępy teraz nam się powiększyły.

2:24czternaście, czternaście, czternaście, czternaście.

2:26W związku z tym trzeba będzie przejść raz

2:28jeszcze tę dropdown listy i przejść do edycji tego elementu.

2:33Submenu contener korzystamy z grida i teraz trzeba będzie kliknąć na edit grid

2:39i zamiast czterdziestu będziemy musieli odjąć od tych czterdzieści margines które mamy dwa

2:44razy szesnaście to trzydzieści dwa i teraz jedna magiczna rzecz w webflow lub włączy sobie kłódkę.

2:48I jak macie czterdzieści to możecie wpisać minus trzydzieści dwa,

2:52a będziemy mieli dobry wynik czyli osiem pikseli.

2:55W zasadzie w każdym polu możecie stosować

2:56operacje matematyczne czyli stosować minus.

2:58Plus, mnożenie, dzielenie.

3:00I to wszystko będzie działać w przypadku

3:02projektowania strony gdzie ciągle coś liczymy.

3:04Ciągle oblicza jakieś marginesy.

3:06No to jest naprawdę live silver także

3:09zmieniłem odstępy i teraz są dokładnie takie jakie mieliśmy wcześniej aczkolwiek

3:14na samej dropdown liście też musimy zmienić te paddingi bo one były ustawione na dwadzieścia cztery.

3:20My potrzebujemy teraz zmniejszyć o

3:22odpowiednio szesnaście pikseli, a dwadzieścia cztery minus szesnaście możemy to przeliczyć w tym

3:27polu z tym że problem będzie taki, że będzie to dotyczyło tylko jednej wartości

3:32więc teraz musielibyśmy albo wpisać osiem w tych wszystkich

3:36pozostałych polach albo musielibyśmy to z shiftem zmniejszyć ale ok.

3:42Jesteśmy w punkcie wyjścia gdzie mamy dobry margines ustawiane.

3:45Wracamy do style quide i kontynuujemy pracę

3:47ze stanem hover przechodzimy dwa razy klikamy do wnętrza. Przechodzimy do hover.

3:51Stylujemy hover chcemy oscylować w taki sposób aby background kolor się zmienił

3:57na nasz kolor granatowy. Ja muszę siąść skopiować. Stąd go skopiujemy .

4:01Wrzucimy tutaj teraz jeszcze jak pasowałby kolor tekstu zmienić na biały i

4:05to najlepiej na tym elemencie bo to w jego stanie hover jesteśmy.

4:08Problem w tym, że to nie działa.

4:10To znaczy te dwa teksty nie zmieniają się na kolor biały.

4:12Dlaczego ten sektor nie będzie dość specyficzny.

4:15I tutaj mamy trafiamy rzeczywiście na małą

4:18ścianę dlatego że jeśli przejdziemy teraz do heading.

4:22No to moglibyśmy dla niego w stanie hover zmienić ten kolor na kolor biały no ale

4:27nie do końca nam o to chodzi bo nam nie chodzi o to żeby dopiero po najechaniu

4:31tutaj się zmieniał ten tekst. Tylko już po najechaniu na cały ten komponent.

4:36Cofamy tę zmianę.

4:37Co możemy zrobić wejdziemy do tego submenu i

4:39zobaczmy jak jest skonstruowany ten heading. No jak widzisz ma na niebiesko tą

4:43właściwość czyli on został nadpisany tu została stworzona klasa która nadpisała nam

4:48domyślnie te wszystkie linki więc to co możemy zrobić to zresetować.

4:52Na razie. Przynajmniej ten kolor zobacz, że

4:55chodzi nam tylko o reset koloru bo size, weight itd. nam zostanie.

4:59Zresetowaliśmy wyłącznie kolor i teraz jest to dziedziczone z tagu.

5:03Tag będzie zawsze mniej specyficzne niż

5:05klasa którą wrócimy na przykład na submenu block.

5:08Jeśli dodamy do niej teraz pseudo klase hover i zmienimy kolor tekstu na kolor biały.

5:12rzeczywiście na software będzie to działać.

5:14Musielibyśmy to samo zrobić dla submenu tekst jeśli chodzi o submenu tekst.

5:19Ono też ma kolor ustawiony. O taki właśnie.

5:22Natomiast my rejestrując go

5:25musimy to że rzeczywiście on teraz z wszystkich linków jest znowu dziedziczony

5:29więc musimy to, że taka zmiana będzie go dotyczyła.

5:33I dlaczego w ogóle nam taka operacja się udała.

5:35Po pierwsze dlatego że mieliśmy szczęście, a po drugie dlatego że byliśmy nie staranni.

5:39Dlaczego. Bo tekst który jest ustawiony tutaj w designie

5:43powinien mieć jednak kolor inny czyli kolor szary.

5:46No i nie możemy w związku z tym tego

5:49zrobić tak że z resetujemy i będziemy liczyć na to że dziedziczone z wszystkich

5:52linków kolor jakimś cudem będzie taki dokładnie jak chcemy.

5:55Bo w tym komponecie konkretnym zmieni submenu tekst

5:59ma mieć kolor inny ma mieć kolor #a5a5a5 czyli kolor szary.

6:03W takiej sytuacji klasa którą tutaj mamy zawsze jest bardziej specyficzna.

6:09Ten kolor jest napisany w tym sektorze

6:11klasy i będzie bardziej specyficzny niż to co rzucimy się na submenu block czyli tę

6:17samą jak w hierarchii klasę w stanie hover.

6:20Więc nic tutaj nie pomoże.

6:22Teraz to że zmieniliśmy kolor na biały bo cały czas będziemy mieli kolor szary w tym

6:27stanie hover no bo rzeczywiście specyficzna klasa nadpisuje. To jest bardzo

6:31ważne żeby zrozumieć że webflow. Nie da nam kontroli nad wszystkim.

6:36Nie możemy niestety dopisać tutaj sobie

6:38np. w kolor i że on ma być ważny czyli important.

6:42Zresztą nie jest to znów elegancka technika. Webflow nie pozwoli nam tego zrobić.

6:46Co w związku z tym zrobić w takiej bardzo specyficznej sytuacji i rzeczywiście taka

6:50sytuacja wynika z tego że po pierwsze mamy jeden duży element który jest linkiem,

6:56Po drugie mamy stan hover który edytujemy,

7:00po trzecie z tego stanu hover chcemy

7:01zmienić kolor który w innej klasie jest nadpisany. Bardzo bardzo specyficzne to nie

7:06znaczy że na takie specyficzne rzeczy nie trafimy projektując nawet proste strony.

7:10Dlatego chcę was uczulić na to że nauka HTML jest konieczna.

7:15HTML nie jest trudny. CSS nie jest trudny. Ale jest to konieczne do tego żeby

7:20skutecznie się nie zakopać w tego typu projektach.

7:23Dlaczego. Bo teraz jednym z dobrych rozwiązań.

7:26Oczywiście moglibyśmy np.

7:27nie wiem podmieniać cały ten submenu block na hover i zrobić drugi komponent który

7:32jest zupełnie inny. Po prostu zamieniać je ustawiać display none, a drugiemu ustawiać true .

7:38W momencie gdy tam najedziemy.

7:39No ale to jest generowanie dodatkowego kodu to co można było zrobić.

7:41To przejść do sekcji ustawień czyli wejdę do Project

7:48settings . Możemy w webflow zawsze zrobić coś takiego jak wstawić tutaj custom code.

7:52Czyli swój własny kod dodany do sekcji head dokumentu.

7:56Czyli możemy właśnie posłużyć się

7:59znacznikiem still dodać still i stworzyć nasze własne style.

8:04Czyli w środku będziemy potrzebowali

8:07najpierw selector content. Selektor wziąć oczywiście z naszego projektu.

8:11Jeśli zerkniesz na to jak wygląda w tym momencie

8:13selektor to jest to submenu block. Webflow zawsze robi tak że zmienia duże litery na

8:18małe, a tam gdzie mamy spacji pauzę wstawia myślniki.

8:21Zresztą jestem w stanie to udowodnić.

8:23Możemy kliknąć na tę ikonkę żeby przejść do trybu podglądu. Wejść sobie inspect i

8:28zobaczyć z pomocą w tym trybie inspekcji jak ten webflow nadaje nazwę tym naszym klasom.

8:33Czyli przykładowo tutaj mamy ten cały element "A" i on ma klasę submenu.

8:38Myślnik block. No i spoko.

8:41To znaczy, że właśnie taką klasę powinniśmy zaadresować zresztą stąd możemy też nauczyć

8:45się dużo więcej bo możemy od filtrować po stanie hover.

8:48Kliknąć, że chcemy zobaczyć jaki jest stan hover i czy rzeczywiście.

8:52Ten stan hover to jest dokładnie ta klasa o którą nam chodzi submenu block hover i

8:58ten kolor tyle, że on niestety nie ma właściwości important.

9:02On nie jest odziedziczony. Tu bo jest nadpisany z kolei przez tą klasę która nazywa się submenu myślnik tekst

9:09tak nazwaliśmy tyle że zrobił webflow. Zrobił myślnik, małe litery

9:13czyli możemy to zaznaczyć submenu tekst ma ten kolor szary. Prawda.

9:17I teraz gdybyśmy chcieli to nadpisać. Tutaj to co robimy.

9:21Najpierw idziemy do klasy submenu block.

9:24Następnie musimy upewnić się, że jesteśmy w jej stanie hover

9:29i teraz przykładowo żeby już nie robić

9:31tych important które nie są eleganckie możemy wejść do środka i zaznaczyć tą

9:36klasę submenu tekst. U pewnie się że mam tu jedną kropkę.

9:39I tu możemy zmienić kolor.

9:42Proste rozwiązanie, a powinno zadziałać

9:44kolor i zmieniamy na nawet w ten sposób na biały.

9:48Teraz zapisujemy te zmiany

9:50i zmiany które wprowadzić w tej sekcji custom code nie będą niestety widoczne

9:56przynajmniej na razie webflow tego nie ma że nie są one widoczne tutaj.

10:00Nie mam tych zmian widocznych.

10:02Czy to znaczy że nie zostało wprowadzone

10:04zostały ale trzeba taką stronę opublikować.

10:07Wybieramy tę ikonkę publish i w ten

10:10sposób publikujemy nasz projekt pod domeną webflow.

10:12Wybieramy polecenie publish select domen.

10:15Na razie nie chcę omawiać tu dodatkowych rzeczy jeszcze się na tym skupimy później

10:18ale po prostu zaznacz tą opcję gdzie masz sudomenę webflow.

10:22Kliknij Publish i teraz możesz kliknąć

10:24na tę małą ikonkę po to żeby w nowej karcie zobaczyć jak to wygląda.

10:28Teraz po przejechaniu zobaczysz że kolor jest biały.

10:31To z kolei znaczy że kod który wprowadziliśmy w sekcji head działa

10:34i teraz można powiedzieć, że już musieliśmy trochę zrobić to dookoła.

10:38Ale z drugiej strony spójrz na to w ten

10:40sposób w HTML u i tak musielibyśmy to zrobić.

10:42Ja celowo chciałem Ci pokazać jeden z edge case'ów być może w Twoich projektach.

10:46Nie będziesz miał zbyt dużo czy wcale tego typu sytuacji ale jednak warto zaadresować.

10:52Ja wiele razy musiałem coś zmieniać webflow i daje nam taką możliwość.

10:55Zobacz, że pomimo tego całego edytora który

10:58tutaj mamy można trafić na coś czego nie ma ale zawsze możemy to zrobić mając

11:03świadomość tego jak to działa pod spodem ponieważ webflow daje nam możliwość

11:06wstrzyknięcia kodu w sekcje head całej strony. Także nauczyliśmy się tutaj myślę czegoś

11:11bardzo ważnego nawet jeśli to dla ciebie jest na razie za trudne to po prostu

11:15zostaw ten domyślny zresetowany kolor granatowy i przejdź z tym dalej.

11:19Ważne że gdzieś tam w twojej głowie otworzyła się nowe możliwości i świadomość

11:23tego co możemy zrobić dzięki webflow. To wszystko w tej lekcji.

11:26Do usłyszenia już za chwilę.