Aplikacje no-code z Bubble: Element HTML i sticky pricing
Wdrożenie projektu
15 godz. 6 min · UI, UX i Webdesign
Krzysiek PiekarzAutomation Specialist / No-code DeveloperCzego się nauczysz
- Z jakich narzędzi i serwisów korzystać, by zaprojektować interesujący i ciekawy layout.
- Podstawowych technik pracy z narzędziem Figma, by nasz statyczny design zamienić na aplikację.
- Pracy z edytorem Bubble, gdzie skupimy się na jego podstawowych elementach i funkcjonalnościach
- Tego jak przygotować nowoczesny landing page, posiadający wszystkie niezbędne elementy strony sprzedażowej
- Dodatkowo wdrożymy również inne strony w naszym serwisie - czyli logowania/rejestracji, wyszukiwania, stronę pojedynczego itemu oraz stronę profilową i stronę rezerwacji
- Na koniec zajmiemy się również wdrożeniem w pełni funkcjonalnego dashboardu dla naszych użytkowników i wynajmujących
Dla kogo jest ten kurs?
Materiał szkoleniowy został zaprojektowany tak, aby mogło z niego skorzystać jak najszersze grono odbiorców. Nieważne czy jesteś totalnym laikiem, czy też posiadasz już wiedzę z zakresu programowania lub designu, na pewno znajdziesz tu coś dla siebie. A więc kto jeszcze może skorzystać z wiedzy zawartej w tym kursie?
Nasza strona listingu jest już niemal skończona.
Jedyne co nam pozostało do zrobienia, to
przygotowanie tej sekcji z możliwością zablokowania danego listingu.
Jak widzisz, ja już tutaj rozpocząłem pracę.
Ten układ jest niesamowicie prosty, więc
nie będziesz miał z nim najmniejszego problemu.
Dlatego ja już go po zacząłem tutaj wdrażać tylko po to, abyśmy mogli skupić
się na elementach, które tutaj zastosowałem.
A więc wróćmy do edytora.
Przejdźmy tutaj do tej całej grupy Side.
I zerknijmy na jej ustawienia.
To co zrobiłem, to przekazałem typowy
content as listing standardowo z parent group oraz listing.
W przypadku layoutu jest to kolumna.
Cała kolumna, czyli cała ta grupa jest
rozciągnięta na dostępną szerokość kontenera rodzica.
Czyli po prostu wybieramy tą opcję vertical stretch.
Zostawiłem tutaj maksymalną szerokość 360
pikseli i tylko wywaliłem to tło, które mieliśmy wcześniej.
Tym razem nie ma tutaj żadnego tła, a więc przystępujemy do dalszej pracy.
W środku mamy grupę Research Group, znów AS Listing Parent Group Listing.
Tu jedynie tylko nadałem zaokrąglenie
narożników równe 8 pikseli, nasz kolor Neutral 300.
Jeżeli chodzi o obramowanie.
A kolejno w zakładce Layout mamy padding 16 pikseli od góry 24 z
pozostałych krawędziach, czyli bottom left right.
Minimalnej wysokości nie potrzebujemy.
Pozostawiamy zaznaczone fit height to content.
Układ kolumn Arrow GAP to 24 piksele.
Kolejno w środku.
Mamy grupę rezerw Price.
Tutaj jest rau rozstrzelanie elementów do obu krawędzi, czyli Space Between.
To, co tutaj dodałem.
To ta grupa gdzie mamy.
O właśnie!
Listing Price.
Skopiowałem ją po prostu z karty listingu elementy i wstawiłem tutaj.
Ona wyświetla tutaj prices per site.
A tutaj mamy jeszcze tekst pod MD 16 pikseli 500.
Tutaj mamy tak grupę z dwoma
tak nieznanymi w środku grupami o nazwie Reserve Input Group.
Kolumn 16 pikseli.
I to wszystko.
Następnie obie takie grupy będą miały niemal identyczne ustawienia,
czyli padding i 12 pikseli z lewej i z prawej strony.
Układ typu ikon ustawiony na 4 piksele.
Czy mamy tutaj coś przekazujemy?
Nie, tutaj nic nie przekazujemy, Przynajmniej chwilowo.
Jak widzisz tylko zaokrąglenie narożników 8 pikseli 1 piksel border neutral 300.
To dokładnie to samo.
Natomiast to co będę chciał pokazać to jak rozwinę tą grupę.
Mamy tutaj ikonkę z datą o takiej wartości
i jeżeli chodzi o jej nazwę i kolor czyli secondary 600.
Natomiast dodatkowo zastosowałem tutaj
element z pluginu o nazwie Date Time Poker.
Wystarczy, że wyszukasz go sobie w plugin i zainstalujesz.
Po dodaniu i wstawieniu go do tej grupy
otrzymasz taki element, który ma tutaj cały szereg różnych opcji.
Ja wybrałem z jednego prostego powodu.
Domyślnie mamy tutaj opcję Single date.
Zaraz Ci pokażę jak to działa.
Te pola możemy pozostawić puste.
Nie chcemy tutaj chwilowo żadnych initial date.
To co chciałbym tutaj zmienić to tak place holder.
Zmieniam na Select Date.
Minimum date czyli minimalna data od której mogę sobie tam coś wybierać.
Chciałbym ustawić na Current date.
I dodać tutaj jeden dzień.
Czyli żeby użytkownik jeżeli będzie chciał
rezerwować jakiś pobyt to mógł to robić dopiero od dnia jutrzejszego.
Czyli wybieram sobie plus das i wstawiam jedynkę.
Możesz mu również nadać tutaj maximum dat, jeżeli będziesz chciał.
To na razie zostawmy puste.
Zostawiamy tutaj język angielski, ponieważ cały nasz serwis jest w języku angielskim.
Tutaj nic nie zmieniałem.
Pozostawiłem wszystkie te wartości dokładnie takie, jakie były.
Natomiast to, co chcę tutaj Ci pokazać, to tak.
Ta sekcja tutaj First Days of the Week wybieramy na Monday, przynajmniej dla nas.
Następnie Day name kolor ustawiłem na Secondary 600.
Tu wybrałem Primary 600.
Place holder to Secondary 600 ustawione na 50%.
I tak Current Day Color to Primary 25 i
dokładnie taki sam kolor wybrałem dla tej kolejnej opcji.
Następnie zjedź niżej.
To mamy czcionkę.
Nasza standardowa 14 pikseli, grubość 500, kolor secondary 600.
Pozbywamy się background.
Jeżeli tam jakikolwiek był, nie dodajemy
żadnego obramowania, nie dodajemy żadnych styli.
Jeżeli chodzi o Shadow i w ten sposób otrzymamy takie pole.
Czyli to jest.
Zakres dat i zobacz teraz.
Tak wybrałem tutaj tą opcję, że minimalna data może być od jutra.
Czyli się zgadza.
Dzisiaj 31 stycznia, a ja mogę wybrać dopiero 1 lutego.
Te pola są wymarzone i jak widzisz tutaj nie mogę żadnej daty sobie zaznaczyć.
Natomiast mi zależy na tym, aby użytkownik
mógł wybrać nie pojedynczą datę, ale zakres dat.
Teraz mogę wybrać tylko taką i wstawi mi się tu jedna data.
To nie jest to czego potrzebujemy, ponieważ pobyt rezerwujemy od do.
A więc wracamy do edytora.
Przechodzimy tutaj i
tym razem na samą górę po to, aby zmienić ten typ Single date na range.
I teraz jeżeli otworzymy.
To będę tutaj mógł zaznaczyć pierwszą datę i teraz najechać na jakąś dowolną i w ten
sposób wybrać zakres dat powiedzmy na cały miesiąc.
Jak widzisz teraz one nam to odpowiednio wskoczyły.
Natomiast nie podoba mi się ten przecinek między datami.
Chciałbym to zmienić.
A więc wracam znów do edytora.
I szukam tutaj opcji o nazwie.
Gdzieś ona tutaj była.
Musimy ją tylko znaleźć.
DAT Separator to nie będzie przecinek, tylko spacja, myślnik, spacja.
Dodatkowo możemy jeszcze wybrać to formatowanie dat.
Ale ta opcja jest potrzebna tylko wtedy, jeżeli ta domyślna Ci się nie podoba.
Czyli takie 0. 1 łamane na 0.
2 łamane na 2024.
Dla mnie to jest ok.
Odświeżam. Wybieram teraz zakres dat.
I już mam dokładnie taki efekt, na jakim mi zależało.
A więc tak działa to pole realtime, które posiada.
Jak widzisz cały szereg przydatnych opcji.
Zaznaczyliśmy i zmienialiśmy tylko niektóre z nich.
Reszta zostawiamy bez zmian.
Następnie wracamy do edytora.
I tym razem tutaj na grupy rezerwy gest
wybrałem element, którego jeszcze nie korzystaliśmy, a mianowicie drop down.
Znajdziesz go tutaj.
W tej sekcji Input Forms
Trap Down wstawiamy i tylko zmieniamy odpowiednio style.
Klasy holder zmieniam Pages number i tutaj pozostałe style
takie jak już znasz, czyli 14 pikseli 500k secondary 600, secondary 650 procent.
Tutaj nic więcej nie zmieniamy.
Pozbywamy się condition all i nie są nam potrzebne te domyślne.
Jednak od layoutu ustawiam tutaj wysokość na 48 pikseli.
Podobnie zresztą zrobiłem tutaj.
Dlatego tempera.
I tutaj dodałem jeszcze tylko padding z
lewej strony równe 4 piksele, żeby odpowiednio wyrównać te teksty w środku.
Natomiast jak działa pole typu draw down.
Działa ona na dwa sposoby.
Możemy tutaj wybrać Static Houses i podać
samemu jakie opcje do wyboru będzie miał użytkownik.
U nas będzie to liczba gości, a to jak pamiętasz ustawiliśmy sobie jako opcją set
1-2-3 to 8+, więc mógłbym to wpisać w ten sposób.
3, 4 itd.
I zobacz jak to zadziała.
Przejdę do naszej witryny, odświeżę.
I teraz mogę kliknąć TU i pojawiają mi się opcje do wyboru.
I teraz mogę wybrać.
I właśnie to nam odpowiednie opcja tutaj wskoczyła.
Natomiast ten Static Choice ma ten
problem, że gdybyśmy zmienili coś w naszym pierwszym secie i np.
stwierdzili, że będziemy mieli tam od 1 do nie 8+ a 10+, to musiałbyś wszędzie szukać
takiego drop down u i to oczywiście ręcznie poprawiać.
Jest to bezsensowne jak się domyślasz.
Dlatego też właśnie możemy wykorzystać tutaj Option Set i głównie właśnie do
takich funkcjonalności Open sety zostały stworzone właśnie do takich wyborów.
Do takich list, które użytkownik może zaznaczyć tak jak by miało to miejsce np.
właśnie w tym popie.
Na stronie search zaznaczyliśmy jakie
udogodnienia użytkownik może wybrać albo z jakich języków korzysta nasz host.
Właśnie do takich prostych zastosowań option sety idealnie się nadają, a więc
pozbywamy się tych tutaj statycznych i wybieramy opcję Dynamic Choice.
I teraz musimy wybrać Type of Voices.
U nas będzie to AS Listing Numbers.
To jest Source wszystkie te opcje jakie są
tam dostępne, czyli wszystkie rekordy z tego Option setu.
I co ma się wyświetlić jako caption, czyli to co użytkownik będzie tutaj widział.
My tam opisywaliśmy jedynkę, dwójkę,
trójkę i chcemy powiedzieć, że będzie to Karen.
To po prostu display.
Zresztą tutaj mamy tylko i wyłącznie
display, więc ten wybór jest mocno zawężony.
I to w zasadzie tyle.
Teraz odświeżamy.
Jak widzisz mam tutaj już całą listę ze
wszystkimi rekordami z naszego setu oraz Listing Numbers.
Tak działa właśnie pole Trap Down.
Tu mieliśmy pole Art date.
Przejdźmy więc dalej.
Tu jak widzisz odnoszę się po prostu do Parent Group of Listing i do jego ceny
sformatowanych właśnie w ten sposób, że mamy tutaj karencji.
Mamy deski male separator.
I tutaj nic na razie więcej nie zmieniałem.
To co chcę zrobić tutaj.
Warto przejść do tego pola Rise of Night, gdzie mamy teksty.
Ta grupa będzie powielana wszędzie tutaj. Dokładnie tak samo.
To jest rozrost, szalone elementy.
A tutaj teksty.
To czcionka body MD 16 pixeli 500.
Jak widzisz tu i tu.
I tak samo zresztą będzie tu i tutaj.
Jedyna różnica to to pole.
Tutaj stosujemy head linki 5 typu.
Natomiast ja chcę to delikatnie sobie dostosować.
Jak widzisz wybrałem tutaj połączenie, że to jest parent group.
To jest listing price razy -10%, a tu chcę wyświetlić wynik takiego działania.
Czyli co musimy zrobić.
Musiała się odnieść do.
Ale z. Price.
Listing Price.
Wybrać tutaj rasy.
Na sztywno na razie wpisać 10.
Ot kliknąć się i teraz dopiero wybrać tutaj format et as.
Currency.
I znaczek dolara.
W ten sposób ta wartość zostanie pobrana z listingu i pomnożona tutaj przez 10.
Zerknijmy jak to wygląda.
Mamy tutaj 99 razy 10.
To powinno dać 990.
Zgadza się? Jest w porządku.
Możemy tutaj zadbać o to, aby tą cenę
wyświetlać właśnie w takiej formie, a więc.
Zaznaczamy i wybieramy Small place.
I dwie cyfry po kropce, czyli po tym test i separator.
Natomiast chcę jeszcze przyjść tutaj, wybrać sobie Rich Text Editor.
Zaznaczyć cały ten tekst.
Ten dynamiczny.
Pierwszego pogrubić, a po drugie nadać mu chwilowo jakikolwiek kolor.
Jak widzisz tutaj ta lista jest bardzo ograniczona.
Wybierzmy np. taki.
Klikam save i wskoczył mi to już BBCode, a
ja mogę w to miejsce wstawić nasz kolor primary.
Aby go sobie pobrać przechodzę do styli CSS i szukam Primary 600.
Czyli ten kolor.
Coś sobie kliknąłem, więc muszę się tutaj.
A właśnie.
Chyba go delikatnie zmieniłem, tak mi się
wydaje, ale to nic, potem go w razie czego poprawia.
Właśnie to jest ten problem, że tutaj
otwiera się ten kolor poker i czasami te kolory gdzieś tam przeskakują.
Wracam do designera.
Klikam w to pole.
Ona mi się tutaj właśnie.
Dlaczego nam tutaj to nie wyskoczyło, a raczej editor powinniśmy mieć to.
Pogrubione i z tym kolorem, a pewnie
kliknąłem cofnij się zmian i nie cofnęła mi się zmiana koloru, ale cofnęła mi się.
Zmiana tutaj zastosowana. Nic.
Klikam save i to co mogę zrobić to w to miejsce wstawić tą wartość kolorystyczną.
I teraz rzeczywiście coś jest nie tak. Ale to nic.
Zostawmy chwilowo taki kolor.
Dzięki temu.
Uzyskaliśmy tutaj taki całkiem fajny
efekt, czyli 99 razy 10 Nights to są już stałe wartości, tutaj nic nie zmieniamy.
Jedyne co chce zrobić to tutaj to wartość total.
Też wyliczać dynamicznie.
Będzie to tak Rising razy 10 +25 i plus 35.
Dzięki temu jeżeli użytkownik przejdzie na stronę takiego listingu, to zobaczy, że
rzeczywiście tutaj też się coś zmienia i dostosowuje.
No właśnie do całego tego listingu i jego opcji, którą mamy w pierwszym secie.
A więc przechodzę tutaj do Total.
I wstawiam sobie tak Parent group oraz listing.
Prices.
Razy 10.
Muszę się gdzieś tutaj kliknąć.
Teraz wybrać sobie plus.
Wpisać ręcznie 25.
Znów kliknąć. Znowu wybrać.
Jeżeli tak Ci się to tworzy, to klikasz na ostatni element.
I teraz Namor.
Tutaj plus.
Wpisujemy z palca 35 odblokujemy się.
Mamy taką wartość, czyli parent group as listing price.
Razy 10 +25 + 35.
Klikam na to 35, klikam na moro i teraz dopiero wybieram format AS.
Currency.
Dwa miejsca po przecinku i odpowiedni znaczek.
Odświeżam.
I już ta wartość dostosowuje się dynamicznie do ceny, pressingu, pressingu
jaki mamy ustawiony za noc dla danego listingu.
Natomiast to jeszcze nie jest koniec, ponieważ teraz jeżeli będę królował całą
naszą stronę, to ta grupa pricing też się będzie składała razem z nią.
Idziesz na nam tutaj znika.
Ja natomiast chcę, żeby ona w którymś momencie tu się
przykleiła do tej pozycji, która jest i w niej pozostała.
Jak to zrobić? Babel?
Musimy się odnieść do całej tej grupy i zmienić jej style CSS.
O stylach CSS jeszcze nie rozmawialiśmy.
Także jeżeli tworzyłeś strony internetowe,
to doskonale masz pojęcie o tym, czym są style CSS.
Jeżeli nie, to style CSS to są po prostu właściwości, które nadajemy elementom,
a tymi właściwościami są właśnie te właściwości, które tutaj ustawiamy, np.
border color takiego border, zaokrąglenie
narożników tutaj, rozmiar fontów, jego grubość itd.
W przypadku zwykłych stron internetowych wszystkie takie style dla wszystkich
elementów z reguły zebrane są w jeden główny plik ze stylami
i każdy developer ma do niego dostęp i może go odpowiednio edytować.
Natomiast w przypadku Babel to takiego
pliku niestety nie mamy dostępu, a często zdarza się tak, że właśnie style,
które mamy tutaj dostępne nie odzwierciedlają wszystkich, jakie są
dostępne w ogóle w CSS dla różnych elementów, np.
tutaj dla całej grupy nie mogę sobie
ustawić position, mimo że taka właściwość CSS istnieje i jest dostępna.
A więc jak to zrobić, żeby się do tego dostać?
Jest to niesamowicie proste.
W pierwszej kolejności zaznaczam sobie nazwę tej grupy.
Tutaj Research Group i ustawiam ją tutaj
jako ID atrybut, aby móc się do niej odnieść w stylach CSS.
Teraz mogę sobie takie pojedyncze style strzelić za pomocą elementu HTML.
Za jego pomocą możesz tutaj. Mnie tutaj.
Nie chcę w tym miejscu, tylko chcę go mieć.
Tutaj podgrupą.
Czyli HTML i w to miejsce.
Jak widzisz mogę go tutaj wstawić.
Normalny kod HTML.
Ja najczęściej używam go jednak do
wstawiania styli CSS i takich właściwości, o których jak
mówiłem nie ma bezpośrednio dostępu poprzez panel właściwości.
Nazwijmy to li 0.
HTML.
I teraz muszę wstawić tutaj taki zapis.
Klikam sobie HTML Editor.
Ustawiam coś takiego najpierw tutaj
znaczniki, że chcę, że to co przekazuje w środku to są style CSS.
Następnie odnoszę się do ID naszej grupy, czyli jest to hash rezerw grup
i odnoszę się do tych właściwości, które chcę zmienić.
Wystarczy, że ja tutaj wpiszesz.
Ja już tutaj odpowiednio sprawdziłem, dobrałem właściwość top.
Musimy się odnieść do position i ustawić wartość na sticky.
Następnie dodać important, żeby to miało
zastosowanie, ponieważ Babel dodaje takie style bezpośrednio do elementów.
To jest jednak takie zagadnienie dużo bardziej związane z tworzeniem stron,
także ja nie chcę się w to zagłębiać zbytnio.
Po prostu uwierz mi na słowo, trzeba to właśnie zapisać w taki sposób.
Czyli pozycja Sticky Important oraz druga właściwość top ustawiona na 150 pikseli.
Klikamy Save.
I teraz to co mogę zmienić jeszcze to tylko w miarę tego elementu on się nie
będzie wyświetlał na stronie, ponieważ mamy tam tylko style.
Natomiast ja nie chcę żeby on był taki duży.
Tutaj z reguły ustawiam go sobie na 25 na 25 pikseli.
I dokładnie to wszystko.
Fit hit to content. Czemu on?
Aha, tutaj muszę sobie zaznaczyć, a nie żeby to było 25 na 25 pikseli.
Jeżeli teraz przejdziemy do podglądu i odświeżamy.
Teoretycznie nic się nie zmieniło, ale jeżeli będę sprawował stronę,
to właśnie w którymś momencie, czyli w momencie, kiedy
to jest 150 pikseli, ten element się zatrzymuje.
I nie skrobię się całą stroną, dopóki nie
dojdziemy do końca tutaj tego całego elementu, całej tej sekcji do kolumn.
I teraz możemy zjechać niżej.
Bardzo fajna opcja i bardzo przydatna.
Zresztą dokładnie taką samą znajdziesz również na stronie RB NB.
Natomiast jeżeli myślisz, że to już koniec
przygody tutaj z naszą stroną listingu i z sekcją rezerw, to niestety nie.
Ponieważ w kolejnej lekcji zaczniemy rozmawiać o responsive design i
dostosowaniu naszej strony do różnych rozdzielczości.
Ja chciałbym zawczasu w tej lekcji
przygotować sobie jeszcze właśnie taki box pressingiem, który będzie wyświetlany na
mniejszych ekranach, czyli nie nagranie desktopowe, które widzisz teraz
na swoim ekranie komputera, ale na przykład na ekranie tabletu albo na
ekranie powiedzmy komórki, czyli urządzenia mobilnego.
A więc wracamy sobie do edytora i przystępujemy do pracy.
W pierwszej kolejności dodajemy Floating Group.
I wstawiamy je gdzieś tutaj.
Zerknijmy, gdzie ona nam wyskoczyła.
Jest ok.
Nazywamy ją.
Rezerw.
Mobile Floating Group.
Typ layoutu ustawiam na align to parent.
Pozbywam się tutaj minimalnej szerokości,
a minimalną wysokość chcę ustawić na 72 piksele.
I tutaj jeszcze zostawić tą opcję twitcha i content.
Kolejne przechodzimy tutaj.
Zmieniamy wyrównanie, tym razem do dolnej
krawędzi ekranu przeglądarki i nadajemy tutaj Flat color
równe Secondary 600 z wartością ustawioną na 50%.
Kiedy ta grupa wskoczyła, to wskoczyła na sam dół, czyli w to miejsce.
I tylko wydaje mi się, że to chyba nie było 50.
Tak, to nie była 50% tylko 30.
Dokładnie taką wartość, jaką mieliśmy zastosowaną dla naszych pop upów.
I teraz.
Dajmy tu chwilowo
472, żeby ta grupa nam się zdecydowanie powiększyła i przystąpimy do pracy.
Chcę tutaj dodać dwie grupy do środka.
Wybieram więc.
Pierwszą grupę.
Chyba wstawiłem pop up, a nie grupę.
Cofnijmy się tak pewnie zaznaczyłem sobie pop up, a nie grupę.
A właśnie teraz muszę tutaj dodać pierwszą grupę.
Będzie to tak.
Czyli zero.
T-Mobile.
Visible Group.
Tutaj układ torów.
Pozbawiamy się minimalnej szerokości.
Wysokość ustawiam na stałą na 72 piksele.
I teraz tak przekazuję sobie tutaj pulę dla całego tego Floating Group.
Będę chciał przekazać tutaj typowy content is listing.
I tu musimy się odnieść do.
Page Wrapper Group.
To jest listing.
Z niego wyciągać dane o konkretnym listingu.
W ten sposób mogę się odnieść do tej grupy
Reserved, Mobile Visible Group i tutaj też wyciągnąć listing.
I wybrać parę grup, a jest listing. To chcę.
To co chcę tutaj ustawić to tak.
Background style na flat color.
Nasz color primary 25.
I dodać tutaj jeszcze border top.
Ustawione.
Na jeden pixel solid.
Oczywiście standardowy kolor.
Teraz chcę tu nadać padding równe 16 pikseli z lewej i z prawej stronę.
A w zasadzie tutaj chyba z każdej strony.
Z tego co widzę w elemencie wzorcowym, czyli w ten sposób.
Następnie będę tutaj chciał wstawić elementy z naszej strony.
Tutaj tą grupę.
Z leasingiem.
Jedźmy na sam dół.
Zostawmy ją tutaj.
Porównajmy do tej strony.
Jedyne co będę chciał zmienić tutaj, to rozmiar tej czcionki.
Ustawić na H6.
I wybrać kolor Primare.
Zostawiamy to w ten sposób. Kolejna.
Wstawiamy tutaj button.
Przesuniemy go.
O właśnie tutaj.
Czemu on nam się nie chce przesunąć?
Zerknijmy, gdzie on nam wskoczył.
OK, jest tutaj.
Więc powinien nam się wyrównać. OK.
Aha, dobrze tak, tutaj dlatego rezerwowej dywizji Bell
Group chciałem ustawić ROW, ale raz strzelić elementy, czyli wybrać tą opcję.
I teraz ten button wskoczył tam gdzie powinien.
I tutaj tak pozbywamy się minimalnej szerokości white content 40 pikseli.
To będzie.
Rezerw.
Mobile btn.
Ja mam już przygotowany styl o nazwie Primary button Primary small.
To ma po prostu tutaj ustawiłem czcionkę równą 14 pikseli.
Resztę zostawiłem bez zmian i padding zmieniłem na 8, 8, 16, 16.
I tutaj ten tekst też zmienimy na bąknął.
To co możemy jeszcze zrobić to wyrównać,
wyśrodkować tą grupę w pionie czyli tą listing price.
I teraz tak cały ten element, cały ten
Reserved Mobile Visible Group przesuwamy do dolnej krawędzi.
I wstawiamy tutaj kolejną grupę.
Tup tup, tup musimy namierzyć.
Grupa jest.
Wstawiamy ją tutaj.
Będzie lizał.
Mobile.
Hidden Group tym razem.
I tak tutaj będziemy mieć układ typu kolumn.
Pozbywamy się minimalnej szerokości.
Marginesy bottom ustawiamy na 72 piksele.
Grupę przesuwamy do dolnej krawędzi.
Następnie dodajemy tutaj flat color.
Będzie to nasz kolor biały.
Chcę tu jeszcze ustawić zaokrąglenie
narożników dla górnego, lewego i prawego narożnika.
Równe 8 pikseli i 8.
I tutaj 8.
Następnie dodajemy tutaj jeszcze chyba puddingu.
Zaraz zerknę.
Nie. Tutaj nie mamy parkingów.
Czyli wstawiamy kolejną grupę.
Kopiuję sobie tą nazwę
i tym razem będzie to po prostu Top Group, czyli Reserve Mobile Hidden Top Group.
Tu będę chciał ustawić RoF oraz strzelić te elementy.
Dodać padding po 16 pikseli z lewej i z
prawej strony pozbyć się tej minimalnej szerokości.
Minimalną wysokość na razie zostawmy tutaj na te 280.
Natomiast to co będę chciał tutaj dodać to ikonka, którą mogę sobie wyciągnąć z papa.
Czyli mogę sobie skopiować tą ikonkę.
I wstawić się.
Tutaj dla tej grupy.
Tutaj też dodajmy jeszcze może padding i.
Top i bottom na szesnaście pikseli.
Kolejno znów otwieram popup, a w zasadzie nawet nie skopiuję.
Po prostu tak ten tekst.
Postawmy go tutaj.
Będzie to body SM 14 pikseli 500 color secondary 600.
I tekst Clear all.
Jedynie tylko podkreślone.
Na razie tylko modelujemy, nie pogrubione, podkreślone.
W ten sposób teraz pozbywamy się minimalnej.
Wysokość dla całej tej grupy.
I wstawiam tutaj kolejną grupę.
Ależ to zaraz zerknijmy, jak mamy to ustawione.
Mamy. Tak?
To jest ta grupa Visible. To jest hidden.
Tu mamy top. A więc tak.
Tu musimy wstawić dodatkową grupę,
a nie w to miejsce, żeby ona nam tu wskoczyła, to sobie pozamyka i my.
A to nie jest takie proste czasami. Właśnie w ten sposób.
Czyli mamy mobile hidden grup wewnątrz
tą grupę z topem i teraz to będzie grupa z contentem.
Tutaj będziemy mieć kolumn.
Pozbywamy się minimalnej szerokości.
Znowu nadaję sobie tutaj ręcznie padding na 16 pikseli z każdej strony.
I to co chcę zrobić, to wrócić do strony
naszego listingu, przejść znowu na samą górę.
Czeka nas tutaj dużo kopiowania.
Zaznaczyć sobie całą tą grupę.
Top Text Group.
Skopiować.
I wstawić ją.
Do tej grupy.
Tę grupę nazwijmy.
Może po prostu.
Ten sposób to tylko.
Medal.
I tak pozbywamy się minimalnej wysokości.
A więc mamy tutaj a'la Cheddar z przyciskiem, A w zasadzie tutaj z tą
ikonką mamy tą informację tutaj o listingu.
Zerknijmy czy to się nam tutaj odpowiednio przekazuje.
Tutaj musimy mieć.
A jest listing z Parent group of Listing.
Tu jest ok. Tu jest ok.
Tu przekazaliśmy. Tu nie musimy.
Natomiast tutaj musimy, żeby to nam się odpowiednio tam wyciągało.
Czyli Oz Listing.
Parents Group of Listing.
OK i teraz to się odnosi do elementu rodzica, więc jest tak jak trzeba.
To co chcę tutaj jeszcze wstawić?
To znów skopiować sobie z całej strony.
Zamknijmy to, przejdźmy.
Tutaj.
I będę chciał.
Przede wszystkim skopiować ten element
i w zasadzie tutaj te elementy, więc można sobie łatwo tutaj to zadanie.
Zaznaczmy całą tą grupę.
Czyli grupę Reserved Group i ją skopiuje.
Przychodzę tutaj doradzić, zreformować jeden.
Stawiam.
I tutaj odpowiednio też ustawiam pozbywam
się background u nie mamy, czyli obramowania.
I teraz tak.
Co nam jest tutaj niepotrzebne?
Ta grupa z ceną
to zostawiamy, to zostawiamy, to zostawiamy, pozbywamy się tego guzika.
A więc mamy.
Tylko tą część tutaj pozostawioną.
Jaki mamy tutaj padding.
Mamy.
Tak zmieńmy wszędzie na 16, żeby to dostosować.
Usuńmy tutaj ten ID.
Atrybut on jest tutaj niepotrzebne. I co nam to dało?
Zaraz zobaczymy na podglądzie.
Odświeżamy.
I tak mamy tutaj.
Tę grupę mamy Tau.
To co będę chciał tutaj teraz zrobić, to dodać trochę dynamiki za pomocą workflow.
W jaki sposób?
Już nie pokazuję.
Wracamy do edytora.
Zaznaczam całą tą grupę mikserów Mobile Hidden Group i ją domyślnie ukrywamy.
Czyli ten element nie ma być widoczny po
załadowaniu strony i ma mieć ustawione collapse when hidden.
Tutaj usuniemy tą minimalną wysokość.
Teraz dla całej grupy tej wrapper będę chciał dodać nowy custom state.
O nazwie Szał.
Obaj.
Rezerw.
Będzie to jedno.
Czyli typ Boolean.
Domyślna wartość ustawiona na noł.
I teraz dopiero możemy się odnieść właśnie do tego custom stada.
W ten sposób.
Zaznaczam to całą grupę rezerw Mobile Floating Group.
Tutaj ustawiam minimalną wysokość na 72 piksele.
Natomiast przechodzę do sekcji Conditions i zadaję tutaj pierwszy warunek.
Odnoszę się do Page Wrapper Group i do naszego custom statu.
Czyli są rezerwy.
I mówię jeżeli będzie miał wartość, jest to, co chcę zrobić.
Chcę tutaj ustawić minimalną wysokość, czyli minimal height.
Nie na 72 piksele, ale na 100%.
Mogę sobie teraz zaznaczyć.
Cały ten całe to wyrażenie wybrać kopiuj expression.
I przejść tutaj do rezerw nabytych grup.
Wkleić i wybrać tutaj This is visible.
Czyli znów kiedy ta wartość będzie ustawiona na jasno?
Będziemy chcieli pokazywać całą tą grupę.
A domyślnie jest ona tutaj ukryta.
I to z opcją collapse hidden.
Natomiast teraz musimy w jakiś sposób zmieniać oczywiście ten custom state.
Klikam na button.
Ad Workflow.
Set state of an element.
I to, co chcę zrobić.
Odnieść się tutaj do tak.
Page Wrapper.
Wybrać nasz statek i ręcznie teraz zmienić to jest.
Czyli po kliknięciu w ten button będziemy zmieniać statek na wartość jest.
Natomiast po kliknięciu w tą ikonkę.
Chcę go zmieniać na nowo.
Czyli.
Jeśli musimy mieć to zaznaczoną opcję i z klika bool klikamy Start Edit Workflow.
Napiszmy sobie.
Tutaj o właśnie ten statek.
Skopiuj.
Tutaj muszę zaraz zmienić nazwę tej ikonki, ale na razie wklejam tutaj ten
krok pierwsze i kolejno zmieniam wartość tutaj na.
Jeszcze tylko.
Nazwa to będzie x0.
Mobile.
Cross.
A ikona.
I teraz przejdźmy do podglądu.
Odświeżamy.
I zerknijmy jak to działa.
Domyślnie będzie nam się wyświetlał tylko ten pasek na samym dole.
I tak powinno być.
To nam niestety ten badge zasłania nasz guzik, ale tym się nie przejmuj.
Tego patcha można usunąć w planie płatnym.
Natomiast na razie niech on tutaj będzie.
Ja klikam na ten guzik i slajd zmienia mi się znowu na Yes.
Cała ta floating group tutaj wyświetla się na wysokość ekranu.
Jak widzisz.
I tutaj, dlatego mamy to takie tło.
Dodatkowo wyświetla nam się tutaj cała ta
grupa, gdzie mamy informacje o naszym listingu.
Możemy wybrać dokładnie te same opcje, które wybieraliśmy właśnie w tym boksie.
Tutaj rezerwa.
A mogę teraz to kliknąć i nam się cała ta grupa zamknie.
A więc dopiero teraz cała nasza strona listingu jest gotowa.
My będziemy jeszcze dostosowywać
to, kiedy te elementy mają się wyświetlać, czyli na jakich rozdzielczościach.
Ale tym zajmiemy się już w lekcji kolejnej.
Dziękuję Ci za uwagę.
I widzimy się za moment.