Webflow: Wycieczka po UI

Webflow 2020+

0:00Witaj w webflow. Jesteśmy na webflow.com w przeglądarce.

0:03Co istotne bo będziemy cały czas pracować w przeglądarce.

0:07Ja do tego wykorzystuję chrome.

0:08Testowałem w zasadzie wszystkie nowoczesne

0:10przeglądarki w kontekście pracy z webflow bo chciałem zobaczyć w której pracuje się

0:14najszybciej najbardziej wydajnie i jeśli masz w miarę dobry komputer albo

0:18mocnego laptopa polecam Ci Chroma ewentualnie safari na Maca.

0:23Pozostałe przeglądarki potrafiły płata figle i działały zdecydowanie wolniej.

0:27A ponieważ jest to środowisko

0:29natywno-przeglądarkowe nowe i nie ma aplikacji którą instaluje się

0:32np.Na Windowsa czy na Maka dedykowanej

0:35webflow. No to warto jest wybrać tą przeglądarkę która po prostu da nam

0:39najwięcej swobody i najwięcej możliwości jeśli chodzi o webflow.

0:42Dla mnie jest to chrome, a w chromie będziemy cały czas pracować.

0:45Mam nadzieję że już udało ci się

0:46zarejestrować na stronie webflow i możesz teraz przejść do swojego dasboardu.

0:50Jest to bardzo prosta strona gdzie możemy

0:52utworzyć sobie nowy projekt albo zarządzać istniejącymi projektami.

0:55Posprzątałem bałagan który był tutaj jednym z moich kont i umieścił programy w tzw.

1:00folderze stashu.

1:01A jeśli wybierzesz małą ikonkę folderu

1:03będziesz mógł zorganizować sobie w ten sposób swoje projekty.

1:06Często będziesz miał na jednym koncie

1:08bardzo dużo projektów zwłaszcza jeżeli zamierzasz oferować swoje usługi klientom

1:11i chciałem powiedzieć ci że webflow jest do tego świetnie przystosowane.

1:15Po pierwsze możemy rzeczywiście tworzyć jakieś katalogi, foldery.

1:18Możemy też tworzyć zespoły jeśli pracujesz z inną osobą która pomaga ci

1:23edytować i tworzyć strony w kontekście prac dla klientów.

1:26Sami klienci będą mieli też widok edytora który pozwoli im z poziomu przeglądarki po

1:31prostu zmieniać jakieś linki teksty i wprowadzać proste poprawki.

1:34Nie będziesz musiał do tego tworzyć jakiegoś zespołu i dołączać klienta do

1:38zespołu po prostu udostępnić mu link do edytora.

1:40Ale o tym jeszcze sobie porozmawiamy.

1:42Pewnie niezbyt szczegółowo w tym kursie natomiast te wszystkie opcje są i chcę

1:46żebyś wiedział że z tego poziomu możesz nawet bilować możesz nawet pobierać opłaty

1:51co miesiąc dla swoich klientów i jest tutaj bardzo rozbudowane.

1:55Zatem nasz dasboard jest miejscem dla wszystkich swoich projektów oprócz tego webflow

1:58oferuje zakładki showcase szukaj gdzie możesz podejrzeć i zainspirować się jakimiś

2:01ciekawymi stronami wykonanymi we webflow repozytorium designerów z którymi być może

2:05będziesz chciał współpracować lub zobaczyć ich pracę.

2:08Zasoby do nauki tego jest sporo, a oprócz tego jeszcze resource czyli jakieś tam

2:13templates, blogi i forum na którym warto się zarejestrować i sekcję support.

2:17Gdybyś miał jakiś problem z samym działaniem webflow to wejdź na support.

2:21Oferują świetny support mailowy również można z nimi porozmawiać bardzo

2:25sprawnie to działa i zdecydowanie jeden z lepszych raportów z jakich korzystałem.

2:29Pod sekcją notyfikacji znajdziesz nodyfikację do twoich projektów.

2:32A jeżeli chciałbyś zobaczyć co nowego

2:34wydarzyło się w webflow zerknij w sekcji update będą też wyskakać jako pop-upy.

2:40W momencie gdy będziesz logować się, a zostanie w międzyczasie coś zmienione

2:44w ustawieniach konta jest wiele rzeczy dość intuicyjne.

2:48Możesz też zażądać stamtąd planem w

2:50związku z tym my przechodzimy wprost do praktyki i tworzymy nowy projekt .

2:55Webflow nie ma interfejsu polskiego ale może to

2:56nawet lepiej wybieramy ikonkę New Project teraz możemy utworzyć albo nowy pusty

3:00projekt albo taki który bazuje na jakimś szablonie.

3:03Tutaj są takie genetyczne trzy szablony ale poniżej znajdują się nowe dodane

3:08szablony do sklepu jakie szablony i e-commerce, agencji możesz przeglądać sobie

3:12rozmaite szablony z poziomu których możesz zacząć.

3:15Gdybyś chciał zobaczyć wszystkie wybierz

3:16polecenie view all albo pójść do resoures i templates da się też kupować szablony.

3:20Niektóre są płatne, a niektóre są darmowe.

3:22Gdybyś miał jakieś szablony kupione one też pojawią się tutaj jako perc - templates.

3:26My tymczasem wybieramy po prostu black site czyli tworzymy nowy czysty projekt i

3:31wpisujemy jego nazwę juice, a następnie wybieramy polecenie create project.

3:36W momencie gdy taki projekt jest stworzony my przeniesiemy się do widoku designera.

3:41Dlaczego mówimy o tym designer,

3:43a nie edytor dlatego że edytor to we flocie coś innego.

3:46Jeśli kliknięcie na ikonkę w lewym górnym rogu

3:48będziesz mógł wrócić do swojego dashboardu.

3:50Będziesz mógł edytować właściwości

3:53ustawienia projektu albo przejść do edytora.

3:55Edytor pozwala na zmianę zawartości strony

3:58bezpośrednio w przeglądarce nawet można dopisać jeden parametr do adresu URL i

4:04wtedy poza autoryzowaniu można właśnie zmieniać

4:07np. treści czy linki.

4:08Może to robić twój klient możesz to robić

4:10bezpośrednio w Ty przeglądarce i to jest właśnie edytor.

4:13Natomiast to gdzie my będziemy tworzyć stronę to jest designer i teraz chciałem

4:18zrobić takie krótkie over designera po to żeby się czuć trochę

4:21bardziej komfortowo w tym interfejsie i wiedział mniej więcej gdzie to jest

4:24natomiast nie będę szczegółowo tych wszystkich funkcji omawiał dlatego że

4:27lepiej zdecydowanie jest to zrobić w praktyce.

4:29A ten kurs jest bardzo praktyczny więc

4:32tutaj znajduje się powrót do wyboru i do ustawień projektu Project settings.

4:35To ważna rzecz z którą będziemy pracowali w kolejnej lekcji.

4:38Następnie mamy szereg narzędzi z ikonki plusa możesz wybrać po pierwsze

4:42elementy są to wszystkie HTML - owe elementy typu listy bloki akapit paragrafy.

4:48Stąd po prostu przerzucamy elementy na obszar canvasu i na naszą stronę.

4:53To jest najważniejsza sekcja która pozwala nam dodawać rozmaite elementy HTML - owe.

4:57Mamy też pewne predefiniowane layouty.

5:00Jest więcej niż jednego elementu przykładowo jakaś sekcja hero.

5:03No i w końcu symbole to coś czego możemy używać wiele razy.

5:07Przykładowo jeśli przycisk z przycisku stworzymy symbol

5:10wtedy będziemy mogli używać go wiele razy jak zmienimy go w symbolach.

5:13Wtedy zmieni się wszędzie.

5:14Taką koncepcję prawdopodobnie pamiętasz

5:17np. z kursów graficznych jeśli robiłeś kurs xd co jest dobrym pomysłem bo tam tworzyliśmy

5:22projekt dla strony którą teraz będziemy webflow kodować.

5:25To tam też były symbole one nazywały się

5:28komponenty i to jest dokładnie ta sama konstrukcja.

5:30Następnie nawigator czyli panel warstw można powiedzieć HTML też ma warstwy takie

5:36jak ogry mają warstwy , tak jak grafika ma warstwę którą stworzyliśmy w Adobe xd.

5:40I tu nawigatorze będziesz miał po prostu sekwencje od góry do dołu znaczników

5:45HTML - owych czyli wszystkie listy i wszystkie akapity wszystko się będzie znajdowało.

5:50Ja pokażę ci jak z pomocą tego nawigatora można łatwo się poruszać po całym

5:54projekcie będziemy z niego sporo korzystać.

5:56W końcu strony my będziemy tworzyli stronę

5:58typu onepage czyli w zasadzie będzie ona miała tylko jedną podstronę która będzie

6:03bardzo długa i będziemy ją mogli skrollować.

6:06Natomiast w tym miejscu możesz zdefiniować sobie nowe strony.

6:09Gdybyś chciał stworzyć stronę kontaktową,

6:11stronę o nas, stronę jakąś jeszcze inną to właśnie tutaj możemy tę stronę definiować.

6:16Dodatkowo są tutaj jakieś się adresy czyli

6:19np. utility pages strona 404 domyślna, a w momencie gdy ktoś

6:21pisze adres który nie istnieje lub też strona z hasłem tutaj definiujemy

6:25strony ustawiamy ich właściwości i o tym jeszcze też mówimy później.

6:28Później sekcja CMS pozwala nam tworzyć tzw.

6:31kolekcje Webflow nie musi być statycznym edytorem stron. W tym kursie porozmawiamy

6:36głównie o statecznych stronach ale jego rozszerzenie będzie zawierało informacje o

6:40tym jak stworzyć stronę blogową tam będziemy pracować właśnie na kolekcjach

6:45CMS które pozwolą nam dynamicznie dodawać posty korzystać z takiej bazy danych która

6:50będzie działała na zapleczu naszej witryny i umożliwi dodawanie

6:54np. właśnie postów w jakimś określonym schematem.

6:57To jednak temat trochę zbyt zaawansowany

6:59jak na ten materiał podstawowy ale pamiętajmy że kolekcje tutaj są podobnie

7:03jak system e-commerce w którym możesz przekształcić swoją stronę Webflow

7:07posiada cały moduł e-commerce który pozwoli ci dodawać produkty połączyć je z

7:11systemem płatności i sprzedawać . Dostarczać dla klientów wysyłać

7:14powiadomienia mailowe i wszystko co związane z prowadzeniem sklepu.

7:18Możesz każdy projekt przekształcić w

7:20projekt e-commerce albo skorzystać z gotowego szablonu.

7:22Właśnie ta opcja i e-commerce pojawią się tutaj.

7:25Kolejna biblioteka mediów, assetów możesz na

7:28webflow w zasadzie w dowolne miejsce na interfejs przerzucić sobie jakieś grafiki

7:31i one wtedy znajdą się w tej bibliotece, a setów będziemy z niej korzystać będziemy

7:36uploadować assety zarządzać nimi i przeciągać , upuszczać obrazki na interfejs naszej strony.

7:40W końcu settings sekcja ustawień tyle że nie są to

7:43te same ustawienia które znajdziesz w

7:47górnym menu, a zawierają jedno niesamowicie istotną rzecz czyli

7:51tzw. backupy i mało kto o tym wie ale w dowolnym

7:55momencie w webflow możemy zapisać backup naszej strony.

7:58Wystarczy wcisnąć kombinację klawiszy

8:00Command Shift S czyli tak jak zapisywanie ale docisnąć jeszcze Shift chociaż

8:04webflow na bieżąco zapisuje cały czas postępy naszej pracy.

8:07To my możemy stworzyć tzw.

8:08snapshoot jest zapisany jako backup

8:11i możemy tego zrobić wtedy kiedy nie jesteśmy pewni czy to co zaraz zrobimy

8:15przypadkiem nie popsuje czegoś albo jakoś mocno modyfikujemy

8:19którąś z wersji naszej strony i chcemy zostawić sobie jakąś furtkę żeby

8:23można było wrócić łatwo do poprzedniej wersji.

8:25Po to właśnie jest backup jest to genialne

8:27pozwoli nam zapisać dokładnie tę sekundę stan naszej strony i do tego stanu

8:32będziemy mogli zawsze wrócić więc jeśli jeszcze raz klikniesz panel w

8:35w którym się teraz znajdujesz to on po prostu zostanie zawinięty.

8:38Dodatkowo mamy tutaj informacje o tym na

8:40jakiej stronie się znajdujemy co szybko kieruje nas do sekcji pages.

8:44Możemy operować na różnych stronach wtedy one będą się pojawiały na zakładkach

8:48ikonkę z oczkiem pozwoli nam włączyć podgląd

8:51tzw. Preview czyli zobaczyć jak nasza strona będzie wyglądać w przeglądarce.

8:55Ten pogląd przydaje się wtedy zwłaszcza kiedy

8:58np. zrobimy jakieś animacje w webflow.

9:00One nie będą odtwarzać się w widoku designerów ale jeśli klikniesz na ikonkę

9:03oczkiem to zasługujemy to jakby ta strona wygląda w przeglądarce.

9:07Ten tryb ma taki super minimalny widok też

9:09gdy klikniemy na tą małą ikonkę gdzie w zasadzie nie ma żadnego interfejsu.

9:13OK wróćmy do designera.

9:15Tu znajdują się wersje responsywne z naszej strony.

9:17Webflow posiada wbudowane kilka responsywnych wersji w dół my będziemy mogli też

9:22dodawać responsywne wersje w górę dzięki czemu będziemy mogli zdefiniować jak nasze

9:27elementy będą zachowywać się w różnych rozmiarach okna przeglądarki.

9:30O tym jeszcze oczywiście porozmawiamy,

9:33a wyjściowym dla nas widokiem jest ten widok z gwiazdką.

9:35I to jest właśnie ten base break point czyli break point desktopowy.

9:39O tym jeszcze w kolejnych lekcjach tutaj

9:41możemy cofać i przywracać poprzednie operacje.

9:44Tutaj widzimy wszystkie zmiany zostały

9:46zapisane tak jak powiedziałem automatycznie wszystko się zapisuje stąd

9:49możemy eksportować kod źródłowy czyli po prostu zapisać sobie cały

9:55HTML, CSS, JavaScript który jest naszą stroną i później możemy sobie

9:58np. umieścić na swoim własnym hostingu.

10:00Swoim własnym serwerze kolejna ikonka

10:02pozwala nam podzielić się z kimś tym projektem czyli wysłać link do niego albo

10:06zaprosić osoby które będą z nami współpracowały.

10:09No i w końcu ikonkę publish pozwala albo opublikować naszą stronę pod jakąś

10:14domeną na serwerach webflow albo wpiąć naszą własną domenę w sekcjach

10:18zaawansowanych i wtedy ta strona nasza będzie działać pod naszą własną domeną

10:22wtedy musielibyśmy mieć wykupiony hosting od webflow.

10:25Jeśli mamy swój własny hosting nie chcemy

10:27kupować od webflow to możemy tą stronę pobrać za pomocą tego eksport kod pobrać sobie

10:32cały zip z całym naszym kodem i umieścić na serwerze.

10:35Takie rozwiązanie ma jedną wadę mianowicie nie będziemy mogli później za importować

10:40go z powrotem do webflow i dokonywać zmian hosting od webflow jest

10:44całkiem rozsądny . Zdecydowanie warto go mieć wtedy

10:48kiedy zamierzamy naszą stronę przez wiele wiele np.

10:50lat utrzymywać i zmieniać ją tutaj w edytorze kolejno prawa szpalta ona

10:54dopasowuje się do tego co mamy zaznaczone więc na razie tutaj nic niewiele widać ale

10:59jeśli kliknę na główny element naszej strony czyli na element body to zobaczysz

11:03że w sekcji stylów mamy wszystkie ustawienia bardzo zaawansowane.

11:07Tych wszystkich elementów na których

11:08pracujemy czyli przykładowo marginesy, paddingi, wielkość fontów.

11:12Następnie kolejna zakładka też jest dynamiczna i w zależności od różnych

11:16komponentów które zaznaczyły będzie zawierała inne dane.

11:19W przypadku generycznych znaczników takich

11:20jak body pozwala nam ustawić tutaj przykładowo jakieś własne atrybuty kolejno

11:25mamy menadżer stylów tutaj będziemy mogli zarządzać stylami i wyczyścić je.

11:29Zobaczcie sobie wszystkie style CSS które stworzyliśmy.

11:32No i w końcu sekcja interakcji pozwoli nam

11:35ona zarządzać animacji na naszej stronie i interakcjami.

11:38W momencie gdy użytkownik np.

11:39na coś najedzie na co kliknie będziemy mogli tutaj tworzyć nawet bardzo złożone animacje.

11:45Po lewej stronie na dole znajdują się

11:46opcje widoku te opcje widoku będę pokazywał ci przez cały czas trwania kursu.

11:50Na razie nie ma się co na nich koncentrować ponieważ niezbyt wiele będzie

11:53widać w momencie gdy żadnych elementów nie mamy.

11:56I w końcu na dole znajduje się struktura

11:58naszych elementów po których możemy też przechodzić tak jak bread crumbs.

12:01Teraz mamy tylko jeden element body, a będzie tutaj tych elementów zdecydowanie

12:04więcej wtedy będzie cała ścieżka do elementu który mamy aktualnie zaznaczone.

12:08I to jeśli chodzi o wprowadzenie wszystko

12:11teraz przeniesiemy się do ustawień projektu czyli klikamy na lewy górny róg i

12:15wejdę sobie w Project settings I mówimy te ustawienia w kolejnej lekcji.