Aplikacje no-code z Bubble: Navbar - czyli rozpoczynamy budowę aplikacji

0:00Witam Cię w kolejnej lekcji.

0:01Mam nadzieję, że lista kolorów Twojej

0:03aplikacji jest równie rozbudowana jak moja.

0:05I tak zdaję sobie sprawę z tego, że było to strasznie nudne i męczące zadanie.

0:10Natomiast nie przejmuj się, ponieważ taką

0:12operację wykonujemy tylko raz i nie będziemy musieli jej więcej powtarzać.

0:16A skoro już mamy to za sobą, to możemy przystąpić do dalszej pracy.

0:21A więc wracamy do zakładki Design, czyli głównej zakładki, za pomocą której

0:25będziemy projektować wygląd naszej aplikacji.

0:28Mamy tutaj cały szereg różnych komponentów, które wykorzystamy, aby krok

0:31po kroku zaprojektować i zbudować naszą aplikację.

0:36To co robimy w pierwszej kolejności to odznaczamy sobie tą opcję.

0:40W ten sposób w tym miejscu będziemy mieć wyświetlaną listę wszystkich elementów,

0:44jakie umieścimy tutaj w naszej aplikacji, czyli na naszej stronie.

0:47Obecnie jesteśmy na stronie index owej.

0:50Skąd o tym wiem?

0:51Oczywiście mam tutaj informację, że jest to Page Index.

0:54Dodatkowo taka informacja znajduje się również tutaj.

0:57Jeżeli zresztą kliknę sobie w to miejsce, to otrzymam informację o wszystkich

1:01stronach jakie dodaliśmy do naszego serwisu.

1:03Jak widzisz, pomimo tego, że tylko utworzyliśmy aplikację, mamy tutaj już

1:06trzy gotowe strony stronę index ową, czyli stronę na którą trafi użytkownik.

1:11Jeżeli wpisze główny adres Twojego serwisu w przeglądarce np.

1:14Twoja strona kropka com.

1:17Dodatkowo mamy tu jeszcze stronę 404.

1:19To na tą stronę trafi użytkownik.

1:20Jeżeli wpisze w pasku adresu przeglądarki

1:23jakiś adres Twojej podstrony, która nie istnieje.

1:26A także stronę reset password, która

1:28pozwoli mu oczywiście zresetować jego hasło.

1:30Chciałbym, abyś w tym momencie zapamiętał,

1:33że te trzy wbudowane strony mają bardzo rygorystyczne zasady.

1:37Otóż po pierwsze nie możemy zmienić ich nazwy, a po drugie nie możemy ich usunąć.

1:42Każdą inną stronę, która będziemy nadawać

1:44do serwisu poprzez opcję A New page będziemy mogli dowolnie dodać

1:48bądź wywalić w każdym momencie, jeżeli tylko zajdzie taka potrzeba.

1:52A więc wróćmy teraz znów do edytora.

1:55Jeżeli kliknę tutaj dwa razy na tym samym

1:57miejscu, to otworzy mi się panel Właściwości

2:00dotyczące elementu, z którym aktualnie pracuję.

2:02W tym momencie jest to cała nasza strona indeksowana.

2:06Mamy tutaj różne opcje.

2:08Przede wszystkim możemy zmienić tytuł takiej strony.

2:10Dodatkowo możemy tutaj wybrać opcję mobilną.

2:13Tymi rzeczami chwilowo nie będziemy się zajmować.

2:16Do stylów przejdziemy jeszcze później.

2:19Możemy ustawić odpowiednie opacity, czyli

2:21przezroczystość całej naszej strony, a także dodać jej jakiś kolor.

2:25Może to być kolor, jednolity gradient, obrazek, a nawet video.

2:30Oraz jak widzisz tutaj dodać odpowiednie tytuły i opisy pod SEO.

2:34Tym też chwilowo się nie będziemy zajmować.

2:36Bowiem nas interesuje teraz najbardziej zakładka Layout.

2:40Tutaj definiujemy z jakim typem layoutu chcemy pracować.

2:43Do wyboru mamy cztery, a w zasadzie trzy, ponieważ jeżeli rozwinę tutaj tę listę

2:48to mam text align to parent row oraz column fixed.

2:53To pozostałość po starym responsywny

2:55silniku Babel i została dodana tylko po to, żeby zachować wsteczną kompatybilność.

3:00Proszę Cię, abyś nigdy nie korzystał z tej opcji.

3:03Udajemy, że jej tu na tej liście nie ma.

3:05Salami to Parent, korzysta się rzadziej.

3:07Ja pokażę Ci później w kursie, do czego taka opcja może się przydać.

3:11Natomiast nas będą interesowały tylko te dwie rau oraz Column.

3:16Wybierzmy więc sobie tutaj chwilowo rolę.

3:21I teraz mogę tutaj wycofać te elementy wewnątrz całej naszej strony.

3:25Ja tego chwilowo nie będę robił.

3:27Wytłumaczę Ci te koncerny layout na przykładzie budowy naszego baru.

3:32Natomiast chcę, żebyś zwrócił tutaj teraz swoją uwagę na tą sekcję.

3:36Tutaj możemy ustalić z jaką szerokością strony chcemy pracować w edytorze Babel.

3:41Czyli jeżeli tutaj wpiszę 1440.

3:45To będzie.

3:46To miało zastosowanie tylko tutaj, tylko w edytorze.

3:49Natomiast jeżeli chciałbym podejrzeć taką

3:51stronę w przeglądarce, to właśnie ten cały element, ten Page

3:54index rozciągnie się użytkownikowi na całe dostępne okno w jego przeglądarce.

3:59Zresztą możesz to sobie sprawdzić klikając tutaj Guzik Preview.

4:05Wysokość ma tutaj chwilowo mniejsze znaczenie.

4:07Znów jest to ta wysokość, z którą pracujemy właśnie w edytorze.

4:11Możemy zostawić taką.

4:12Ja z reguły ustawiam sobie tutaj 900,

4:14żeby mieć po prostu więcej przestrzeni do pracy.

4:18Skoro więc takie podstawowe ustawienia mamy już tutaj gotowe, to przejdźmy do

4:21tego, aby odwzorować nasz główny design, czyli tą stronę.

4:27A przede wszystkim właśnie tutaj ten nasz.

4:30Natomiast chcę, żebyś zwrócił uwagę na pewną jedną bardzo ważną rzecz.

4:34Zobacz, co się dzieje, jeżeli ja będę skanował tę stronę.

4:37Widzisz, że ten nadmiar pozostaje w tym samym miejscu i nachodzi na te pozostałe

4:41elementy, a one z kolei umieszczone są jeden pod drugim.

4:47Wróćmy więc do edytora i zastanówmy się, jak taki wybór stworzyć.

4:52Pierwszym elementem, który powinien Ci przyjść do głowy jest grupa.

4:56Czyli jeżeli projektowanej strony

4:58internetowej kiedykolwiek jest, to po prostu odpowiedni takiego zwykłego diva.

5:02Inaczej mówiąc po prostu zwykłego kontenera, za pomocą którego będziemy

5:05grupować i rozmieszczać różne elementy wewnątrz Ciebie.

5:08Utwórzmy więc taką grupę.

5:10Wystarczy, że wybiorę ją tutaj, kliknę na ekranie i grupa już została dodana.

5:15Znów widzisz, tutaj mogę ustawić kontener layout.

5:19Postawmy tutaj na przykład rolę.

5:22I teraz to co mogę zrobić

5:24to odznaczyć tutaj szerokość chwilowa jest ona ustawiona stała na 280 pikseli.

5:29Dodatkowo taka grupa ma również stałą

5:31wysokość minimalną, w zasadzie minimalną wysokość 280 pikseli.

5:35Mamy te informacje tutaj.

5:37A jeżeli jadę na tę grupę, to dodatkowo widzisz, wyświetla mi się taki

5:41wskaźnik pomocniczy informujący o szerokości i wysokości danego elementu.

5:46To co chcę zrobić to odznaczyć sobie tutaj tą szerokość, ponieważ chcę aby

5:51rozciągał się na całą dostępną szerokość okna przeglądarki.

5:55Mogę mu zmienić wysokość na np.

5:5890 pikseli, bo tyle właśnie będzie miał na wysokości.

6:04Teraz, jeżeli dodam tutaj odpowiedni kolor,

6:08na przykład właśnie powiedzmy jakiś płaski i wybierzmy nasz kolor główne.

6:14Zobacz co się stanie, jeżeli.

6:16Wysokość całego

6:18całej strony będzie większa niż wysokość dostępna na ekranie, czyli

6:22użytkownik po prostu będzie musiał skorelować całą naszą stronę.

6:25Możemy to zrobić po prostu przechodząc do strony index i dając jej wysokość np.

6:291900, a nie 900 pikseli.

6:32Jeżeli teraz przejdę do podglądu.

6:35I tutaj muszę chwilę poczekać, żeby mi się to odświeżyła.

6:38Jak widzisz mam na górze ekranu. To się akurat zgadza.

6:43Tu mam całą naszą stronę, gdzie będziemy dodawać treści.

6:45Mam tu. Skoro robal, który informuje mnie o tym,

6:48że ta strona jest dużo, dużo dłuższa, a więc mogę ją sobie sklonować.

6:54Jeżeli to zrobię, zacznę skalować w dół.

6:57Niestety ten nadmiar znika.

6:59Nie jest przyczepiony do tej górnej

7:01krawędzi ekranu, ale po prostu porusza się z flow całej strony, czyli nam znika.

7:06No to nas informuje o jednym.

7:09Wybraliśmy po prostu zły element i nie będzie to grupa.

7:12Wracamy więc do edytora.

7:16Zaznaczam tą grupę i ją usuwam.

7:18I teraz zastanówmy się jaki inny element możemy tutaj wybrać.

7:22Mam nadzieję, że ta strzałka tutaj coś Ci podpowiada.

7:27Jeżeli tak, to masz rację, będzie to Floating Group.

7:31Klikam, dodaję.

7:33Jak widzisz znów mamy bardzo podobne

7:35ustawienia jak mieliśmy w przypadku grupy, z tym, że tutaj możemy powiedzieć

7:39do której krawędzi okna przeglądarki taka grupa ma przylegać.

7:43W tym przypadku ma być to górna lewa krawędź.

7:46Możemy ją również tutaj

7:48dostosować do dolnej przystosować, a w zasadzie nie tyle przystosować, co po

7:52prostu przyczepić do dolnej krawędzi ekranu.

7:54Itd. Itd.

7:56To zresztą radzę Ci przeklikać się przez te opcje, posprawdzać sobie jakie efekty

8:00uzyskasz, żeby zobaczyć jak się z tym elementem pracuje.

8:04Natomiast nie przejmuj się, jeżeli te opcje tutaj chwilowo Cię przytłaczają.

8:08Będziemy z takimi floating grupami jeszcze pracować, więc wejdzie Ci to w nawyk i w

8:13przyszłości będziesz je tutaj dodawał bez zastanowienia.

8:16Zostawmy te opcje takie jak są i teraz zmieńmy tylko nazwę.

8:21Chciałbym, aby w tym miejscu chciałbym w

8:23tym miejscu porozmawiać o nazewnictwie, jakie się stosuje w Babel.

8:27Jak widzisz, mamy tutaj już taką dodaną

8:29nazwę przez sam edytor Floating Group, a i to co chciałbym abyś zapamiętał to

8:34proszę Cię nigdy nie zostawiaj takich domyślnych nazw dodawanych przez edytor.

8:39Zawsze zmieniaj je według własnego uznania, ponieważ jeżeli będziesz tutaj

8:43dodawał różne elementy, dodajemy sobie jakiś shape, dodajemy sobie jakiś obrazek.

8:49To jeżeli pozostawiasz takie nazwy Image a

8:52shape jak widzisz tutaj masz listę wszystkich elementów, które dodałeś.

8:56Zresztą widzisz je również tutaj.

8:58Po rozwinięciu możesz je nawet wyszukać.

9:00Więc jeżeli teraz chciałbym np.

9:01wyszukać grupę Hero

9:03a nie nazwałem jej tylko zostawiłem sobie nazwę Group ABC lub tak dalej,

9:08to namierzenie tutaj na liście będzie praktycznie niemożliwe.

9:12A więc usuńmy niepotrzebne elementy, czyli ten obrazek usuńmy.

9:17Ten shape też jest nam niepotrzebny.

9:21Wróćmy do naszej Floating Grupy.

9:24Ja stosuje takie nazewnictwo, ponieważ będzie to na to nazwijmy to na

9:28wzór myślnik i skrót od nazwy elementu floating group, czyli w moim przypadku FG.

9:36To co chcę zrobić teraz, to przejść do zakładki Layout.

9:40Wybrać tryb tutaj RAW Typ ustawienia container na low.

9:45Będę chciał wyśrodkować elementy w środku, zaraz zobaczyć jak to zadziała.

9:50I teraz tak odznaczamy sobie.

9:53Tutaj tą minimalną szerokość.

9:57Minimalną wysokość ustawiamy na 90 pikseli.

10:03I teraz to co chcę tutaj zrobić to mamy jeszcze.

10:06Zaznaczamy tutaj opcję Fit hit to content, tak żeby jeżeli tutaj wysokość tych

10:11elementów w środku będzie większa niż 90 pikseli, to nasz nadmiar po prostu się

10:15rozszerzy i dostosuje do elementu w środku.

10:18Natomiast jak działa właśnie to kontener element?

10:21Tutaj skorzystałem.

10:22Mamy tutaj ROW, więc jeżeli dodam na przykład przycisk Zobacz co się stanie.

10:28Przycisk trafił teraz na środek

10:30całej naszej grupy, ponieważ właśnie za to odpowiada tutaj to ustawienie.

10:34Domyślnie te elementy będą trafiać do

10:37lewej krawędzi i będą dodawane właśnie tutaj w rzędzie.

10:41Ponieważ wybraliśmy tutaj kontener layout typu row, a więc jest to po prostu

10:44odpowiednik rzędu, jeśli dodam kolejny przycisk.

10:48Jak widzisz, pojawią się tutaj.

10:50Zaraz obok drugiego.

10:51Od strony lewej do strony prawej.

10:54Jeżeli klikniemy tutaj na grupie na FG

10:58ta opcja wyśrodkować, to wszystkie te elementy będą wyśrodkować.

11:02Możemy je tutaj przesunąć do prawej krawędzi.

11:06Możemy je tak strzelić między sobą.

11:10Mają tutaj równe odstępy z każdej strony.

11:13Aby zastosować to ustawienie.

11:16Gdzie mamy tylko odstępy pomiędzy elementami.

11:18Nie ma tutaj żadnego odstępu.

11:20W przypadku krawędzi tak właśnie działa

11:22row, czyli właśnie ustawienie w tym rzędzie.

11:26Usuńmy te niepotrzebne elementy.

11:31Wróćmy do tego ustawienia, na których mi zależy, czyli Centre.

11:36Dodatkowo to co chcę zrobić to dla naszej grupy na fb FG dodać tło.

11:42Czyli wybrać tutaj flat color.

11:45Na razie dodajmy po prostu jakiś inny,

11:47żebyś zaraz zobaczył jak działa ta Floating Group.

11:52Pamiętaj nasza strona ma wysokość 1900 pikseli, a więc możemy ją skalować i

11:56zobacz co się stanie, jeżeli przejdę do podglądu.

12:00Muszę chwilę poczekać.

12:02Jak widzisz, nawet teraz, gdy króluje strona, ten nadmiar pozostaje właśnie

12:06przyczepiony do górnej krawędzi ekranu, czyli dokładnie tak jak chcieliśmy.

12:11Wróćmy.

12:14Do edytora.

12:16Nadajemy mu tutaj biały kolor, ponieważ taki mamy.

12:21W naszym layoucie.

12:22Dodatkowo chcę jeszcze nadać border

12:24obramowanie, natomiast chcę, aby było dodane tylko do tej dolnej krawędzi.

12:29Jeżeli wybrałbym tą opcję tutaj solid, czyli stałe obramowanie, to

12:33będzie ono dodane właśnie na każdej krawędzi tutaj, tutaj, tutaj i tutaj.

12:38Stała opcja mnie interesuje, więc muszę zaznaczyć ten checkbox i teraz

12:43mogę sobie zdefiniować każdą krawędź osobno.

12:46Mnie interesuje tylko border na dole czyli

12:48border bottom solid o szerokości jednego piksela i kolorze.

12:55Tutaj neutral 300.

12:57Taki właśnie mamy kolor obramowania.

13:01Mamy więc teraz tą część tutaj.

13:04To całe białe tło rozciągające się od lewej do prawej krawędzi.

13:07Teraz musimy dodać te elementy tutaj w środku.

13:10Dlatego właśnie ustawiłem to na scenę Red Ponieważ.

13:14Teraz wybiorę już zwykłą grupę i dodam ją sobie w środku.

13:18Jak widzisz wskoczyła na środek.

13:21Musimy oczywiście zmienić jej nazwę.

13:24Będzie to na bank container.

13:29I oczywiście G na końcu od grupy.

13:33Kolejna.

13:35Ponieważ te elementy będą umieszczone w rzędzie, to jak się

13:38domyślasz tutaj również ustawimy sobie row.

13:44Odznaczamy minimalną szerokość.

13:47Oznaczamy minimalną wysokość, a w zasadzie

13:50może ustawmy ją dokładnie na taką samą, jaką ma nasz nadmiar, czyli 90 pikseli.

13:55Natomiast to co chcę zrobić,

13:57to ustalić tutaj maksymalną szerokość równą 1200 pikseli.

14:02I dodatkowo dodać jeszcze padding, czyli

14:03takie odstępy po lewej i po prawej stronie równe 32 piksele.

14:11Teraz do środka dodamy trzy grupy, które będą zawierały te elementy.

14:15Pierwsza grupa będzie zawierała logo,

14:17druga to dziennik, a trzecia to takie nasze menu po prawej stronie.

14:22Znów wracamy do edytora.

14:24Jak się domyślasz, dodajemy kolejną grupę.

14:27Musimy ją sobie tutaj odpowiednio nazwać.

14:31Będzie to na.

14:34Logo wrapper.

14:37Grób.

14:39Tutaj znowu mamy elementy w rzędzie, a więc będzie to rok.

14:44Odznaczamy minimalną tutaj szerokość.

14:48Tutaj znowu zostawmy chwilowo dziewięćdziesiąt.

14:52I to co mogę teraz zrobić to kliknąć tutaj

14:54na taką grupę i kliknąć Command D, aby ją skopiować i wkleić.

14:58Opcjonalnie jeżeli chciał bym ją sobie

14:59tutaj publikować to mogę to zrobić w ten sposób.

15:03Kliknąć tutaj prawym przyciskiem myszki i wybrać kopi.

15:06Jak widzisz mamy tutaj takie okienko edycyjne.

15:09Ewentualnie to samo okienko otworzy Ci się jeżeli klikniesz w tym miejscu.

15:14Będziesz miał bardzo podobne elementy tutaj i opcja.

15:17Jak chcę wybrać tę opcję, kliknąć kupię.

15:21Teraz muszę w tym drzewku znaleźć właściwy element.

15:23Do czego chcę to wkleić?

15:25A więc na wybór Container Group

15:27najechać na niego, żeby był na niebiesko podświetlony prawy przycisk myszy i paste.

15:33Jak widzisz mam tutaj kopię

15:35i chcę to zrobić jeszcze raz, czyli znowu na wybór Container Group i znowu paste.

15:40Ponieważ nie ustaliliśmy tutaj żadnej minimalnej, żadnej maksymalnej szerokości,

15:45to te trzy elementy zajęły całą dostępną przestrzeń.

15:48Jak widzisz tutaj ten element ma 378

15:51pikseli szerokości i tak samo mogę zjechać, żeby Ci to udowodnić.

15:57Mamy więc już taką podstawową strukturę.

16:00Teraz tylko nazwijmy tę grupę odpowiednia.

16:01Mamy tu nadmiar logo, wrapper.

16:03To będzie nadmiar.

16:06Links.

16:08Grób.

16:11A to będzie.

16:14CT a Group.

16:19OK, zajmijmy się teraz właśnie dodaniem logotypu, czyli obrazka i tekstu.

16:23Wybieramy obrazek, klikam, wstawiam.

16:28Zmieniam nazwę na logo.

16:32I MG od image.

16:34Tu jak widzisz mogę przekazać

16:37jakiś obrazek z zewnętrznego źródła, dodać oczywiście atak.

16:41Dajmy więc tutaj z tej next logo, bo tak właśnie nazywa się nasz serwis.

16:46I dodajmy tutaj odpowiedni obrazek.

16:49Klikam Upload i wybieram go z plików źródłowych.

16:52Znajdziesz go w katalogu Nest Images. A logo.

16:57PNG.

17:00Kolejno muszę jeszcze zdefiniować jego wymiary.

17:03Przechodzę do zakładki Layout.

17:05Aby uzyskać obrazek o wymiarach.

17:07W moim przypadku będzie to 48 na 48 pikseli.

17:10Mogę zastosować taką opcję.

17:13Tutaj kliknąć trzeba auto stało szerokość wybrać 48.

17:18To samo zrobić tutaj.

17:19Trzeba mieć stałą szerokość zestawu wysokość 48.

17:23Jak widzisz teraz mam idealny kwadrat.

17:25Opcjonalnie mogę tutaj wybrać tę opcję KIP aspect ratio fixed.

17:30Wtedy podajemy tylko szerokość

17:32jakie radzi sobie, czyli jaki stosunek chcemy zachować jeden do jednego.

17:36A więc mamy 48 szerokości i będziemy mieć 48 wysokości.

17:41Jak widzisz to się zgadza.

17:43Teraz chcę dodać tutaj tekst z nazwą

17:46naszego serwisu, czyli zwykły element tekstowy.

17:48Tutaj tekst.

17:50Stawiam.

17:52W tym miejscu mogę podać wartość tekstową,

17:54czyli po prostu co chcę wyświetlić na ekranie.

17:57U nas będzie to nazwa z DNS, czyli nazwa naszego serwisu.

18:03Do tych opcji też jeszcze później wrócimy.

18:05To co nas teraz interesuje to ten styl.

18:08Domyślnie wskoczy nam styl body,

18:10czyli jakieś ustawienia tutaj rozmiaru, czcionki, koloru itd.

18:16Ja chcę ten styl odłączyć sobie i wybrać te wszystkie ustawienia ręcznie.

18:22W moim przypadku to będzie A.

18:25D l am Display tak się nazywa ten font.

18:30Jego grubość ustawmy na 200.

18:34Rozmiar fontu to będzie 20 pikseli, a kolor chcę zmienić na ten kolor.

18:39Secondary 600.

18:42Jak widzisz mamy teraz ten tekst.

18:43News Natomiast ta ramka tekstowa jest dużo większa niż cały ten tekst w środku.

18:47Aby to zmienić przechodzę do zakładki Zakładki Layout.

18:52Odznaczamy tę opcję.

18:53Usuwamy minimalną szerokość.

18:56Mówimy, żeby dostosować szerokość do contentu w środku.

18:59Jak widzisz, to się teraz odpowiednio skróciło.

19:01I kolejno usuwamy tutaj tą minimalną wysokość.

19:05Klikam dwa razy.

19:08Mogę wpisać 0 i już teraz wygląda to tak jak trzeba.

19:12Natomiast chcę aby te dwa elementy były zgrupowane.

19:15Jest to odsunięte od siebie o 10 pikseli.

19:19Jak to zrobić?

19:20Wystarczy, że kliknę na obrazek trzymając klawisz Shift kliknę na ten tekst.

19:26Mam teraz zaznaczone oba te elementy.

19:28Mamy tutaj opcję Edit element.

19:30Klikam prawy przycisk myszki.

19:33Group Elements w naszym przypadku.

19:35Ponieważ chcę, żeby one były umieszczone w rzędzie.

19:38I teraz skoczyły oba do nowej grupy.

19:41Nazwijmy ją po prostu na w miarę logo.

19:47Grób.

19:49Mamy tutaj.

19:50Tą opcję pozostawiamy tutaj tak jak jest.

19:54Do lewej krawędzi natomiast chcę dodać

19:56odstęp pomiędzy elementami, czyli Applied Space in between Elements.

20:01I teraz wybieram tą opcję kolumn.

20:03Czyli tutaj jeżeli mamy dwa elementy obok siebie to będzie to odstęp między nimi.

20:07Jeżeli wpiszę tutaj 10 pikseli to jak widzisz odpowiednio się one odsunęły.

20:12W ten sposób właśnie bardzo prosty sposób

20:14dodajemy odstępy między elementami wewnątrz grupy.

20:18To co chcę zrobić jeszcze, to chcę

20:19dostosować całą tą grupę do elementów, które znajdują się w jej wnętrzu.

20:25Aby to zrobić klikam właśnie na tą grupę na wybór logo.

20:29Przechodzę tutaj zaznaczam opcję fit i tu content.

20:33Kolejno całą taką grupę chcę umieścić na

20:36środku tej grupy element a w logo Wrapper Group.

20:40A więc klikam tu i w tym miejscu, jak

20:43pamiętasz, rozmieszczać dzieci wewnątrz grupy.

20:46Natomiast tutaj za pomocą tej sekcji rozmieszczać całą tą grupę

20:52względem elementu rodzica, czyli względem elementu na logo wrapper group.

20:57A więc na wybór logo Group chcemy wycenę dać tutaj w pionie.

21:03Teraz to samo chcę zrobić tutaj dla tekstu.

21:05Też chcę go sobie dawać w pionie, więc klikam tu i tutaj.

21:10Tą lewą stronę mamy gotową, mamy logo, mamy nazwę.

21:14Teraz chcemy dodać link, który będzie prowadził na osobną stronę.

21:19W naszym przypadku będzie to strona Become

21:21a host, którą zresztą będziemy przygotowywać.

21:24Ale będziesz mógł ją sobie dodać we własnym zakresie.

21:27Nas natomiast interesuje to, aby dodać tutaj taki link z elementem hover.

21:33Wracamy więc do edytora.

21:35Tym razem nie wybieramy tekstu, ale wybieramy tutaj niżej element Link.

21:43Jak widzisz mamy tutaj znów inne opcje i tym razem będziemy mogli użytkownika po

21:48kliknięciu w taki element skierować na dowolną stronę wewnątrz naszego serwisu.

21:52Na razie zostawimy tutaj indeks.

21:54Nic nie musimy tutaj więcej zmieniać,

21:57oprócz oczywiście tutaj ustawień dla tekstu.

22:00Zostawiamy ten fragment.

22:01Font plus Jakarta Sans Grubość font zmieniamy na 600.

22:08Rozmiar Fontana 16 pikseli.

22:11Wybieramy tutaj kolor secondary.

22:18To możemy pozostawić tak jak jest.

22:21Następnie przechodzimy tutaj do treści Będzie to Pico a host.

22:31Kolejno chcemy znów dostosować ten element do tej treści w środku.

22:37Czyli odznaczamy minimalną szerokość.

22:40Wybieramy Fit fit tu content

22:43ustawiamy minimalną wysokość i to co musimy zrobić jeszcze do wyceny.

22:49Ten element

22:50w tym elemencie, w tym elemencie głównym, czyli w elemencie rodzica, a więc w

22:54Barlinku, chcemy go umieścić na środku, a więc kontener element center.

23:00A następnie klikamy ten tekst i mamy go w pionie.

23:05Natomiast co zrobić, aby dodać teraz właśnie takie przejście kolorystyczne?

23:09Bo jeżeli teraz podejrzeć sobie to, co zrobiliśmy do tej pory.

23:11Kliknę Preview.

23:14Jak widzisz mamy ten tekst, ale jak

23:16najeżdża na niego myszką on sobie zmienia kolor, natomiast niedokładnie na taki na

23:20jaki mieliśmy w naszym wzorcu, czyli naszej stronie.

23:25Tutaj.

23:27Wzorcowej.

23:29To co mogę zrobić, to wrócić do edytora i przejść do zakładki Conditions.

23:33I tutaj mamy warunki, które możemy dodać do każdego elementu.

23:39W przypadku linków od razu mamy dodane 2 i one są mega proste.

23:43Mamy tutaj warunek składający się z 1, a

23:45więc kiedy coś się stanie to zmieni jakąś właściwość elementu.

23:50A więc kiedy ten link ma status hover, czyli wjeżdżamy na niego właśnie kursorem

23:55myszki, to chcemy zmienić kolor font, a nie na ten, który mamy tutaj domyślnie,

24:00ale w naszym przypadku na nasz kolor tutaj Primary 600.

24:06Natomiast kiedy jest przyciśnięty,

24:08chcę zmienić to tutaj na powiedzmy to Primary 900.

24:14I zobacz teraz, jeżeli przejdziemy do podglądu.

24:19Poczekamy chwilę na odświeżenie.

24:22Jak widzisz jak zajeżdżam am tutaj Become

24:24a host i zmienia mi się ten kolor już na właściwy.

24:28Natomiast ta zmiana następuje teraz tak

24:29zero jedynkowo, a ja chciałbym żeby ona była płynniejsze.

24:33Więc to co mogę zrobić?

24:36Wrócić do edytora.

24:37Przejść do zakładki Appearance.

24:40Zjechać tutaj niżej.

24:43I dodać transakcja, czyli takie przejście konkretnej

24:47właściwości CSS w określonym czasie, czyli powiedzieć, że chcę zmienić font color.

24:53Ale nie tak jednostkowo 0.

24:541, ale chcę żeby to trwało.

24:57Powiedzmy 300 milisekund.

24:59I teraz to przejście będzie oczywiście dużo płynniejsze.

25:03A więc skoro tą część mamy już z głowy, to zaprojektujemy jeszcze nasze menu.

25:10Dodajemy tutaj kolejną grupę.

25:16To będzie nasz bar menu.

25:25W niej umieścimy sobie dwa obrazki.

25:31A w zasadzie będzie tutaj.

25:33Jak sobie tylko zerknę będzie to ikonka i będzie to obrazek z naszym avatarem.

25:40Dodajmy więc ikonkę i już mamy gotowy zestaw ikon.

25:45Klikam, wybieram i to mi dziwne miejsce wskoczyło.

25:49Dlaczego?

25:49Otóż dlatego, że nie zmieniłem layoutu z fixed na jakiekolwiek inne.

25:55Wybierzmy row.

25:58Od razu tutaj sobie ustawimy tą minimalną szerokość.

26:04Minimalną wysokość na razie zostawmy, zaraz do tego wrócimy.

26:09Te elementy wewnątrz odsunąć od siebie.

26:11O, powiedzmy.

26:146 pixeli.

26:16Mamy już ikonkę taką menu.

26:19Zmienimy jej tylko kolor.

26:22I wymiary.

26:23Ja chcę, żeby to było 24 na 24 piksele, a kolor to będzie nasz Color Secondary 600.

26:32Kolejno obrazek z avatarem domyślnym czyli avatar.

26:39I MG.

26:44Dajemy obrazek.

26:46Wybieramy avatar.

26:50A w zasadzie nie.

26:51A oczywiście przepraszam Cię, to jest katalog icons i tutaj dopiero users tylko.

26:57Właśnie ta ikonka.

27:00Tutaj chce mieć stałe wymiary 32 piksele, czyli jeden do jednego.

27:07To co chcę zrobić teraz, to wrócić do tej grupy na w Barmani Group.

27:13Usunąć tutaj minimalną wysokość.

27:15Teraz wysokość dopasowała się do wysokości elementu w środku.

27:18Widzisz, mamy tutaj taką odpowiednią informację, że to się dostosowuje.

27:22Chcę dostawa Chcę dostosować również szerokość elementów znajdujących się w

27:26środku i dodać jeszcze odpowiedni odstęp z każdej strony.

27:31W moim przypadku będzie to.

27:34Już to sobie zerknę.

27:37Cztery piksele.

27:40Z góry i z dołu oraz z lewej i prawej strony.

27:45Kolejno chcę tutaj dodać obramowanie.

27:48Tym razem już właśnie z każdej strony.

27:50A więc wybieram sobie solid.

27:53Szerokość 1 piksel, nasz standardowy kolor obramowania.

27:58Natomiast chcę, aby to tutaj.

28:01Zaokrąglenie było jak najbardziej pełne, a więc wybieram.

28:04Wybieram sobie tutaj rachunek na bardzo dużą wartość, np.

28:08powiedzmy niech będzie to 100 pikseli.

28:13To co chcę zrobić jeszcze, to wycofać tą ikonkę.

28:16A więc klikam sobie w nią.

28:17Nazwijmy ją menu Icon.

28:25Wyd. Centrum.

28:28Pozostaje nam jeszcze tylko rozmieścić ten element względem elementu rodzica.

28:32A więc klikamy na grupę CT a.

28:36Chcemy przesunąć elementy do prawej krawędzi.

28:39Chcemy ten element tutaj w Centrowanie.

28:44W zasadzie gotowe. Nasz bar jest już praktycznie gotowe.

28:47Uzyskaliśmy niemal taki sam efekt jak na pliku źródłowym.

28:51Ta ikonka troszkę się różni, ale do tego wrócimy sobie nieco później.

28:55Natomiast jedyne co nam pozostaje

28:57to tutaj dodanie tego elementu hover, czyli zmianę tego koloru obramowania.

29:02Jeżeli użytkownik najedzie myszką na tą grupę.

29:05A więc przechodzimy do Condition all.

29:09Wybieramy sobie tutaj nowy warunek When this is Howard.

29:15Co chcemy zmienić?

29:16Border?

29:18Oczywiście kolor dla wszystkich krawędzi.

29:23Na nasz kolor Primary 600.

29:27Teraz piwu.

29:30Poczekajmy chwilę.

29:32To się zgadza.

29:34To się zgadza.

29:35Znów mamy to przejście zero jedynkowe, ale myślę, że wiesz jak to rozwiązać.

29:39Jak dodać tranzycji, jak odnieść się do odpowiedniej właściwości.

29:43A to wszystko, co mieliśmy do zbudowania w tej lekcji.

29:46Dziękuję Ci za uwagę i widzimy się już w lekcji następnej.