Webflow: Stany przycisków

Webflow 2020+

0:00Zanim przejdziemy do stworzenia menu trzeba jeszcze zająć się różnymi stanami przycisku.

0:03Jeśli wejdę w edycję tego przycisku to możesz teraz przejść do

0:07sektora, a następnie kliknąć małą strzałke i zaadresować.

0:10Różne warianty tego przycisku.

0:12Przykładowo wariant hover który teraz się przełącze.

0:14Jestem stylach w edycji tego wariantu hover.

0:16Przejdźmy do adobe xd i hover state.

0:19Wygląda tu trochę inaczej ponieważ po prostu zmienia się kolor tła, a teraz

0:23kopiuje sobie wartość szesnastkową stąd i wrzuce nową wartość na kolor tła.

0:28W ten prosty sposób adresowaliśmy stan hover gdybym teraz chciał to podejrzeć klikamy

0:33mały ikonkę, a następnie na już ten stan hover nam działa.

0:36Jeśli wejdziemy do edycji przycisku okaże

0:38się że jednak poza tym mamy te stany pressed, focused i visited.

0:42Czyli w momencie gdy ktoś kliknął ale nie

0:44puścił lewy przycisk myszy focused oraz tryb visited. Dla odwiedzonego przycisku no i

0:49one nie odpowiadają do końca temu co zaprojektowaliśmy sobie tutaj.

0:52Bo tu mamy po prostu inne warianty tego przycisku czyli disabled albo oraz outline.

0:57No i teraz czy możemy takie dowolne stany tworzyć dla komponentów webflow.

1:03Otóż nie. Nie możemy.

1:04Trzeba by było po prostu stworzyć nowe komponenty więc tak to trzeba będzie

1:08rozegrać możemy skopiować i wklej przycisk. Teraz to jest instancja istniejącego

1:13komponentu więc prawym przyciskiem myszy należy ją odpiąć mamy możliwość wybrać

1:18polecenie link from symbol po to żeby to był znowu normalny przycisk.

1:23Teraz znowu normalny przycisk należy oscylować.

1:26Tak jak mamy tutaj czyli w tym konkretnym

1:28przypadku kolor wypełnienia zmienimy na kolor szary.

1:32I to powinno wystarczyć.

1:34Przejdźmy do tego przycisku zaznaczam go i teraz command enter dodaje sobie nową combo

1:39klasę gdzie w ramach tej combo klasy zmienia kolor tła na kolor szary.

1:44Muszę pamiętać też o tym żeby usunąć cień. Nie będzie on tutaj potrzebny.

1:48Osiągnąłem dzięki temu jeszcze jeden efekt że dodałem tutaj combo classe gdybym

1:52pozostał w klasie buton big to musiałbym zadresować stan hover który tam wcześniej

1:56zrobiłem, a tak tego stanu hover nie ma. on będzie dotyczył teraz buton big, disabled i

2:01dopiero hover więc nie ma tutaj żadnego stanu hover. Zostawiam tak jak jest i to

2:05jest w porządku mogę wcisnąć command shift "A" po to żeby stworzyć nowy symbol.

2:09Będzie to buton disabled.

2:12Ok teraz jeszcze zaznaczam tekst aby dało się go edytować jako over right jak również

2:17link też możemy go edytować jako over right.

2:19No i mamy znów porządnie przygotowany kolejny symbol.

2:22Ostatni wariant przycisku również będzie na bazie buton big więc kopiuje, wkleje.

2:26Teraz znów przejdę do tego. Upewnie się, że odłączona jest ta instancja.

2:31Tak sam taki sam skrót jak tworzenie

2:33symbolu czyli command shift "A". Do odłączenia następnie przejdę do

2:37ustawień i upewnij się, że tutaj dodam nową klasę czy tworzę combo klase

2:42Command enter nazwa tej klasy to outline.

2:45Zobaczmy jak wygląda ona w projekcie.

2:48Mamy tutaj border dwa piksele i kolor tego bordera skopiuje.

2:52Natomiast tło jest przezroczyste i kolor tekstu też jest granatowy.

2:57Czyli przejdźmy tutaj. Musimy usunąć

3:01box shadow musimy dodać border, teraz border nadajemy na wszystkich krawędzie.

3:05Czyli ta opcja jest zaznaczona.

3:07Grubość tego bordera to będzie dwa, a kolor zamiast black piszemy nasz kod szesnatkowy.

3:12Enter.

3:13Moglibyśmy też wpisać go bezpośrednio tutaj.

3:15Jedna rzecz która może cię zdziwić.

3:17Najpierw wyłącze tło czyli przejdźmy do background.

3:22Tutaj jest ustawione granatowe tło, a jak możemy je wyłączyć możemy po prostu

3:26ustawić jako przez uroczystość na zero, alfa na zero.

3:29Ale kolor tekstu jest biały.

3:31No i teraz może to cię dziwić dlatego, że

3:33tutaj kolor tekstu jest przecież granatowy.

3:36Natomiast sam buton dziedziczy trzech selektorów.

3:38Zobaczmy te selektory.

3:40Okazuje się że poza tymi które stworzyliśmy dziedziczy on body i to jest

3:45body ale też dziedziczy z linków ponieważ nie jest to to co wyświetla się na guziku.

3:50To nie jest typowy tekst tylko jest to link i on właśnie z tych linków jeszcze

3:56dziedziczy biały kolor tekstu natomiast webflow jest na tyle sprytny, że jeśli my tutaj

4:03podamy ten właściwy kolor który chcemy mieć,

4:06a w zasadzie trzeba go jakoś tak zmienić.

4:09Może stąd i teraz zmienić w ten sposób.

4:12To w tym momencie zostanie on nadpisany do naszej klasy outline.

4:16Więc jest w porządku.

4:18Teraz możemy już tak przygotowany przycisk.

4:20Command shift "A" zamknąć nowy komponent buton big outline.

4:27Create symbol . Mamy trzy symbole tych dwóch możemy się pozbyć.

4:30Nie będziemy z nich na razie korzystać ale

4:32pamiętaj że po wciśnięciu, "A" przejściu do symbols będą one się znajdowały.

4:36Będziemy mogli w dowolnym momencie użyć tych przycisków.

4:39Na koniec chciałem Ci jeszcze pokazać

4:40skróty klawiaturowe których będziemy sporo używać w webflow. Dopiero poznaliśmy

4:44kilka podstawowych jeżeli wciśniesz Shift i "?" czyli znak zapytania

4:49prostu to zobaczysz całą listę skrótów klawiaturowych.

4:51Warto się z nimi zapoznać.

4:53Ja będę oczywiście też

4:54w miarę postępów w twojej pracy pokazywał ci nowe, a tym którego chciałbym żebyśmy

4:59nauczyli się teraz to jest. Preview mode czyli command shift "P".

5:02Jeżeli robimy już różne stany

5:05np. stany hover i tak dalej to warto zapamiętać command shift "P".

5:09To jest podgląd tak jak w przeglądarce i

5:11zobaczy teraz po najechaniu możemy sobie łatwo. Ten podgląd zobaczyć.

5:15To jest dokładnie to samo co ikonkę oczka

5:17ale zdecydowanie lepiej posługiwać się skrótem.

5:19No i jeszcze jedno jeśli chodzi o widok zauważ że w przeglądarce nasza strona

5:23wygląda trochę inaczej czyli wszystko wyświetla się jakby wyżej.

5:27Wygląda na to że po prostu zjadło ten

5:29kontent ponieważ ten kontent jest pustą sekcją.

5:32Rzeczywiście przeglądarka w ten sposób go wyrenderuje.

5:34Jeżeli chcielibyśmy webflow osiągnąć ten sam tryb podglądu to jest on dostępny.

5:40Z pomocą tej małej ikonki high empty elements. Jeśli ukryjemy puste elementy.

5:43Wszystko będzie wyglądało dokładnie tak

5:45jak na poglądzie w tym momencie tyle, że będzie trudno z poziomu canvasu

5:48zaznaczyć te elementy będziemy musieli zrobić to z poziomu

5:52np. nawigatora. My sobie to włączymy i zapamiętamy skrót o

5:54którym powiedziałem command shift " P ". Dzięki czemu będziemy mogli łatwo

5:57podejrzeć tak jakby było to w przeglądarce.

6:00To wszystko na teraz. Dziękuję Ci za uwagę

6:01w tej lekcji a w kolejny już naprawdę robimy menu.