Webflow: Czym są symbole

Webflow 2020+

0:00W Adobe xd . Z tego przycisku które robiliśmy wcześniej stworzyliśmy komponent

0:04znajduje się on w sekcji komponentów możemy prawym przyciskiem kliknąć na taki

0:07komponent, a następnie wybrać polecenie edit master komponent.

0:11Teraz przechodzimy do tej deklaracji master komponentu która

0:15dodatkowo ma coś takiego jak stany. Stan to oczywiście na razie default ale

0:20możemy przełączyć się na stan hover czyli najechaniu. Disabled, a także outline.

0:25Czy z tego typu komponentów i stanów możemy korzystać też w webflow.

0:29Przejdźmy do webflow i zastanówmy się

0:30wspólnie nad odpowiedzią na to pytanie ponieważ tak , nie.

0:34To zależy przede wszystkim możemy tworzyć symbole.

0:37Jeśli przejdziemy do " A " add następnie

0:40przejdziemy do zakładki symbols. Możemy w tym momencie utworzyć nowy symbol.

0:44Element musi być zaznaczony nowy symbol

0:46możemy też łatwo stworzyć klikając prawym przyciskiem myszy na elemencie, a następnie

0:50wybierając polecenie jako create a symbol albo command shift " A ".

0:53A teraz jeśli stworzymy sobie nowy symbol

0:56i nazwiemy go przykładowo button Big czyli dokładnie tak jak zrobiliśmy to w

1:01bibliotece adobe xd. Mamy nowy symbol jesteśmy teraz w jego trybie edycji.

1:06Symbolizuje to wyszarzone tło i tabelka na

1:08dole która mówi, że edytujemy właśnie master symbol.

1:11Możemy z tego trybu edycji wyjść wciskając done albo po prostu escape.

1:15Jeśli chcemy do niego wrócić zawsze możemy

1:17np. dwa razy kliknąć na ten element. Jesteśmy z powrotem w trybie edycji.

1:21Jeśli wybiorę escape zaznacze ten element

1:23to zobaczysz, że już nie mam tutaj właściwości dotyczących stylów ale w

1:28ustawieniach w drugiej zakładce mam informację o tym, że jest to symbol.

1:33Gdybym chciał to edytować to muszę kliknąć

1:36np. tą małą ikonkę

1:37edycji dopiero teraz wchodzimy do edycji master symbolu czyli tego głównego

1:43komponentu działa to podobnie jak w adobe xd.

1:45Natomiast pytanie czy zawsze jest tutaj sens robić symbole.

1:49Zastanówmy się co my tak naprawdę nadpisujemy w przycisku . Na pierwszy

1:53rzut oka w zasadzie my wpisujemy tylko tekst.

1:55W związku z tym w zasadzie może nie ma sensu robić symbolu tylko wystarczy Command 'C",

1:59Command "V" kopiować co można w ten sposób nawet między różnymi stronami webflow

2:03kopiować rozmaite rzeczy. Klikać dwa razy i zmieniać tekst może być szybciej niż

2:07tworzyć ten cały symbol i się tym zajmować.

2:09Ale z drugiej strony jak sobie na to

2:11pomyślimy to tak naprawdę button ma też swoje jakieś preferencje czyli ten trybik i

2:15przykładowo jest to URL pod którą on kieruje.

2:18No ten URL też byśmy chcieli zmieniać.

2:21Jak zastanowimy się nad tym, że sporo różnych tego typu rzeczy chcemy zmieniać.

2:25No to może jest pierwszy powód do tego żeby zacząć robić symbole.

2:29Drugi powód jest taki że jeśli przejdziemy do zakładki symbols. Możemy mieć teraz

2:33bardzo wygodnie dostać się do tego przycisku w dowolnym miejscu i po prostu

2:37go przeciągnąć i wrzucić jego instancje w dowolne miejsce nie musimy szukać go

2:42gdzieś i kopiować wklejać wejście do edycji przycisku jest też możliwe.

2:45Czyli symbolu po dwukrotnym kliknięciu i

2:47teraz jeżeli wejdę do środka i przykładowo będę chciał coś edytować czy chciał coś

2:51dopisać to zobaczy że mam efekt dość niepożądany ponieważ wszystkie przyciski

2:54zmieniają swój tekst, a tak naprawdę chciałbym zachować ten tekst edytowalny one

2:58tylko w jednej wersji przycisku to jest oczywiście moc symboli.

3:02Jeśli zmienimy coś w masterze to wszystkie te symbole zostaną zaktualizowane i tego

3:06nie możemy dostać na przykład z pomocą klasy CSS.

3:09Zakładając że nie robili byśmy symbolu, a zostawilibyśmy samą klasę która już tutaj jest

3:13czyli button big moglibyśmy bardzo łatwo np.

3:15zmienić kolor czy tło ale nie moglibyśmy zmienić tekstu.

3:19Przeniesiemy się teraz do zakładki settings i to właśnie tutaj znajdują się ustawienia

3:23które pozwolą nam nadpisywać rozmaite rzeczy w symbolach.

3:26Będziemy jeszcze o tym sporo rozmawiać

3:28ponieważ głównie te overight będą dotyczyć przynajmniej te które są tutaj na

3:32górze będą dotyczyć tego co znajduje się wewnątrz w środku w butonie nic nie mamy w

3:36środku nic nie jest zagnieżdżone więc nie będziemy dodawać tzw.

3:39overight field.

3:40Mogę to sobie zminimalizować natomiast button settings

3:44czyli ustawienia przycisku jednym z tych ustawień jest tekst jeżeli chcę dodać

3:49możliwość zmiany tego tekstu to klikamy na to małą purpurową ikonkę i wybieram

3:54polecenie czy fioletową i over right field.

3:56Teraz będzie to tekst ok.

3:59Wybieram polecenie create over right field.

4:02I w tym momencie stworzyliśmy sobie zależność która pozwala nam na edycję

4:07tekstu na instancjach bez zmiany tekstu w masterze.

4:11Jeżeli skopiujemy przycisk i wklejmy go obok to już będzie instancja.

4:15To teraz wystarczy że ją zaznaczyły i nie musimy nawet przechodzić do jego

4:19właściwości tylko wszystkie te over righty mamy dostępne w tym miejscu.

4:24Pozwolę sobie zamknąć ten sam samouczek bo już nie będzie nam potrzebny.

4:26A my możemy tutaj wpisać

4:28np. jakiś dowolny inny tekst i zobaczyć że nie jest on napisany.

4:32I rzeczywiście mógłbyś powiedzieć że ok ale przecież mogliśmy to zrobić w ogóle

4:35przed chwilą nie musieliśmy tworzyć tych całych symboli.

4:38Rzeczywiście w przypadku

4:40przycisku może i tak mogłoby być natomiast tak jak powiedziałem.

4:45Dużą zaletą jest to że możemy dostać się teraz do tego naszego szablonu .

4:49Przycisku z pomocą symboli nawet na dowolnej podstronie którą stworzyliśmy.

4:52Dodatkowo jeżeli zdecydowaliśmy się na dokonanie w tym głównym przycisku zmiany

4:57innej niż zmiana stylistyczne taka która by

5:00została odziedziczona przez tą klasę która jest

5:01przycisku czyli przykładowo dodali byśmy tutaj jakiś element jak ikonkę

5:05np. obok no to wtedy musielibyśmy ją dodawać we wszystkich przyciskach, a skoro mamy

5:09symbol automatycznie zostałoby to odziedziczone.

5:12Pozostałe instancje.

5:14Natomiast mamy tutaj jeden problem.

5:15Mianowicie taki że w opcjach mamy możliwość zmiany tylko i wyłącznie tekstu.

5:20Możemy napisać tylko i wyłącznie tekst, a oczywiście przyciski.

5:23Powinny mieć również zmienialne linki czyli miejsca do których prowadzą więc wejdziemy

5:27jeszcze raz do Master komponentu - Master przycisku.

5:31I tak przy okazji jeżeli chcesz łatwo

5:32znaleźć Master element to możesz na dowolnej jego instancji wybrać polecenie.

5:40Wybrać polecenie Edit symbol czyli to na dole i automatycznie zostaniesz

5:44przeniesiony do edycji tego Master komponentu.

5:47No i to co potrzebujemy dodać jako pole nadpisywania czyli over right to pole link w

5:53tym polu link znajdują się type, url, i te wszystkie rzeczy które potrzebujemy

5:57klikamy na ikonkę wybieramy polecenie New over Right field zostawiamy nazwę link z porządku.

6:01Teraz już dodaliśmy te kolejne ustawienia czyli teraz jeśli klikne nawet na dowolnej instancji.

6:06Zobaczy że mogę zmienić typ linku czy to jest zewnętrzna strona

6:10czy będziemy kierowani na jakąś naszą podstronę serwisu czy

6:15np. to będzie link do maila itd. więc to wszystko mogę tutaj ustawić.

6:18Więc w ten sposób stworzyliśmy nasz

6:20pierwszy bardzo prosty symbol i starałem się też wytłumaczyć Ci pewną koncepcję.

6:24Czy zawsze tutaj tworzyć symbole.

6:26Jeżeli jesteśmy w stanie coś obsłużyć tylko i wyłącznie klasą CSS to może lepiej

6:30zostawmy tę klasę i nie musimy tworzyć symbolu.

6:33Z drugiej strony jeśli wiemy że będziemy wykorzystywać to często

6:36np. na podstronach no to lepiej tego nie szukać i

6:38po prostu mieć w panelu w palecie symboli.

6:40Jeśli będziemy zastanawiać się jaka jest różnica w polach między narzędziem

6:43graficznym a tutaj to pamiętaj że tutaj mamy też klasy w narzędziu graficznym tego

6:47nie ma więc czasem można dużo zmian tych stylistycznych dotyczących wyglądu

6:51załatwić właśnie klasą i nie trzeba koniecznie tworzyć symbolu.

6:55Symbole w webflow lub będziemy tworzyli

6:56zazwyczaj dla trochę większych struktur

6:59np. Ten caption i heading jest dobrym pomysłem

7:01na to żeby stworzyć z tego symbol ponieważ będziemy mogli określić, że są to

7:06rzeczy które możemy nadpisywać łatwo z pomocą over rightów.

7:09Ale z drugiej strony będziemy mieli Master

7:11i gdybyśmy chcieli tam coś zmienić dodać grafikę czy cokolwiek będzie to dla nas

7:14przerobimy to na kolejnych przykładach.

7:17Natomiast jedna rzecz też istotna teraz

7:19gdybyśmy chcieli hero header zrobić z niego symbol command shift "A" .

7:23Webflow to powie nam, że niestety nie możemy ponieważ nie ma przynajmniej jeszcze na razie funkcji

7:27która nam pozwala zamknąć jeden symbol w drugim w przeciwieństwie do narzędzi

7:31graficznych tam możemy zagnieżdżać komponenty adobe xd na przykład.

7:35Tutaj nie możemy tego zrobić więc też proszę mieli to na uwadze w kolejnej

7:38lekcji stworzymy trochę bardziej złożony symbol bo będziemy zajmować się nawigacją.

7:42Do usłyszenia.