Strony WWW z SystemFlow: Komponenty Webflow

SystemFlow 1.0+

0:00Tej lekcji chciałbym wytłumaczyć Ci czym

0:01są komponenty w system flow, jak z nich korzystać.

0:03To jest taki podstawowy budulec tego, z czego będziemy korzystać.

0:07Będziemy używać rozmaitych komponentów czy to całych template ów tak jak tutaj, czy

0:11poszczególnych komponentów takich jak przyciski, nagłówki, drop down itd.

0:16Natomiast wszystko to, z czego będziemy

0:17korzystać jest domyślnie komponentem Web Flow.

0:20To znaczy, że ma taką zieloną ramkę i ma symbol komponentu.

0:24Wszystkie komponenty możemy podejrzeć tutaj.

0:27Wielu nazywa je też symbolami.

0:29Prawdopodobnie zmieni zaraz nazwę na

0:31komponenty i wszystkie te komponenty są dostępne.

0:34Natomiast ich podgląd nie jest tutaj zbyt

0:36wygodne, więc aby korzystać z takich komponentów i np.

0:39wstawić je na stronę główną.

0:40Tak jak wspomniałem wcześniej, najlepiej jest po prostu używać dokumentacji,

0:44poszukiwać w dokumentacji tych komponentów, które nam się przydadzą np.

0:48pricing i jak stwierdzimy, że chcemy takim

0:50pricing table umieścić, to po prostu klikamy na jego nazwę.

0:53Następnie wybieramy Command Command V,

0:56czyli wklejamy to co mamy w schowku i wybieramy pierwszy komponent dostępny.

1:01Ważne jest to, żeby nie mieć myszki gdzieś tutaj w tej okolicy.

1:04Jeśli np.

1:05będę miał myszkę tutaj wybiorę Command E i teraz Command V to zamiast to co wkleiłem

1:10czyli Basic 2 zostanie zaznaczony input Basic icon left bo to jest aktualnie pod

1:16myszką i jak wcisnę enter return to wtedy wstawi się nie ten symbol.

1:20Chodzi o ten symbol który jest w samej górze.

1:21Więc albo zjedź myszką z tego obszaru gdzieś na lewo czy na prawo,

1:25albo po prostu pamiętaj żeby wybrać pierwszy element z listy.

1:28I teraz to jest dokładnie ten pricing,

1:30który chciałbym z którego chciałbym skorzystać.

1:33No i teraz w tym pricing bloku mamy

1:36zieloną obwódkę informację o tym, że jest to komponent.

1:38Nie mamy żadnych warstw dostępnych.

1:40Jest on na zielono podświetlony w nawigatora.

1:43To znaczy, że ten komponent moglibyśmy edytować dopiero po wejściu do środka,

1:49czyli kliknięciu dwa razy albo kliknięciu na tą ikonkę z ołówkiem.

1:53I teraz jesteśmy wewnątrz instancji tego komponentu.

1:56Zmiany, które wykonamy tutaj, będą bezpośrednio wpływały na cały komponent i

2:02będą zmieniały nam też ten komponent w naszej dokumentacji.

2:05Po opublikowaniu, czyli jeśli edytuję

2:08komponent, wchodzę do środka i edytuję go tutaj i np.

2:11tzn. ten kawałek body tekstu, następnie usunę

2:14go stąd i teraz przejdę z powrotem do instancji.

2:17Oczywiście zniknął ten tekst stąd, ale gdybym chciał do tej samej strony dodać

2:22ten sam komponent Pricing Basic 2, to w tym komponencie również został usunięty.

2:28Więc alternatywna metoda do wykonywania takich zmian, które ja teraz cofnę,

2:33jest to, abyśmy wcześniej niszczyli powiązanie z takim master komponentem.

2:38Czyli prawym przyciskiem myszy klikamy w

2:40dowolnym miejscu na tą instancję komponentu i wybieramy polecenie and link

2:44instance czyli od linkow dajemy to z instancji.

2:47W tym momencie utraciliśmy powiązanie z

2:49tym głównym komponentem, więc zmiana którą wykonał bym polegająca na po prostu

2:54usunięciu tego tekstu nie dałaby nam rezultatu.

2:57W przypadku wklejenia jeszcze raz tego

2:59back pressingu, jakby nie dałaby nam rezultatu tutaj.

3:02On tutaj dalej jest, więc w zależności czy chcemy zmodyfikować komponent tak, aby

3:07wszystkie jego instancje w przyszłości zachowywały tą zmianę, którą zrobisz, czy

3:12też modyfikować tylko jeden konkretny element na swojej stronie.

3:16Będziesz albo robił to wewnątrz tego zielonego komponentu i nie od niego bywał,

3:20albo jeśli chcesz zrobić zmianę lokalnie w jednym miejscu, będziesz najpierw prawym

3:24przyciskiem od niego bywał, a później dopiero dokonywał zmian.

3:27I to jest jedna z najważniejszych rzeczy,

3:29jeśli chodzi o pracę z komponentami System flow.

3:31Na ogół trzeba je po prostu od linkować.

3:34I to jest taka metoda mojej pracy,

3:36że po tym, jak już umieszczę szereg komponentów na scenie, to po prostu

3:40wszystkie od linkow i mogę już z nimi wygodnie pracować.

3:44To, że od nich chowaliśmy taki komponent nie do końca oznacza i cofnę na chwilę to,

3:49żebyśmy jeszcze zobaczyli ten oryginalny pricing Meeting 2.

3:52Nie do końca.

3:52To oznacza, że wszystkie operacje, które wykonamy wewnątrz takiego od linkowane

3:57instancji nie będą miały wpływu na ten komponent.

4:01Oczywiście jest to związane z klasami CSS, których tutaj używamy.

4:05Przykładowo, jeśli klikniemy na nagłówek

4:09tutaj mamy hebel i on jest oznaczony jako Healing L, czyli jeśli wejdziemy do

4:13pressingu stąd go chcieliśmy, to też oczywiście jest klasa Helsing L.

4:17W związku z tym modyfikując tą klasę czy

4:19to tutaj czy tutaj, ona i tak będzie miała zastosowanie.

4:23Przykładowo, jeśli byśmy teraz weszli sobie do tej klasy healing L, to jest jej

4:27deklaracja, następnie zmienili kolor czy napisali kolor np.

4:32na kolor niebieski, no to zmieni się to też w master komponencie.

4:36Ale nie jest to już cecha tego, że ten

4:38element jest z nim powiązany na zasadzie instancji, bo nie jest.

4:42Jest to cecha tego, że edytujemy po prostu

4:44konkretną klasę having l, która to występuje też w tym komponencie.

4:50Dlatego właśnie podlinkowanie nie niesie

4:53ze sobą takich szerszych konsekwencji w kontekście frameworka.

4:56Na ogół od linkowanie jest potrzebne, bo chcemy po prostu zmienić.

5:00I zmienić teksty, jakieś elementy usunąć i

5:02nie będzie to wpływało na żadne inne rzeczy.

5:05Natomiast jeśli zmieniamy modyfikujemy klasę np.

5:08tak poważną klasę jak nasz kolor timer 60

5:11i decydujemy się wprowadzić tutaj zmiany, to naturalnie, ponieważ ten kolor Primary

5:1660 jest zastosowany i tu, i tu, i także tu, i tu i tu.

5:19Ono to zmieni się wszędzie, w całym naszym frameworku.

5:23Mam nadzieję teraz, że to rozumiesz i jeśli pracowałeś wcześniej z CSM to to

5:27jest taka naturalna konsekwencja tego, że stosujemy po prostu te same klasy.

5:31Można więc powiedzieć, że jeśli pracujemy na gotowych klasach i modyfikujemy rzeczy,

5:35które znajdują się w prawym panelu, czyli wszystkie właściwości CSS, to tak naprawdę

5:40będą one dziedziczone na przestrzeni komponentów.

5:42Nieważne, czy mamy podpiętą instancję, czy nie mamy podpiętej instancji.

5:46Natomiast to, że mamy podpiętą instancję i

5:48korzystamy z tego zielonego elementu zielonego komponentu

5:52determinuje nam to, że będziemy dokonywać w nim zmian, takich jak np.

5:56te zmiany w HTML u, czyli usunięcie

5:58jakiegoś kawałka treści, bądź też modyfikacja tej treści, zmiana tekstu.

6:03Te wszystkie zmiany będą istotne tylko

6:05wtedy, jeśli mamy komponent nie od linkowany.

6:08Istnieją też pewne wyjątki od tej reguły od linkowania, które polegają na tym, że

6:13szereg naszych komponentów ma przypisany tzw.

6:16override. Jeśli przykładowo skorzystałbym z

6:19przycisku, czyli wybierzmy zwykły button, to razem z tym betonem mam pewne

6:24możliwości jego konfiguracji bez konieczności podlinkowania go od symbolu.

6:29Takie linkowanie byłoby bezpieczne,

6:31ponieważ wewnątrz button u znajdują się klasy, więc jeśli ja zmodyfikował bym

6:36tę klasę to i tak wszystkie buttony mi się oczywiście zmienią.

6:38Czy są podlinkowane czy nie są

6:40podlinkowane, ale czasem nie muszę wykonywać tej dodatkowej akcji i jeśli

6:44przykładowo tylko chcę zmienić tekst na betonie np.

6:46na gołe, to mogę zrobić to z pomocą tak zwanego override.

6:50Szereg naszych komponentów ma przypisane override.

6:53Można je też znaleźć w tej zakładce Settings i tutaj.

6:55W override ach mamy np.

6:57wystawiony link, czyli możemy zmienić typ

6:59linku do jakiego kieruje ten przycisk i możemy zmienić jego tekst.

7:02Jeżeli chcielibyśmy ingerować głębiej we właściwości tego przycisku, oczywiście

7:06prawy przycisk myszy od linkował i możemy to robić.

7:09Tak jak wspomniałem,

7:11to że mamy od linkowany przycisk nie znaczy, że jak zmienimy inny przycisk on

7:15też się nie zmieni jeśli chodzi o kolory czy zaokrąglenie, dlatego że korzystamy

7:19tutaj ze spójnych class, czyli button medium.

7:21To jest taki drugi zawór bezpieczeństwa, którego używamy.

7:25Natomiast te podstawowe rzeczy są również dostępne w postaci over raidów.

7:29Jeszcze jeden przykład, który mogę tutaj wrzucić to avatar.

7:32Jeśli wybierzemy avatar np.

7:34taki, to zobacz, że mamy możliwość od razu, bez od linkowania, zmiany obrazka do

7:40tego avatara, a także przypisania innego tekstu np.

7:44John Doe.

7:45I mamy teksty 2 tablice i auto też możemy

7:49zmienić i nie musimy od linkować aby te rzeczy zmienić.

7:53Po prostu zrobiliśmy to tak, aby było szybciej i abyśmy mogli to robić.

7:57Override ani musieli każdego elementu od linkować.

8:00Teraz ostatnia rzecz, o której chciałbym powiedzieć Ci w tej lekcji.

8:03Jeśli przejdziesz do bardziej złożonych komponentów np.

8:06do bara, to okaże się, że taki nasz bar może zawierać tzw.

8:10needed components, czyli komponenty, które są zagnieżdżone jedna w drugiej.

8:14Mamy tutaj nasz Bar Lite 1 i to jest jeden

8:16komponent, ale gdy wejdę do niego do środka, okazuje się, że w środku posiada

8:21on jeszcze jeden komponent, czyli Brand Logo.

8:24I teraz jestem na Bar Lite 1, ale mogę

8:26wejść do edycji Brand Logo i tutaj edytować logo.

8:30Dlaczego to jest istotne?

8:31Dlatego, że w tym momencie mogę zmienić sobie logo na przestrzeni całego systemu,

8:36czyli wszędzie tam, gdzie ten komponent jest użyty.

8:38I tu akurat chciałbym skorzystać z wnętrza

8:41tego komponentu Brand Logo i nie od linkować go, a także nie korzystać z

8:46override, ponieważ override, który można zrobić na tym logo jest oczywiście

8:51możliwe, natomiast zrobił go tylko do tej konkretnej instancji.

8:55Tak działają override, że robimy je tylko

8:57do jednej instancji i logo nie zmieniło się w innych barach.

9:00Natomiast jeśli wejdę do środka i edytuję ten konkretny komponent,

9:05czyli przejdę do jego pola Image, a następnie to tutaj podmienię w środku logo

9:10na inną wersję, to zobaczę, że teraz zostało zmienione

9:13wszędzie w tym miejscu, tutaj we wszystkich barach, futrach.

9:17W związku z tym jest to fajna koncepcja, która pozwala nam mieszając komponenty

9:21uzyskać właśnie taki efekt, a w przypadku logo akurat nie moglibyśmy zrobić tego

9:26inaczej, ponieważ logo jest zwykłym obrazkiem.

9:29Nie jest np.

9:30poskładane w CSS tak aby dało się podmienić klasy.

9:32Więc tutaj należy właśnie posłużyć się koncepcją zagnieżdżonych komponentów.

9:36Jeśli nawet skorzystałbym z baru i od

9:39linkował ten nasz bar po to, żeby go zmienić, to nadal miałbyś w środku

9:43komponent z logo, którego nie warto zmieniać.

9:46Czyli nie warto go od linkować, bo on będzie trzymał referencję do dowolnego

9:50logo, które w każdej chwili możesz podmienić.

9:52To wszystko o komponentach oraz o ich od linkowaniu.

9:55Mam nadzieję, że to zapamiętałeś, bo to ważna lekcja o system flow.

9:58Do usłyszenia już za.