Webflow: Style Typograficzne

0:00Ok, w tej lekcji: NAGŁÓWKI. Niesamowicie

0:02pasjonująca rzecz. Przechodzimy do nagłówków, dodajemy je w ten sposób, że

0:06najpierw dodajemy nagłówek typu pierwszego.

0:09Później kopiujemy go jeszcze z 5, czy 6 razy, a następnie przechodzimy sobie

0:12może tutaj i będziemy klikać na kolejnych typach nagłówków H2, tu będzie H3,

0:18Ten to będzie H4.

0:20I to będzie nagłówek typu H5.

0:22Dodatkowo skopiuję go i jeszcze raz wkleję i to będzie wyjątkowy nagłówek, który będzie

0:28typu H2, ale zmienię jego klasę i wpiszę tutaj, że to będzie Section Heading.

0:36Będę go używał, w niektórych sytuacjach właśnie do stylowania sekcji, będzie to specyficzna

0:41odmiana nagłówka H2, natomiast te nagłówki trzeba wszystkie ładnie ostylować i nie

0:46będę korzystał dla nich z nowych klas, tylko postaram się ostylować je z pomocą

0:50tagu, czyli All H1 Headings teraz zaznaczam jako selector i chcę sformatować wszystkie

0:56nagłówki H1. Mam font DM serif Display 400, 54 i 61 wielkość linii. No i tutaj jeszcze są

1:04paddingi, czyli mam nadany Padding 0 od góry i 10 od dołu i to jest ustawienie,

1:10które zostawiam dla wszystkich nagłówków typu H1. Na tej samej zasadzie będę formatował

1:15kolejne typy nagłówków, czyli Heading H2.

1:18Znów przechodzimy do tej głównej klasy.

1:20Tutaj jest akurat 20 i 10 pikseli.

1:24Później mamy Typography i to Typography będę

1:27chciał zmienić. Będę chciał też skorzystać z wariantu serif naszego fontu, czyli DM

1:32sans serif wybieramy, kolejno 400, Normal, wybierzemy weight.

1:3938 to będzie wielkość nagłówka typu drugiego i 44 to będzie wysokość linii.

1:44Skąd ja to biorę? Oczywiście z projektu.

1:48W designie są właśnie wszystkie te nagłówki i stąd

1:51staram się skopiować wszystkie właściwości heading typu trzeciego,

1:54czyli wszystkie nagłówki typu trzeciego robimy dokładnie tą samą operację i stylujemy

1:59je w ten sposób, że one nie będą miały akurat marginesu. Kolejno mamy DM

2:05serif 400 i jako wielkość ustawiamy 28 i 36 to będzie wysokość linii.

2:12Kolor zostawiamy wszędzie taki jaki jest.

2:15Następne mamy nagłówki typu czwartego

2:18i tutaj będę chciał zmienić font z szeryfowego na DM sans, na font

2:23bezszeryfowy, zostawimy 700 bold, zmienimy rozmiar na 18 i 33

2:29wysokość linii i jeszcze podbijemy marginesy. Marginesy zrobimy na 15 pikseli od góry i

2:368 pikseli marginesu od dołu, czyli wszystkie H4 mam zrobione.

2:42Teraz przechodzę do H5.

2:44H piątki, będziemy musieli znowu wybrać HTML tag dla wszystkich H5.

2:4810,10 to zostanie, tutaj mamy 14 DM Sans

2:51Bold 700 i 20 i to rzeczywiście się zgadza.

2:54Czyli wszystko jest OK.

2:56Mam to zgodnie z designem, a jeszcze mamy

2:58Section Heading, czyli ta wyjątkowa wersja nagłówka H2.

3:02I tutaj zmienimy margines górny na zero.

3:06Następnie dolne zrobimy

3:0918 pikseli zgodnie z projektem, mamy DM serif, Display 400, Normal to jest OK.

3:15Natomiast rozmiar to będzie 46 i interlinia to będzie 56. W ten sposób przygotowaliśmy sobie

3:22strukturę nagłówków. Mają one odpowiednie kolory, mają odpowiednie wielkości i możemy

3:27zawsze wrócić sobie do Style Guide'a i zobaczyć jak i czy taki nagłówek ma jakąś specyficzną

3:32klasę, z której powinniśmy skorzystać, czy też nie ma specyficznej klasy i wtedy to

3:36znaczy, że będziemy korzystać z All H3 Headings, możemy zresztą

3:40zobaczyć skąd są dziedziczone te wartości klikając na pomarańczową

3:44wartość w panelu stylów, w panelu CSS. Dobra,

3:47no to mamy całą pierwszą sekcję. Teraz

3:50zrobimy akapity, więc możemy to zrobić tak, że jeżeli jesteśmy w sekcji

3:55Typography to bierzemy sobie sam H3 Style Guide i wklejamy go poniżej i zamiast Headings to

4:02tutaj po prostu zmieniamy nazwę na PARAGRAPH.

4:06No i teraz trzeba będzie wrzucić do środka jakiś akapit. Wybieram a, wrzucamy akapit i

4:11będę chciał go dostylować. Jeśli chodzi o akapity, zgodnie ze Style Guide'm, który mamy przygotowany,

4:16powinny one mieć tak, dla wszystkich akapitów All Paragraphs, przełączamy się tutaj.

4:22Zmienimy to w ten sposób, że będziemy mieli 18 pikseli odstępu marginesu na dole.

4:30Dodatkowo, jeśli chodzi o font-weight,

4:32chciałbym to zmienić na medium 500. Kolor jest OK.

4:36Tutaj rozmiar jest też OK i pozostałe

4:39ustawienia są w porządku, także zostawiamy to w ten sposób.

4:44Pomyślałem sobie jeszcze, że na te H3 Style Guide można by było dorzucić jakiś margines na

4:49dole typu 20 pikseli, żeby to było ładniej rozstrzelone.

4:53No i mamy zrobione akapity Paragraph. Na podobnej zasadzie będę chciał stworzyć

4:58CAPTIONS, możemy zamoderować tutaj jeden, który mamy w Style Guidzie. Wpiszemy tu CAPTIONS.

5:05I dodamy 1 CAPTION, czyli dodamy po prostu

5:08Text blok pod spodem i ten Text blok ostylujemy sobie jako Caption.

5:14I ja zrobiłem tutaj klasę zarówno Caption jak i Caption Big, więc możemy skorzystać

5:18najpierw z Caption, a następnie skorzystamy z Caption Big. One już są na stronie, więc

5:22zostawimy to tak jak jest. Tutaj wybiorę remove, Caption Big.

5:28W samej treści możemy wpisać, nawet odnieść

5:31się do nazw klas, czyli tutaj wpisać Caption, a tu wpiszemy Caption Big, żeby to było bardziej.

5:36OK.

5:37Żeby to było sensowne i teraz duplikujemy to i mamy znowu kolejny Caption.

5:43Wybieram remove class i też z istniejących klas skorzystam z Caption Author,

5:48a jeszcze za chwilkę zrobię sobie Caption Header.

5:51No i świetnie mamy to. Ja jeszcze w międzyczasie zmieniłem odpowiednio nazwę.

5:55Teraz jeszcze raz kopiuję H3 Style Guide, wrzucam je tutaj i mówię, że kolejny

5:59element, który chcemy stworzyć to jest element typu Rich Text.

6:03Co to takiego będzie ten Rich Text? To będzie nasz właściwy wpis na bloga, ale użyjemy

6:08tutaj właśnie takiego elementu, który nazywa się Rich Text,

6:12który może zawierać, oprócz tekstu, także obrazki, nagłówki itd.

6:16Zobaczmy jak działa taki moduł.

6:18Jeśli dodamy go na stronę, mamy od razu automatycznie stworzone nagłówki, akapity.

6:23Ale możemy też dodawać treści, jeśli wciśniemy Return, Enter, wewnątrz tego

6:28Rich Text'u, po lewej stronie pojawi się znak plusa.

6:31Z jego pomocą będziemy mogli dodać obrazek, wideo, będziemy mogli dodać tutaj kawałek kodu,

6:35zaembeddować coś z zewnętrznej strony i wstawić np.

6:38listę i wypunktowania.

6:40Ok, możemy spróbować z obrazkiem i teraz wrzucę tu obrazek, który mam przygotowany

6:44w źródłach. On upload'uje się i jest dostępny.

6:47Możemy teraz użyć dla niego rozmaitych opcji wstawania wewnątrz tego Rich Textu np.

6:52umieścić go po lewej stronie, po prawej,

6:54umieścić go po lewej obok tekstu, czy po prawej obok tekstu.

6:57Dodatkowo, w tych opcjach, mamy możliwość

6:59sprawdzenia jaki ma rozmiar, jaki ma też rozmiar w megabajtach.

7:03Dosyć dużo, trzeba by było go najpierw zminifikować, zmniejszyć np.

7:07z pomocą image optim.

7:08Tutaj mamy też do wyboru właśnie

7:11tę samą pozycję, którą mieliśmy wcześniej, ale jeszcze możemy wybrać rozmiar.

7:15Przykładowo tutaj możemy wybrać sobie

7:16rozmiar Custom. On jest ustawiony na 60 proc.,

7:19ale jak np.

7:19zmienimy to na 30 to zobaczymy możemy to zmienić,

7:22możemy oczywiście też w pikselach ustawić tutaj wartości. Więc dużo różnych

7:26opcji dostosowania tego, jeszcze możemy taki obrazek podlinkować.

7:29Natomiast to, co jest ciekawe, to jest też to, że te wszystkie opcje zarówno dodawanie

7:35elementów, jak również ich modyfikacji, będzie miała osoba, która

7:39będzie edytowała naszego bloga. W takim elemencie Rich Text, w widoku edytora,

7:43będzie można robić to bezpośrednio na naszej stronie internetowej.

7:47Nie trzeba będzie wchodzić do edycji Webflow, tylko z odpowiednimi uprawnieniami,

7:50będzie można tak wpisy dodawać i zmieniać dla nich elementy.

7:55Teraz możemy jeszcze dodać tutaj Caption

7:58pod zdjęciem i wszystkie te elementy tutaj możemy stylować.

8:01To co jest ciekawe to, w momencie kiedy

8:03nadamy na element Rich Text główną klasę i może to np. być klasa, którą nazwiemy Blog Article,

8:10czyli to będzie właściwy artykuł bloga.

8:12I to działa też w taki fajny sposób, że ten Blog Article jest teraz pewną osobną

8:17całością, która zawiera swoje nagłówki, swoje akapity.

8:20I o ile my oczywiście nie nadpiszemy tych

8:22właściwości nagłówków H2, no to one będą dokładnie takie same jak mamy tutaj, czyli

8:28styl dla wszystkich nagłówków został wstawiony także tu.

8:30Ale, jeśli klikniemy na selector i wybierzemy All

8:34H2 Headings, to mamy tutaj dodatkową opcję nest, czyli opcję zagnieżdżania tego

8:38selektora wewnątrz Blog Article, czyli wewnątrz tego Rich Textu.

8:43Jeżeli wybierzemy tę opcję, to teraz stylujemy wszystkie nagłówki H2,

8:46ale tylko takie, które znajdują się w

8:49artykule i możemy mieć tutaj zupełnie inne style np.

8:52możemy zmienić tekst na 36 rozmiar.

8:55Tymczasem nasze nagłówki H2 pozostały na całej stronie niezmienione.

8:59I w ten sposób możemy też dodać na przykład styl do akapitów wybierając

9:03All Paragraphs, ale tylko modyfikując te akapity, które są wewnątrz artykułu.

9:08I to jest bardzo sprytne rozwiązanie, bo

9:09nie musimy tworzyć tutaj żadnych dodatkowych klas, możemy stylować dalej

9:13wszystkie akapity, natomiast sama treść artykułu może

9:16wyglądać zupełnie inaczej, niż treść naszej strony.

9:18Przykładowo mamy tutaj Caption i do niego

9:20też możemy dodać All ?Figure? Captions klasę, ale tylko i wyłącznie dla artykułów.

9:26I możemy to sformatować w taki sposób, że zmienimy kolor np.

9:30na kolor ciemno szary.

9:31Następnie wybierzemy font medium i DM sans, zmienimy jego wielkość na np.

9:3714 w ten sposób, może nawet jakiś

9:39jaśniejszy szary kolor będzie tutaj bardziej odpowiedni.

9:42To samo możemy zrobić ze zdjęciami.

9:44Dodajemy do All Images, ale tylko dla tych All Images, które znajdują się wewnątrz Rich Textu klasę.

9:51No i teraz przykładowo zmieńmy Border Radius na 12 pikseli.

9:55Teoretycznie zmieniamy dla wszystkich

9:57obrazków, ale w praktyce tylko dla tych, które będą treścią na naszym blogu.

10:01Możesz dokonać tu innych modyfikacji, my

10:03natomiast będziemy robić to jeszcze w momencie, gdy dodamy właściwe treści na

10:07bloga, a tymczasem nasza sekcja Typography, jak i cały taki układ Style Guide'a jest

10:12gotowa. W kolejnej lekcji zajmiemy się kolorami. Do usłyszenia.