Aplikacje no-code z Bubble: Podstawowy układ dwukolumnowy

0:00Kontynuujemy naszą przygodę ze stroną

0:01główną i tym razem do wdrożenia mamy najbardziej ikoniczne sekcje, czyli sekcje

0:072 kolumnowe, które najczęściej spotkasz na stronach internetowych,

0:11a więc treści po lewej stronie i obrazek bądź jakaś grafika po prawej.

0:16U nas ta sekcja jest troszeczkę bardziej

0:17rozbudowana, ale do tego przejdziemy za moment.

0:20Natomiast zastanówmy się najpierw, jak ją tutaj przygotować.

0:24A więc tak mamy dwie sekcje obok siebie w rzędzie.

0:27Jak się domyślasz, będziemy potrzebowali

0:29kontenera z kątem Daj layout ustawionym na row.

0:33Nie mamy tutaj żadnego dodatkowego tła,

0:34więc nie potrzebujemy żadnej grupy, która będzie to obejmować.

0:38Tutaj oczywiście będziemy mieli układ typu

0:40kolumnowy, ponieważ mamy jedne elementy pod drugim.

0:44Tu na początek zastosujemy kolumny, ale potem pokażę Ci inny układ, który pozwoli

0:49nam właśnie na takie wchodzenie na siebie elementów.

0:52A więc nie przedłużamy i przystąpimy do pracy.

0:56Wracamy więc do edytora.

0:59I dodajmy tutaj grupę.

1:02Ja ją wrzucę gdzieś tutaj.

1:04I oczywiście wskoczyła nam ona na samą

1:07górę, ale nic nie stoi na przeszkodzie, żeby przesunąć ją na sam dół.

1:10A więc mamy. Zmieńmy jej nazwę.

1:14Będzie to forum.

1:17OST.

1:18Container, czyli zachowujemy nasz standardowy zapis tutaj.

1:24Tak jak mówiłem, będzie to robił.

1:28Ustawiamy minimalną szerokość

1:31maksymalną ustawiamy na 1200 pikseli, czyli nic nowego.

1:35Tym razem elementy w środku będę chciał odsunąć od siebie o 96 pikseli.

1:41Minimalną wysokość na razie zostawmy i dodajmy padding.

1:44Znów takie same jak zawsze, czyli 96 góra i dół 32.

1:49Po lewej i po prawej stronie.

1:51Dodajmy teraz te dwie grupy w środku.

1:54A więc jedną.

1:57Nazwijmy ją.

2:00For hosts.

2:02Content Group.

2:06Ustawmy tutaj kolumnę.

2:11Usuńmy minimalną wysokość minimalną, a minimalną szerokość

2:17minimum maksymalnej szerokości Nie ustawiamy minimalną wysokość.

2:21Na razie zostawmy 280 pikseli.

2:23To co chcę zrobić, to zaznaczyć tą grupę i ją powielić, czyli komendę.

2:28Tą drugą nazywamy po prostu For host.

2:32I MG Group.

2:35Na razie zostawmy tutaj dokładnie takie same właściwości.

2:38Jak widzisz teraz te dwie grupy zajęły

2:40całą dostępną przestrzeń naszego kontenera rodzica, czyli tej grupy host container,

2:46którą jeszcze musimy odpowiednio wyśrodkować na całej naszej stronie.

2:50I teraz możemy przystąpić do dalszego działania.

2:53A więc tak sprawdźmy, co musimy tutaj dodać.

2:56Mamy nagłówek i tekst.

2:58To możemy sobie powielić z poprzedniej sekcji.

3:00Mamy przycisk do zaprojektowania.

3:03Pozostaje nam to.

3:04A więc wróćmy do edytora.

3:07Przejdźmy wyżej i ułatwimy sobie życie kopiując całą tą grupę.

3:11Countries Top Group.

3:15Ustawmy ją w to miejsce.

3:18I to co musimy teraz zrobić to tak zmieniamy tą nazwę.

3:21To będzie.

3:23For hosts Top Group.

3:28Tutaj układ kolumnowy odstęp 12 pikseli.

3:31Możemy wywalić maksymalną szerokość.

3:34Ona nam tutaj niepotrzebna.

3:36To co chcę zrobić, to wyrównać ten tekst,

3:39czyli nagłówek drugiego typu do lewej strony.

3:43I oczywiście pozmieniać wartości.

3:47Czyli.

3:48Kopiujemy sobie ten tekst.

3:52Wstawiamy tutaj.

3:55Przechodzimy tu.

3:56Kopiujemy ten tekst.

4:02I to jeszcze zerknijmy na ten nagłówek.

4:04On jest pewnie wyśrodkować. Zgadza się.

4:06My chcemy go tutaj wyrównać do lewej krawędzi.

4:10Teraz już wszystko się zgadza.

4:12Oczywiście musimy jeszcze dodać przycisk STOP.

4:14Możemy sobie skopiować ten na przykład.

4:18Wstawic go tutaj.

4:21Znów przesunąć go do lewej krawędzi.

4:24Pozostawiamy te wartości.

4:27Zmieniamy tylko nazwę.

4:28Będzie to.

4:30Skoro host btn.

4:35Tekst, który tutaj jest to check details.

4:41I nie jest to baton secondary big, tylko

4:43baton primary big, a więc spora część jest gotowa jeszcze tylko na ten guzik.

4:50To on ma tutaj jakieś marginesy?

4:52Wygląda na to, że nie.

4:53Czy ta grupa ma jakieś marginesy? Wygląda na to, że tak.

4:56A więc usuwamy marginesy dolne z grupy Form Host Top Group.

5:02I zamiast używać marginesów, jak się domyślasz zastosujemy tutaj GAP.

5:07W naszym przypadku sobie zerknę.

5:12Tak będzie to 32 piksele.

5:20To co możemy zrobić, to przejść do

5:22elementu rodzica, czyli for host container.

5:25Wywalić tutaj minimalną wysokość, ona już jest niepotrzebna.

5:29I jeszcze musimy tylko zaprojektować sobie.

5:34Ten element, czyli mamy tutaj tekst.

5:38Ubrany w grupę i ubrany w drugą grupę.

5:40A więc przejdźmy do edytora.

5:43Mogę sobie skopiować ten tekst.

5:48Wstawić go tutaj i w naszym przypadku nie będzie to tekst

5:53pod MD 16 pikseli, tylko na chwilę, żebym sobie zerknął.

5:58W tym przypadku będzie to body MD Small 14 pikseli 500.

6:06Natomiast jedyne co chcę tutaj zmienić to tylko kolor tekstu na kolor.

6:12Nasz primary.

6:14I oczywiście sam tekst.

6:17Będzie to w tym przypadku.

6:19OR host.

6:24Przesuń go tutaj do lewej krawędzi.

6:27I teraz wybierzmy pierwszą grupę, czyli

6:29klikamy na nim prawym przyciskiem myszy i wybiorę Group element in.

6:34W tym przypadku nie ważne czy będzie to row czy będzie to column, bo tak mamy

6:37tylko jeden element w środku może to być container.

6:40Nic się nie stanie.

6:43Nazwijmy to.

6:46For host.

6:49Inner Badge.

6:51Group.

6:54To co chcę zrobić, to dopasować szerokość

6:57do contentu w środku, ale nadać tutaj odpowiednie padding.

7:02U nas będzie to 8 pikseli góra dół 32 piksele, lewa prawa strona.

7:12Dodatkowo przejdź do sekcji Appearance i nadajemy tutaj odpowiednie tło.

7:19A więc flat color dla background style kolor biały.

7:24To co chcę tutaj jeszcze dodać to

7:25zaokrąglenia narożników równe 8 pixeli i nadać shadow styl.

7:31Równe zero.

7:34Trzy piksele.

7:3740 0.

7:40Kolor to nasz kolor Secondary 600 i wartość ustawiona na 5%.

7:47Następnie zaznaczam tą całą grupę Work Host Inner Badge Group.

7:50Ubieramy ją w kolejną grupę,

7:52czyli powielamy to co zrobiliśmy przed chwilą Group Elements in row Container.

7:59Tym razem będzie to.

8:01Faro Host B.

8:04Group.

8:08I bardzo podobnie jak przedtem.

8:11Dopasowujemy szerokość do contentu.

8:15Kolejno dodajemy tutaj odpowiednie padding i osiem pikseli z każdej strony.

8:24Następnie przechodzimy do zakładki Appearance.

8:28I tak przede wszystkim nadajemy background style.

8:30Znów flat color, ale tym razem będzie to nasz kolor Primary 25.

8:36Dodajemy zaokrąglenia narożników równe 8 pixeli i nadajemy tutaj border solid.

8:42Jeden pixel i kolor to nasz kolor tekstu czyli kolor neutral 300.

8:49I to co jeszcze musimy zrobić, to

8:51oczywiście przesunąć ten element na samą górę.

8:55I zerknijmy teraz do podglądu.

8:58Nasza aplikacja, więc odświeżamy widok.

9:01Przejdźmy niżej.

9:04Jak widzisz mamy już dokładnie taki układ,

9:05przynajmniej po lewej stronie jaki potrzebowaliśmy.

9:09A więc wracamy znów do edytora i zajmijmy się tą prawą stroną.

9:14Pierwszej kolejności dodajmy sobie te grupy z tekstami, a więc przede wszystkim.

9:20Podaję tutaj pierwszą grupę.

9:24Będzie to forum post.

9:28Card Group.

9:33Fontanny. Layout ustawiam na row.

9:36To na razie zostawiam te wartości.

9:38Natomiast to co chcę zrobić to dodać odpowiednie padding i oraz cień.

9:42W naszym przypadku padding to 24 piksele z każdej strony.

9:51Cień.

9:52Czyli nie border tylko dałem się Shadow Stilo ustawiony na auto set.

10:03I tym razem będzie on równy zero.

10:09Zero.

10:1150 pikseli.

10:14Jak się domyślasz secondary 600 znów ustawione na 5.

10:20Staram się zachowywać bardzo zbliżone

10:22wartości, aby ten układ był spójny i całość wyglądała dużo lepiej.

10:26A więc mamy tę grupę rodzica.

10:27To co chcę zrobić tutaj to skopiować sobie całą tą grupę for host Page Group.

10:34A więc Command C Wstawiam ją tutaj.

10:38Następnie wywalam ze środka te for host i bach!

10:42Trochę nam się to teraz skurczyło, ale to nic nie przejmuj.

10:45Ja natomiast chciałem zachować ten flat color, to obramowanie.

10:51Przechodzę do layoutu i tym razem ustalam

10:53stałą szerokość i wysokość równą 48 pikseli.

11:00Żeby ten border był w pełni zaokrąglone

11:03to zmieniamy mu round NES na jakąś bardzo dużą wartość np.

11:06na 100.

11:08Mamy teraz pełen okrąg, a do środka będę chciał wstawić ikonkę z ikoną WiFi.

11:19Jej wymiary to tym razem 28 na 28 pikseli.

11:28Zerknijmy teraz na kolor i na samą ikonkę.

11:32Ikonka będzie to Solar Check Square Outline i kolor ustawiony na nasz kolor.

11:39Primary.

11:42Przejdźmy do podglądu.

11:43Odświeżamy.

11:45A widzisz, mamy tutaj odpowiednią ikonkę, ustawioną grupę.

11:50To co możemy teraz zrobić, to wrócić do edytora.

11:55Tutaj jeszcze dla tej grupy form host card

11:57całej nadać zaokrąglenie narożników równe 8 pikseli.

12:02Następnie to co możemy zrobić to po prostu

12:05skopiować sobie tą grupę całą For Host Top Group.

12:09I wstawić ją w to miejsce.

12:13A następnie pozmieniać tutaj przede

12:14wszystkim teksty oraz style dla tego tekstu.

12:18Ten nagłówek tutaj odpinamy.

12:21Zmieniamy to na normal text i tym razem będzie to 18 pikseli.

12:29Kolor Neutral 800.

12:32W tym przypadku będzie to kolor secondary 600.

12:37Chcę tutaj ustawić.

12:39700, grubość Line Space King ustawione na półtora.

12:46Tekst wstawiam. Tym razem to będzie Simple scripting.

12:50A sam styl.

12:53Dodajmy tutaj.

12:57Będzie to body.

13:00LG 18 pikseli.

13:04700.

13:06Klikamy Create.

13:13Zaznaczam ten drugi tekst.

13:15Tym razem zmieniam to na body SM 14 pixeli 500 i zmieniam wartości tekstowe.

13:23Teraz już jest ok.

13:24Tylko ten odstęp z 12 pikseli zmniejszamy na 8.

13:29Żeby ten tekst był bardziej do siebie

13:30przesunięty, a w zasadzie możemy to nawet ustawić 4 piksele.

13:35OK, teraz dużo lepiej to wygląda.

13:38To co chcę teraz zrobić to przejść do tej grupy for host card.

13:43Odznaczyć to usuwam minimalną szerokość, dopasowuję szerokość do contentu.

13:50Zaraz zerkniemy co tam się nam.

13:53Tak dziwnie to zjechało, ale to nic.

13:58Nie ma problemu, ustawiamy minimalną wysokość i teraz to.

14:04Klikam tutaj Szał. Gdzie my to mamy?

14:09Opcja reveal element strój.

14:13A więc mamy tutaj to w drzewku i zerknijmy co tu się stało.

14:18OK. Musimy dopasować szerokość contentu

14:22do tego tekstu, który był tutaj, a więc dla grupy for Host Top Group.

14:26Zaznaczamy opcję Featured to content.

14:29Teraz ta grupa z tym, z tą kartą już działa tak jak powinna.

14:33Jeszcze tylko odsuwamy te elementy od siebie o powiedzmy 24 piksele.

14:40Będzie chyba ok.

14:43Dokładnie to co mogę teraz zrobić, to

14:45skopiować, czyli po prostu powielić tą grupę.

14:52Tym razem chcę tutaj zmienić kolejność, czyli.

14:56Tą grupę z tekstem przesuwamy.

14:59Tą stronę i zmieniamy teksty.

15:04Będzie to.

15:08Constant Support.

15:15I taki tekst tutaj.

15:18To co tym razem chcę jeszcze tutaj zrobić,

15:20to zaznaczam tą grupę for host batch group, czyli tą okrągłą w środku której

15:25mamy ikonkę i tym razem usuwamy tutaj border, a w zasadzie border.

15:30Niech nam zostanie, da fajny efekt.

15:33Natomiast zostawiamy tutaj ten flat color, ale jego wartość zmieniamy na.

15:38Nasz Primary 600.

15:41I to co musimy zrobić to przejść do tej ikonki, kolor ustawić na kolor biały

15:47i oczywiście zmienić samą wartość dla tej ikonki.

15:53W naszym przypadku będzie to solar chat, line bold.

15:59I jeszcze zmienimy tutaj tylko tą nazwę.

16:03To niech będzie po prostu czad.

16:05A ikona?

16:09Tutaj mieliśmy check, czyli po prostu czeka ikona.

16:17Przejdźmy do podglądu.

16:20Odśwież.

16:23OK.

16:23Te dwie grupy już są fajnie ustawione, natomiast brakuje nam tam jeszcze obrazka.

16:28A więc wracamy do edytora.

16:31Jak się domyślasz, wstawiamy tutaj teraz obrazek.

16:37Będzie to Farm Host i MG.

16:46Zostawmy tu odpowiedni obrazek.

16:49Przejdźmy do next images.

16:53Mamy tutaj for hosts.

16:56Właściwy obrazek.

16:58To co chcę zrobić, to jeszcze tutaj.

17:01Odznaczyć minimalną szerokość i ustawić Aspect ratio 1 na 1.

17:07A następnie jeszcze nadać zaokrąglenie

17:09narożników dla tego obrazka równe 8 pikseli.

17:17Zerknijmy do podglądu.

17:18Czy mamy tutaj już wszystko?

17:21Mamy obrazek.

17:23Mamy te elementy.

17:25Natomiast teraz chcę, żeby one zgodnie z

17:27naszym układem wzorcowym, czyli tutaj nachodziły na ten obrazek.

17:33Jak więc to zrobić?

17:34Jest to mega proste w Babel.

17:37Tym razem zamiast układu kolumn nowego dla tej całej grupy

17:40zastosujemy tutaj inny układ layoutu i będzie to area into parent.

17:44Zanim jednak to zrobimy, to ja stworzyłem taką stronę o nazwie Scratch.

17:49Nie musisz jej tworzyć, po prostu zobacz na przykładzie jak to działa.

17:55Zerknijmy więc w pierwszej kolejności, jak skonstruowany jest ten układ.

17:58Mamy tutaj stronę.

18:01O standardowych ustawieniach.

18:02Jeżeli sobie to kliknę to 1440 na 900 pikseli.

18:07W środku umieściłem grupę o nazwie Parent Group.

18:11Na maksymalną szerokość 1200, wysokość 800.

18:14Chwilowo ustawiony layout na ROW, a w środku umieściłem trzy grupy.

18:20Tylko tutaj muszę to rozwinąć.

18:23Hard 1, 2 i 3.

18:25Każdy z nich ma stałą wysokość i szerokość.

18:28Pierwsze dwa mają 200 na 200 pikseli

18:31i odpowiedni kolor, natomiast trzecia grupa ma 300 na 300.

18:36A więc ten układ jest już Ci doskonale znany, jeżeli mamy tutaj auto.

18:39Oczywiście ustawiają się jeden obok drugiego.

18:42Natomiast zobacz, co się stanie, jeżeli

18:43teraz dla całej tej grupy Parent Group zmienimy row na elementu parent.

18:50Coś tam się tutaj zadziało.

18:51Zniknął gdzieś ten element.

18:53Czary jeden.

18:55Zaraz się dowiemy gdzie.

18:56Kliknij na niego.

18:57Okazuje się, że on jest tutaj.

18:59Natomiast.

19:01W tej sekcji pojawił się całkiem nowy układ coś ala into parent ala into Parent.

19:07Działa na tej zasadzie, że grupa rodzica

19:09jest podzielona na dziewięć takich elementów, tzw.

19:13no name, a my możemy właśnie dzieci

19:15wewnątrz takiej grupy rozmieścić na każdym z nich.

19:18Chwilowo Czarek 1 ustawiony jest tutaj w prawym górnym rogu.

19:22Jeżeli kliknę na Check 2 to okaże się, że ten układ jest dokładnie taki sam.

19:28Muszę kliknąć R2.

19:29Jak widzisz jest on również w tym samym miejscu.

19:33Natomiast to co widzisz teraz to to, że ta grupa jedna przykrywa grupę drugą.

19:37Jak to działa?

19:38Otóż działa to w ten sposób, że dzieci w środku mogą na siebie wchodzić.

19:44Są one ustawione tak warstwami, podobnie

19:46jak miało to miejsce, kiedy korzystaliśmy z Floating Group.

19:49Jak pamiętasz,

19:50wtedy taka floating grupa była niejako wycięta z flow całej naszej strony.

19:54I to samo dzieje się tutaj.

19:56Te dzieci w środku elementu

19:59rodzica, które ma ustawione all in to parent te są niejako wycięte.

20:02Dzięki temu mogą nachodzić jedno na drugie.

20:05Jeżeli chcesz zadbać o to, aby jeden

20:08element przykrywał drugi to właśnie można to zastosować.

20:11Natomiast jak zrobić, żeby na przykład teraz mamy tutaj odpowiednią kolejność.

20:16A więc najpierw mamy obiekt 1.

20:17Pod nim mamy 2.

20:19A więc 2.

20:20Przykrywa nam element 1.

20:23Jeżeli przeszedł bym teraz do podglądu, kliknął Preview.

20:27Odświeżył.

20:31Coś nam tutaj nie zaskoczyło. Spróbujmy jeszcze raz.

20:34Preview.

20:36A jak widzisz element 3 R2 przykrywa element 4.

20:401, ponieważ jest tutaj niżej.

20:41Jeżeli bym to kolejność zamienił.

20:46I teraz kliknął znów Preview.

20:51Tak widzisz, właśnie teraz ten chart 1 przykrywa chart 2.

20:55Możesz więc taką kolejnością zarządzać

20:57tutaj na drzewku elementów lub zrobić to w inny sposób klikając na

21:02dany element, w tym przypadku chart jeden i wybierając tutaj.

21:07Click to front.

21:08A więc wysyłając go jak najbliżej do Ciebie.

21:09W ten sposób będzie przykrywał wszystkie

21:11elementy, które się znajdują pod nim, albo cofając go na sam dół.

21:15W związku z tym wszystkie inne elementy będą go przykrywać.

21:18Wybierzmy tą opcję Send to back.

21:20Jak widzisz znowu ta kolejność się tutaj zmieniła.

21:23Teraz mogę dodatkowo każdy taki element dziecka umieścić w dowolnym momencie, np.

21:29tutaj.

21:31A weźmy ten hejt.

21:32Czy umieliśmy go tutaj?

21:34Jak widzisz w ten sposób mogę zarządzać takim układem.

21:37Przesuń sobie ten panel właściwości w to miejsce, by nam nie przeszkadzał

21:41i w ten sposób wewnątrz takiego elementu rodzica z elementu parent

21:46możesz rozmieszczać elementy dzieci na tych właśnie 9.

21:49No i dodatkowo właśnie jeżeli umieścisz

21:52dwa elementy na tym samym na rancie, to będą one się na siebie zachodziły.

21:58A oczywiście kolejnością dbasz tak jak przed chwilą tutaj pokazałem.

22:02Mam nadzieję, że jest to jasne.

22:03Jeżeli nie, to się nie przejmuj.

22:05Będziemy znów ten układ wielokrotnie powtarzać tak długo, aż wejdzie Ci w krew.

22:10A zresztą zawsze możesz sobie

22:11poeksperymentować ustawiając taką grupę, dodając tutaj elementy dzieci, próbując

22:17osiągnąć taki efekt, jaki chciałbyś osiągnąć do Twojego własnego projektu.

22:22A więc nie przedłużając i wróćmy do naszej strony index owej.

22:28Zejdźmy tutaj niżej.

22:31Zaznaczmy tutaj całą tą grupę.

22:34Host IMG Group.

22:36I zamiast kolumn wybierzmy tutaj Align to parent.

22:40A jak widzisz teraz dostosowała się ta grupa do największego elementu w środku,

22:44czyli właśnie do obrazka, a cała reszta tych elementów znikała.

22:48Oczywiście nie zniknęła, tylko po prostu obrazek przykrywa wszystkie te grupy.

22:53Które znajdują się pod nim.

22:55Musimy tutaj minimalną wysokość i to, co chcę zrobić teraz.

23:00To rozwinąć w sobie.

23:02To w drzewku elementów.

23:06I tak tą kartę chcę dać na front.

23:10A więc jak się domyślasz click to front.

23:14Następnie chcę ją umieścić tutaj w prawym górnym rogu, ale to, co chcę zrobić.

23:20Zerknijmy, czy ona ma tutaj tło, a nie gdzieś tutaj tło z tej grupy zniknęło.

23:26A powinna mieć biały kolor.

23:29To co chcę zrobić, to odsunąć ją

23:31odpowiednio od prawej krawędzi i dodatkowo wysunąć trochę poza cały ten element.

23:37W jaki sposób można to zrobić?

23:40Muszę tutaj zastosować odpowiednie marginesy.

23:44W naszym przypadku będziemy chcieli odsunąć właśnie

23:47tą grupę od prawej krawędzi o 24 piksele i wystarczy, że wpiszę taką wartość.

23:59Następnie chcę ją cofnąć tutaj do góry.

24:04Gdybym dodał tutaj to.

24:07Powiedzmy 56 pikseli, czyli dodatni o wartość.

24:12To ta grupa podsunęła nam się w dół.

24:14Nam chodzi o odwrotną, odwrotny kierunek,

24:17a więc zamiast 56 musimy tutaj wstawić minus 56.

24:21I już teraz uzyskaliśmy dokładnie taki efekt, o jaki nam chodziło,

24:25czyli ta grupa zachodzi nam na obrazek, a dodatkowo wychodzi poza cały ten container

24:31rodzica, czyli w naszym przypadku poza forum Host i MG Group.

24:36To samo możemy zrobić dla tej drugiej karty.

24:39W tym przypadku znów musimy nadać tło, bo

24:41zapomnieliśmy o tym, czyli flat color białe.

24:45Tym razem chcę ją tutaj przesunąć na MTA, czyli lewy dolny róg.

24:53Tym razem będzie to bottom minus 56 pikseli.

24:57Żeby to nam się przesunęło i od lewej stronę chcę odsunąć tą grupę o 24 piksele.

25:07Zerknijmy teraz na podgląd, ale powinniśmy

25:09mieć już dokładnie taki układ, jaki mieliśmy na elemencie wzorcowym.

25:14Dokładnie nie wiem, ale wszystko się zgadza.

25:16Oczywiście musimy jeszcze zadbać o to, aby

25:19ta grupa wychodziła nad ten obrazek, czyli jak się domyślasz

25:24zaznaczamy ją i znów wybieramy tutaj tą opcję.

25:28Send to nie back tylko bring to front.

25:33A dla pewności możemy jeszcze zaznaczyć

25:35obrazek i przesunąć go na sam dół, czyli w tym przypadku send to back.

25:41My tu odświeżamy.

25:45I już dokładnie otrzymaliśmy taki efekt, na jakim nam zależało.

25:49To co możemy zrobić teraz, aby.

25:54Właśnie osiągnąć taki efekt.

25:58To po prostu skopiować całą tą sekcję i

26:00odpowiednio ją sobie tutaj dla nas dostosować.

26:03A więc wracamy do edytora.

26:07Zaznaczmy tą całą sekcję for host container i opowiemy.

26:15Czyli Command. D.

26:16Jeżeli to śniadanie, muszę ją sobie tutaj zaznaczyć.

26:19A więc tutaj w edytorze.

26:21I teraz dopiero Command D poszła, poszła.

26:24Zgadza się. Zmieńmy kolejność.

26:27A więc tą grupę.

26:29Przede wszystkim tutaj w centrum.

26:31O właśnie w ten sposób.

26:34I zmieńmy ją na last.

26:36To samo zróbmy tutaj, bo u nas jest teraz dostosowana do

26:40wyrównana w zasadzie do górnej krawędzi, a my chcemy ją Centrowanie.

26:45I teraz tylko odpowiednio popraw tutaj te teksty.

26:48Tym razem będzie to Forget.

26:58I oczywiście skopiuje odpowiednie wartości tekstowe.

27:13Tutaj przycisk nam zostaje, Musimy zmienić obrazek.

27:24I to co chcę zrobić, to przede wszystkim zaznaczyć tą grupę.

27:28Przejdź do layoutu.

27:31Przesunąć ją do prawego dolnego rogu.

27:35I tym razem margines bottom minus 56 pikseli.

27:40Margines lewy rezerwujemy, ale prawy odsuwamy o 24 piksele.

27:47Ale w taki sposób, to oczywiście znów musimy pozmieniać wartości.

27:53Czyli.

27:54Ten tekst.

27:57I oczywiście ten niżej.

28:06Zmieńmy jeszcze tą ikonkę.

28:07W tym przypadku będzie to Solar Price Bolt.

28:12A więc to już fajnie działa.

28:14Teraz przejdźmy do tej grupy.

28:18Do layoutu.

28:20Ustawmy tutaj lewy górny róg.

28:22Pozostawiamy top minus 56 pikseli. Right?

28:27Rezerwujemy.

28:28Ale tym razem chcę to odsunąć tutaj od lewej krawędzi o 24 piksele,

28:34tak żeby nam to wychodziło właśnie poza cały ten container.

28:39I oczywiście znów zmieniamy te wartości tekstowe.

28:56A ikonka w tym przypadku to Solar Shield User linear, więc całość jest już gotowa.

29:02Przejdźmy do podglądu.

29:04Odświeżamy.

29:08Wszystko jest niemal dokładnie tak, jak być powinno.

29:11Mamy tutaj wychodzące sekcje, mamy obrazek i podział na prawą i lewą kolumnę.

29:17Więc jak widzisz ten układ align to parent całkiem fajnie działa.

29:20Natomiast zauważyłem, że te ikonki w tych grupach tak średnio są w centrowania.

29:25Jeszcze sprawdzę jak to wygląda w naszym elemencie wzorcowym.

29:29OK, już wiem gdzie jest problem.

29:34Wróćmy do edytora.

29:36I dla wszystkich tych ikonek To co chcę

29:38zrobić to ustalić margines top na 2 piksele.

29:43Wszędzie tam, gdzie z nich korzystamy.

29:48W każdej grupie Margin top 2 piksele.

29:55Teraz przejdźmy do podglądu.

29:57Odświeżamy.

29:59I już zdecydowanie dużo lepiej to wygląda.

30:02To co nam jeszcze pozostało to oczywiście zmiana nazw dla tej grupy, którą

30:06skopiowali, ale jest to na tyle proste, że pozostawiam to już Tobie.

30:10A ja dziękuję Ci za uwagę i widzimy się za moment.