Aplikacje no-code z Bubble: Sekcja hero i wprowadzanie danych

0:00Witam Cię w kolejnej lekcji.

0:02Zanim przejdziemy do budowy kolejnej sekcji, czyli sekcji HERO naszego serwisu.

0:061 Bardzo ważny komunikat.

0:08Jeżeli podczas lekcji jesteś w stanie nadążyć za tym co robię, albo po prostu

0:13robię coś za szybko, chciałbyś sobie sprawdzić jak te ustawienia ja tam

0:17zastosowałem, to pamiętaj, że przechodząc do tej skopiowane bazy portable

0:22do bazy linki znajdziesz tutaj link do mojego edytora.

0:26Czyli po prostu odpalając go przejdziesz

0:28do tego samego edytora z jakim ja teraz będę pracował Babel.

0:31Ja tam ustawiłem opcję on mi.

0:33A więc nie przejmuj się, nie będziesz w

0:34stanie nic mi tam zepsuć, a w każdej chwili możesz sobie porównać swoją pracę z

0:38moją, albo po prostu posprawdzać, jeżeli coś jest dla Ciebie niejasne.

0:43A więc skoro mamy wyjaśnione, to przejdźmy już teraz do edytora.

0:49A w zasadzie może cofnijmy się jeszcze

0:51tutaj do tej sekcji i sprawdźmy, co będziemy teraz projektować.

0:55Naszym celem będzie wdrożenie tutaj tej całej sekcji Hero, czyli tego obrazka

0:59tekstów oraz tutaj tego boksa z polami input i oczywiście przyciskiem.

1:06Wracamy.

1:08Do edytora i przystąpić do pracy.

1:11Natomiast zanim to zrobimy, to jedna bardzo ważna rzecz.

1:15Dodaliśmy tutaj tą zwykłą ikonkę.

1:16Jak pamiętasz wybrałem tutaj element icon,

1:19natomiast to nie jest ta ikonka, którą mamy w naszym gotowym projekcie.

1:24Ja tam skorzystałem z innego zestawu ikon, aby go dodać.

1:28Będziemy musieli zainstalować pierwszy plugin.

1:30Czym są pluginy? Pluginy to takie po prostu dodatki do

1:33Babel, które rozszerzają jego funkcjonalność.

1:36Jeżeli Babel sam w sobie czegoś nie będzie w stanie zrobić, to najczęściej ktoś już

1:39wymyśli plugin, który dokładnie robi to, czego będziesz potrzebował.

1:43W naszym przypadku są to właśnie takie

1:45zestawy darmowych ikon, które możemy w każdej chwili wykorzystać.

1:48Aby to zrobić klikamy zakładkę Plugins.

1:52Add plugins i wyszukujemy.

1:55Ikonki fajne.

1:58Aby zainstalować ten plugin klikam tutaj install.

2:00Jak widzisz jest on darmowy.

2:02Babel posiada zarówno płatne jak i darmowe pluginy.

2:05Będziemy korzystać tylko z tych darmowych.

2:08A więc nie przedłużając install.

2:11Klikamy Down i plugin już został zainstalowany.

2:15Tu mamy informację na jaką stronę możemy

2:17przejść, aby przejrzeć sobie wszystkie dostępne ikonki.

2:20Ja mam już ją stworzoną. Przejdźmy tutaj.

2:23Jest to strona ikony Design.

2:25I mogę kliknąć w brąz ikon.

2:28Jak widzisz mam tutaj zestaw różnych ikonek.

2:33Niektóre mają nawet po jak tutaj material symbol z 12 tysięcy gotowych ikonek.

2:38My będziemy natomiast korzystać z tego zestawu Solar.

2:41A więc klikam sobie tutaj na Solar

2:44i to co chcę znaleźć to ikonkę menu, która nosi nazwę.

2:48Pozwól, że sobie to sprawdzę z projektem. Hamburger.

2:52Po prostu hamburger.

2:56Hamburger menu jest to ta ikonka, więc co

2:58tutaj klikam i to co muszę zrobić to skopiować sobie tą

3:02wartość, czyli po prostu kliknąć w tą ikonkę.

3:05Teraz wracamy do edytora.

3:09Do zakładki Design.

3:11Na naszej liście elementów pojawił się nowy o nazwie ikonie Firefox.

3:15Mogę go więc wybrać i wstawić w to miejsce.

3:19Usuwamy poprzednią ikonkę, którą mieliśmy tutaj dodaną.

3:23Teraz to nazywamy Menu Ikon.

3:29Oczywiście bez literówek.

3:32Przechodzimy do zakładki Layout i ustalamy wymiary na 24 na 24 piksele.

3:39Chcę to wyśrodkować.

3:41Aby dodać tą ikonkę

3:43muszę w to miejsce wstawić tą skopiowano nazwę czyli Solar Hamburger menu.

3:48I to wszystko.

3:49Tutaj jeszcze tylko zmieniamy kolor na nasz kolor secondary.

3:54I przejdźmy do podglądu naszego projektu.

3:56Oczywiście jak już wiesz, żeby podejrzeć projekt wystarczy kliknąć tutaj Preview.

4:02Każda zmiana będzie skutkowała wyświetleniem takiego boxa,

4:06którego musimy kliknąć, aby odświeżyć naszą stronę.

4:09Dodatkowo to co Cię może zastanawiać to ten element na dole, tak zwany debugger.

4:13Dzięki niemu możemy debugowania naszą aplikację i wyszukiwać różne błędy.

4:17Natomiast aby go usunąć wystarczy

4:20pierwsze kolejności kliknąć tutaj, żeby nasza strona przeładowana.

4:24Jak widzisz ikonka już nam się tutaj zmieniła na właściwą.

4:28Teraz musimy przejść do paska adresu.

4:29Ja korzystam z Arka, więc klikam sobie komentarze i usuwam ten element.

4:35Tutaj znak zapytania Debug mode równa się true.

4:38Zaznaczam usuwam.

4:40Klikam Enter, żeby mi się to przeładować.

4:42Jak widzisz debugger już nam zniknął i mamy dobrze wyglądającą stronę.

4:47Wracamy więc do edytora i zacznijmy teraz jeszcze pracować już nad sekcją Hero.

4:54To, co chcę zrobić w pierwszej kolejności,

4:56to przede wszystkim zmniejszyć wysokość całej naszej strony.

5:01Ja chcę mieć 1900.

5:02Wróćmy do wartości 900.

5:05I teraz dodamy tutaj kolejną grupę.

5:08Ja działam na takiej zasadzie, że zawsze

5:11wszystkie elementy na stronie grupuje sobie w jedną grupę o nazwie Page w.

5:16Robię to, ponieważ dużo łatwiej potem jest pracować z takimi elementami.

5:20Jak już wiesz, możemy utworzyć nową stronę i sklonować istniejącą.

5:23Natomiast bardzo często natrafisz na taką sytuację, gdzie będziesz miał

5:27gotową stronę i będziesz chciał skopiować na nią jakąś większą ilość elementów.

5:31Z drugiej strony.

5:33Niestety tutaj w tym drzewku nie da się zaznaczać kilku elementów na raz.

5:37Jak sobie to rozwinę jest to niestety niemożliwe.

5:40Jeżeli te elementy są dosyć duże to tutaj na stronie też ciężko będzie zaznaczyć.

5:45Natomiast jeżeli będą one zebrane w jedną

5:47grupę o właśnie tej nazwie page wrapper to wystarczy, że skopiujesz sobie całą tą

5:52grupę, wkleić na drugą stronę i pousuwać to co jest tam niepotrzebne.

5:56Takie podejście ma jeszcze wiele innych

5:58zalet, ale o tym porozmawiamy w dalszej części kursu.

6:02A więc dodajemy tutaj grupę pojęć wrapper.

6:13Layout ustawiamy na kolumn, ponieważ

6:15będziemy chcieć mieć sekcja po sekcji, a więc kolumn.

6:20Przedtem korzystaliśmy z RO i mam nadzieję, że to już jest dla Ciebie jasne.

6:24Jak sobie zarządzać z takim ustawieniem?

6:26W rzędzie natomiast teraz wybierzemy kolumn.

6:31Odznaczamy tę opcję.

6:32Nie chcemy mieć tutaj żadnej minimalnej szerokości, żadnej maksymalnej.

6:37Minimalną wysokość możemy chwilowo

6:38zostawić na 280, żeby nam się to wygodnie pracowało.

6:43Jedna bardzo ważna rzecz.

6:44Jak widzisz teraz tutaj cała ta nasza grupa przylega do

6:47górnej prawej krawędzi ekranu, podobnie zresztą jak nasz bar.

6:52Jak pamiętasz, mówiłem ci, że Floating Group jest niejako wycięte

6:55z flow całego dokumentu, a więc przykrywa elementy, które znajdują się pod nim.

7:01Aby sobie tutaj teraz to odpowiednio ustawić, czyli odsunąć tą grupę

7:08Page Wrapper group o tą wysokość, którą ma nasz nadmiar.

7:12Wystarczy, że przejdziemy właśnie do jej

7:14ustawień i dodamy tutaj margines 90 pikseli.

7:19A w zasadzie 91, bo tyle ma tutaj

7:23ten właśnie bar plus ten jeden piksel obramowania.

7:27Teraz już nam się to będzie wyświetlało poprawnie.

7:31A my możemy przystąpić do pracy i zacząć dodawać kolejne elementy.

7:36Będzie to kolejna grupa.

7:38Jak widzisz, jest ona tutaj odsunięta o ten margines.

7:43Pamiętaj, że margines dodawany jest zawsze

7:45na zewnątrz danego elementu, czyli tutaj mamy tą grupę wrapper.

7:50On jest dodawany właśnie na zewnątrz.

7:52Padding z kolei dodawany jest w środku tak jak miało to miejsce tutaj, kiedy

7:56tworzyliśmy nasze menu i tu dodaliśmy padding.

8:00Jak pamiętasz 4 i 8 pixela i one właśnie tutaj działają od

8:05obramowania do środka, a margin działa od obramowania na zewnątrz.

8:10Wracamy więc tutaj do grupy.

8:14A nazywamy ją Hero Group.

8:19Tutaj znów będę chciał ustawić sobie.

8:23Kolumn.

8:25Nie potrzebuję minimalnej szerokości, nie potrzebuję maksymalnej szerokości.

8:32Natomiast będę chciał tutaj dodać tło.

8:35A więc możemy wyłączyć ten styl Standard

8:37Group, a on jak widzisz tutaj nie ma praktycznie żadnych ustawień.

8:41Jest to taka zwykła przezroczysta grupa.

8:44Klikamy Dieta Style.

8:46Wybieramy sobie tutaj background style flat color i u nas będzie to.

8:51Ten kolor tutaj Neutral 25.

8:57Skoro mamy tło ustawione to teraz dodajemy

9:00kolejną grupę, która w środku 1 elementy w środku.

9:04A więc następna grupa.

9:06Tym razem będzie to Hero Container.

9:09Jak widzisz staram się trzymać takie jednolite nazewnictwo.

9:12Czyli jeżeli mamy element, który

9:14wyśrodkować nam treści, to będzie to najczęściej właśnie nazwa container.

9:21Jak się domyślasz nie będzie to fixed.

9:24Znów ustawmy to na kolumn.

9:27Odznaczamy minimalną.

9:29Szerokość maksymalna będzie taka sama jak mieliśmy zastosowane w barze, czyli 1200

9:35pikseli i padding po 32 piksele z każdej strony.

9:44Dodatkowo chcemy jeszcze taki element

9:47tutaj względem rodzica, czyli właśnie ustawiamy te opcje.

9:55A więc tak mamy tutaj Hero Group.

9:58Ponieważ tutaj mamy już jakoś wysokość tego elementu wewnątrz, to możemy przejść

10:03do Hero Group i wyzerować sobie tą minimalną wysokość.

10:06Ona się dostosowuje teraz do elementu w środku, a my wracamy do

10:10Hero Container i zaczynamy dodawać po kolei elementy, których potrzebujemy.

10:14A więc obrazek i te teksty.

10:17Zacznijmy od obrazka.

10:21Jak się domyślasz wybieramy tutaj element image.

10:24W tym przypadku będzie to.

10:27Hero i MG po prostu.

10:31Apple ładujemy właściwy obrazek.

10:36Heloł PP.

10:44Ja chcę mu tutaj ustawić maksymalną szerokość na 512 pikseli.

10:50Nie potrzebuję minimalnej i dodatkowo zachować to aspect ratio jeden do jednego.

10:56EXP crashe jest bardzo przydatne, jeżeli pracujemy z obrazkami,

11:00ponieważ jak widzisz tutaj, aby zachować kwadrat ja stosuję jeden do jednego.

11:04Natomiast jeżeli będziesz chciał dodawać

11:05obrazki, które mają format landscape, czyli są szersze

11:10niż wyższe to stosujemy aspect ratio od 3 do dwóch.

11:14Natomiast jeżeli chcesz wstawić obrazek portretowe, czyli wyższe niż szerszy

11:19to to right jest odwrócone, czyli jest to 2 do 3.

11:22Zresztą później jeszcze przejdziemy, ale to taka informacja na przyszłość.

11:26Znów koncentrujemy obrazek i dodajemy następny element do naszej grupy.

11:33Czyli tekst możemy sobie skopiować.

11:36Ten tekst.

11:42Wkleić go tutaj.

11:46Jak pamiętasz to co zawsze musimy zrobić dla tekstu, to wyzerować te wartości.

11:54Tak jak chcę.

11:56Oczywiście dostosować go do szerokości,

11:59usunąć tą minimalna wysokość i teraz zastosować odpowiednie style.

12:05Jak już pamiętasz, mamy tutaj styl Buddy.

12:08I w zasadzie nie rozmawialiśmy jeszcze o tym, czym są style style.

12:12To taki zestaw właściwości, który możemy przypisać dla danego elementu.

12:17Jest on o tyle przydatny, że możemy go zastosować w bardzo wielu miejscach.

12:21Bo zobacz, co by się stało, gdybym teraz chciał właśnie taki sam tekst zastosować.

12:26Tutaj musiałbym albo kopiować ten element,

12:29albo po prostu dodać nowy tekst i ręcznie uzupełnić wszystkie te właściwości.

12:36Jest to mega męczące i mega bezsensowne.

12:39Zwłaszcza jeżeli takich elementów na całym serwisie będziemy mieć setki.

12:43A potem przyjdzie nasz, powiedzmy klient i powie wie pan co?

12:47A jednak ten ciemny kolor mi się nie podoba.

12:48Ja bym chciał mieć np.

12:49wszystkie linki zielone. No i co wtedy?

12:51Musielibyśmy ręcznie

12:53przechodzić, wyszukiwać wszystkie te linki, poprawiać ten kolor.

12:55Jest to strata czasu.

12:57Aby więc to zrobić mega szybko, możemy tutaj dodać nowy styl.

13:01Klikam w to miejsce, wybieram sobie Create New Style i nadaje mu nazwę.

13:08Link menu.

13:10Klikam Create. I to wszystko.

13:12Jeżeli teraz dodam jakiś tekst np.

13:15w to miejsce, to mogę tutaj zamiast Buddy wybrać właśnie.

13:20Oczywiście nie tekst, bo to nie jest tekst, tylko link.

13:22Przepraszam Cię najmocniej Element link.

13:25Teraz klikam link menu.

13:27Jak widzisz mamy dokładnie takie same

13:28style, takie same właściwości dla tekstu, ustawione tu i tu.

13:33Więc wywalamy to.

13:36I teraz zdefiniujmy sobie tutaj.

13:38Ten tekst to będzie przede wszystkim nie

13:40zwykły tekst, ale nagłówek pierwszego typu.

13:42To jest przydatne pod SEO.

13:45Usuwamy ten styl, zostawiamy ten font.

13:49To będzie czcionka o rozmiarze 64 piksele.

13:59Grubość ustawiamy na 700.

14:03Na bold Lines Passing, czyli odstęp pomiędzy liniami ustawiamy na 1 2.

14:13I skoro mamy to zdefiniowane, to

14:14oczywiście możemy tutaj utworzyć nowy styl.

14:18Moje nazewnictwo z reguły jest takie, że staram się przede wszystkim

14:23ustalić jaki to element, czyli to jest H1 nagłówek pierwszego typu.

14:26Dodatkowo dodaję sobie jeszcze jego

14:28wymiar, żeby potem łatwo mi się z tym pracowało.

14:30Możesz np. zastosować nazewnictwo head i 1 2.

14:34Czasami Twój designer będzie Ci

14:36przekazywał styl grid i tam już będą odpowiednie nazwy takich stylów.

14:41Natomiast to jak nazwiesz to Babel zależy tylko od Ciebie.

14:44Stosuj takie nazewnictwo, które po prostu

14:46sprawia, że wygodnie Ci się z tymi stylami pracuje.

14:49Klikam Create.

14:51Natomiast to co chcę zrobić to nadpisać ten styl.

14:54Domyślnie powinien być on wyśrodkować do

14:57lewej strony, natomiast w naszym przypadku chcę go tutaj wyceny ować.

15:01A więc klikam to i już mam wyśrodkować tekst na naszej stronie.

15:09Kolejno mogę sobie to skopiować

15:11command C albo command V lub command d command jest dużo wygodniejsze.

15:17I teraz wracam tutaj.

15:21Kopiuje sam tekst.

15:24Przechodzę do edytora i zmieniam tutaj jego wartość.

15:29Podpinam styl.

15:31To już będzie zwykły tekst.

15:35W moim przypadku to będzie.

15:39Znów na standardowy font.

15:42Grubość 500, rozmiar 20 pikseli.

15:50Kolor Foundation Neutral 600, czyli ten do tekstu.

15:58Namespace link ustawiony na półtora, a ten styl będzie się w moim przypadku nazywał.

16:07Body.

16:08XL.

16:10500.

16:12Klikam Create.

16:14To co mogę zrobić, to znów wyśrodkować ten tekst.

16:20Teraz miałem tutaj wyśrodkować.

16:21A więc jak widzisz zapisało mi się to tu.

16:23Natomiast miejmy to sobie tutaj.

16:26Jeżeli chcesz edytować styl, zrobiłem to za szybko, to wystarczy, że

16:30klikniesz tutaj tylko Edit style mając wybrany ten styl.

16:34Edit Style.

16:36Tutaj do lewej krawędzi chcemy wygenerować sobie.

16:40Wracamy do dizajnu i to co chcę zrobić to umieścić ten element na środku.

16:49Teraz ten cały nagłówek jest troszkę za długi.

16:53A więc zaznaczam sobie te dwa teksty.

16:57Grupuje.

17:00Jako kolumn.

17:01Jak wiesz, to właśnie w ten sposób

17:03uzyskujemy taki układ kolumnowy, czyli jeden element pod drugim, w

17:07przeciwieństwie do ROW, gdzie mieliśmy to w rzędzie.

17:11Te ustawienia są też bardzo zbliżone do tego, co robiliśmy tutaj.

17:15Jeżeli chcesz je sobie przetestować, to

17:17oczywiście możesz utworzyć jakiś duży element i nadać mu jakąś dużą grupę,

17:21ustawić mu kolumnę, powrzucać do środka np.

17:24kilka przycisków i pobawić się tymi ustawieniami.

17:27Natomiast myślę, że jest to na tyle intuicyjne, że dojdziesz do tego sam.

17:32Jeżeli nie, to i tak będziemy z tego korzystać.

17:34W ramach pracy z naszą aplikacją, więc wszystko zrozumiesz.

17:39OK, mamy tutaj tą grupę, nazwijmy ją.

17:43Hero.

17:46Top powiedzmy Group.

17:50Chcę jej nadać maksymalną szerokość równą 960 pikseli.

17:55Dzięki temu światło fajnie to zmniejszyło i nadać jeszcze odstęp pomiędzy tym

18:00nagłówkiem i tym tekstem równe, powiedzmy dwanaście pikseli.

18:05Dzięki temu mamy teraz taki fajny oddech pomiędzy jednym tekstem a drugim.

18:10Zanim dodamy kolejne elementy.

18:12Jedna poprawka, bo zauważyłem, że w naszym pliku wzorcowym.

18:17Tutaj całe to tło nie jest jednolite, czyli nie mamy tutaj jednolitego tła dla

18:22sekcji Hero, ale mamy tutaj zastosowany gradient.

18:25Jak więc to zmienić? Bardzo prosto.

18:28Klikamy tutaj na sekcję na całą grupę Hero Group.

18:33Przechodzimy do Appearance i zamiast flat color wybieramy Gradient.

18:37Będzie to gradient linearny.

18:40Tutaj Gradient Dragon Top.

18:43A wartości już tutaj kopiuję i wklejam.

18:49Pierwsza to F7, F7, EWD.

18:53A druga.

18:59F 0 f. F.

19:01F. B.

19:02I teraz mamy już taki kolor, jaki mieliśmy właśnie na naszym wzorcowym projekcie.

19:08Dobrze, skoro to poprawiliśmy, to dodajmy kolejne elementy.

19:12Co tam mamy?

19:14Mamy właśnie taką sekcję, gdzie mamy właśnie te podpisy.

19:18Ile mamy gości, Ile lokali, ilu hostów?

19:22Wracamy więc do edytora, żeby było szybciej.

19:25Ja sobie skopiuję ten tekst.

19:29Wkleję go poza tą grupę tutaj z tym tekstem.

19:32Wkleję to sobie tutaj.

19:35I sprawdźmy jakie mamy tutaj ustawienia.

19:39To będzie w moim przypadku Helsing 3, czyli.

19:43Podpinam style.

19:44Wybieram sobie tutaj Healing 3.

19:48Teraz to będzie 50k.

19:52Plus.

19:56Grubość Fanta 700.

19:59Rozmiar 32 piksela.

20:04Kolor Primary 600.

20:08I wysokość. Napis PASSING ustawiony na 1.

20:12Kropka 25.

20:16I zapiszmy ten styl.

20:18Jako H3.

20:2232 piksele.

20:30Teraz znów zaznaczam ten tekst body.

20:34Przechodzę tutaj do tej grupy Hero Container.

20:37Wklejam.

20:39I tym razem będzie to tekst hosts.

20:44Odpinam ten styl i dodaję nowy.

20:48W tym przypadku będzie to.

20:51Znowu nasza standardowa czcionka 700 grubości 16 pikseli, rozmiar fontów.

21:00Kolor Neutral 600 na passing jest właściwy, a ten styl będzie się nazywał.

21:06Body MD 700, czyli troszkę mniejszy font dla tekstu body.

21:17Dodatkowo możemy tutaj jeszcze sobie dodać

21:20to 16 pikseli, żeby łatwo było rozpoznać z jakim rozmiarem fontu mamy do czynienia.

21:25I to samo mogę zrobić tutaj dla Excel.

21:30Natomiast żeby przejść do stylów

21:32i nie zmieniać tego tutaj, wystarczy, że kliknę zakładkę Styles.

21:36Jak widzisz mam tutaj listę wszystkich zdefiniowanych stylów.

21:39Mogę sobie wybrać to Body XL 500 i tutaj dodać 20 pikseli.

21:48Wracamy do designera.

21:50Skoro mamy tutaj to dodane odpowiednio, to zrobimy te dwa elementy.

21:59Dodajemy do container.

22:03To będzie.

22:05Nowy bar.

22:07Stad grup.

22:12Odległość między tymi elementami w środku.

22:16Będzie równa cztery piksele.

22:22Tutaj. Jak widzisz mamy tutaj układ kolumnowy,

22:25czyli dwa rzędy, a więc nie możemy dodać tutaj odstępu dla kolumn.

22:29Musimy dodać tylko dla rzędów 4 pixele.

22:36To stosujmy szerokość tutaj do tych elementów środku.

22:40Reszta pozostaje taka jak jest.

22:43To co chcę zrobić teraz to zaznaczyć sobie

22:45całą tą grupę na stat g i powielić ją jeszcze dwukrotnie.

22:52Następnie zaznaczam wszystkie te trzy grupy.

22:56Trzeba odpowiednio trafić.

22:59I chcę je jeszcze zgrupować, tym razem w Container.

23:04Nazwijmy to.

23:07Na wybór.

23:10Wrapper Group.

23:13Tym razem dodaję tutaj odstęp rzędu.

23:18Niech zerknę w projekt 64 piksele.

23:21Kolumna.

23:2364 piksele.

23:25Znów fit fit to content.

23:28Temat wyceny.

23:29To co chcę dodać to jeszcze padding.

23:33Od góry równe.

23:3730 pikseli.

23:41Przejdźmy tutaj.

23:43Gdzieś mi zniknął kursor.

23:44Jest.

23:46A w zasadzie nawet nie 30, tylko 32 piksele.

23:5148.

23:53Z lewej i z prawej strony.

23:55Mam taką dużą grupę,

23:57którą chcę od góry, od tych elementów odsunąć o kolejne szesnaście pikseli

24:04i dodać jej jeszcze obramowanie na samej górze.

24:08Jak wiesz musimy zaznaczyć tą opcję, aby każdy border był ustawiany osobno.

24:14Tym razem top.

24:16Solid 2 pixele.

24:19I nasz kolor tutaj standardowy do obramowania.

24:23A więc coraz lepiej.

24:25Mamy już niemal taki układ, jaki powinniśmy mieć.

24:28Pozostaje nam jeszcze tylko dodanie tego boksa z polami input.

24:33A więc.

24:35Dodajemy kolejną grupę.

24:38Jak widzisz to raz skoczyła mi nie w to miejsce, które powinna.

24:41Aby ją przesunąć mogę przejść do zakładki Layout.

24:45I wybrać tylko inny układ.

24:48To będzie w moim przypadku.

24:50I teraz mam tutaj dostęp do tych opcji

24:53Make first previous index Mogę to przesuwać właśnie poprzez next albo po

24:57prostu zaznaczyć may class jeżeli ma to być ostatnia grupa.

25:01To będzie tak Serge.

25:07Oczywiście grób.

25:10Przejdźmy tutaj do Appearance.

25:13Dodajemy odpowiednie ustawienia, a ja sobie znów sprawdzę to z wzorcem.

25:19Co my tutaj mamy?

25:20Mamy przede wszystkim kolor biały.

25:25Zaokrąglenie narożników równe 8 pikseli.

25:29I dodamy jeszcze taki cień, który będzie wystawał poza naszą grupę.

25:35Czyli Shadows Time out Set wartości to.

25:39Zero.

25:4230.

25:4430 tutaj 0 kolor to kolor primary.

25:50900.

25:56Ray Mary 900.

25:59Ale przezroczystość ustawiona na 5%.

26:04Teraz już jest wszystko tak, jak powinno być.

26:06Natomiast ta grupa Serif jest niemal przyklejona do krawędzi tej grupy Hero.

26:14Dodajmy więc jeszcze dla Hero Container odstęp.

26:19Powiedzmy tutaj padding możemy usunąć tą minimalną wysokość.

26:24Nic nie zaszkodzi, jeżeli ją zostawimy,

26:26ale zawsze staraj się to zerwać I dodajmy padding 32 od góry i 64 od dołu.

26:34Mamy teraz więcej przestrzeni.

26:39Dobrze.

26:39To co chcę zrobić teraz tutaj, to dodać kolejną grupę.

26:44Ale zanim to zrobię to.

26:47Usuwamy to.

26:49Czyli minimalną szerokość.

26:53Dodaję kolejną grupę.

26:56A będzie grupa na.

27:01Location.

27:10Container Layout ustawiony na row.

27:13Tutaj dodajemy pole input, w którym

27:16użytkownik będzie mógł wpisać gdzie się chce udać.

27:21Ustalamy też odpowiednie style dla takiego pola input.

27:24Ja już je sobie tutaj sprawdzam.

27:28To jest 14 font. Grubość.

27:33500. Kolor.

27:35Secondary 600.

27:38Last Holder, czyli ten tekst, który

27:40pojawia się w tym miejscu, czyli Type Hero.

27:43Zanim użytkownik coś wpisze, ustawmy na też Secondary 600.

27:48Natomiast jego wartość ja z reguły

27:50ustawiam na jakieś 50% tego standardowego koloru, a nawet i to jest za dużo.

27:55Dajmy tu 35.

28:00Nie potrzebuję tutaj żadnego koloru

28:02dla takiego pola, nie potrzebuję również żadnego obramowania.

28:08Mamy tutaj jakieś conditions, ale widzisz różne tutaj warunki.

28:14This is invalid możemy usunąć.

28:18Nas interesuje tylko tryb focus, a więc ten tryb, kiedy użytkownik kliknie na

28:22takie pole input i zacznie po prostu coś do niego wpisywać, jakąś wartość.

28:26Jedyne co chcemy zmienić to ja to tutaj usuwam i wybiorę tylko font color.

28:34A w zasadzie nawet nie, ponieważ tutaj będziemy mieć ten font, który nam wskoczy.

28:39Właśnie tutaj, czyli place holder mamy ten jaśniejszy.

28:44A jak użytkownik zacznie wpisywać to pojawi się ten ciemniejszy kolor.

28:47Zresztą zaraz to zobaczysz.

28:49Są gumy ramowe.

28:51Dajemy location.

28:55Input.

28:58Ustalamy jeszcze.

29:03Czy mamy tutaj jakąś maksymalną szerokość?

29:06Nie, nie mamy maksymalnej szerokości.

29:09A więc to odznaczamy.

29:12Tę minimalną i maksymalną wysokość ustawiamy na 48 pikseli.

29:20To co chcę jeszcze tutaj dodać do takiej grupy to ikonka z ikoną WiFi.

29:27Będzie to ikonka o takiej nazwie.

29:36Kolor to będzie nasz stały kolor secondary.

29:4524 na 24 piksele.

29:48Jest to map pointer linear.

29:51Jeżeli chciałbyś odwzorować.

29:55Nazwijmy to Locke Icon.

30:04I teraz tak zaznaczam całą grupę na FB Location Group.

30:11Wybieram fit fit content.

30:16Oznaczam minimalną szerokość.

30:18A w zasadzie nie, ponieważ nie ustaliliśmy

30:19tutaj minimalnej szerokości dla naszego pola input, więc to tylko nam

30:24się tak skurczyło do rozmiarów samej ikonki.

30:28Natomiast.

30:30Czy ja mam tutaj jakąś stałą szerokość dla całej tej grupy?

30:34Zerknijmy.

30:35Tak, mam minimalną szerokość takiej grupy ustawionej na ustawioną na 248 pikseli.

30:42Pozbywamy się tutaj tej minimalnej

30:44wysokości i dodajemy jeszcze odstęp pomiędzy ikonką a tym polem.

30:50Powiedzmy 4 pixele.

30:52Myślę, że to będzie zupełności wystarczające, chociaż może być mało.

30:56Dajmy tutaj 8.

31:00Jedyne co chcę zrobić to jak się domyślasz w Central dać tą ikonkę.

31:06To całą grupę na Storage Group też usuwamy.

31:09Minimalną wysokość.

31:12Natomiast dodam tutaj duże parkingi.

31:14Będzie to 24 chwilowo z każdej strony.

31:22Jeszcze porównam tutaj z wzorcowym.

31:24Tak, dokładnie jest to 24, a margines od góry 64, żeby odsunąć to od tego tekstu.

31:32Zerknijmy jak to teraz wygląda.

31:38Mamy już całkiem fajnie wyglądającą sekcję Hero.

31:43Mamy pierwsze pole Input.

31:44Musimy teraz dodać pozostałe.

31:46A więc to co chcę zrobić, to skopiować sobie tutaj.

31:52Tą całą grupę location.

31:572.

31:58Będzie to data check in data, check out oraz liczba gości.

32:05A więc mamy tutaj cztery takie grupy.

32:08Te mniejsze grupy będą miały wymiary po 110 pikseli.

32:16A więc to będzie.

32:19Przesuniemy sobie to okno.

32:22Czegoś mi tutaj nie chce to wskoczyć.

32:23Jest to będzie.

32:27Check in group.

32:31I będzie to miało minimalną szerokość 110 pikseli.

32:38Tu będziemy mieć na.

32:42Czekał.

32:46Group.

32:48110 pikseli.

32:55A to będzie gest.

33:05Jest równa 110.

33:08Pikseli.

33:11Po. Zmieniajmy teraz tylko te teksty.

33:15W folderach to będzie.

33:19Jest.

33:24Tutaj będziemy mieć check out.

33:30Tutaj.

33:34Jakim.

33:36U.

33:39San Francisco.

33:45Pozostaje nam jeszcze tutaj tylko pozmieniać te ikonki.

33:49Już po wklejam odpowiednie wartości.

33:53Będziesz miał oczywiście skopiować sobie z mojego edytora.

33:57W tym przypadku będzie to calendar add linear.

34:05Będzie to kalendarz Mark Linear.

34:14W tym przypadku będzie to taka ikonka.

34:18Czyli user group, round and linear.

34:21To, co chcę jeszcze zrobić, to odsuwać tę grupę między sobą.

34:25Czyli klikam grupę na Rage Group.

34:28To daje Space Ink, powiedzmy 32 piksele.

34:36Kolejno chcę dodać jeszcze takie odstępy,

34:38takie linie, które oddzielają poszczególne elementy.

34:42W tym celu mogę wykorzystać element Shape.

34:46W zasadzie tylko do tego z niego korzystam.

34:49Pozwala ono na wstawienie takiego SHAPE u.

34:53Tylko niestety może to być wyłącznie prostokąt, kwadrat albo linia.

34:57Ja właśnie tworzę takie linie proste,

35:00które mi w fajny sposób oddzielają różne elementy.

35:03W moim przypadku będzie to tak.

35:05Szerokość.

35:08Jeden piksel.

35:09Stała wysokość równa 48 pikseli.

35:15Kolor to będzie nasz kolor.

35:18Obramowania, nazwijmy go po prostu Divided.

35:25Teraz chcę powielić.

35:27Taką linię jeszcze tutaj dwa razy Tak, jeden raz.

35:332. Dobrze liczę?

35:34Przesuń to odpowiednio, czyli Previous

35:37Previous Odstęp między czekiem i checkout I tutaj jeszcze odstęp między czekał.

35:42Tak jest.

35:45Tu już nasza wyszukiwarka jest niemal gotowa.

35:48Natomiast to, co chcę zrobić teraz.

35:53To te elementy wszystkie, czyli te grupy, nawet gest dwa lider.

35:59Chociaż czy musimy to robić?

36:00Może nawet nie.

36:01Nawet ułatwimy sobie życie I dodajmy tylko button.

36:06Nazwijmy go Serge BTN.

36:15To będzie.

36:19Tylko dodajmy do niego odpowiednie style.

36:22Tu już mamy jakiś primary button.

36:24Możemy sobie to odpiąć.

36:28W moim przypadku taki baton będzie miał następujące właściwości tutaj.

36:34To będzie tak 700.

36:38Grubości.

36:40Czcionka 16, kolor primary kontrast możemy zostawić

36:45background stały to będzie w naszym przypadku to Primary 600.

36:51Zaokrąglenie krawężników równe 8 pikseli.

36:56Nie chcemy mieć tutaj żadnego cienia, więc go usuwamy.

37:01Natomiast chcemy zmieniać ten kolor tego

37:03buttona, więc background transition ustawiamy na 300, żeby to było płynne.

37:09Już Ci o tym mówiłem jak to działa i teraz.

37:12Przechodzimy do Layout.

37:14Odznaczamy tą opcję, odznaczamy minimalną szerokość.

37:18Klikamy Fit tu content.

37:21Minimalna wysokość 48 pikseli.

37:26Parkingi możemy zostawić na takie jakie są

37:29na conditions, ale tylko jeżeli tak to jest Batman i Howard.

37:32Tak jak się domyślasz.

37:34A Grand Color zmienimy na Primary 700.

37:38Howard.

37:41To samo zrobimy, kiedy?

37:43Tutaj define another condition this button is.

37:51Tym razem będzie to background color.

37:55Ustawione na Primary 900.

37:59Jedyne co nam pozostaje to dostosować tą całą serię do contentu w środku.

38:06I odpowiednio sobie wycenę tą grupę.

38:09I teraz już cała nasza sekcja Hero jest gotowa.

38:12Możemy odświeżyć.

38:15Wszystko się zgadza i wygląda to niemal

38:17dokładnie tak, jak w naszym projekcie wzorcowym.

38:19Dziękuję Ci za uwagę.

38:20To była bardzo długa lekcja.

38:22Zasługujesz na chwilę przerwy.

38:24Ja idę wypić kawę i widzimy się już następnej lekcji.