Webflow: Struktura sekcji

Webflow 2020+

0:00No dobrze.

0:00Zaczynamy od miejsca gdzie

0:01skończyliśmy przede wszystkim na sekcji features.

0:04Najpierw wyzerujmy ten techniczny margines

0:06który dodaliśmy, a tak naprawdę nie powinna to być w ogóle sekcja features

0:09więc wybierz polecenie remove class. Dodajemy tutaj odpowiednią nazwę.

0:13Będzie to logo section.

0:15Zmienimy też nazwę tej sekcji w zasadzie

0:19ona nie ma żadnej klasy jeszcze ale zrobimy tutaj logo header.

0:25Teraz jest w porządku.

0:26Trzeba by było pewnie do jednej bądź

0:29drugiej dodać jakiś margines. Może dodamy do tej powstanie nam margines na dole

0:34zrobimy na razie równo od góry, od dołu około pięćdziesiąt pikseli,

0:39a później jeszcze to dokładnie sprawdzę layotem. Poprawimy.

0:42Teraz wydaje mi się, że jest

0:44ok. logo to daliśmy, a teraz zależy mi na tym

0:47żeby powielić sobie w zasadzie jedno i drugie.

0:49Jeden i drugi element bo będziemy robić

0:51kolejną sekcję natomiast zamiast logo header który teraz usune będzie to logo

0:59FAQ.

1:02Wykonamy dla niego odpowiednie

1:04modyfikacje czyli zaznaczymy question and answers. Dla ustawień tego komponentu

1:09wrzucimy w heading, a tutaj będzie po prostu faq.

1:14To już jest w porządku, a logo section.

1:17Też jest skopiujemy, wklejmy pod spodem. Wyrzucimy najpierw z kontentu wszystkie

1:23Logotypy, a następnie w ustawieniach wyrzuciłem tą klase.

1:30Powiemy, że to jest FAQ section.

1:33No dobra to mamy już gotowe.

1:35Teraz przejdźmy do kontentu. Wrzućmy to do kontentu

1:38techniczny DiV block który będzie nam służył .

1:41Na razie pytania.

1:43Pytania tutaj będziemy mieli nagłówek

1:45trzeciego typu to jest, trzeci nagłówek.

1:48On jest trzydzieści , czterdzieści jeden interlinia więc od razu

1:51zróbmy tak. background kolor Może od razu nadamy klasę.

1:54To będzie FAQ item.

1:59Teraz do itema wrzucimy,

2:01białe tło jak zwykle zaokrąglenie rzędu dwanaście

2:05do środka jakiś tekst konkretnie nagłówek heading

2:09będzie to trzeciego typu przełączymy się. Będziemy musieli go dostylować.

2:14Jeszcze tego nie robiliśmy.

2:15Zaznaczam, że all H3 heading

2:17zobacz, że one mają jakiś margines.

2:19Proponuję to wyzerować.

2:21Czyli wybierzmy zero tutaj i wybierzmy też zero

2:25w tym miejscu. Dostosować tekst w taki sposób, że stawimy serif.

2:31Tak było trzydzieści jeden, a tutaj czterdzieści chyba to było trzydzieści,

2:35a tu czterdzieści jeden jeszcze to skonsultowuje z layoutem, tak dokładnie.

2:40Jeszcze musimy ustawić odstępy

2:43prawidłowe czyli trzydzieści sześć pikseli paddingu ale ten padding wrzucimy na FAQ item

2:49czyli tutaj zróbmy z shiftem trzydzieści sześć dla każdej strony.

2:54Czasem nie jest łatwo trafić ale udało się.

2:56Dobrze to teraz jeszcze jedna rzecz

2:58która jest nam tutaj potrzebna to strzałeczka.

3:01Ta strzałka która znajduje się po prawej

3:02stronie kojarzy, że taką samą mamy w services jako ikon możemy skopiować sobie

3:07to ikon. Wrzucić to tutaj z tym, że od razu wyrzucimy tą klasę remove klas. Teraz

3:14powinno to być formanie ikonki powinno zostać wyczyszone w ten sposób, że dajemy

3:20sobie tutaj static teraz jeszcze na FAQ item musimy wrzucić np. flex, a po to żeby

3:25wyrównać te elementy już jest ok. W zasadzie nic nie musimy

3:28teraz zmieniać no ale to oczywiście nie jest wszystko jeśli chodzi o sam FAQ item.

3:32Dlatego, że on ma dwa stany po kliknięciu

3:34będziemy chcieli zobaczyć rozwiniętą odpowiedź. Zobaczmy jak to wygląda

3:38w designie z commandem klikam prawym przyciskiem myszy. Edit master komponent

3:42tutaj zaprojektowali stan deafult i stan answer.

3:45Nie możemy naturalnie zrobić go na hover dlatego, że to ma być po kliknięciu.

3:49Dodatkowo ma jakoś rozwijać i pokazywać dodatkową treść która będzie w środku.

3:54Na razie skopiujmy tę treść. Zobaczmy z czego to się w ogóle składa.

3:58Składa się z pytania, ze strzałki oraz ta część jakby po rozwinięciu dochodzi nam

4:02w strukturze odpowiedź więc tak powinniśmy też podzielić sobie semantycznie.

4:08Zawsze w takim przypadku zaczynamy od semantyki później to zrobimy. Zaanimujemy

4:12customowo natomiast zaczynamy od semantyki czyli FAQ item.

4:16Potrzebujemy w zasadzie dwa kontenery techniczne na razie nam jeden DiV block . Nadam

4:21mu nazwę control enter na pececie czy command return na macu FAQ item

4:27to będzie answer.

4:30Do tego another do tego kontenera wrzuce akapit tekstu paragraf, a następnie w

4:36kolejce do niego tekst który tam mamy zamokowany.

4:38To samo potrzebuję zrobić heading z ikon czyli dodać kolejny kontener

4:43to będzie też DiV. Też będzie techniczne operacyjne FAQ item questions.

4:50Teraz do środka FAQ item questions.

4:54wrzuce heading. Wrzucę ikon dwa.

4:58Żeby to ładnie się rozmieściło to wystarczy, że FAQ item questions wrzuce layout flex-boxowy.

5:05Jeszcze musi zadbać aby był na całą szerokość czyli wystarczy wpisać weight sto

5:09procent z palca. Jest prawie ok bo jeszcze potrzebujemy

5:13FAQ item zmienić tak żeby dzieci były mogły być zawijane w tym

5:18flex-boxie czyli po prostu ustawić na właściwość children

5:22opcję rap to jest bardzo fajna właściwość która pozwoli nam po prostu wszystkie te

5:25elementy które są jeśli się nie mieszczą umieścić jeden po drugim.

5:29No dobrze to można powiedzieć że mamy

5:32strukturę do tej struktury jeszcze powinniśmy dodać odpowiednie odstępy.

5:37Czyli mamy szesnaście pikseli marginesu na górze.

5:41Możemy go zrobić na tym FAQ item anwser będzie w porządku. Reszta jest ok.

5:47Na razie nie dodajemy klas które by stylowały kolorowały ponieważ będziemy

5:51musieli zrobić to w ramach naszej własnej animacji.

5:54Nie będzie to tak proste jak hover ale

5:56zanim do tego etapu dojdziemy musimy upewnić się, że mamy dobrą strukturę HTML-a

6:01jeśli chodzi o FAQ item. Moim zdaniem to jest ok.

6:03Natomiast teraz będziemy te FAQ itemy powielać

6:06wklejać. Będziemy chcieli żeby znalazły się w dwóch kolumnach lub więcej.

6:10Z tego powodu chciałem wprowadzić jeszcze jeden jedną rzecz którą mamy webflow

6:15czyli cały ten element FAQ item który zawiera wszystkie systemy.

6:20On tak naprawdę mógłby być

6:22zawarty w kolumnach. Kolumny to obok tych wszystkich rzeczy które już przerobiliśmy.

6:27Możliwość ułożenia kontentu obok siebie. Są one o tyle fajne, że możemy zrobić

6:32np. w jednym widoku dwie kolumny, w drugim trzy, w trzecim cztery itd.

6:36Jeszcze dodatkowo możemy z customizmować

6:39to w jaki sposób mają się proporcje tych kolumn do siebie czyli

6:43np. jeden do pięciu to będzie jedna część, a to będzie pięć. Części taka większa kolumna.

6:47Więc spróbujemy skorzystać z tych kolumn.

6:49Zobaczymy jak nam pójdzie.

6:51W tym momencie po prostu przerzuce do kolumn FAQ item. Wrzucam to do kolumn jeden w tym

6:57momencie cały kontener FAQ item wyleciał stracił na znaczeniu.

7:00Moglibyśmy zaraz tak nazwać kolumny ale o

7:03tym jeszcze za chwilę my na tym w zasadzie nic nie zmienialiśmy więc równie

7:07dobrze moglibyśmy po prostu nawet go usunąć w całości.

7:10Może najpierw usuńmy tą klasę żeby

7:12śmiecić w naszym kodzie. Teraz w pierwszej kolumnie gdybym

7:16dodał jakieś kolejne itemy zobacz, że one się pojawiają jedno po drugimi.

7:20Czyli jest w porządku.

7:21Na FAQ item mógłbym też oczywiście zrobić jakiś margines od dołu.

7:25Zobaczymy jak on wygląda w widoku desktopowym.

7:28Czyli zmierzmy to dwadzieścia pikseli na te ustawiamy dla FAQ item dwadzieścia pikseli marginesu.

7:36Teraz ładnie te rzeczy są od siebie oddzielone, a my do kolumny drugiej

7:40gdybyśmy też wklejali FAQ item czyli kopiuje i wkleje.

7:44Bo to dokładnie tak się zachowuje jakbyśmy chcieli.

7:46Mamy też pewien potencjał na to żeby

7:47rozmieścić trochę inaczej czyli przykładowo zarządzać teraz kolumnami,

7:51przejść do ich ustawień. Zrobić sobie z widoku desktopowym

7:55np. trzy kolumny, a w widoku tabletowym możemy zrobić sobie inną ilość kolumn

8:00np. dwie kolumny

8:02ok. na razie nie będę tego zmieniał ale zobaczę w tych opcjach ustawieniach

8:07możemy też zrobić przełączyć to z takiego pokazywania jednej kolumny obok drugiej z

8:13pokazywania jednej kolumny pod drugą . To zrobione domyślnie dla widoku

8:17landscape, portrait więc nawet jak połączymy się tutaj to zobaczysz jak już

8:21to wygląda dobrze nie musimy nic robić praktycznie z tymi kolumnami bo one

8:25układają się jedna pod drugą więc. Super. Aczkolwiek oczywiście jeśli chcemy

8:29jesteśmy w portretowym moglibyśmy to zmienić ale nie chcemy w tym przypadku.

8:33Zostawmy tak jak jest i wróćmy do widoku desktopowego.

8:36Struktura HTML-u czyli najważniejszą rzecz Mamy zrobioną teraz będzie trzeba obsłużyć

8:41rozwijanie się i pojawianie tych elementów FAQ.

8:44To będzie bardzo ciekawa rzecz ponieważ skorzystamy z customowych animacji w webflow.

8:48Więc zapraszam Cię do kolejnej lekcji.