Bubble: Panel właściwości

0:00Cześć!

0:00Witam Cię w kolejnej lekcji, w której omówimy sobie nieco dokładniej.

0:03Panel właściwości aby się do niego dostać.

0:06Wystarczy, że kliknę lewym przyciskiem myszy dwa razy na dany element.

0:10W tym przypadku jedynym elementem jest nasza strona.

0:14A więc klikam dwa razy.

0:16Okienko właściwości nam się tutaj otworzyło.

0:20Ta część odpowiada za

0:22nazwę danego elementu, jak widzisz na chwilę obecną jest to strona indeksowa, czyli

0:26page index jedynymi elementami, dla których tej wartości nie będziemy mogli zmienić.

0:31To właśnie te trzy strony, które zostały dla nas tutaj zbudowane przez

0:35samo Bubble, czyli stronę Indeksową, stronę 404 oraz strona reset password.

0:40Jeżeli tutaj chciałbym zmienić tą nazwę np.

0:42dodać tutaj 1 i kliknąć enter.

0:45Jak widzisz, pojawiło mi się szybko takie okienko, że jest to wbudowany element.

0:48Nie mogę tego zrobić.

0:50Natomiast jeżeli podałbym jakikolwiek inny element np.

0:53przycisk.

0:55Widzisz, otworzyło mi się teraz okienko właściwości specjalnie do tego przycisku,

0:59to oczywiście mogę go sobie nazwać dowolnie.

1:07Przycisk.

1:08I dzięki temu, jak widzisz, pojawił nam się on tutaj

1:11w okienku możliwości wyboru elementów.

1:15Wróćmy jednak do ustawień samej strony i przejdźmy do tych pozostałych opcji.

1:20Za pomocą tej opcji możemy zdefiniować taką stronę

1:23jako natywną aplikację, natomiast Bubble nie wspiera ich, tak z

1:27out of the box. Musielibyśmy korzystać z

1:29zewnętrznych pluginów, aby np. tagować nie zbudowaną tutaj natywną

1:32aplikację, móc sprzedawać w Google Play albo w sklepie AppStore.

1:37Dlatego też z tej opcji tutaj nigdy nie korzystam.

1:41To jest jeszcze stara opcja właśnie pod stary silnik, ponieważ w tamtej wersji.

1:46Jeżeli chcielibyśmy tworzyć stronę, która będzie doskonale

1:50się prezentowała na dużych ekranach desktopowych, jak i na małych ekranach

1:53komórkowych, to bardzo często musieliśmy tworzyć takie dwie strony,

1:58czyli jedną stronę na desktopy i jej kopię na stronę, na właśnie na ekrany mobilne.

2:03Za pomocą tej opcji mogliśmy tutaj wskazać, że jeżeli użytkownik wchodzi na naszą

2:08stronę indeksowany z poziomu komputera to my ją wyświetlamy.

2:12Natomiast jeżeli wejdzie na tą samą stronę

2:14z poziomu telefonu komórkowego, to możemy go tutaj przekierować

2:18no jej mobilną wersja.

2:20Znów dzięki nowemu silnikowi responsywnemu, to opcja przestała być przydatna.

2:25Jesteśmy w stanie tak zaprojektować naszą stronę.

2:28Aby dobrze wyświetlała się na wszystkich rozdzielczościach.

2:31Tu możemy z kolei zdefiniować typ contentu dla tej strony.

2:34Do tej opcji jeszcze wrócimy dla innych elementów.

2:39Na razie jest ona nam tutaj niepotrzebna i nie będziemy z tego korzystać.

2:43Tu z kolei możemy wybrać jakieś predefiniowane style dla danego elementu.

2:47Jak widzisz strona nie posiada żadnych stylów, natomiast jeżeli kliknąłem na

2:51przycisk to okazuje się, że ma tutaj różne style.

2:54Na chwilę obecną zastosowanie ma styl primary button, ale mogą to zmienić.

2:58Jak widzisz zmienia mi się tutaj wygląd tego przycisku.

3:01O stylach też pomówimy sobie nieco dokładniej później.

3:04Kiedy będziemy definiować własne style.

3:07Wróćmy z powrotem do strony indeksowej.

3:10Tu z kolei ustawiamy styl dla background.

3:13Na chwilę obecną nasza strona ma tutaj kolor biały.

3:17Możemy jednak w ogóle usunąć jakiekolwiek tutaj style dla tła.

3:20Wybierając tą opcję none znów ustawić jednolity kolor, np.

3:26kolor czerwony.

3:28Jak widzisz ma tutaj teraz zastosowania.

3:30Możemy tu jeszcze dodatkowo ustawić

3:32gradient, ustawić obrazek albo wideo jako tło takiej strony.

3:35Dodatkowo możemy tutaj jeszcze zdefiniować tranzycje.

3:39O tym też porozmawiamy nieco później na przykładzie innych elementów.

3:44Natomiast ta sekcja odpowiada tutaj za ustawienia SEO.

3:48Znów jeżeli jesteś zainteresowany jak to wszystko działa, odsyłam Cię do

3:51odpowiednich kursów na Eduweb'ie, my w tej sekcji

3:54tutaj nie będziemy zmieniać, nie będziemy ustawiać, jest to nam niepotrzebne.

3:58W ramach naszego kursu.

4:01Przejdźmy więc może tutaj do kolejnej zakładki, czyli zakładki Layout.

4:06Tą opcję ustawiliśmy wcześniej, czyli ustawiliśmy, że szerokość naszej

4:10strony, z którą będziemy tutaj pracować w edytorze ma mieć 1280 pixeli.

4:15Minimalnej szerokości nie musimy ustawiać,

4:17zawsze zostawiamy tutaj wartość 0, a minimalna wysokość.

4:21Znów ta wartość niekoniecznie ma tutaj jakiekolwiek znaczenie.

4:24Możemy ją ustawić tylko i wyłącznie właśnie tutaj, w ramach pracy.

4:27Jak widzisz to się tutaj zmienia.

4:29Ja z reguły ustawiam to tak, aby mi się dostosowało do wysokości mojego ekranu.

4:34Natomiast jeżeli będziemy dodawać jakieś kolejne

4:37elementy na naszej stronie, to jej wysokość będzie automatycznie się dostosowywała,

4:41więc znów jest to tylko taka dodatkowa tutaj opcja

4:43do pracy w samym edytorze. Do zakładki conditional znów wrócimy na przykładzie

4:49innych elementów. Na chwilę obecną nie będziemy tego

4:51poruszać, natomiast chciałbym zwrócić Twoją uwagę tutaj na te trzy ikony.

4:57Za pomocą tej ikonki otrzymasz pomoc dotyczącą danego elementu, najczęściej

5:01właśnie jakieś wideo, które będzie Ci tłumaczyła jak korzystać np.

5:05tutaj z elementu page.

5:06Jeżeli kliknąłbym, jak widzisz wideo nam się tutaj załadowała, jak używać page element.

5:12Jeżeli wróciłbym do button'a i teraz wybrał tutaj tą ikonkę

5:18to otrzymam odpowiednie wideo dotyczące właśnie przycisków.

5:22Za pomocą tutaj tej ikonki będziemy mogli

5:25wyświetlać sobie custom'owe state'y dopisane do takiego

5:30elementu, sprawdzać przypisane eventy, akcje, bądź inne elementy.

5:34To też omówimy sobie dokładniej w czasie trwania naszego kursu.

5:38Natomiast za pomocą tej opcji możemy tutaj

5:41dodać jakieś dodatkowe notatki do danego elementu.

5:44Ja rzadko z tego korzystam, ale być może

5:46znajdziesz dla tej funkcji jakieś zastosowanie w swoich projektach.

5:51I oczywiście tutaj za pomocą tej ikonki zamykamy okienko z panelem właściwości.

5:57Jak zwróciłaś już uwagę ten panel nieco się

5:59różni w zależności od elementu jaki wybrałem.

6:03Przez te wszystkie opcje też będziemy sobie po kolei przechodzić.

6:05Dla każdego elementu z, którego będziemy korzystać.

6:08Tak więc na chwilę obecną tylko chciałbym

6:09żebyś wiedział jak go tutaj uruchomić i za co odpowiadają tutaj poszczególne części.

6:14To by było na tyle w tej lekcji i widzimy się już za chwilę.