Aplikacje no-code z Bubble: Przerabiamy navbar
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?
Kontent naszej strony wyszukiwania jest już w dużej mierze gotowy, a więc mamy
tutaj przygotowaną odpowiednio kolumnę lewą oraz kolumnę prawą z mapką.
A więc przejdźmy teraz do samego nav bara.
Jak widzisz na chwilę obecną wygląda ten sposób.
Natomiast na naszej stronie wzorcowej wygląda w taki sposób.
Nie tylko nie mamy tutaj kontenera, który ograniczał by nam tu treści do 1.
200 pikseli, ale dodatkowo zniknął ten
link Pixma Host, a w jego miejsce pojawiła się właśnie taka dynamiczna wyszukiwarka.
A więc jak się domyślasz, jest to zadanie, które musimy wdrożyć właśnie w tej lekcji.
Czyli nie przedłużam i przejdźmy do edytora.
W pierwszej kolejności oczywiście
przejdziemy do edycji samego NAV bara, czyli naszego Adjust Element.
Klikamy Edit Element lub wybieramy go z tej listy.
Jeżeli wolisz to zrobić w ten sposób.
W pierwszej kolejności rozpocznijmy od namierzenia kontenera.
Mamy go tutaj i mamy layout,
gdzie mamy maksymalną szerokość ustawioną na 1200 pikseli.
Natomiast ja chcę, aby ta opcja
nie zadziałała wtedy, kiedy taki nadmiar wyświetlany jest na stronie Search.
Jak to zrobić?
Jeżeli mamy tutaj jakiś warunek, który nam coś określa, to oczywiście Twoje pierwsze
myśli powinny skierować się ku zakładce Condition.
Ale i w przypadku Label Elements
mamy tutaj niesamowicie przydatny warunek, który możemy wykorzystać.
Klikam to pole tutaj i wpisuje nam.
Mam Talent Page Name, czyli kiedy bieżąca nazwa strony jest równa zero.
Czyli właśnie nasza strona search.
To co wtedy?
Wtedy chcę zmienić maksymalną szerokość, czyli wybieram sobie tutaj Max White.
I nie pozostawiam żadnej wartości, czyli
ona będzie rozciągała na całą dostępną szerokość strony.
Zerknijmy, czy to zadziała.
Odświeżamy.
Jak widzisz pierwszy warunek już jest spełniony.
Teraz musimy tutaj odkryć ten link.
Znów możemy dokładnie wykorzystać właśnie ten sam warunek.
Mogę go skopiować klikając prawym guzikiem myszki.
Wybierając kopię Expression przechodzę do tego linku.
W zasadzie może przejdźmy do tej całej
grupy na w miarę links i do niej dodajmy tutaj te opcje, czyli Defender Condition.
I current page name is search.
Chce wtedy ukryć całą grupę, czyli element invisible.
Odznaczamy Jeżeli zaznaczymy, to znaczy, że on jest widoczny.
A jeżeli kliknę tutaj i odznaczenie, to ten element przestanie być widoczny.
Natomiast samo to nie do końca nam zadziała, bo jak widzisz ten element
zajmuje tutaj jakąś przestrzeń 378 pikseli na 90.
Jeżeli bym to zostawił tylko w ten sposób,
to ten element oczywiście zostanie ukryty, ale Babel będzie się dalej zachowywał tak,
jakby on tutaj był i będzie zajmował tą przestrzeń.
Mogę Ci to udowodnić dodając tutaj kolejny Shape.
Jak widzisz muszę go tylko odpowiednio tu namierzyć.
To jedyny element serii i wyciągnąć go poza tą grupę.
Jak widzisz ta grupa nam się skurczyła i ten element pojawia się tutaj.
Przejdźmy teraz do podglądu.
Odświeżamy.
Jak widzisz on jest w tym samym miejscu,
ponieważ ta grupa dalej się tu wyświetla, mimo że ją ukryliśmy.
Jak więc ją ukryć całkowicie?
Musimy wejść do tej grupy do zakładki Layout i zaznaczyć tę opcję.
Collapse on hidden, czyli jeżeli jest ukryta, to po prostu całkowicie ją ukryj
i zachowuj się tak, jakby ona była niewidoczna.
Jeżeli teraz ją ukryję tutaj, czyli odznacz tutaj tą ikonkę oczka.
Jak widzisz ten element wskoczył nam na środek i teraz zachowuje się rzeczywiście
tak, jakby tej właśnie grupy w Barlinku w ogóle nie było.
Mogę Ci to udowodnić, znów przechodząc do podglądu.
Jak widzisz teraz działa to tak jak powinno.
A więc wracamy i zaczynamy modelować sobie właśnie tą grupę.
To co mogę zrobić to zaznaczyć całą tą grupę na Armenii,
ponieważ mamy tutaj odpowiednie ustawienia i nawet odpowiedni condition all.
Wywal ten ship i wstaw tutaj nową grupę.
Odpowiednie miejsca.
Czyli tutaj pomiędzy na w Bordeaux a na Barce ta grupa i będzie to na Search.
I tak layout ustawiony na ROW.
GAP ustawiony w tym przypadku dla kolumn na 24 piksele.
Co wyceny Macie całą tą grupę?
Tutaj w środku, w naszym elemencie rodzica.
I tak pozbywamy się minimalnej szerokości.
Minimalną wysokość ustawmy chwilowo na 90.
I to co chcę zrobić to wstawić tutaj tą skopiowano grupę.
Czyli na w barmani Group.
I to co robimy teraz, to wybierzmy sobie tutaj tekst i zestawmy go do tej grupy,
a pozbądźmy się z nich przede wszystkim tej ikonki i tego obrazka.
Wstawiamy tutaj taką wartość tekstową, a styl wybieramy Body SM 500.
Tylko zmieniamy kolor z neutral na kolor secondary 600.
Pozbywam się tutaj minimalnej szerokości
minimalnej wysokości i dopasowuję szerokość do contentu.
Teraz jeszcze powielam tu ten tekst dwa razy.
Tu wpiszę wartość.
Taką.
Tu z kolei taką wartość.
Do środka dodam jeszcze DVI-D.
Mogę tu od razu wybrać odpowiedni styl.
Tym razem szerokość to będzie jeden pixel.
Wysokość to 24 piksele.
Przesunę go odpowiednio.
Tutaj mamy za mały column gap.
W naszym przypadku to nie 6 tylko 16 pikseli.
Dodatkowo chcę tutaj jeszcze zmienić padding.
Będzie to 10 góra dół, 24 lewo prawo.
Już ta grupa wygląda zdecydowanie lepiej.
Chcę jeszcze powielić ten DVD jeden dwa razy.
I odpowiednio je poprzesuwać.
Czyli pomiędzy tymi tekstami.
Tu odznacz tę opcję Fit white content.
Czy na pewno?
Nie, nie musimy ją pozostawić włączoną.
I to, co chcę zrobić, to jeszcze dodać tutaj grupę.
Będzie ona miała typ Line Parent.
Wymiary stałe 36 na 36 pikseli.
Będzie to.
Na Webera.
Jest od.
A bo w zasadzie na research.
Result.
BTN.
C ustawić pełne zaokrąglenie, czyli jakąś dużą wartość.
Flat color ustawiony na nasz kolor Primary 600.
Do środka wstawić ikonkę, czyli można skopiować menu ikon.
Wstawić ją tutaj w centrowanie.
Wymiary tej ikonki to 20 na 20 pikseli.
To będzie seria ikon.
O takiej wartości, czyli Magnificat linear color białe.
Całą tą grupę chcę przesunąć na koniec.
Czyli Majkel.
I zerknijmy teraz do podglądu.
Już jest całkiem nieźle.
Musimy tylko sobie odpowiednio wyrównać te elementy w środku.
Czyli wyceny macie tutaj w pionie.
Zerknijmy teraz.
Coś nam się tutaj jeszcze poprzestawiało.
Tutaj centrowanie.
Tu w centrowanie, tu się nie centrowanie.
OK, teraz podejmę.
A wygląda to już niemal idealnie.
A więc mamy pierwszą podstawową wyszukiwarkę.
Nie będzie, to będzie.
Serge Group.
A w zasadzie.
Taka wartość Search Result Group.
I teraz tak całą tą grupę chcę sobie powielić.
Czyli Command command D Już mi się to powaliło.
Wskoczyła mi ona obok.
Mogę chwilowo ukryć tą grupę.
Czyli przejść do na w berserk ikonkę oczka, żeby ją ukryć.
Jak widzisz zajmuje ona teraz przestrzeń.
To jest to, o czym mówiłem.
A więc.
Collapse hidden zaznaczamy.
I teraz to co chcę tutaj zrobić, to
pozostawić tylko jeden tekst i pozbyć się tych pozostałych elementów.
Ja to tylko tekst i ikonka tekst o takiej wartości.
I taka ikonka.
I teraz wygląda to już zdecydowanie dużo lepiej.
Mamy obie te grupy.
Przejdźmy do podglądu.
OK. Teraz wyświetlają się one obie.
Oczywiście to nie jest
to, na czym nam zależy, a więc musimy je wyświetlać w jakiś określonych warunkach.
W tym celu wykorzystamy coś, co nazywa się Babel Custom Statement.
A Custom Solid możesz potraktować jako
taki pojemnik na dane, które są przechowywane w przeglądarce użytkownika.
Użytkownik może je pobierać i je odpowiednio edytować,
natomiast te dane znikają w momencie, kiedy użytkownik wyłączy stronę daną
stronę internetową i one są sortowane przy każdej ich załadowaniu.
Ja wiem, że to znowu brzmi trochę
skomplikowanie, ale tak naprawdę nie jest wcale trudne.
Wróćmy więc do edytora.
I dodajmy pierwszy raz tam do całego naszego ruchu zapal element.
Robimy to w tym miejscu.
Tak jak Ci mówiłem, dodajemy nowy custom state i nazywamy go Show.
Advanced.
Serge.
I tym razem wybieramy tutaj typ bulion, czyli jest ok.
Jak widzisz są to bardzo zbliżone opcje do
tych danych typów danych, które miałeś w setach.
Te same wartości wybieramy tutaj.
Jest ok i chcę tutaj ustawić domyślną wartość na noł.
I teraz tak.
Tą całą grupę, tą pierwszą.
Tak, to jest Result search results group.
Przechodzimy do Condition All.
I teraz zastanówmy się, kiedy taką grupę chcemy w ogóle wyświetlać.
Oczywiście wtedy, kiedy ten custom stats, czyli na.
E.
Show Advanced Search jest ustawiony na noł.
I wtedy this is visible. Tak.
A domyślnie chcemy go ukryć.
Czyli odznaczamy This element is visible on page load.
Zgadza się?
Przejdźmy teraz do podglądu.
Odświeżam.
OK. Tak, jest.
To samo musimy zastosować dla tej grupy, tylko oczywiście odpowiednio to odwrócić.
A więc mogę sobie przejść na drugą grupę.
Skopiować cały ten conditions, czyli klikam w to miejsce
gdzieś tu gdzie dodaliśmy ten cały warunek i wybieram kopi condition.
Teraz przechodzę do tej Advanced.
Nazywamy ją Serge Advanced Group.
To co robimy na początek to ukrywamy ją, a
ona nam się nie wyświetla, kiedy strona jest załadowana.
Wybieramy opcję collapse hidden.
I tutaj sobie klikam prawy guzik myszy pax condition i kiedy ta opcja jest ustawiona
tym razem na jest, czyli na Re Show Advanced Search is Jest.
Chcę pokazać ten element.
Czyli pokazywaliśmy kiedy ta opcja bya
ustawiona na NOW, a tam pokazywaliśmy kiedy jest ustawiana na Yes.
Teraz dopiero przejdźmy do podglądu.
Jak widzisz to się zgadza.
Ta opcja się nam tutaj wyświetla.
To co jeszcze chcę zrobić to przejść do całej tej grupy na research.
I w centrowania elementy w środku.
Żeby to obie grupy się tutaj odpowiednio wyświetlały.
A więc teraz.
Przejdźmy tutaj.
Zaznaczmy całą grupę na serwer Zlot i
dodajmy do niej nasz Condition, który będzie zmieniał ten custom.
Czyli po kliknięciu w tą grupę
będziemy zmieniać Advanced Search na nową i na odwrót.
A więc odpada workflow.
I teraz mamy na to dwa sposoby.
Możemy powiedzieć, że po kliknięciu w tą grupę tylko wtedy, kiedy na wybór.
Raz odnosimy się do tego Custom sat jest równe jest to co chcemy zrobić.
Chcemy ten custom skleić, zmienić na nowy.
Potem zbieramy tutaj akcja zaczynają wpisywać Custom stats.
A w zasadzie state of the set state of the element
jak i element to na w miarę jaki state są advanced search jaka wartość?
No.
Teraz mogę skopiować i odwrócić tę opcję,
czyli copy tutaj, tutaj paste i tym razem powiedzieć, że kiedy ta opcja jest równa.
No.
No to co chcemy zrobić?
Chcemy ten status zmienić.
Jest.
I zobacz, co się teraz stanie.
Przejdźmy do podglądu.
Stad jest ustawiony na none, a więc nie mamy tego Advanced wyświetlanego.
Klikam tutaj.
I widzisz, jest.
Teraz mi się to zmieniło i teraz jest on równy jest, aby wziąć tamtą opcję.
To, co muszę zrobić teraz, to dodać
odpowiednie workflow do tego elementu, żeby znowu odwrócić tą opcję.
Czyli jeżeli kliknę to to chcę zamienić jest na nową.
Natomiast musisz przyznać, że takie podwójne stosowanie jest dosyć męczące.
Czyli jeżeli jest to zmień na nowe, a jeżeli jest nowe to zmienna jest.
Jest na to dużo łatwiejsze rozwiązanie.
Już nie pokazuję jakie usuwam to opcje, Zostawiamy to.
Czyścimy sobie tutaj ten warunek całkowicie.
Jest on nam niepotrzebny.
I teraz przechodzimy tak zamiast wybierać tutaj stałej wartości jest lub noł.
To wybieram. Tak odnoszę się do całego.
Tutaj.
E odnoszę się do jego stanu.
I tu mówię.
I znowu w ten sposób po kliknięciu będziemy zmieniać tą wartość na przeciwną.
Wiem, że to taki dziwny zapis, natomiast
jest to bardzo prosta sztuczka, która mówi, że pobierz mi aktualny ten stan,
jeżeli on ma właśnie tą wartość jasną i zamień na przeciwną.
Czyli jeżeli to było jest to zamień na NO.
Jeżeli było NOT to zamień na jest i zobacz.
Wróćmy teraz do dizajnu i dodajmy.
Workflow tutaj.
Do tego Advanced tej grupy.
I możemy sobie skopiować dokładnie ten sam krok.
Wkleić go w to miejsce. Znów bardzo prosta.
Możesz kopiować te kroki, przenosić
pomiędzy różnymi workflow i zobacz co się teraz stanie.
Przejdźmy do podglądu.
Stan się wyzdrowiał, stać się nam
wyzdrowiał, bo znowu mamy ustawionego na nowo.
Czyli widzimy tą grupę.
Klikam tutaj pojawia mi się ta, klikam w nią, pojawia mi się tamta czyli na.
Stale się zmienia.
Jest znośna.
Jest.
Jest to bardzo prosta sztuczka, która
właśnie pozwoli Ci szybko zmieniać taki stan typu boolean.
Ja z niej bardzo często korzystam, ponieważ musisz przyznać, że taki zapis
jest dużo prostszy niż powielanie tego i sprawdzanie czy tekst jest lub nowy.
Natomiast na razie tylko.
To nam się zmienia, a my chcemy jeszcze
tutaj wyświetlać dodatkowo całą tą grupę z Advanced Search.
Czyli co chcemy wyświetlać.
Przejdźmy do strony index owej.
Chcę tutaj wyświetlać.
Cały ten element.
A więc skoro mamy się pojawić na więcej niż na jednej stronie,
to jak się domyślasz możemy zamienić na dół zabawny element.
Zanim to zrobimy, jedyne co chcę tutaj zrobić, to dodać mu border.
Jeden pixel solid i oczywiście standardowy kolor.
I to co chcę teraz oczywiście zrobić to
ubrać ten element dodatkowo grupę standardowo tak jak zawsze robię, czyli.
Lub element row container.
I teraz dopiero całą tą grupę zamienić sobie na tabelę element.
Będzie to po prostu trochę.
I dostosuj nieco ustawienia tego elementu.
Czyli tak ustawmy layout na ROW wyśrodkować te elementy.
Dodajmy tutaj szerokość na 1200 pikseli.
I tak pozbądźmy się przede wszystkim tego marginesu.
Chcę go wyzerować, a więc będzie to wyglądało w ten sposób.
I dodatkowo jak pamiętasz ten cały nowy
bar ma tutaj nadany ocet, natomiast ja go chcę wyświetlać tylko i
wyłącznie wtedy, kiedy ten element pojawia się na stronie index owej.
Myślę, że już doskonale wiesz jak to zrobić.
Przechodzimy do Condition All.
I przechodzimy tutaj.
Także nam.
Tylko tak. Page Name is
Jeśli powiemy, że page jest index, to będzie się on nam wyświetlał na stronie
index owej, a my chcemy go ukryć na innych, czyli Page name is not index.
Czyli jeżeli to nie jest strona index owa.
To cały ten box shadow.
Shadows Till.
Chcę ustawić na nowo.
Czyli widzisz, zastosowałem odwrotne podejście, bo gdybym powiedział, że page
name is index to on już jest tutaj wyświetlony.
A ja chcę powiedzieć, że jeżeli page name to nie jest index czy jakakolwiek inna
dowolna strona, która nie ma w nazwie index, to nie chcemy go wyświetlać.
To było jedyne ustawienie, którego potrzebowaliśmy.
Teraz przejdźmy sobie na stronę index ową.
I zamieńmy.
Całą tą grupę na nasz utworzony serwer.
Zostawmy go tutaj.
Tej grupy się pozbywamy.
Ten element przenosimy.
Na sam koniec make last i dodajemy mu
jeszcze margin top, który mieliśmy wcześniej równe 64 piksele.
I przejdźmy teraz do podglądu naszej strony.
Indeks owej.
Wszystko się zgadza. Mamy tutaj odpowiedni cień dodany.
Natomiast pojawił się problem, ponieważ
wyświetla nam się become host i wyświetla nam się nasza wyszukiwarka.
Zaraz to rozwiążemy.
Musimy wrócić do edytora.
Przejdź do.
Nie mamy. Mamy tutaj na wzór.
I tak to mamy odpowiednią informację,
że jeżeli to jest to na serwerze to chcemy to ukryć.
A tutaj cała ta grupa.
Zapomnieliśmy dodać dodatkowego warunku, czyli ustawmy jej collapse hidden.
Ukryjemy ją całą na dzień dobry i kiedy chcemy ją wyświetlać?
Wtedy, kiedy to jest strona Search, czyli name.
Current page Name is search.
Czy jest to strona wyszukiwania?
To tylko wtedy pokaż nam całą tą grupę z
wyszukiwarkami, czyli this element i visible jest.
Zerknijmy teraz.
Jesteśmy na stronie głównej mamy ten link become a host.
Przejdźmy teraz do strony wyszukiwania.
Czyli usuńmy sobie z URL to i wpiszmy tutaj search.
Ikona hosta zniknął.
A my mamy właśnie te nasze wyszukiwarki.
Zastosujmy jeszcze oczywiście nasz awatar.
A więc wracamy do edytora i to co chcę zrobić, to dodać kolejną grupę.
I wstawić ją.
Tu.
Czyli pod.
Nabór container.
Będzie to tylko tak na całe.
Cały nadmiar powinien być tutaj ustawiony W takim razie na.
Kolumn, żeby ta jedna grupa wyświetlała się pod drugą.
Teraz tak na wybór container musimy wycenę ować.
Względem elementu rodzica. Co tu się dzieje?
Oczywiście dobra.
I ta grupa się tu gdzieś pojawiła.
Czemu nam się to nie chce tutaj? Aha.
Oczywiście, że tak.
Koncentrujemy tym względem elementu rodzica.
Tu trujemy dzieci.
I teraz tak.
Nazwijmy tą grupę.
Advanced.
Search Group.
Chyba nie mamy takiej nazwy.
Nie. Nie mamy.
I tutaj chcę ustawić rolkowe centrowanie elementy w środku,
pozbyć się tej minimalnej szerokości i do tej grupy wstawić.
Nasz dodany.
Serge.
Muszę tylko odpowiednio wcelować.
Sprawdźmy, czy on wskoczył.
Nie.
Powinien nam wskoczyć tutaj do tej grupy.
Jeżeli chcesz ją tutaj zobaczyć, to
możemy chwilowo zmienić tę minimalną wysokość na powiedzmy 290 pikseli.
Jak widzisz, teraz wygląda to już zdecydowanie lepiej.
To co chcę zrobić dla tej grupy?
Advanced Serge Group.
To przede wszystkim tak dodać tutaj padding.
24 pixele z każdej strony.
Zarabiać minimalną wysokość.
Niech ona mi się tutaj dostosuje.
I teraz tak chcę tą grupę ukryć.
Na dzień dobry nie chcę jej wyświetlać.
Chcę jej ustawić collapse on hidden, kiedy chcemy ją pokazywać.
Oczywiście wtedy, kiedy nasz Custom State
Show Advanced Search jest ustawiony na Yes, czyli.
Na.
E.
Są advanced Search, a wartość jest wtedy this element is visible.
Tak zaznaczamy Przywróćmy tutaj.
To wysokość dla całego naszego bara.
Ustawmy ją z powrotem na 90.
I teraz zerknijmy.
Na stronę search.
Wygląda na to, że wszystko jest ok.
Wyświetla nam się tylko ta wyszukiwarka.
Klikam w nią.
Ten element mi się zmienił.
To mi się znowu tutaj pojawia.
Klikam. To i tak.
I znowu to znika.
To co możemy jeszcze zrobić, to dodać tutaj dodatkowe obramowanie pod tą grupą.
A więc wracamy.
Tutaj i to, co chcę zrobić dla grupy Advanced Target Group.
Dodać border bottom.
Na Solid, jeden pixel i nasz standardowy kolor.
Obramowania, czyli tylko border bottom.
Jeszcze raz do podglądu odświeżamy.
Teraz wygląda to już zdecydowanie lepiej.
Moglibyśmy zadbać o to, żeby ten border
nie wyświetlał się, kiedy ten się wyświetla.
Ale na razie zostawmy to w ten sposób.
Jak widzisz, dopracowaliśmy naszą wyszukiwarkę.
Zastosowaliśmy tutaj mnóstwo ciekawych conditions.
Wiesz już też, jak odczytywać
nazwę strony bieżącej, na której dany element jest umieszczony.
Znów powtarzam działa to tylko i wyłącznie dla ruchu z tabel Elements.
Jeżeli pracujesz z elementami na stronie,
takiego Condition nie znajdziesz w warunkach dostępnych.
On jest dostępny tylko i wyłącznie dla ruchu Label.
Dodatkowo wiesz już jak ukrywać te elementy, jak je pokazywać
przy określonych warunkach, jak zadbać o to, żeby znikały całkowicie?
Nie zajmowały tego miejsca tutaj na stronie.
Czyli właśnie jak działa ta opcja collapse on hidden?
Ja dziękuję Ci za uwagę i widzimy się już w następnej lekcji.