Webflow: Strona Blog Posta - Treść

0:00Cześć! Witaj w kolejnej lekcji, w której

0:02zajmiemy się tą najważniejszą stroną bloga, czyli widokiem konkretnego posta.

0:06Ten widok posta mamy zamockowany i zaprojektowany

0:09tutaj, dodatkowo wyświetlają się tutaj powiązane posty.

0:12To też zrobimy. No i mamy całą treść posta.

0:16Mamy informację o autorze, mamy datę, kategorię do jakiej należy.

0:20Po prawej stronie znajduje się sekcja z Newsletterem, jak również sekcja z

0:24możliwością udostępnienia tego w social media, a na górze mamy duży obrazek.

0:29No dobra to zabieramy się do pracy. Mockup mamy zrobiony, nie będziemy się trzymali go

0:33idealnie co do piksela jak zwykle. Mamy tę stronę Blog post templete, którą

0:38pokazywałem ostatnio i możemy z tej strony wybrać sobie też konkretny item.

0:41Czyli, jeśli w kolekcji mamy wiele różnych

0:43item'ów możemy tutaj przełączyć się po nich i możemy wyświetlić sobie taki, co do

0:48którego będziemy chcieli mieć te wszystkie przykładowe dane, na których projektujemy.

0:52Pierwsza rzecz, którą zrobimy to przerzucimy

0:54jak zwykle tutaj menu, 3 razy "a", a następnie Blog menu wrzucamy na górę no i kolejna sekcja,

0:59też to będzie sekcja, którą pożyczymy tak samo z bloga jak zrobiliśmy ostatnio.

1:03Będzie to ta sekcja Blog hero i ona się zdecydowanie tutaj nadaje.

1:07Natomiast nie będziemy potrzebowali tu tego tytułu, więc trochę ją zmodyfikujemy.

1:11Przechodzimy do Blog post templaet, zaznaczam body i wklejam całe Section blog hero.

1:16Natomiast to co jest fantastyczne na tych

1:18stronach fioletowych, czyli wygenerowanych z CMSa jest to, że my nie musimy korzystać

1:23z Collection list wrapper'ów, ponieważ wszystkie te właściwości z kolekcji pola z

1:27kolekcji mamy dostępne bezpośrednio na tej stronie.

1:29Co to znaczy, że gdybym ja np.

1:31do body dodał jakiś element typu Heading,

1:34to teraz zobacz, że mogę od razu stąd wziąć sobie tekst z Blog postów.

1:37Czyli, jeśli to jest kategoria blog postów

1:40to mam wszystkie pola stąd dostępne bez konieczności tworzenia Collection list

1:45wrappera. W związku z tym w zasadzie, to co mógłbym zrobić, mi zależy tylko na tym

1:49zdjęciu, więc to zdjęcie mogę przerzucić do Blog hero title,

1:53w to miejsce. Całego Collection list wrapper mogę się pozbyć i teraz, jeśli chodzi o

1:58samo Blog hero title to może dodajmy tutaj jeszcze jedną klasę

2:01Blog post to będzie klasa, którą będziemy używać, żeby nie nadpisać sobie tych rzeczy.

2:07Będzie ona specyficzna dla strony Blog postów. Wrzucimy tutaj stałą szerokość 480

2:13pikseli zgodnie z projektem, a następnie na Blog hero

2:16image też dodamy tę specyficzną klasę. Stworzę sobie nową combo klasę Blog post

2:23i teraz zmienimy to w ten sposób, że szerokość tego zdjęcia to będzie 100

2:27procent i właściwości takie jak Border radius też musimy zmienić.

2:32Radius ustawimy tutaj 12 pikseli z każdej strony no i tyle.

2:37Nie za ładne jest to zdjęcie, może przenieśmy się na jakiś inny post i

2:40skorzystajmy z tego zdjęcia i na nim pracujmy.

2:42Wybierzmy teraz opcję Collapse, klikam na Body,

2:44Klikamy na "a", żeby dodać kolejny element,

2:47będzie to sekcja, a w środku stworzę kontener, czyli standardowa sytuacja.

2:50Mamy sekcję i kontener, ale nie kopiowałem

2:52tego z żadnej innej strony, bo ten kontener będzie się trochę różnił,

2:56więc może stworzymy to właśnie od nowa.

2:58Niech to będzie taka klasa Blog post

3:01section, którą teraz stworzę dla tej sekcji na razie nie zmieniam jej właściwości,

3:05a sam kontener nadajmy mu klasę Blog post container.

3:09I to właśnie w tym Blog post kontenerze

3:11Warto by było ustalić sobie maksymalną szerokość i właśnie w przypadku bloga

3:15będzie ona mniejsza, czyli będzie to 10, 80 pikseli.

3:20Tutaj zrobimy sobie w środku dwie kolumny,

3:21ale może jeszcze założymy na to Padding rzędu 20 pikseli z lewej i z prawej strony.

3:27To jest fajne rozwiązanie, bo Padding na tym elemencie pozwala nam automatycznie

3:32w tych wersjach responsywnych, że tekst nie będzie dojeżdżał do

3:35lewej i prawej strony, więc warto na tym pierwszym kontenerze zrobić dodatkowy

3:39Padding on jest automatycznie wycentrowany i możemy dodawać kolejne elementy i ja

3:44sobie zrobię je w takiej strukturze moglibyśmy w zasadzie albo zrobić kolumny,

3:48albo zrobić Flex box'a, albo zrobić Grid'a w sumie mi się najwygodniej ostatnio pracuje

3:53z Grid'em, więc zrobię sobie Grid'a. Zrobię dwie kolumny po lewej i prawej stronie.

3:57Jeśli chodzi o ustawienia tego Grida warto

3:59też dodać mu specyficzną klasę, automatycznie tę klasę dostał,

4:05wybierzmy Grid, a następnie zmienimy to na Blog post grid na przykład

4:11jeszcze raz wejdziemy w edycję tego Grid'a i ustalmy, że, jeśli teraz jest podział pół

4:16na pół, czyli jedna frakcja i jedna frakcja, chce to powiększyć tak, żeby tutaj mieć do

4:22dyspozycji 1,75 frakcji na treść posta, a kolejna reszta co zostanie będzie

4:28do dyspozycji na Newsletter oraz na share'owanie w social media i to będzie OK.

4:33W ten sposób też postaramy się zachować taką rozsądną długość linii tekstu na

4:38blogu, około dziewięćdziesięciu znaków pewnie się zmieści, więc jest OK.

4:42Mamy ten podstawowy podział zrobiony, ale jeszcze musimy

4:45zrobić sobie właśnie te dwie właściwe sekcje, które pójdą do lewej strony i do

4:49prawej strony, więc to będą już techniczne div'y. Pierwsze nazwę

4:53Blog post content.

4:54Natomiast drugi div, który tutaj wstawimy wybieram div block.

5:00Tylko, że nie w środku tylko w tym Gridzie,

5:02wystawimy go po prawej, w ten sposób możemy go nazwać Side actions

5:07i automatycznie te div'y wskoczyły w odpowiednie miejsce, ponieważ skorzystaliśmy z Grid'a.

5:11Możemy zająć się najpierw zawartością div'u, który zawiera cały post kontent.

5:16Wstawiamy tu kolejne elementy no i najpierw będę chciał stworzyć taki

5:21blok tytułowy. Zobacz, że w XD jest taki cały blok, gdzie mamy na górze coś, tutaj tytuł, tu

5:25jest kategoria, tu jest tytuł, tu jest informacja o autorze itd.

5:28Więc będziemy musieli przygotować na to

5:30znowu jakiś kontener techniczny najlepiej. Nadajmy mu odpowiednią klasę może Blog post

5:36title block, czyli blok, który będzie zawierał wszystkie te elementy tytułu i do niego do

5:41środka wstawimy na pewno Text block, który będzie

5:45zawierał informacje o kategorii, ale to oczywiście nie wszystko, bo jeszcze mamy

5:49tam tytuł, więc damy Heading1 i teraz kolejno potrzebny jest nam jeszcze jeden element.

5:54Jeżeli bym wstawił Paragraph zobacz co tutaj

5:56się stanie, bo to co ja potrzebuję, to wpisać tutaj informacje o autorze,

6:01"By Author"

6:03i jeszcze informacje o publikacji "on" np.

6:075 czerwca 2020. Teraz to wygląda w ten sposób, że musiałbym to

6:13oczywiście przydzielić, bo autor musi być dynamiczny, jak również data musi być

6:18dynamiczna, więc mógłbym autora zaznaczyć i wstawić go w Span.

6:22Teraz zobaczmy, czy taki Span jest tutaj,

6:26może dostać znowu te dynamiczne dane z CMSa.

6:29Znów nie może, więc znowu wracamy do tej sytuacji, gdzie

6:32będziemy potrzebowali to wszystko rozbić. Możemy to rozbić na poszczególne

6:36pojedyncze Text block'i, a robimy to tak, że najpierw dodajemy sobie jeden i teraz, żeby

6:40niepotrzebnie nie kopiować i wklejać to po prostu dajemy mu klasę Caption.

6:44Może to być Caption blog post.

6:47Caption blog post.

6:49I do tej klasy przypisujemy odpowiednie

6:51właściwości, czyli może od razu nadajmy mu Display in line block,

6:56po to, żeby mogły te elementy być wyświetlane obok siebie.

6:59Następnie zmienimy Weight, grubość frontu na 500, medium, natomiast zmienimy kolor,

7:05kolor zmienimy na nasz Ciemnoszary ok. I teraz mając już przygotowany taki jeden

7:10Caption blog post możemy po prostu go powielić.

7:12W zasadzie będą nam potrzebne chyba cztery, bo pierwszy będzie "by".

7:17Następnie mamy informację o autorze.

7:20Kolejno będziemy mieli "on"

7:23i następnie będziemy mieli datę. Zaraz to sobie rozdzielimy w ten sposób, że na Caption blog post

7:30jeszcze dodamy dodatkowy margines z prawej strony i to będzie jakieś 5, 6 pikseli.

7:35To tyle co jedna stacja.

7:36Akurat w tym przypadku może zrobimy 5 i to

7:39w zasadzie byłoby na tyle, jeśli chodzi o ten Blog post title block tyle, że jeszcze

7:43na tym Text block'u zmienimy styl i wybierzemy Caption, wybierzemy styl, który już

7:48mieliśmy i teraz chyba wszystko jest w porządku.

7:50Możemy w związku z tym przejść do kolejnego elementu, czyli w Blog post conntent

7:54wstawiamy sobie dalej taki element jak akapit. Będzie to

7:59Excerpt, czyli wycinek tego co znajduje się w poście.

8:02Blog post excerpt tak go nazwiemy i ustalimy dla niego pewne właściwości.

8:07Tutaj na dole będzie margines 32 piksele, na górze ustalimy identyczny margines też damy

8:1332 na razie i kolejno zmienimy ustawienia frontów to będzie DM Sans

8:17500 medium zostawimy, ale zmienimy jego rozmiar na 22 i interlinię zmienimy na 32

8:24piksele. Kolor zostawimy ten nasz podstawowy i wydaje mi się, że to wszystko

8:28co powinniśmy zrobić, jeśli chodzi o sam excerpt.

8:31W związku z tym klikamy w Blog post content znowu i dodajemy

8:35nasz najważniejszy element, a ten najważniejszy element to jest element typu

8:39Rich text, czyli to co wcześniej zdefiniowaliśmy

8:41w CMSie też zdefiniowaliśmy to pole,

8:44zawartość bloga jako włąsnie pole Rich text, dlatego tutaj z niej skorzystamy.

8:48I od razu, jak widzisz, został wklejony z jakimś

8:51nagłówkiem, z jakimiś poszczególnymi elementami.

8:54Wygląda na to, że ta struktura będzie w

8:56porządku, natomiast przypominam, że my w naszym Style guidzie mamy już sformatowaną

9:01taką sekcję i tam zmienialiśmy różne style.

9:03To jest właśnie ten element typu Rich text i on ma specyficzną klasę Blog article, więc teraz

9:08tę klasę powinniśmy zapiąć do Rich text'u, który tu wstawiliśmy po to, żeby wszystkie

9:13style, przygotowane przez nas wcześniej, zostały do niego dopisane.

9:16I wygląda, że coś tam się zmieniło.

9:18Zmienił się nagłówek pierwszy, ogólnie strukturę tej pierwszej sekcji mamy gotową.

9:23W zasadzie mogę też dodać sobie tutaj od razu Footer, czyli przejdźmy do symboli i

9:28wrzucimy ten sam Footer, który dodajemy wszędzie.

9:31To pozwoli mi też scroll'ować.

9:33Za chwilę zajmiemy się prawą szpaltą, ale najpierw wstawmy tutaj dynamiczne dane i

9:37tak jak powiedziałem strony fioletowe, te które są stworzone przez CMSa, mają tę

9:41magiczną właściwość, że nie musimy dodawać kolekcji danych i możemy automatycznie w

9:45tej sekcji ustawień Settings korzystać z danych, które tu się znajdują. Więc będziemy

9:50chcieli wstawić tekst z Blog postów, a ten tekst tutaj akurat to będzie

9:55kategoria, która nazwa kategorii. Później kolejno mamy

9:59następny tekst, czyli nazwa konkretnego wpisu.

10:03No i w to miejsce, gdzie mamy autora

10:06będziemy musieli zaciągnąć informacje o autorze. Mamy autor Name i wszystkie inne dane,

10:11będzie nam potrzebne tylko imię. Data to będzie data publikacji tego wpisu.

10:16W związku z tym przechodzimy na sam dół i

10:18mamy coś takiego jak Published on, możemy ewentualnie też

10:22zmienić to na datę Updated on i to też może się tutaj wyświetlać gdybyśmy wpisali np.

10:28Last update on, natomiast my wpiszemy sobie Published on i to będzie data publikacji. Nie

10:33data stworzenia rekordu. Jest istotna różnica między Created a Published,

10:37ponieważ Published to będzie ta data kiedy opublikowaliśmy zmiany w CMSie

10:41i ten blog post rzeczywiście stał się wtedy widoczny.

10:45Teraz jeszcze możemy zmienić format. Zobacz,

10:47że mamy tutaj szereg formatów, z których możemy wybierać, natomiast ten, który został

10:51wklejony jest dla mnie jak najbardziej OK.

10:54Możemy też zawęzić to tylko do roku, dnia, godziny nawet, ale my chcemy to

11:00standardowo wyświetlać tak jak jest tutaj. Teraz Excerpt. Musimy przejść do jego

11:03ustawień i też mamy oczywiście takie pole Plain text excerpt został wstawiony.

11:09No i cały Rich text, czyli cały ten Blog article będziemy chcieli pobrać i, jeżeli

11:14tylko zgadza się typ tego pola, czyli tutaj mamy Content zdefiniowane w kolekcji jako

11:20Rich text, to do tego elementu cała treść posta zostanie automatycznie wklejona.

11:25Teraz mamy już wszystkie dane

11:27dynamiczne z CMSa, wszystkie dane w lewej szpalcie, a w zasadzie nawet nie zauważyłem

11:31kiedy się zmienił ten post, bo zmienił się znowu ten obrazek na

11:33wcześniejszy, więc możemy teraz przełączać się pomiędzy blog postami. Zobacz jak wszystko

11:37się zmienia, zarówno tytuł, jak i kategoria, autor, przełączmy się jeszcze na jakieś

11:41inne, post i też tutaj wszystko zostało zmienione.

11:44Tu akurat mam jakiś krótki wpis, więc to działa i jest dynamiczne.

11:49No to przejdźmy teraz do kolejnej lekcji, w której stworzymy Site actions.

11:53Będzie to element statyczny i pewnie szybko się z tym uporamy.

11:56Do usłyszenia!