Webflow: Praca z submenu

Webflow 2020+

0:00W części kolejnej lekcji w której zajmiemy się rozwijaniem menu.

0:03Nawigatorze można zwinąć i rozwinąć wszystkie grupy z pomocą collapse all .

0:07Jest tutaj też opcja która pozwala zablokować nawigator.

0:10Jakoś nie jest to super wygodne bo nie mogę przesunąć teraz strony. Więc nie

0:15będziemy używać tej opcji ja po prostu ją wyłącze.

0:17Ale pamiętaj o skrócie" Z" możemy włączać i wyłączać nawigator.

0:21A żeby było trochę to lepiej widać bo im głębiej będziemy schodzić w strukturę

0:26zagnieżdżenia tym będzie trzeba trochę więcej po prostu tego nawigatora pokazać.

0:29Nadal jest ok bo nadal widzimy wszystkie niezbędne rzeczy w interfejsie.

0:33Teraz chciałbym pokazać jak działa to rozwijane menu.

0:36Bo zaprojektowaliśmy je w ten sposób.

0:38Pozwolę sobie rozwinąć jego stan czyli przejść do stanu services.

0:42Jest to dość złożony komponent mega menu.

0:45Zawiera obrazek tytuł oraz opis dla każdego każdej z sekcji każdego z linków.

0:49Teraz jak to wygląda tutaj użyliśmy czegoś takiego jak drop down który możemy teraz

0:54wybrać z listy, a następnie przejść w jego ustawienia w ustawieniach dropdown.

0:58Mamy coś takiego jak open menu.

0:59Tu będziemy mogli zobaczyć jak to się

1:02będzie zachowywać oczywiście command shift " P " czyli preview.

1:05Pozwoli nam też zwinąć i rozwinąć tak jakbyśmy poglądali to w przeglądarce.

1:10Więc tak to będzie wyglądać jak musimy teraz trochę dostosować.

1:14Sam dropdown składa się z:

1:15-Po pierwsze navigation links,

1:17I tutaj znajduje się ikonka i tekst-block. Ta ikonka zasadzie u nas jest po lewej

1:22stronie więc moglibyśmy teoretycznie zmienić to jak ona się wyświetla.

1:27Aczkolwiek zobacz tutaj jest przypadek w którym mamy ikonę w stosie na górze, a mimo

1:33to jest ona ustawiona po prawej stronie od tego tekst blocka

1:37powinno być normalnie w HTML - u inaczej.

1:40No to jak to jest zobaczymy w stylach.

1:42Okaże się że ta ikonka ma ustawioną pozycję na absolut.

1:45Na pewno wiesz czym jest absoluta HTML-a

1:48tutaj właśnie możemy wybrać pozycję relativ, static, absolut czy fix.

1:52Gdybyśmy przykładowo wybrali sobie static no to naturalnie moglibyśmy

1:57układać to w normalnym obiegu dokumentów ale nawet pozostawiając tą opcję

2:02wybiera opcję wstecz nawet pozostawiając opcję na ikoncę czyli absolute.

2:06Zobacz też mamy tutaj możliwość przesunięcia jej z prawej strony na lewą

2:10stronę i w tym momencie ona wylądowała dokładnie tam gdzie byśmy chcieli.

2:14W zasadzie nawet chyba bardziej podoba.

2:15Po prawej stronie teraz końca bo dobrze wypełnia naszą przestrzeń więc zostawię ją

2:19tak ale chciałem pokazać Ci że te wszystkie opcje dotyczące pozycjonowania

2:23realtiv czy absolute możemy dostosować i jeszcze będziemy o tym trochę mówić.

2:27To co jednak najbardziej nas interesuje to

2:28dropdown lista która na razie zawiera jakieś linki co w jakiś sposób jakiś sposób ostylowane ale

2:32szczerze mówiąc to ja się po prostu tych wszystkich linków stąd pozbęde.

2:35Czyli wyrzuciłem wszystko jeszcze raz

2:37upewnie się że dropdown lista jest otwarta i mogę do niej dodać kolejne elementy.

2:41Każdy z nich składa się z po pierwsze z obrazka, a więc klikam na obrazek.

2:45Po drugie z nagłówków, a po trzecie akapitu albo z jakiegoś text blocka może dodam

2:49generyczny text block bo nie jest to jakiś typowy akapit na naszej stronie będzie

2:53użyty tylko tutaj więc nie musi to być akapit więc teraz

2:56mamy trzy elementy które trzeba zamknąć w jakiejś jednej strukturze no bo będziemy

3:00chcieli tę strukturę powielić przynajmniej cztery razy.

3:03Jaką strukturę wykorzystamy.

3:05Moglibyśmy użyć Div-a ale przypominam że to wszystko ma być linkiem.

3:09Więc zamiast tego używamy specyficznego

3:11fajnego komponentów webflow który nazywa się link block.

3:14Możemy stworzyć coś co wszystko co tam wsadzimy będzie jednym dużym linkiem.

3:20I to jest właśnie struktura link blocka więc ja taki link block dodaję

3:24przerzucam do niego wszystkie te elementy image, heading, text block

3:28i zabieram się za stylowanie strzałka w górę żeby przejść do rodzica teraz " S " żeby

3:31przejść do panelu stylów i zobaczmy mamy właściwości dziedziczone.

3:34Przykładowo tekst decoration jest dziedziczone all links.

3:37Teraz czy od razu tworzymy combo klasę czy

3:39przy okazji zajmiemy się tymi naszymi wszystkimi linkami i trochę je dostosujemy.

3:43Możemy to zrobić np.

3:44wyłączyć dla nich dekoracje i upewnić się że kolor tekstu jest odpowiedni.

3:48Znowu tę samą sztuczkę trzeba co zawsze zrobić czyli zmienić kolor z innego na

3:52inny. Na ten sam zasadzie. Co mieliśmy tutaj teraz Command return tworzy nową klasę

3:57nazwę ją submenu block return i przechodzimy do stylowania.

4:03Po pierwsze chciałbym żeby każdy element submenu block będzie miał stałą szerokość stały rozmiar.

4:08że on będzie miał jakiś tryb hover coś takiego ale nie chciałbym żeby było to

4:13nigdy mniejsze lub większe niż dwieście czterdzieści sześć pikseli więc ustawiamy szerokość dwieście czterdzieści sześć .

4:19Następnie musimy te elementy ułożyć obok

4:22siebie no i znów najprościej będzie przełączyć się w flex box.

4:25Jeśli chodzi o flex-a to umieścimy wszystko ładnie centralnie na środku

4:30możemy na razie wyrównać do lewej ale trzeba będzie jeszcze zadbać żeby heading i

4:35text block były jeden na drugim jak to najprościej zrobić.

4:38Wydaje mi się że po prostu wrzucając to w jakąś dodatkową strukturę czyli robimy Div - a.

4:42teraz ten Div będzie tym dzieckiem flex - boxa.

4:45I to właśnie na ten Div zostanie ustalona ta właściwość że ma się wyświetlać o

4:52środkowane, a elementy które się w nim znajdują będą naturalnie jeden po drugim.

4:56To wynika z samej charakterystyki blockowości tych elementów.

5:00Jest Ok.

5:01Teraz musimy zmienić obrazek czyli przejdźmy do image.

5:05Dwa razy klikam choose image i w plikach źródłowych do tej lekcji oczywiście jak zwykle

5:09przygotowałem odpowiednie obrazki do zaimportowania.

5:11Wystarczy że je przeciągniesz i puścisz na webflow, a zostaną tutaj dodane.

5:16Ten pierwszy obrazek Wybierzmy teraz replace .

5:18I to był ten obrazek z programowaniem.

5:21Zmieńmy jeszcze treści.

5:22Tutaj mamy software, a przy okazji jeszcze jak już w tym jestem sobie skopiuje to

5:27zobaczę zatem jaka jest odległość dwadzieścia cztery piksele więc wrzucimy tutaj software.

5:32I jeszcze ten block text możemy wrzucić jeżeli chodzi o odstęp.

5:37Możemy go wrzucić bezpośrednio na obrazek

5:40albo na cały Div block to dokładnie możesz sobie zrobić tak jak

5:43chcesz. Ja zrobię z lewej strony DiV blocku ten odstęp no i teraz z formatujmy

5:48jeszcze nagłówki to nagłówek jeden domyślnie ale musimy to zmienić w ustawieniach.

5:53Co teraz możemy wybrać.

5:55Nagłówek którego chcemy. Chcemy nagłówek czwartego typu akurat w tym przypadku.

5:59No i będę chciał zmodyfikować wszystkie

6:02nagłówki czwartego więc wybieramy odpowiedni tag selektor.

6:05I teraz przejdźmy do jego właściwości i

6:08tutaj mamy dm serif display dwadzieścia cztery, trzydzieści trzy więc zmieniamy na dm serif.

6:14Display dwadzieścia cztery i trzydzieści trzy interlinia.

6:19Zostawiamy teraz jeszcze ten tekst poniżej zobaczmy co to jest.

6:24Czy to jest nasz typowy tekst który występuje.

6:27Nie to jest zupełnie customowy dm sans dwanaście bold i kolor szary ten kolor sobie skopiuje.

6:33więc jeśli ma być customowy to dodajemy do niego klasę np.

6:38Command return. Submenu.

6:40Tekst.

6:42Ustaw ma odpowiedni kolor ustaw odpowiedniej wielkości dwanaście

6:47i szesnaście Interlinia. Co z marginesem tutaj jest dziesięć i dziesięć

6:52ustawione globalnie na wszystkie Headingi. Więc zmieńmy to

6:57może wyzerujmy ma przynajmniej ten dolny margines teraz w zasadzie górny

7:01też mogę wyzerować. Mogę go później

7:03dodawać customowo do różnych elementów ale tutaj nie będzie mi potrzebny.

7:06Teraz dopiero wygląda to dobrze i jest równo.

7:09Teraz jeszcze skąd się bierze to szare tło .

7:11Na submenu block jest ustawiony na tło transparent ale

7:14na całą listę jest ustawiony kolor tła szary w związku z tym lecimy z

7:18transparentem i już wygląda to zdecydowanie lepiej.

7:21Takie elementy potrzebujemy cztery i powinny

7:23być one rozmieszczone w dwóch rzędach w dwóch kolumnach więc najlepszą opcją byłby

7:28tutaj flex box którym moglibyśmy co prawda zrobić ale najlepszą opcją dla drop downa

7:32tak naprawdę będzie grid czyli nowa konstrukcja.

7:34Mam nadzieję że dla ciebie nie, że

7:36jak grid działa w HTML -u natomiast ona jest wyszarzona i mamy informację że grid layout

7:42nie jest wspierany na dropdowna, rzeczywiście bezpośrednio na element dropdown.

7:46W związku z tym nie możemy grida wrzucić .

7:48No ale możemy zrobić sobie zawsze jakiś dodatkowy kontener. Kontener taki

7:53techniczny w związku z tym zawsze taki techniczny będzie praktycznie Div.

7:56Wrzucamy do tego Div blocka i to właśnie na DiV

7:59blocka będziemy chcieli ustawić grid layout . Wrzucam grid layout i wbrew temu że teraz

8:04stała się zupełnie jakaś skomplikowana rzecz mamy mnóstwo dodatkowych rzeczy w

8:07interfejsie tak naprawdę jest to bardzo bardzo proste grid layout. Jest domyślnie

8:12dodawany z następującymi ustawieniami mamy jakiś gap między kolumnami i rzędami.

8:16Oczywiście kolumny są tutaj, a żeby są

8:19poziomo więc gap to jest po prostu odległość pomiędzy poszczególnymi

8:22elementami my możemy tę odległość swobodnie zmieniać jak widzisz zmieniała

8:26się też tam jaka jest odległość pomiędzy naszymi elementami.

8:29Można to zrobić z czterdzieści pikseli więc żeby

8:32naraz tę wartość wprowadzić dla kolumn i rzędów klikam sobie kłódkę, a następnie wpisuje

8:36czterdzieści zostało to już ustawione zarówno na jednej jak i drugie.

8:40Teraz grid został zainicjowany z dwoma rzędami domyślnie i z dwoma kolumnami.

8:44Mamy dwie kolumny i dwa rzędy

8:47i są one ustawione tak będziemy jeszcze trochę o tym mówić ale są generalnie

8:51ustawione tak żeby dostosowywać się automatycznie i żeby jedna kolumna

8:56zajmowała dokładnie tyle samo miejsca co druga czyli jedną frakcję.

9:00Teraz tak nie jest bo nie ma w niej

9:01żadnego elementu natomiast rząd ma mieć automatyczną wysokość więc też będzie

9:06dostosowywać się do tego co znajdzie się w środku.

9:09Wszystkie ustawienia grida które znasz z

9:10HTML - a można tutaj edytować czyli można na każdej kolumny indywidualnie zarządzać tym

9:15jaką powierzchnię jaką wielkość ma ona zajmować.

9:17Można dodawać nowe kolumny nowe rzędy i grid może też stać się nawet całkiem

9:22skomplikowany w momencie gdy zaczniemy z pomocą plusa dodawać do niego tzw.

9:25Areas czyli takie obszary w ramach których będzie można zdefiniować jeszcze przed

9:31dodaniem do nich elementów jak mają one się poukładać.

9:34Sprowadza się to do tego że jeśli dobrze

9:35rozegramy sytuację z gridem to w zasadzie byśmy mogli nawet bez flex boxa tutaj w

9:40środku porozkładać ładnie elementy we wnętrzu ale teraz nie będę się tym

9:43zajmował dlatego że chce wprowadzać cię w to stopniowo. Chce pokazać Ci na razie te

9:47proste zastosowania grida które tutaj nam uratuje skórę.

9:50Czyli mamy przygotowane ten

9:52div block on automatycznie dostał klasę więc warto by było ją zmienić.

9:58Kontener ok teraz w zasadzie nie trzeba już nic dla tego robić ponieważ wystarczy

10:03że zaznaczymy sobie submenu block skopiujemy Command C i teraz Command V, Command V, Command V, po

10:07prostu będzie się to klejać w w odpowiednie miejsca.

10:10Ale ja to co.

10:11Cofne te operacje i zostawię sobie jeden block. Dlaczego.

10:14Ano właśnie dlatego że zawsze warto się zastanowić czy przypadkiem coś czego ja

10:17kopiuj i wklej nie będę chciał re-używać później, a jeśli tak no to warto zrobić z

10:22tego co oczywiście symbol. Więc przechodzę do więc "A" "A" "A" do menu symboli, a

10:29następnie wybieram polecenie Create new symbol.

10:32Nie będzie pewnie wielkim zaskoczeniem dla Ciebie że nazwa to będzie submenu block.

10:35Najlepiej jest właśnie

10:36pozostawiać sobie to wszystko spójne i mam z tego zrobiony symbol.

10:40Co ja będę chciał ewentualnie zachować jako over righty w tym symbolu.

10:44Na pewno link. Czyli zróbmy New over right na link ale też

10:47wybiorę sobie obrazek który tutaj jest i też sprawia, że ten obrazek będzie się dało

10:52napisać jak również w DiV blocku Heading i sam Heading tekst.

10:56Także będę chciał nadpisywać czyli wybieram

10:59tutaj tekst link i będzie to header-tekst czy H-tekst po prostu i coś mi tu zniknęło.

11:07Ale spoko.

11:08Klikamy dwa razy żeby się tu jeszcze raz dostać.

11:10Submenu tekst też chcę żeby było edytowalne więc

11:13wszystkie w zasadzie rzeczy tutaj będą w tym momencie edytowalne.

11:15Ale ok to super.

11:17Wybieram teraz upewnie się, że submenu kontener settings otworzy mi te menu to żeby było widać.

11:23W międzyczasie zamknęło teraz. Command C, Command V, Command V, Command V.

11:28No i super, a dlaczego super.

11:30Bo wszystko to już edytuje z poziomu jednego symbolu mógłbym powiedzieć.

11:33No tak ale edytuje się też z poziomu

11:34jednej klasy ale zamiast szukać jakiejś odpowiedniej klasy jest znacznie łatwiej

11:38nam jeszcze taki symbol po prostu zmienić na przykład z dwadzieścia cztery na trzydzieści sześć.

11:42I będzie wszystko ok więc dodatkowo

11:46wydaje mi się że dużo łatwiej jest teraz edytować te treści że nie muszę klikać po

11:51dziesięć razy żeby znaleźć jakiś blok tekstu go zaznaczyć i edytować sobie canvasie.

11:56Ponieważ wszystko to mam wystawione w tym miejscu.

11:58Czyli jeśli chciałbym podmienić teraz obrazek w drugim wybieram polecenie replay

12:02image i po prostu wrzucam tutaj ten drugi obrazek, a następnie kopiuje

12:07sobie tekst marketing i Wklej go tutaj już nie muszę nigdzie klikać szukać.

12:11To samo robię z tymi elementami.

12:13Moim zdaniem jest to zdecydowanie prostsze

12:15i pozwala nam zachować naprawdę dużo dużo lepszą strukturę wszystkiego tego co

12:20robimy więc mobile, a następnie podtytuł że to naprawdę już szybko teraz idzie.

12:27Blockchain.

12:29A tu jeszcze muszę zmienić ikonkę na mobile.

12:33I to samo zrobimy w blockchain.

12:35Najpierw zmienimy ikonkę, a następnie zmienimy teksty.

12:38Jeden i drugi i prawie menu gotowe.

12:41Ostatnią rzeczą którą musimy zrobić to

12:43wrócić do tego dropdown list komponentu i pamiętać że w stylach

12:45usunęliśmy dla niego, a raczej zrobiliśmy przezroczyste tło.

12:48Teraz wrócimy do tła białego upewnimy się, sprawdzimy jakie są tutaj

12:53odstępy dwadzieścia cztery mamy piksele marginesu przejdźmy do sekcji padding .

12:57Z shiftem po to żeby zarządzać z każdej strony zrobimy dwadzieścia cztery.

13:01Udało mi się trafić jeszcze znajduje się

13:03tutaj dodatkowo cień mamy osiem, dwadzieścia i przezroczyste szesnaście więc idziemy szybko do

13:10box Shadows dodajemy Box Shadow na dole to będzie osiem.

13:16To będzie dwadzieścia.

13:18A tutaj będziemy mieli przezroczyste rzędu osiemnaście procent.

13:23czy szesnaście Ok.

13:24Tak czy inaczej mi się wydaje że jest w porządku.

13:26Jeszcze raz muszę wrócić do tego submenu

13:28żeby zobaczyć jeszcze zaokrąglone narożniki.

13:31Racja na dropdown liście zaokrąglenie na narożników wybieramy na osiem pikseli.

13:36Teraz Command Shift "P ".

13:38Zobaczmy jak to wygląda pod przeglądarką najedzamy na serwis klika i otwiera nam

13:43się bardzo ładne menu które nie ma jeszcze stanów hover ale zaraz je dorobimy.

13:47Do usłyszenia.