Webflow: Praca ze Styleguide

0:00Witaj w kolejnej lekcji, w której mam zaimportowaną gotową strukturę produktów.

0:04Polecam ci teraz z plików źródłowych pobrać sobie plik CSV, a następnie wybrać

0:08polecenie Import i zaimportować te produkty, które ja mam,

0:11tak żebyś nie musiał tworzyć swoich własnych.

0:13Automatycznie zostaną dla ciebie

0:16zaimportowane również kategorie, do których zaraz przejdziemy,

0:19różne kolory, warianty, które przygotowałem, a także zdjęcia, które wgrałem dla tych

0:25rozmaitych produktów tak, że będziemy mieli na czym pracować. Mamy rzeczywiste dane.

0:29W kategoriach chciałbym zrobić jeszcze jedną rzecz. Automatycznie wgrały się te kategorie,

0:33które są potrzebne, które zostały dodane do produktów pliku CSV. Aczkolwiek ty będziesz

0:38musiał usunąć te domyślne kategorie, które się tutaj znalazły, czyli przejść sobie do

0:41kategorii tych domyślnych, które były, i wybrać dla każdej Delete.

0:45Natomiast jeśli chodzi o te, które

0:47stworzyliśmy, to chciałbym jeszcze w ustawieniach kategorii dodać jedno custom

0:51field, jedno customowe pole. Będzie to pole typu Plain text i nazwę je Description.

0:56Chciałbym, żeby każda kategoria miała

0:58dodatkowo Description, bo będziemy wyświetlać je u nas na stronie.

1:01Zaznaczam tutaj jeszcze Multiple line. Będzie

1:03to dłuższy tekst i zapisuję. I teraz możemy wejść w każdą...

1:07(zapiszmy te zmiany) z pojedynczych kategorii, a następnie dodać do niej Description.

1:13Ja tutaj dodam sobie taki przykładowy opis, przykładowy Description. Później

1:17będziemy go może modyfikować dla każdej kategorii,

1:20na razie po prostu jakieś przykładowe dane. Więc tutaj mamy New, kategorię, która jest

1:26dodawana razem z innymi kategoriami, żeby oznaczyć produkty, które zostały

1:30nowo dodane do naszego sklepu. I można powiedzieć, że całą strukturę mamy w tym

1:35momencie gotową. Jeśli chodzi o zniżki i zamówienia,

1:37o tym pomówimy sobie jeszcze trochę później. Natomiast teraz mogę już

1:41zamknąć moduł e-commerce i przejść do strony ze Styleguidem.

1:45To jest pierwsza strona, którą albo

1:47tworzymy, jeżeli mamy gotowy layout - pokazywałem ci to w kursie zaawansowanym Webflow, albo

1:52dostosowujemy ją w momencie, gdy korzystamy z jakiegoś szablonu,

1:55tak jak teraz. Chciałbym dostosować teraz

1:58właśnie Styleguide, jeśli chodzi o kolory, rozmiary tekstu, itd.,

2:01na bazie projektu, który mamy w Figmie. Tutaj znajdują się odpowiednie nagłówki,

2:06akapity i wszystkie te rzeczy będziemy chcieli skopiować,

2:10jeśli chodzi o właściwości takie jak rozmiar tekstu, jak interlinia i kolory.

2:15W związku z tym przechodzimy teraz do

2:17Styleguide'u i wprowadzamy tutaj odpowiednie modyfikacje.

2:21Pierwsza rzecz, którą się zajmiemy, to typografia.

2:23W związku z tym musimy najpierw dodać własne fonty, które chcemy wykorzystać w

2:27projekcie, a więc wybieramy Project Settings.

2:30Przechodzimy teraz do zakładki Fonts.

2:32W tym miejscu możemy wybrać Google Font, który dodamy. To już robiliśmy wcześniej.

2:36Ja dodam sobie tutaj właśnie jeszcze jeden font z Google'a, czyli DM Sans.

2:40Gdybyś nie korzystał z Adobe Fonts, to możesz też dodać DM Serif i

2:45korzystać z tego fontu jako fontu szeryfowego, a tego jako bezszeryfowego. My go

2:50użyjemy. DM Sans w wariancie 500 i 700. Wyłączę opcję Latin, bo będziemy pracowali w języku

2:56angielskim. I teraz te fonty zostały dodane,

2:58czyli jeden krój w różnych odmianach.

3:00A teraz będę chciał jeszcze dodać fonty z Adobe Fonts. Żeby to zrobić,

3:04przechodzę do Adobe Fonts, jeśli oczywiście

3:06mam dostęp, a następnie szukam sobie fonta, który mi odpowiada.

3:09Będzie to Kazimir Text

3:11w moim przypadku. W pierwszej kolejności

3:13aktywuję sobie ten front na koncie Adobe. To sprawi, że zostanie on pobrany też lokalnie

3:19w mojej aplikacji Adobe Creative Cloud do rozmaitych aplikacji, m.in. Figma czy Adobe XD,

3:24w których będę mógł używać tego fonta lokalnie podczas projektowania,

3:28ale z drugiej strony będę chciał teraz przekazać ten font i zainstalować go w

3:32projekcie webowym na Webflow, więc wybieram polecenie Add to Web Project.

3:36Teraz będziemy musieli stworzyć sobie lub

3:38wybrać istniejący projekt. Wybieram polecenie Create a new

3:42project i nazwę go po prostu tym fontem, czyli Kazimir.

3:46Będziemy potrzebować Regular, nie potrzebujemy Italic, więc wybierzemy Regular, Medium

3:51i jeśli chodzi o Bold, to zaznaczymy Italic, a także KazimirText 2.

3:57Tutaj zaznaczymy Book i Book Italic nie będzie nam potrzebne.

4:01Wybieram polecenie Create i w tym momencie projekt został utworzony.

4:04Mogę dodać go na stronę z pomocą takiego customowego kodu.

4:07Moglibyśmy dodać go, co prawda, w sekcji Custom code w Webflow, ale tutaj działa to na

4:11trochę innej zasadzie. Mianowicie klikamy w ten link po to, żeby pójść do Adobe Fonts account

4:16page, czyli do strony naszego konta i wygenerować tzw.

4:20nowy API token. Ten API token będziemy

4:23musieli po prostu skopiować, a następnie wkleić

4:25tutaj. Możemy także przejść do zakładki integracji naszego konta.

4:30I tutaj w integracjach Account Settings dla całego Webflow

4:34możemy po prostu dodać Adobe Fonts API token.

4:37W ten sposób nie będziemy musieli go dodawać w każdym kolejnym projekcie.

4:40Wybieramy polecenie Save token i będziemy musieli trochę poczekać, aż

4:45zmiany zostaną zapisane finalnie, aczkolwiek mamy już dostęp do wszystkich

4:49tych kolekcji, z których możemy teraz wybrać Kazimir, a następnie zapisać

4:53zmiany i teraz ten font został dołączony do naszej strony.

4:57Możemy przejść z powrotem do Designer

4:59i już za chwilę ten font Kazimir, zarówno

5:02Kazimir, jak i DM Sans - przejdźmy jeszcze raz do Styleguide'u -

5:06będzie dostępny do wyboru

5:08z rozwijanej listy fontów.

5:10Zobacz, że DM Sans jest już dostępny i kazimirtext,

5:14i text-2 także są dostępne, więc wybieram kazimirtext dla nagłówka.

5:19Pozostałe opcje ustawiam tutaj bez zmian.

5:20Tak się składa, że w projekcie, który mam przygotowany w Figmie, te rozmiary są akurat

5:24identyczne, czyli rozmiar i interlinia. Jak również wybierzmy ten paragraf.

5:30Tutaj także zostawię te właściwości poza tym, że zmienię font z Montserrat na DM Sans.

5:35No i zobacz, jak jest przygotowany fajnie

5:38ten szablon. On tutaj ma po pierwsze klasę Paragraph Bigger, a później jeszcze nałożoną

5:43jakąś combo klasę Light i wszystkie klasy paragrafów znajdują się tutaj.

5:47Zobacz, że mają one takie różne kolory, można by było przypuszczać. Aczkolwiek tak

5:52naprawdę nie są to kolory, tylko są to różne warianty Opacity.

5:56Na przykład tutaj mamy 60%

5:59Opacity, w tym będziemy mieli 100%,

6:01w tym też 100%,

6:02a w tym mamy akurat 60% również,

6:05czyli możemy z pomocą Opacity teraz manipulować tym, jak jest to

6:10wyświetlane. A dzięki temu, że mamy nałożone Opacity będzie też trochę mieszać się to

6:15z kolorem, który znajduje się pod spodem. Czyli przykładowo,

6:18gdybyśmy teraz skorzystali z tego koloru, który jest w naszym projekcie w Figmie i

6:24wrzucili go na Div Block, który znajduje się pod spodem,

6:28tutaj dodam jego wartość szesnastkową, to zobacz, że ten tekst zupełnie nabiera trochę

6:32innego wyrazu, on prześwituje ten kolor pod spodem i wygląda to dużo fajniej w layoucie.

6:38My dla tego podstawowego tekstu jednak ustawimy Opacity około

6:4280%

6:44tego CC Bigger Light.

6:46Natomiast też fajne jest to, że gdybyśmy teraz

6:48odkliknęli się przykładowo z wszystkich tych klas, a następnie wybrali coś takiego

6:53jak Body (All Pages) i teraz spróbowali modyfikować ten kolor, np.

6:58tutaj, to zobacz, że takie podejście automatycznie pozwala nam

7:03zdefiniować kolor dla wszystkich nagłówków i dla wszystkich akapitów, a

7:08dodatkowo dzięki temu, że mają one

7:10nałożoną Alphę, no to jeszcze są w tych odmianach jaśniejszych i ciemniejszych.

7:15W zasadzie modyfikacja jednego koloru powoduje, że wszystkie te

7:20akapity, a także teksty treści na naszej stronie się zmieniają.

7:23Zatem teraz dla Body (All Pages) po prostu zmienimy kolor i tym sposobem zmienimy

7:28kolory wszystkich treści, które się tutaj znajdują, również w Rich Text elemencie, itd.

7:33Bardzo fajnie przygotowany szablon właśnie pod tym kątem, czyli modyfikujemy Body (All Pages),

7:37jeśli chodzi o kolor, ale nie tylko, ponieważ chcemy też zmienić

7:42font i zmienimy wyjściowy font na font DM Sans. Moglibyśmy zmienić go na

7:46nasz font Kazimir, aczkolwiek tutaj Kazimir będziemy wykorzystywać tylko w nagłówkach,

7:52więc zmieniamy dla Body (All Pages)

7:54sam font. Zostawiamy jednak jego rozmiar i wszystkie inne ustawienia

7:58bez zmian, czyli rozmiar 16, wysokość interlinii

8:0028. Teraz możemy przejść do poszczególnych elementów.

8:03Mamy tutaj nagłówki od 1 do 6 oraz ich jakieś specjalne wersje z różnymi klasami.

8:08Na przykład ten Heading Jumbo nie będzie nam

8:10potrzebny, więc mogę usunąć tę klasę, jak również usunąć sam Text Block.

8:14Natomiast te może nam się jeszcze

8:15przydadzą, zostawmy, ale najpierw przejdźmy do zdefiniowania nagłówków.

8:19Zaczynamy od tego, żeby przejść do tagu All H1 Headings i zmodyfikować wszystkie

8:24nagłówki typu pierwszego w taki sposób, aby były zrobione fontem kazimirtext.

8:29I tutaj akurat rozmiary pozostawimy bez zmian, natomiast zmienimy interlinię na 58.

8:35Kolejno, nagłówki drugiego typu. Tutaj

8:37wybieramy All H2 Headings i dla nagłówków typu drugiego będziemy

8:42chcieli zmienić wielkość fontu na 32 i interlinię na 48, natomiast font

8:48oczywiście też zmienimy na kazimirtext.

8:51Kolejny nagłówek, czyli nagłówek typu H3. Zrobimy tutaj rozmiar 26 i 32,

8:57jeśli chodzi o interlinię i font,

9:00zamiast DM Sans, to ustawimy kazimirtext. I w przypadku nagłówka czwartego też

9:05będziemy z niego korzystać. Chyba to ostatni, z którego będziemy korzystać na

9:08stronie, więc reszty nie musimy zmieniać. Wybieram tutaj.

9:12Upewnię się, że o All H4 Headings jest zaznaczone

9:15i wybieram font kazimirtext. I tutaj z kolei jego rozmiar to będzie 24

9:20i interlinia 38, więc nie muszę tego zmieniać. Kolor zostawiam. I z nagłówków typu piątego

9:25i szóstego nie będę korzystał, więc już nie będę tracił czasu na ich zmianę.

9:28Możesz rzeczywiście to zrobić, jeśli będą przydatne w twoim layoucie.

9:32No i teraz jeszcze akapity.

9:34Tak się składa, że akapity są zrobione

9:35bardzo podobnie do tego, tylko zmieniłem font, czyli zmieniłem font na DM Sans,

9:41natomiast ich ustawienia pozostawię tak jak są.

9:44W razie gdybyśmy jeszcze potrzebowali je dostosować, to wrócimy sobie tutaj.

9:48Kolejna rzecz, którą będę chciał zmienić, to na pewno to, jak prezentują się przyciski,

9:53czyli style dla przycisków. Dla całej tej klasy

9:55Button wprowadzę zmianę. Tutaj po prostu

9:59ustawię font na DM Sans,

10:01ale wybiorę jego wariant Medium

10:03500, a następnie zmienię rozmiar na 16 i 24.

10:07Nie robię tego dla Text Blocka, który jest w środku, tylko właśnie celowo dla Buttona.

10:12Kolejne opcje, które wybiorę tutaj w More type options. Wyłączę opcję Capitalize

10:17w ten sposób. Wyzeruję także opcję Letter spacing.

10:20Można przytrzymać Alt i po prostu kliknąć na to czy Option na Macu, aby wyzerować taką

10:25wartość i dodatkowo jeszcze zmienię kolor tła - Backgrounds,

10:30a także Borders Radius ustawię na 8,

10:33czyli będziemy mieli lekko zaokrąglone

10:35krawędzie. I teraz wygląda to już tak jak w projekcie.

10:39Zdaje się, że tam mieliśmy nawet 6. I teraz mamy, zobacz, że kolejny też stan

10:44tego przycisku po najechaniu, Hover, który muszę zmienić.

10:48Nie wygląda to zbyt dobrze więc przejdźmy do stanu Hover i zmieńmy ten kolor.

10:52Na razie wkleję ten poprzedni kolor, ale teraz tak delikatnie go rozjaśnię.

10:57Chodzi mi o to, żeby po najechaniu ten guzik się delikatnie rozjaśniał.

11:01Teraz to wygląda całkiem fajnie.

11:02Może jeszcze ostatnia rzecz, to upewnię się, że jestem w stanie

11:06None i dla tego Buttona zmniejszę padding powiedzmy do 16.

11:11Myślę, że tak jest w porządku i teraz już guziki mamy gotowe.

11:15Rich Textu nie będę dotykał. On korzysta z ustawień, które tutaj zrobiliśmy dla

11:20akapitów i w zasadzie ten podstawowy Styleguide jest gotowy.

11:24Natomiast w kolejnej lekcji zajmiemy się nawigacją i menu.

11:26Do usłyszenia.