Aplikacje no-code z Bubble: Dostosowanie strony index
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?
Witam Cię w kolejnej lekcji, której tym
razem skupimy się na dostosowaniu strony index owej do naszych wymagań RWD.
Zanim jednak do tego przejdziemy,
chciałbym wrócić do zadania, które otrzymałeś w lekcji poprzedniej,
a mianowicie było to dostosowanie naszego popup u tutaj na stronie search
do oczywiście wymagań Responsive Web Design i mam nadzieję, że udało Ci się to
rozwiązać, ponieważ było to dosyć podchwytliwe zadanie.
Dlaczego?
Otóż jak pamiętasz, domyślnie nasz popup na stronie Start jest otwierany tutaj za
pomocą tego guzika należącego do sekcji tej kategorii.
Tutaj nie ma nic trudnego, więc Więc to sobie zamknijmy.
Natomiast jeżeli zjedziemy do widoku mobilnego np.
tego, to oczywiście sekcja categories nam
znika, bo ją po prostu ukryliśmy, a przynajmniej ja tak zrobiłem.
Więc jeżeli zrobiłeś to w ten sam sposób
jak ja, no to okazuje się, że teraz otworzenie tego popup u jest niemożliwe.
Natomiast to nie jest do końca prawda,
ponieważ jak pamiętasz tutaj do sekcji search, a w zasadzie do naszego bara
dodaliśmy ten przycisk, przenieśliśmy go sobie z sekcji Categories i teraz to on
powinien otwierać nasz popup po jego kliknięciu.
Jak widzisz powinien nam się tutaj pojawić znany Ci już popup.
Natomiast w jaki sposób właśnie otwierać go tutaj z poziomu uosabiał element.
Jak pamiętasz wspominałem, że element stanowią takie osobne strony,
co oznacza, że bardzo trudno jest im komunikować się między sobą.
Nasz popup domyślnie znajduje się na stronie Search, a więc tutaj z poziomu np.
Bara nie będziemy się mogli do niego odnieść.
Dlaczego? Ponieważ to nie jest ta sama strona,
jest ustawiona elementem i stanowi taki osobny byt.
Jak więc podejść do tego tematu?
Mam nadzieję, że udało Ci się wpaść na to
rozwiązanie, a jeżeli nie, to zobacz jak ja to rozwiązałem.
Przede wszystkim zamieniamy tutaj nasz. Nie.
To oczywiście tylko nasz.
Popup, który jest otwierany za pomocą tego przycisku zamieniamy na radius element.
W ten sposób wrzucam go na stronę Search i
otwieram tutaj za pomocą tego buttona, a kolejno muszę go wrzucić
do tego Rios, aby element, który powinien go otwierać w widoku mobilnym.
Pewnie przyjdzie Ci do głowy, że jest to bar.
Więc jeżeli wrócimy do edytora i przejdziemy sobie to na dobre.
Ktoś widzę pracuje tutaj w moim projekcie.
Jesteśmy teraz w RP i okazuje się, że
tutaj mamy kolejne elementy wrzucone na serwer i dopiero tutaj znajduje się ten
przycisk, który będzie otwierał nasz popup.
Co więc musimy zrobić?
Musimy przejść do startera i dopiero tutaj dorzucić nasz pop up.
Dzięki temu będziemy się mogli do niego odnieść z poziomu właśnie tego przycisku.
Tutaj Apply Filters, czyli Apply i Filters Button i w ten sposób go pokazać.
Właśnie tak to działa. Jeżeli korzystasz z reguł, zapal element.
Będziesz musiał je wykorzystywać i zagnieżdżanie między sobą.
W ten sposób będziesz mógł prosty sposób odnieść się i np.
pokazać jakiś popup albo go ukryć.
A więc skoro tą część mamy już wyjaśnioną,
wiemy w jaki sposób zagnieżdżanie tego elementu.
No to przejdźmy do strony index owej.
Najpierw w edytorze, teraz wróćmy do przeglądarki.
Ja chcę otworzyć właśnie ten tutaj z różnymi narzędziami
i zerknijmy jak nasza strona prezentuje się na różnych rozdzielczościach.
Bo jak się okaże, nie mamy tutaj tak naprawdę bardzo dużo do roboty.
Zerknijmy sobie tutaj na tą sekcję Hero.
Na razie jest ok.
Tu mamy serwer, który już sobie wcześniej
dostosowaliśmy, więc to nam się fajnie tutaj ustawia.
Widzę, że problem pojawia się tutaj z tymi tekstami.
Ten tekst powinien być zawsze wyśrodkować,
a tutaj zaczyna się pojawiać problem właśnie z tą grupą.
Wydaje mi się, że mamy tutaj po prostu za duże odstępy.
Zresztą zaraz możemy do tego wrócić i spróbować to poprawić.
A więc wracamy sobie tutaj.
Tak przede wszystkim zaznaczam to hero Container i tu, jak się domyślasz, będę
chciał dodać nasze standardowe condition, ale dotyczące puddingu.
Czyli Karen Page.
Mniejsze, równe 7, 6, 8.
I będę chciał się odnieść do left padding i right padding.
I zmienić oczywiście na 16 pikseli.
Teraz zaznaczmy sobie cały ten tekst.
Ja sobie po prostu od razu wędruję.
Dzięki temu od razu będzie dobrze wyglądał też i na mniejszych rozdzielczościach.
Teraz zdjęliśmy sobie tutaj.
Mamy tutaj jakieś bardzo duże odstępy, bardzo duże parkingi.
48 po lewej i po prawej.
A więc może.
Tutaj wklejamy sobie condition i zerknijmy, gdzie zaczynał się ten problem.
OK. Czyli poniżej 5 7.
6.
Powinniśmy już tutaj te odstępy odpowiednio zmienić.
Spróbujmy to tak więc zastosować.
I odnoszę się do tradingu lewego i prawego.
I zmieńmy je może na dwanaście pikseli.
Zerknijmy, jak to zadziała.
OK. Nadal jest problem.
Więc to co możemy zrobić, to myślę, że tutaj zmienić te czcionki.
Jeszcze zerknijmy jak to w środku jest skonstruowane.
Mamy tutaj jakiś.
Aha, mamy duże kolumny GAP, więc jego też sobie zmniejszymy.
Do na przykład 24.
Teraz chyba powinno być już całkiem w porządku.
Jest ok.
Nie musimy nawet zmieniać rozmiaru czcionki w widoku.
Tutaj dla iPhone'a już to wygląda całkiem fajnie.
Resztę mamy gotową.
Tutaj problem pojawia się właśnie z tymi
czterema figurami, które się tutaj pojawiają.
Wróćmy więc do.
Naszego edytora.
Zerknijmy czy mamy tutaj container.
Mamy i mamy chyba ten standardowy, z którego bardzo często korzystamy.
Gdzie mamy te padding? 96 na 32?
Więc to co możemy zrobić, to utworzyć sobie dla nich tutaj odpowiedni styl.
A więc biorę DTD Style.
Mamy tutaj jakiś Override standard group.
I tworzę sobie nowy styl.
Będzie to.
Tu.
Patch container.
I teraz dla tego stylu przechodzę do conditions i ustawiam odpowiednie.
Zaczynam od.
952.
I tu będę się odnosił do top padding i bottom padding.
Będzie to 64 na 64 piksele.
Teraz do 7, 6, 8.
I tutaj znów padł digi.
Tym razem będzie to 48.
Góra dół.
16. Lewa.
Prawa.
Wracamy do dizajnu.
I teraz tak jak podejść do tej sekcji?
Mamy tutaj 4 osobne grupy
i najlepszym rozwiązaniem byłaby zamiana tego po prostu w Riding Group.
Natomiast wiem, że wielu z Was korzysta właśnie tutaj z podglądu mojej aplikacji,
dlatego ja nie chcę za bardzo kombinować tutaj i zamieniać tego układu.
Więc to co możemy zrobić to zerknijmy gdzie zaczyna się problem.
Tutaj mamy widok tabletu. OK.
Ja bym tutaj już dla tableta owego
zmienił to na dwie kolumny odśwież my tu jest 7, 6, 8 i już jest
problem, że to jest bardzo mocno ściśnięte.
I dodatkowo jeszcze musimy sobie wyrównać.
W zasadzie nawet te nagłówki.
A więc zacznijmy od tego.
Mamy tutaj central wania.
OK, wszystkie musimy w centrali dać.
Kolejno dodajemy tutaj.
Kolejny warunek odnoszę się do 7 6, 8.
Tym razem chcę to zrobić w ten sposób.
Spróbujmy tutaj ustawić min width.
Na 50%.
I skopiować ten warunek na tych pozostałych grup.
Dodatkowo całego kontenera mamy chyba nadany column gap.
Tak więc możemy dodać kolejny warunek, też odnoszący się do 7 6 8.
I tym razem odnieść się tylko tutaj do
kolumn GAP i zmniejszyć go do powiedzmy 24 pikseli.
Zerknijmy, jak to się będzie teraz prezentowało.
OK, mamy tutaj 50%, ale nie wyskakuje nam to niestety.
Właśnie tak, jak chciałem.
I spróbujmy.
Zobaczyć co jeszcze mamy.
A ok, mamy tutaj poustawiane jakieś max viv dla tych grup.
Więc może właśnie tutaj też się pewnie musimy odnieść.
Czyli Max Vive.
Spróbujmy ustawić w ten sposób na Infiniti.
I teraz.
Wklejać.
Ten warunek.
To nie do końca taki efekt jaki chciałem osiągnąć, ale powiedzmy, że jest miarę ok.
Najwyżej po prostu już od tego widoku
tableta będziemy wyświetlać po jednej kolumnie.
Nie chcę tutaj marnować czasu i tego po prostu dostosowywać.
Jedyne co chcę zrobić to dodać tutaj.
RAW Gap domyślnie ustawiony na 24 piksele i teraz już ta sekcja będzie gotowa.
Wejdźmy tutaj.
Powiedzmy, że jest w miarę ok.
Moglibyśmy nadać tutaj jeszcze maksymalną szerokość dla tych tekstów.
Może właśnie tak zróbmy po prostu tutaj.
Dajmy maksymalną szerokość.
Spróbujmy.
240 pikseli, tak jak mieliśmy ustawiono całą tą grupę.
Odświeżamy.
OK, jest już dużo lepiej.
Wiadomo, że lepiej byłoby to ustawić na
dwie kolumny, ale pozostawiam to zadanie w Twoich rękach.
Ja nie chcę marnować na to czasu.
To co chcę zrobić teraz to tak.
Tutaj.
Mamy zastosowany Page container jest ok.
Przechodzę sobie tutaj do tej sekcji
Countries Container Group i tutaj mamy te same ustawienia layoutu dla
kontenera, a więc możemy zastosować dokładnie.
Ten sam styl.
Tu na szczęście mamy już repeat group, a
więc nasze zadanie będzie zdecydowanie ułatwione.
Zerknijmy jak to się tutaj prezentuje.
Na 7, 6, 8.
Te dwie grupy są ok.
A 952 to już zdecydowanie powinniśmy.
Nawet wydaje mi się, że dla 1.
200.
Zmniejszyć tutaj.
Te trzy grupy do dwóch.
A więc właśnie tak zróbmy.
Czyli odnoszę się do tej drugiej grupy countries free.
RG 992.
I dajmy tutaj.
Dwie kolumny i dwa rzędy.
Będzie to moim zdaniem dosyć średnio wyglądała, ale to nic.
Jakie ja tam zastosowałem.
Aha, 952 powinienem 1200.
Właśnie dlatego mi się to nie zmieniło.
OK, mamy teraz po dwie.
Gdzieś tam zniknęła.
OK, dobra.
Dajmy tutaj.
A jeżeli damy dwa rzędy, no to będziemy mieć taką jedną samotną komórkę.
Może na razie zostawmy to w ten sposób.
I dopiero tutaj dla rozdzielczości.
Na 7, 6, 8 jest jeszcze jest ok.
Natomiast tutaj dla tych niższych już się zaczyna robić problem, więc może właśnie.
Na tej rozdzielczości też zmniejszymy to do jednej kolumny.
Zaraz zerkniemy jaką mamy tutaj rozdzielczość i czy to będzie pasowało.
Bardzo mocno to już na siebie nachodzi.
Tu się zaczyna robić problem.
OK, spróbujmy na 7, 6, 8 dla obu tych kolumn.
Diabeł tych ryb Setting Group ustalić tutaj po prostu.
Jedna kolumna to powinny być dwa rzędy.
Tu z kolei.
Jedna kolumna, trzy rzędy.
I ok, wydaje mi się, że jest całkiem w porządku.
Przynajmniej ta sekcja.
Teraz mamy tutaj te sekcje 2 kolumnowe.
Możemy do tego podejść na dwa sposoby.
Możesz pokombinować i spróbować tak ustawić.
Właśnie te dwa elementy, żeby obrazek był na górze, a tekst na dole.
I wtedy odpowiednio poprzesuwać sobie te boxy.
Ja natomiast pójdę na łatwiznę i po prostu ukryję te obrazki z tymi
tutaj boxem i pozostawię sam tekst, bo to jest tak naprawdę najważniejsze.
A więc.
To była rozdzielczość.
Jeszcze wróćmy 1024.
7, 6, 8 to już się zaczyna robić problem.
Tak zaczęło to wychodzić.
A więc odniesiemy się do 992 i dlatego jego brak ukryjemy.
Te kolumny, a zasadzie te grupy całe, a więc.
Odnoszę się tutaj do tej grupy Four Host Image Group.
To słynny Hidden.
I ukrywamy ten element cały.
To samo robimy tutaj, na tej grupie.
Czyli Forget Image Group.
Teraz przejdźmy do widoku kabaretowego.
Tutaj powinno to zniknąć.
Wtedy trzeba będzie nas czekało tutaj dużo scrollowania, ale właśnie tak to działa.
Jest miarę ok, tu mamy bardzo duże odstępy, ale to wiem dlaczego.
Ponieważ mamy tutaj dla obu tych grup pewnie zastosowane container osobno.
Czy to było 9. 6 na 3.
2? Tak, zgadza się.
A więc możemy tu wszędzie dać group page container i dla tej grupy też.
I teraz te odstępy będą już zdecydowanie mniejsze.
OK, teraz wygląda to w porządku.
Tutaj mamy ten tekst z przyciskiem I.
Te karty, które zaraz będziemy musieli sobie odpowiednio dostosować.
Kiedy zaczyna się robić problem jesteśmy na 1024 i jeszcze jest ok.
Czyli właśnie tutaj odniósł bym się do 92
a potem myślę, że 7 6 8 albo 5 7 6 Zaraz zobaczymy.
Dodatkowo.
Tutaj też nam się zaczyna robić bardzo ciasno, więc sobie to zastosujmy.
Wracamy więc.
Tutaj i mamy tu mamy tą grupę gdzie mamy teksty.
I przycisk Chcę tu dodać przede wszystkim rock up ustawiony na powiedzmy 24 piksele.
I tak do 7, 6, 8.
Chcą maksymalnie rozciągnąć tą grupę.
Czyli jak się domyślasz Hindusi.
Ustawić na 100%.
Kolejno zaznaczyć teorię Petit Groupe.
To jest listing z.
RG.
Coś tam się tutaj pojawia, ale to nic.
Zdarza się.
952.
Będę chciał tu ustalić tak dwie kolumnę.
I może cztery rzędy.
Madness 7:6 8.
Albo 5 7 6. Spróbujmy.
5 7 6.
Dać jedną kolumnę.
Zostawmy cztery rzędy, żeby ta sekcja nie była zbyt długa w skalowaniu.
Odśwież sobie to.
I tak tu mamy widoki.
Mobilna.
Zjeżdżamy niżej.
OK, mamy jedną kartę, tu mamy dwie i one jeszcze całkiem nieźle wyglądają.
A więc tą sekcję też już mamy tutaj z głowy.
Oczywiście musimy jeszcze zadbać.
A ten cały listing container tutaj też jest 9.
6 na 3. 2.
A więc wybieram grupę Container.
Jedziemy niżej mamy sekcję testy Monia,
ale też zmieniam to na Group Page Container.
I to samo robię tutaj na newsletter Container.
Jest jakiś mini hit, którego możemy się pozbyć.
Czemu tutaj to wyskoczyło?
Bo dodałem. Padding.
Niepotrzebnie.
One powinny zostać dodane tylko i wyłącznie do Newsletter Container.
A więc.
Odświeżamy.
Idźmy coraz niżej.
Tu jest ok.
Jak widzisz sekcja testy moje dali całkiem fajnie, sama się dostosowała.
Podobnie z resztą tutaj sekcja newslettera.
Tu moglibyśmy zadbać o wyświetlanie np.
tych tekstów w jednej linijce, ale powiedzmy, że
to jest jakaś taka rozdzielczość, która ma mniejsze znaczenie.
Tu musimy tylko zadbać o container.
Tu w zasadzie nawet jak widzisz, nic nie
musimy zmniejszać ani zwiększać, bo mamy równą listę, która nawet na tym
widoku najmniejszym od razu pozwala przesuwać te karty.
A więc wracamy i oczywiście tylko zmieniamy kontenery.
A w zasadzie właśnie styl.
Nagrobek Page Container.
To samo tutaj.
O futra zadbaliśmy już wcześniej,
a więc tak naprawdę wydaje mi się, że wszystko już jest tutaj gotowe.
Możemy jeszcze raz ostatni raz sprawdzić, czy wszystko się tutaj dobrze prezentuje.
Mamy kartę sekcję Destination.
Mamy tu informacje dla hosta i dla gościa.
Mamy tutaj listing bazujący na lokalizacji Testy, ale newsletter.
Sekcja video.
Nasza sekcja z blogiem.
I nasz futer.
Wydaje mi się, że na każdym widoku jest ok.
A więc jak widzisz, jeżeli dobrze zaplanujesz tutaj całą stronę, to potem
dostosowanie jej nie zajmuje zbyt wiele czasu.
Nam to zajęło tak naprawdę tylko około 20 minut.
To co nam pozostało jeszcze do wdrożenia
to dostosowanie pod RWD stron autentykacji.
Natomiast jest to Twoje zadanie domowe.
Jeżeli zastosujesz moje podejście, czyli
ukryjesz przy odpowiednim braku obrazek, to dostosowanie reszty zajmie Ci dosłownie
kilka sekund, a my możemy naszą pracę w tej lekcji uznać za zakończoną.
Nie widzimy się już za moment.