Bubble: Jak zbudować Footer?

0:00Do przygotowania na stronie indeksowej pozostała nam już

0:02ostatnia sekcja, czyli nasza sekcja z footer'em.

0:05Natomiast jak widzisz jest ona wyjątkowo prosta.

0:08I myślę, że sam sobie bezproblemowo z nią poradzisz.

0:10Zanim jednak oddam Ci to zadanie do

0:12wykonania jako pracę domową, chciałbym Ci zaprezentować pewien mój tok myślenia i

0:16podejście jakie ja stosuję przy tworzeniu takich layout'ów.

0:19Wróćmy więc do edytora.

0:21Dodajmy pierwszą grupę.

0:25Będzie to oczywiście grupa footer.

0:31Layout możemy ustawić tutaj na row, nie ma problemu.

0:35Odznaczamy minimalną

0:38szerokość, nie dodajemy maksymalnej, nadajmy jej tylko kolor odpowiedni.

0:43W moim przypadku jest to group secondary light.

0:47Teraz oczywiście do środka dodajemy

0:51kolejną grupę.

0:59Odsuniemy ją sobie od góry i od dołu,

1:02powiedzmy na chwilę obecną o 80 pixeli, żeby to było wszystko lepiej widoczne.

1:07Nadajemy jej tutaj layout typu row.

1:11Odznaczmy tutaj minimalną szerokość, a maksymalną jak się domyślasz,

1:15ustawiamy na 1280 pixeli, czyli będzie to kontener, w który umieścimy

1:21cztery grupy odpowiadające tutaj za te poszczególne sekcja w naszym footerze.

1:28Dadajmy więc grupę.

1:31Nadajmy jej to może określony kolor od razu.

1:36Może to być kolor biały.

1:39Layout ustawmy nawet na column,

1:42nie ma to tutaj chwilowo żadnego znaczenia.

1:45Odznaczam tą wartość, minimalną ustawiam jak się domyślasz na 320 pixeli.

1:51Maksymalnej nie podaję.

1:53Skopiujmy ją sobie teraz więc, tak aby otrzymać układ czterech kolumn.

2:04Nadajmy jej tutaj inny kolor.

2:07Tej tak samo i tej również.

2:12Jeśli zwróciłeś uwagę, moje podejście

2:13najczęściej jest takie, to może inne żeby nam się nie zlewało z tłem,

2:17że ja tworzę najpierw taką grupę, która powiedzmy będzie tu miała nazwę footer-col.

2:26I dopiero wewnątrz niej, wstawiam kolejną grupę.

2:33Którą tutaj z kolei nadajmy jej tu column.

2:37Odznaczmy tą wartość.

2:39Nie potrzebujemy tu ani minimalnej,

2:42ani maksymalnej szerokości i to grupa dopiero tutaj odsuwam marginesami.

2:46Np. w tym przypadku powiedzmy 20 pixeli od lewej i prawej.

2:50I dopiero właśnie do takiej grupy footer-col-inner wstawiam treści.

2:59Czyli ja bym to rozwiązał właśnie w taki sposób, że

3:01tutaj dopiero wstawiłbym

3:04ten nagłówek pod spodem te linki.

3:08Dlaczego robię to w taki sposób?

3:10Możesz się domyślić, że zależy mi na tym,

3:12aby na ekranie mobilnym, kiedy ta grupa footer-col zajmie całą szerokość ekranu,

3:18odsunąć te treści od lewej prawej krawędzi o te 20 pixeli.

3:23Ale przecież równie dobrze mógłbyś

3:24pomyśleć, że te marginesy możemy dodać przecież do tego całego elementu i wtedy

3:29uzyskamy ten sam efekt na ekranie telefonów mobilnych, więc nie ma problemu.

3:34Zastosujmy te rozwiązanie.

3:37Jak widzisz, już pojawia się tutaj jakiś problem.

3:42Mamy tutaj kontener rodzica, który ma 1280 pixeli.

3:47Mamy tutaj cztery grupy po 320 pixeli

3:49każda, a więc powinny się one mieścić obok siebie.

3:51Natomiast teraz ta grupa przeskoczyła nam tu poniżej.

3:54Dzieje się tak dlatego, że margines

3:55dodawany jest zawsze na zewnątrz danego elementu.

3:59Czyli teraz ta grupa, grupa footer-col pojedyncza może się skurczyć

4:05na minimalną szerokość 320 pixeli

4:08plus dodatkowo jeszcze 20 pixeli po każdej stronie.

4:11Czyli obecnie minimalnie może zająć 360

4:13pixeli, przez co te cztery grupy przestały się nam tutaj mieścić.

4:17A ta już w tym widoku przeskoczyła nam tutaj na dół.

4:20Gdybym teraz dodał takie same marginesy dla tej drugiej kolumny.

4:29To jak widzisz tutaj odstępy pomiędzy nimi,

4:31usuńmy chwilowo tą wewnętrzne col-inner, widzisz teraz

4:34odstępy między nimi tutaj wynoszą 40 pixeli.

4:37Mamy tą jedną grupę.

4:39Tutaj margines 20.

4:41Teraz tą drugą margines, tutaj grupę i tutaj też margines 20.

4:46Jeżeli zastosowałbym więc takie rozwiązania,

4:47czyli dodawał te marginesy tutaj do tych grup, to musiałbym pamiętać o tym, że

4:53przy takiej i takiej rozdzielczości musze jeszcze oprócz 320 pixeli doliczyć marginesy.

4:58Dodatkowo pamiętać, że te marginesy tutaj

5:00wynoszą więcej, ponieważ się tutaj sumują itd.

5:05Dlatego też ja nigdy nie stosuję właśnie

5:07takiego podejścia, ponieważ zaburzało by mi to mój układ, breakpoint'ów.

5:11Z którgo jak wiesz już do tej pory korzystaliśmy, czyli takiego gdzie

5:15wiem, że przy 320 pixelach będę miał jedną kolumnę, przy 640 będą mi się

5:22mieściły dwie przy 960 trzy, a przy 1280 cztery.

5:28Dlatego też właśnie nigdy nie dodawaj marginesów do tych zewnętrznych kolumn.

5:33Niestety na chwilę obecną w Bubble nie mamy

5:35padding'ów, które by rozwiązały nam ten problem.

5:37Dlatego też musimy usunąć te marginesy,

5:40a w zasadzie po prostu przywrócić jeszcze tą kolumnę.

5:45I teraz dopiero,

5:47pozbyć się tych zewnętrznych marginesów z grupy footer-col i to samo zrobić tutaj.

5:54Teraz jak widzisz te 4 kolumny mieszczą się nam dokładnie tak jak

5:58powinny nasze 4 grupy, a tutaj mogę wstawiać treści, mieć

6:01pewność, że będą one odsunięte od lewej i prawej strony.

6:04Marginesami górnymi i dolnymi się nie przejmujemy.

6:06Tutaj może stawiać je zarówno tych

6:08elementów w środku, jak i tych elementów zewnętrznych.

6:11Nie ma to żadnego wpływu.

6:12Jeżeli po prostu ta grupa przeskoczy poniżej, to będzie

6:15odsunięte od nich o tę wartość marginesu na górze bądź na dole,

6:19ale to nie będzie miało jakiegoś większego wpływu na Twój layout.

6:22Zawsze te marginesy możesz potem sobie wyzerować lub jeżeli chcesz mieć pewność,

6:26że będą do siebie przylegały, no to jak się domyślasz.

6:30Dla tych grup footer-col nie dodajemy żadnych marginesów, a

6:35ustawiamy je tylko dla tych grup wewnętrznych.

6:38Mam nadzieję, że jest to jasne i że teraz będziesz się stosował

6:41właśnie do takiego układu i już wiesz dlaczego ja właśnie z niego korzystam.

6:45Pozostajecie Ci więc teraz tylko uzupełnić te grupy w odpowiednie treści.

6:49Przełączmy się tutaj na tą stronę.

6:52Możesz więc teraz sobie zapauzować i odpowiednio przekopiować wartości tych tekstów.

6:57A my widzimy się już w kolejnej akcji.