Bubble: Podstawowa struktura sekcji

0:00Witaj w kolejnej lekcji, w której Tym razem

0:02zajmiemy się budową sekcji about, czyli właśnie tej sekcji tutaj niebieskiej.

0:07Zanim przejdziemy do edytora, zastanówmy się jak ona jest tutaj skonstruowana.

0:11A więc w pierwszej kolejności mamy tutaj kontener, który rozciąga się na całą

0:14szerokość okna przeglądarki, a dodatkowo posiada jakiś określony kolor.

0:20W samym tym kontenerze znajduje się tutaj

0:22najpierw ta sekcja, gdzie mamy ikonkę, nagłówek oraz tekst.

0:26Jest to dokładnie powielenie tego, co mieliśmy tutaj.

0:30Jak widzisz różni się tylko to tak naprawdę tutaj rozmiarem fontu,

0:33ustawionego nagłówka i zamiast przycisku będziemy mieć ikonkę.

0:38Następnie mamy tutaj taki układ trzy kolumnowy.

0:41Pokażę Ci zaraz jak osiągnąć, ale

0:43mam nadzieję, że już się domyślasz jak to zrobimy.

0:46Oczywiście wykorzystamy naszą regułę 320 pixeli

0:50i w tym przypadku utworzymy tutaj trzy grupy, każda po 320 pixeli.

0:54Co razem da nam tutaj kontener

0:56o maksymalnej szerokości oczywiście równej 960 pixeli.

1:01Wróćmy więc do edytora.

1:04Zanim przystąpimy do budowy.

1:07Tutaj tej sekcji.

1:08Chciałbym jeszcze wyjaśnić pewną rzecz.

1:10Otóż jeżeli wrócimy teraz do ustawień strony indeks, jak pamiętasz, w jednej z

1:14poprzednich lekcji mówiłem Ci, że nie ważne jaki tutaj container layout

1:18ustawimy, ponieważ w środku będziemy mieć tylko jeden wrapper.

1:21Otóż oczywiście nie jest to prawda, najmocniej Cię przepraszam za swoją pomyłkę.

1:25Musimy tutaj ustawić container layout typu column.

1:29Ponieważ będziemy dodawać kolejne sekcje,

1:31które oczywiście będą umieszczana jedna pod drugą.

1:35Jeżeli więc ustawiłeś tutaj layout np.

1:38na row lub jakiś inny, to oczywiście proszę

1:40zmień go teraz na column, tak abyśmy mogli kontynuować naszą pracę.

1:45Dodatkowo jak widzisz tutaj nasza strona zaczyna się kończyć.

1:48Jest ona dostosowana do wysokości elementu w środku, a więc aby łatwiej nam się

1:52pracowało dodajmy tutaj jakąś większą wysokość np.

1:563080.

1:58To co będziemy musieli teraz zrobić

2:00to oczywiście zacząć budowę sekcji about. W pierwszej kolejności

2:04dodajemy tutaj grupę.

2:08Nazwijmy ją about.

2:12I oczywiście jak się domyślasz, jej layout w środku to będzie column,

2:16ponieważ chcemy uzyskać właśnie taki kolumnowy układ.

2:20Czyli najpierw ta część, a potem te trzy kolumny.

2:25Odznaczamy tutaj fix-width.

2:29Ustawiamy minimalną szerokość

2:32w tym przypadku na 320 pixeli, ponieważ jest to grupa, która znajduje się

2:35bezpośrednio na naszej stronie, nie w grupie wrapper

2:38jak widzisz, to tu w tym miejscu

2:40musimy więc ustalić jej tutaj minimalną szerokość, maksymalnej nie ustawiamy,

2:43ponieważ chcemy, aby rozciągała się na całą szerokość okna przeglądarki.

2:47A to, co jeszcze musimy tutaj zrobić,

2:49to oczywiście dodać jej odpowiedni kolor tła.

2:53Wybieramy flat color i ustawiamy kolor.

2:56W tym przypadku będzie to kolor 7F2FF.

3:05Skoro to mamy już gotowe, to możemy

3:08wrócić tutaj do tej sekcji i skopiować sobie tę grupę, całą tą grupę.

3:14W tym przypadku top, w której po prostu pozbędziemy się niepotrzebnych elementów.

3:18Zaznaczam więc grupę top, klikam control C.

3:21Wracam tutaj do naszej grupy about.

3:23Klikam control V i pozbywam się elementów, które nie będą nam potrzebne.

3:28A więc przede wszystkim

3:30tego przycisku, przesunśmy sobie to tutaj

3:32pozbywamy się przycisku, pozbywamy się obrazka.

3:37Dodatkowo oczywiście będziemy musieli tutaj dostosować nagłówek.

3:41Zawsze dbaj o to, aby na stronie mieć tylko jeden nagłówek typu H1.

3:44W tym przypadku jest to właśnie ten nagłówek, taki duży.

3:48Natomiast tutaj te nagłówki będą już mniejsze.

3:51I zaraz powiem Ci jakie tutaj style zastosujemy.

3:54W naszym przypadku jedyne co musimy zmienić to tak naprawdę tylko tutaj

3:59wysokość fonta.

4:00Ustalmy ją na 44 pixele.

4:04Resztę ustawień pozostawiamy bez zmian.

4:06Skopiuj sobie jeszcze wartość tutaj tego tekstu.

4:10A więc tą część.

4:15Podmieńmy ten tekst.

4:18Teraz wygląda to dużo lepiej.

4:20Dodatkowo w tym przypadku margines od góry to będzie nie 50, a 80 pixeli.

4:30Kolejnym elementem, który będziemy musieli tutaj dodać jest oczywiście ta ikonka.

4:35Aby osiągnąć taki efekt wystarczy,

4:38że do naszego tutaj kontenera, czyli do grupy top dodamy kolejną grupę.

4:43Możemy ją tutaj wstawić po prostu klikając.

4:47Jak widzisz wtedy ta grupa zostanie tutaj dodana.

4:50Oczywiście w takich predefiniowanych przez

4:51Bubble wymiarach możemy też zrobić to troszkę inaczej.

4:55Usuńmy tą grupę wybierzmy

4:57jeszcze raz tutaj group i tym razem narysujmy po prostu taką mniejszą grupę.

5:02Wtedy zostanie ona wstawiona w takich wymiarach jak je narysowałem.

5:06W moim przypadku ta grupa ma wymiary 64 na 64 pixele.

5:14Dodatkowo będzie posiadała tutaj odpowiedni gradient ustawiony jako tło.

5:19Usuńmy więc te style.

5:20Wybierzmy tutaj tym razem gradient.

5:23Jak widzisz, możemy zdecydować z jakim

5:24rodzajem gradientu chcemy pracować, czy ma to być gradient linearny, czy też gradient

5:29radialny oraz dodatkowo jeszcze tutaj kierunek takiego gradientu.

5:34W moim przypadku ja korzystam tutaj z

5:36opcji custom i ustawiam wartość 135 stopni.

5:42Pozostaje nam jeszcze tylko podanie tutaj odpowiednich kolorów.

5:45Pierwszy kolor to FFB7F5,

5:53czyli taki kolor różowy.

5:55Natomiast drugim kolorem będzie Ci już znany ten kolor.

5:58Możemy więc go sobie skopiować.

6:02Wrócić tutaj do tej grupy i oczywiście ustawić tutaj ten drugi, właściwy kolor.

6:07Teraz musimy jeszcze osiągnąć taki efekt koła.

6:10Aby to zrobić, wystarczy, że ustawimy tutaj odpowiednio zaokrąglenia rogów.

6:14W tym przypadku musi być ono równa minimum

6:1650% rozmiarów takiego kontenera, czyli minimum 32 pixele.

6:22Natomiast ja tu zawsze ustawiam jakoś

6:23bardzo dużą wartość, jeżeli chcę osiągnąć okrąg, w moim przypadku np.

6:27100 pixeli.

6:28Jak widzisz nasza grupa tutaj okrągła jest już gotowa.

6:32Przenieśmy ją w layoucie na właściwe

6:34miejsca, czyli jako pierwszy element, wyśrodkujmy.

6:38I dodatkowo jeszcze dodajmy jej odpowiedni margines.

6:42W naszym przypadku będzie to wartość równa

6:4430 pixeli, a więc wpisujemy je w to miejsce.

6:47Teraz pozostaje nam dodanie tutaj tylko ikony.

6:50Wybierzmy więc tutaj element icon, najedźmy nad naszą grupę.

6:55Kliknij, aby ikona została wstawiona.

6:58Tutaj możemy wykorzystać cały szereg

7:00gotowych i darmowych ikon wbudowanych w same Bubble.

7:03Wystarczy, że dobierzemy odpowiednią ikonę lub zaczniemy wpisywać jej nazwę,

7:08to zostanie to odpowiednio zawężone, wybierzmy np. taką ikonę.

7:13To, co możemy jeszcze zrobić, to sprawić, żeby ona się tutaj obracała.

7:17Jeżeli zaznacza ten checkbox, to jak widzisz tutaj uzyskujemy efekt rotate.

7:23Ta opcja omówimy oczywiście nieco później, jak będziemy omawiać workflows.

7:27Jeżeli teraz odepnę style, to dodatkowo mogę jeszcze zmienić kolor takiej ikony.

7:31Zmieńmy ją tutaj na kolor biały.

7:35I wróćmy tu, aby ustalić dla niej

7:37po pierwsze odpowiednie położenie, a więc wycentrujmy ją wewnątrz naszej grupy.

7:41I ustalamy wymiary na 36 pixeli.

7:49To co musimy zrobić teraz, to jeszcze wrócić tutaj do grupy top.

7:54I w moim przypadku margines dolny to będzie 60 pixeli.

7:58A jeszcze musimy tu przy okazji odznaczyć minimalną

8:01wysokość i ustawiamy ją na 0 tak aby ten kontener tutaj dopasowywało się

8:05wysokością do elementów jakie mamy w środku.

8:10No i pozostaje nam teraz jeszcze utworzenie tego trzy kolumnowego layoutu.

8:14Aby to zrobić znów dodajemy tutaj kolejną grupę.

8:19Tym razem znów musimy ją sobie tutaj wyśdrodkować.

8:22Zanim to zrobię ustawiam layout na row, teraz ją centruję względem tutaj jej rodzica.

8:32Odpinam tutaj ten check box.

8:35Nie muszę tym razem ustalać minimalnej

8:38szerokości, ponieważ w środku elementom nadamy minimalną szerokość.

8:42Zaraz zobaczysz jak to zadziała.

8:44Natomiast maksymalna szerokość to będzie 960 pixeli.

8:50Przesuń sobie panel właściwości, żeby to

8:52lepiej było tutaj widoczne i zacznijmy tworzyć właśnie ten layout trzech kolumn.

8:57A więc w środku znów dodajemy grupę.

9:00Tym razem dla tej grupy

9:01będziemy tutaj ustawiać layout na column.

9:05Ponieważ taki layout mamy tutaj.

9:08Jak widzisz w naszym wzorcowym projekcie, mamy tutaj taką dużą ikonkę.

9:14Mamy tekst i znów tekst.

9:17Dlatego też taka pojedyncza grupa będzie miała tutaj layout ustawiony na column.

9:21Odznaczamy tą wartość

9:23i mówimy, że minimalna szerokość takiej grupy to 320 pixeli.

9:27Maksymalnej nie ustawiamy,

9:29ponieważ chcemy, aby te grupy się tutaj odpowiednio dostosowywały i

9:33mieściły właśnie w ramach naszego tutaj kontenera.

9:37Wystarczy teraz, że skopiuje tą grupę, wkleje ją raz.

9:44I wkleję jeszcze raz, no dokładnie mamy

9:46teraz taki układ trzech kolumn, na którym mi zależało.

9:51Dodatkowo możemy teraz przejść do kontenera rodzica, czyli select first parent.

9:57Nazwijmy ją tutaj może grupą

10:02trzy kolumny. Odznaczamy minimalną wysokość znów na 0

10:07i przystąpimy do działania, czyli odwzorowania tego układu.

10:14To co musimy zrobić w pierwszej kolejności

10:16to jak się domyślasz znów wykorzystać grupę.

10:18Jest to element, z czego będziemy korzystać najczęściej w Bubble.

10:21Wstawmy go tutaj nadajmy mu tutaj określone rozmiary, w moim przypadku

10:26jest to 128 na 128 pixeli.

10:33Znów ustawiam tu align to parent jako layout takiej grupy.

10:39Wracam tu odpinam style.

10:41To co musimy tutaj zrobić, to oczywiście nadać jej jednolity kolor.

10:46W naszym przypadku będzie to kolor biały, ponieważ znowu ma to być okrąg.

10:49To oczywiście tutaj wpisujemy jakąś dużą wartość, np.

10:53200.

10:54Dodatkowo jeszcze zgodnie z layoutem z tym naszym projektem, tutaj mamy cień.

11:01Jest to dokładnie taki sam cień, jaki mieliśmy tutaj na przyciskach.

11:05Możemy więc sobue tutaj wrócić, zobaczyć jakie

11:07wartości miał ustawione tu to shadow typu autoset 0816

11:13i taki kolor z przezroczystością tutaj ustawioną na 15%.

11:17A więc dodajmy tej grupie tutaj odpowiednie style autset

11:240.

11:26Wartość 8.

11:27Tutaj 16.

11:29Tutaj wklejamy nasz kolor i na koniec przezroczystość na 15 pixeli.

11:38Tutaj znów będziemy musieli wstawić ikonkę.

11:40Możemy więc sobie skopiować tą istniejącą i wkleić ją w to miejsce.

11:46Oczywiście będziemy musieli dostosować jej kolor.

11:49W tym przypadku kolor to 3F8CFF,

11:57czyli taki kolor niebieski.

11:59Wymiary takiej ikonki to w tym przypadku 64 na 64 pixele.

12:04Taka dosyć duża ikona.

12:09Tą część mamy tutaj z głowy.

12:10Możemy wycentorwać tą grupę.

12:14Tutaj w kontenerze jego rodzica.

12:17Pod spodem dodać mu margines równy 30 pixeli

12:22i następnie potrzebujemy jeszcze tutaj takiego małego nagłówka oraz tekstu.

12:27Możemy więc skopiować ten nagłówek.

12:32I wkleić go tutaj do całej naszej grupy i odpowiednio dostosować.

12:37W tym przypadku nasz nagłówek ma tutaj rozmiar 18 pixeli.

12:43Natomiast pozostałe wartości pozostawiamy bez zmian.

12:47Przechodzimy tutaj

12:48kopiujemy sobie jeszcze tekst i wklejamy go do grupy właśnie z taką pojedynczą kolumną.

12:55Margines jest ok.

12:57U góry chcemy mieć 20 pixeli.

12:59Natomiast rozmiar fonta w tym przypadku to będzie 16 pixeli.

13:08Jeszcze tylko odpowiednio tutaj skopiujmy sobie wartości dla tych tekstów.

13:25I to co musimy jeszcze zrobić to takiej grupie

13:27tutaj dodać margines na dole, równy w naszym przypadku 50 pixeli.

13:33Zaraz Ci wytłumaczę dlaczego tutaj go dodałem.

13:36Dodatkowo jak widzisz te nagłówki mają

13:38tutaj marginesy po lewej i po prawej stronie ustawione na 20 pixeli.

13:42Ponieważ jeżeli zejdziemy tutaj do

13:44minimalnej rozdzielczości 320 pixeli, to wyświetlimy jedną tylko taką

13:48grupę, a nie chcemy, żeby ten tekst tutaj przylegał do krawędzi.

13:51Dlatego też odsuwamy go tutaj z lewej i z prawej strony.

13:56Możemy teraz usunąć te grupy i teraz skopiować sobie, taką utworzoną tutaj.

14:07Jedyne co będziemy musieli zrobić, to oczywiście dostosować tutaj teksty.

14:10A jeszcze wytłumaczę Ci dlaczego tutaj dodałem to 50 pixeli.

14:14Przejdźmy sobie do podglądu.

14:15Trybu responsywnego.

14:17Jak widzisz, jeżeli będziemy tutaj zmniejszać rozdzielczość,

14:21to te grupy w którymś momencie przeskoczą jedna pod drugą,

14:24a ponieważ każdej z nich nadaliśmy tutaj odpowiedni odstęp, to zachowamy właśnie

14:28taki oddech pomiędzy tymi poszczególnymi grupami.

14:32Jeżeli zjechałbym tutaj, do tej najmniejszej rozdzielczości.

14:35Jak widzisz wszystko jest tutaj w pełni responsywne.

14:38Nasz tekst jest odpowiednio odsunięty od

14:39krawędzi, o czym już wcześniej mówiłem, a mamy tutaj jedną grupę pod drugą.

14:44Dodatkowo tutaj odpowiednio przestrzeń między nimi.

14:47Wróćmy więc do naszego buildera.

14:51I pouzupełniamy wartości dla tekstów.

15:09Tu wystarczy tylko, że skopiujemy

15:12ten sam nagłówek, ponieważ tekst jest dokładnie taki sam jak w tym miejscu.

15:21I nasza sekcja tutaj about jest już w zasadzie skończona.

15:25Natomiast to, na co Twoje baczne oko na pewno zwróciło uwagę, to fakt, że te

15:30ikonki nijak nie zgadzają się z tym, co mamy tutaj w naszym projekcie.

15:34Natomiast nie przejmuj się,

15:36zajmiemy się tym w lekcji następnej, gdzie zainstalujemy nasz pierwszy plugin Bubble.

15:41To by było na tyle w tej lekcji.

15:43Dziękuję Ci za uwagę i widzimy się już za chwilę.