Webflow: Stylowanie Menu

0:00Cześć! Witaj w kolejnej lekcji, gdzie mamy skończony Style Guide.

0:03A teraz możemy przejść już do właściwych stron bloga. Przechodzę do Pages i dodaję

0:08nową stronę, czyli wybieram Create new page, a następnie nazywam ją po prostu blog.

0:14Wszystkie te opcje zostawię bez zmian, wybieram polecenie Create. Jeszcze będziemy

0:18o tych opcjach mówić w lekcjach poświęconych SEO.

0:21Natomiast teraz zajmiemy się przygotowaniem strony bloga i przypominam,

0:25że wygląda ona w ten sposób, ta strona główna.

0:28Mamy menu i następnie taki featured

0:30artykuł i kolejno mamy ostatnie artykuły listowane w postaci kafelków,

0:35później pod spodem jeszcze kolejne rzeczy z każdej z kategorii.

0:39Będzie nam to służyć jako pewne wytyczne,

0:41do tego jak przygotujemy layout, ale nie będziemy się ściśle tego trzymać jeśli chodzi o

0:46jakieś rozmiary, piksele, nie będziemy dosłownie przekładać tych wszystkich

0:49wartości, ale zainspiruemy się oczywiście tym i przygotujemy stronę główną bloga właśnie

0:54na tej zasadzie. Przechodzę w związku z tym do strony bloga, ale najpierw jeszcze

0:58przejdę do Style guide'a, żeby pożyczyć elementy, które chciałbym wykorzystać. Przykładowo

1:02mogę pożyczyć sobie w zasadzie całe Fixed menu, ono jest rzeczywiście bardzo podobne do

1:06tego, które przygotowałem w projekcie graficznym. Wklejam i w zasadzie w tym

1:10momencie jedyną rzeczą, którą trzeba zrobić jest zmiana linków, czyli

1:15tutaj będzie strona główna bloga, a może zrobimy inaczej. All posts, coś takiego.

1:20Będą to wszystkie posty. Na stronę główną bloga będzie kierowało logo Juice, które

1:25zresztą jest tutaj też przygotowane w Style Guidzie,

1:29ponieważ jeżeli wejdziemy w sekcję Components mamy logo i różne jego stany:

1:34logo białe, a także logo na potrzeby bloga też jest tutaj dostępne i zostało ono

1:38wyeksportowane jako plik graficzny. Znajdziesz go w plikach źródłowych do tego

1:43materiału, więc możemy po prostu kliknąć dwa razy, wybrać polecenie Replace image.

1:47Wybieram polecenie Replace image i wskazuję obrazek. Jest to plik png.

1:51No i jak widzisz nie wyświetla się on w zbyt dobrej jakości.

1:54Chciałbym o tej jakości porozmawiać, bo nie

1:56było na to czasu w kursie podstawowym, a jest to naprawdę bardzo ważne, bo

2:01wielkość tego obrazka została wgrana poprawna teoretycznie 114 na 24

2:06piksele. To jest dokładnie jeden do jednego tak jak przygotowaliśmy go w layout'cie.

2:10Problem jednak polega na tym, że ja

2:11dysponuję monitorem, który jest wysokiej jakości, monitorem high dpi.

2:15Jest to monitor 5k i ten monitor ma ustawione skalowanie zawartości.

2:20To znaczy, żeby wszystko nie było super malutkie, ponieważ mam 5 tysięcy pikseli na

2:24szerokość to rzeczywiście wszystko by było bardzo małe w tym domyślnym

2:28widoku interfejsu.

2:30To mój monitor skaluje wszystko dwa razy

2:32tak, żeby było odpowiednio duże, a jednocześnie jest idealnie ostre dzięki

2:37temu, że pod spodem mamy bardzo dużo pikseli.

2:39Problem w tym, że przeskalowany dwa razy obrazek, właśnie ten, niestety nie wygląda

2:44zbyt dobrze. On wygląda tak jakby miał 114 na 24.

2:48Ale tak naprawdę ma 128 na 48 pikseli.

2:52Przynajmniej tak jest renderowany przez mój monitor, więc po to, żeby on rzeczywiście

2:56wyglądał dobrze, musielibyśmy wyeksportować go w większym rozmiarze.

2:59Możemy go powiększyć i wyeksportować, możemy go zaznaczyć, wybrać Ctrl/Cmd + E,

3:04a następnie zamiast eksportować plik dla designu, możemy zaznaczyć opcję Web.

3:09W tym momencie ten asset zostanie wyeksportowany w skali 1 i w skali 2 razy.

3:14Musimy tylko zaznaczyć, że był przygotowany w skali 1 raz.

3:17Czyli w skrócie w tej normalnej wielkości

3:20pikseli przeznaczonej dla standardowych rozdzielczości projektowaliśmy w skali 1 raz,

3:26a to zostanie wyeksportowane w dwóch rozmiarach.

3:28Możemy wpisać Juice blog logo

3:32żeby wyeksportować takie zasoby i jeszcze

3:34raz wgrać z pomocą Replace image wybiorę polecenie Upload.

3:37I teraz zobacz proszę jakie pliki mi się tutaj pojawiły.

3:40Mamy Juice blog logo, który ma 3 KB i

3:43Juice blog logo 2x, który ma 6 KB, ale też jest dwukrotnie lepszej

3:48jakości. Zobacz na moim monitorze te obrazki mają tę samą wielkość,

3:52tyle, że ten drugi jest po prostu idealnie ostry.

3:55W związku z tym moglibyśmy właśnie

3:57skorzystać z tego Juice blog logo 2x. Wybieram polecenie Open

4:01i zastępuję nim mój obrazek. No i teraz problem polega na tym, że on jednak został

4:05wstawiony znowu w tym rozmiarze dwa razy większym i znowu jest poszarpany.

4:11Ale za to jest dużo większy, więc to, co

4:13powinniśmy zrobić w Webflow to zaznaczyć opcję Image is high dpi, czyli ten obrazek jest

4:18właśnie przygotowany na potrzeby rozdzielczości high dpi,

4:21na potrzeby tych nowoczesnych wyświetlaczy

4:25w większości telefonów i tabletów takie są w monitorach tych wyższej jakości też.

4:28Dopiero teraz widzisz, że mamy idealną jakość tego zasobu.

4:32Natomiast to, co moglibyśmy zrobić to oczywiście, ponieważ cały ten element jest

4:38wektorowy, zapisać to zamiast jako plik png to np.

4:42jako plik svg.

4:43Jeśli zapiszemy taki plik .svg Juice logo blog, zostawiam tę opcję bez zmian, to teraz

4:50okaże się, że możemy taki plik wgrać. Upload, wybieramy Juice logo blog.svg i

4:56okazuje się, że zamiast 6KB on ma 1KB.

5:00Tylko 1KB, więc dużo mniej danych.

5:02Zresztą mamy tutaj informację o tym, jak szybko będzie się ładował ten plik.

5:06Jak dużo trzeba załadować w tym momencie.

5:09No i widzisz, że zdecydowanie szybciej taki plik svg

5:12się dla nas załaduje, więc jeśli tylko mamy taką możliwość, czyli jeżeli nasz kontent

5:17jest wektorowy to koniecznie zawsze umieszczamy tutaj pliki svg,

5:21a jeśli chcielibyśmy korzystać z plików bitmapowych no to pamiętamy, żeby

5:26wyeksportować je w skali 2 i zaznaczyć opcję Image is high dpi.

5:29W tym przypadku tego nie robimy, bo ze skali 1 wyeksportowaliśmy svg, on został

5:33automatycznie powiększony i wszystko jest OK.

5:36Koniecznie wpisujemy alt tag np. juice blog,

5:42w ten sposób, po to, żeby screen reader'y mogły sobie poradzić z takim obrazkiem.

5:46Jeśli chodzi o obrazki to mamy to wyjaśnione.

5:48Teraz powinniśmy zadbać o to, żeby link

5:50Brand kierował zawsze do tej właśnie strony, na której jesteśmy.

5:53Gdybyśmy kopiowali to menu na inne podstrony, więc zaznaczam link

5:58Brand, a następnie przechodzę do jego ustawień i w link settings wybieram stronę

6:03i mamy kierować zawsze do strony blog, otwierać w tej samej karcie, a nie w nowej

6:07więc zostawiam te ustawienia. A następnie mamy wszystkie posty i do listowania

6:11wszystkich postów, też będziemy musieli stworzyć osobną stronę.

6:15Czyli jeśli przejdziemy do Pages i dodamy

6:17tutaj sobie, stworzymy nową stronę, to możemy blog

6:21All posts zrobić sobie taką właśnie podstronę. Wybieram polecenie Create

6:27i na niej stworzymy listing wszystkich kafelków, wszystkich postów,

6:31Czyli będzie ona trochę inna od tej strony

6:33głównej bloga, bo tutaj na stronie głównej będziemy listowiali tylko np.

6:37trzy najważniejsze posty z kategorii, a tam

6:40będziemy po prostu mieli stronę z wszystkimi postaciami.

6:43I wtedy po prostu All posts będzie kierował do

6:45tej strony i zaznaczamy sobie nowo stworzoną stronę blog all post.

6:50Natomiast kolejne linki są trochę bardziej interesujące, ponieważ będą to linki, które

6:54będą prowadziły do odpowiednich kategorii np.

6:57do kategorii Blockchain.

6:58Później mamy Mobile, Marketing, Software. Skąd te kategorie się biorą?

7:02Otóż te kategorie będziemy brali z naszej CMS-owej kolekcji kategorii. Jeśli

7:07wejdziemy do kolekcji kategorie to mamy Software, Marketing, Mobile i Blockchain.

7:12No i moglibyśmy zrobić to statycznie, czyli zrobić tutaj nav link blockchain.

7:16Następnie Mobile, Marketing, dodać jeszcze

7:18jeden i stworzyć Software, ale możemy zrobić to też dynamicznie.

7:22Po to właśnie mamy dane w CMSie,

7:24żeby te dane automatycznie wypełniły nam menu.

7:27A jeszcze lepiej, żeby te sekcje zostały także automatycznie podlinkowane do stron

7:34kategorii, które też będziemy tworzyć i tym właśnie zajmiemy się w kolejnej lekcji.

7:38Do usłyszenia.