Aplikacje no-code z Bubble: Sekcja testimonials i newsletter
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?
Rozpoczynamy naszą pracę od miejsca, w którym skończyliśmy ją w lekcji
poprzedniej, a więc mamy już tutaj gotową sekcję z listingu poprzedniej lekcji.
Przygotowaliśmy nasz pierwszy element i zastosowaliśmy go w praktyce.
Natomiast do tych elementów jeszcze
wrócimy, jeszcze będziemy je sobie dokładnie omawiać.
Na razie poruszyliśmy tylko czubek góry lodowej, ale.
Więc się nie przejmuj, jeżeli to nadal.
A więc nie przejmuj się, jeżeli nadal.
A więc nie przejmuj się, jeżeli adapter
USB Element stanowią dla Ciebie taką delikatną zagadkę.
Wszystko sobie z czasem rozwiążemy.
Wracamy więc do naszego projektu wzorcowego i tym razem do wdrożenia.
Mamy tutaj tą sekcję Testy Maniac oraz tutaj tę sekcję z Become Host,
gdzie ktoś może zarejestrować sobie swój adres i dołączyć do naszego newslettera.
To jak widzisz mamy tło, też mamy gradient
przechodząc od tego takiego ciemniejszego koloru do koloru białego.
A więc wracamy do edytora.
To co ja zrobiłem to dla grupy Page Wrapper.
Ustawiłem tutaj minimalną wysokość na 10 000 tylko po to,
aby tutaj mieć dużo więcej miejsca do pracy, gdyż mogę sobie teraz zjechać
i mam dużo więcej przestrzeni i dużo łatwiej będzie nam się tym pracowało.
A więc dodajemy pierwszą grupę.
O nazwie.
Zejdźmy tutaj niżej.
A właśnie ona ma być na samym końcu.
Nadajemy jej nazwę Steam ALS Group.
Bez literówek.
Wybieramy ROW, pozbywamy się minimalnej szerokości.
I to co chcę zrobić dla tej grupy to odciąć styl.
I tym razem.
Przejdź tutaj do grupy powyżej.
Mamy tutaj gradient top.
Zastosujmy dokładnie te same wartości.
Czyli gradient od koloru białego.
A w zasadzie wybierzmy sobie jeden primary contrast.
Żeby to się odnosiło do zmiennej kolorystycznej.
To samo zróbmy tutaj.
Ten kolor możemy skopiować, potem dodać go tutaj do naszej palety kolorów.
Na razie zostawmy to w ten sposób.
Przychodzę tu, podmieniam
i jedyne co chcę zrobić to żeby to fajnie wyglądało, zmienić kolejność.
A więc tutaj stop zamieniam na bottom.
I teraz to już się fajnie tutaj zgadza.
Dodajemy więc kolejną grupę.
Oczywiście dla Tesli Model Group pośrodku treści w środku.
To będzie test Maniac.
Container.
Grób.
W tym przypadku będziemy mieć układ typu kolumnowy.
Standardowe wartości, czyli 1200 maksymalnej.
I oczywiście standardowe padding 96, 256, 32 32.
To co możemy zrobić to dla Test Team Animals Group usunąć minimalną wysokość.
I zacząć tutaj dodawać poszczególne elementy.
Ułatwimy sobie życie i po prostu skopiuję.
Tutaj tą część, czyli cały ten Countries Top Group.
Mogę sobie kliknąć tu, żeby szybko przenieść się do właściwej grupy.
Zmienić tylko nazwę.
To będzie test manual stop group.
I oczywiście mamy tu nagłówek drugiego
typu i nasz tekst, tylko musimy podmienić wartości.
Będzie to testem o nas.
I taka wartość tekstowa.
Następnie tak dla całego tego kontenera chcę tutaj nadać.
GAP równe 64 piksele.
Następnie mogę sobie zaznaczyć ten tekst i go tutaj wkleić.
Mamy odpowiedni odstęp, coś mamy za duży.
Zaraz zobaczymy dlaczego.
A oczywiście ten margines bottom musimy wywalić dla testowania stop group.
Przychodzimy tutaj i zaraz tutaj nadamy odpowiednie style.
Czy mamy tutaj styl X. L.
Nie mamy, a więc nie mamy.
Mamy styl Excel dokładnie taki, z jakiego
chcę skorzystać, czyli Body Excel 20 pikseli 500.
I tu wkleić tylko odpowiedni tekst.
To co muszę zrobić to.
Tak jak tutaj mieliśmy ustaloną maksymalną szerokość na 960 pikseli.
To dokładnie to samo chcę zrobić dla tego tekstu.
I jeszcze oczywiście do wycen trafiać.
Następnie zerknijmy na wzorzec.
Mamy tutaj obrazek z podwójnym obramowaniem, chociaż mamy
tutaj trochę białego i dopiero potem to obramowanie.
I dodatkowo tutaj te teksty.
A więc wróćmy.
Do edytora.
Wybierzmy sobie najpierw obrazek.
Będzie on miał wymiary 48 pikseli na 48 pikseli.
Czyli aspect ratio jeden do jednego.
Centrum.
Będzie to powiedzmy.
To jest.
Nie jest to tylko test i doniosę.
Autor MG.
Apple i dajmy odpowiedni obrazek.
Kiedy je mamy.
Tutaj zerknijmy w Images. Avatar.
Avatar Festiwal Mass.
Tak, trzeba przede wszystkim zaokrąglić ten obrazek, czyli.
Nadać mu tutaj bardzo duży runners
ustawiony na 100 i dodatkowo dodać tutaj border style solid ustawione.
Na jeden piksel i na kolor.
Białe.
Teraz taki obrazek chcę.
Ubrać w grupę.
Typu all in to parent.
Nazwijmy ją.
Możemy zaznaczyć to
skopiować Przejdź tutaj do grupy czyli prawy guzik myszki SELECT jest parent.
I będzie to test kim on jest?
Autor grup.
Będę chciał w centrum dać ten obrazek w
środku, a dodatkowo nadać tutaj obramowanie rzędu dwóch pikseli.
A więc znowu.
Tutaj jest to.
Border solid dwa piksele i nasz kolor.
Primary.
A ten obrazek w środku jest wędrować
zresztą samą trawą, więc nie musicie już tutaj nic więcej poprawiać.
Mamy obrazek z takim podwójny obramowaniem.
A więc kopiujemy sobie ten tekst.
Przejdźmy go tutaj.
Olej ma odpowiednią wartość.
Ben Williams.
I tym razem będzie to Body MD 700.
Czy mamy taki styl?
Mamy, więc możemy go zastosować. Zduplikowane.
Ten tekst.
Wstawić odpowiednią wartość i tym razem będzie to Body SM 500.
I teraz tak zaznaczam te dwa teksty.
Grupuje je w kolumnie container.
Będzie to.
Testy manualne.
Autor.
To nie jest tekst.
Zastosujmy szerokość do contentu w środku
i dodajmy tutaj gap space równy cztery piksele.
A następnie chcę sobie rozwinąć
całe to drzewko, zaznaczyć grupę tą autorem i zaznaczyć tą i też je zgrupować.
I będzie to po prostu. Festiwal.
Autor.
Znów chcemy.
Dostosować szerokość do contentu.
Niech to będzie w ten sposób i nadaj my tutaj gap space równy.
Zerknął na to rzec.
12 pikseli.
Cała nasza grupa Test Team jest już gotowa.
A więc możemy przystąpić do tworzenia następnej grupy.
W naszym przypadku jest to ta właśnie grupa, tutaj z opcją zapisu na newsletter.
Natomiast tym razem chciałbym podejść do tego nieco inaczej.
Otóż tak.
Do tej pory pracujemy tylko i wyłącznie z
gotowym projektem, czyli gotową wersją z naszej strony internetowej.
Natomiast w ogóle nie przechodziliśmy do tego layoutu w firmie.
Dlaczego?
Otóż odpowiedź jest bardzo prosta ponieważ taki plik w ogóle nie istnieje.
Ja już od dawna nie tworzę layoutów
bezpośrednio w filmie, a po prostu wybieram sobie różne elementy
z różnych i unikatów i przenoszę i od razu tutaj właśnie do bubla.
Jeżeli dopiero rozpoczyna przygodę z
Babel, to jednak zdecydowanie polecam, abyś zaczął właśnie od Sigmy.
Przerobił kilka prostych tutoriali.
Da się je zrobić naprawdę w jeden prosty?
Da się je zrobić naprawdę wiele.
Jeśli dopiero rozpoczynać przygodę z
Babel, to chciałbym, abyś zdecydowanie zaczął pracować od utworzenia layoutów i
nie będzie to niestety wymagało od Ciebie większego zaangażowania, czyli po prostu
przerobienia przynajmniej jednego albo dwóch tutoriali.
Wybieraj te krótkie i proste, które mówią
tylko i wyłącznie o podstawach pracy z edytorem.
Pamiętaj, że nie będziesz od podstaw sam
tworzył całego layoutu, a jedynie składał go z różnych elementów.
Dlatego absolutne podstawy w zupełności wystarczą.
Da się je przerobić tak naprawdę w jeden weekend.
Ja natomiast pokażę Ci w jaki sposób
pracować z plikiem firmy, aby tutaj sobie przenieść np.
taką sekcję dokładnie właśnie do naszego edytora.
Jeżeli mamy już gotową,
to co chcę zrobić w pierwszej kolejności, to tak przejść do firmy.
I zanim rozpoczniemy naszą pracę tutaj z
layoutem, porozmawiajmy chwilę o tym, w jaki sposób w ogóle poradnik do firmy.
Otóż jeżeli pobierzesz go sobie.
Bezpośrednio z internetu np.
z site, to otrzymasz taką paczkę zip.
To co musisz zrobić to przede wszystkim ją wypakować.
Otrzymamy tutaj taki folder.
Nas interesuje plik fig.
On nam się będzie znajdował w tym katalogu Firma.
Dokładnie, mamy tutaj całej weekend w postaci pliku z rozszerzeniem.
Jeszcze raz. Kropka.
F i G.
A więc przechodzimy do Sigmy, czyli tutaj.
To jest nasz cały edytor i to co musisz zrobić to kliknąć import.
Wybrać, że chcesz grać plik swojego
komputera i wskazać właśnie ten plik z rozszerzeniem Figa.
To wszystko.
Po wgraniu on się tutaj pojawi.
Ja mam go już wgranego, już stworzonego, a więc możemy do niego wrócić tutaj.
Jeżeli kliknę dwa razy to będzie się otwierało poszczególnych zakładkach.
Wybieram sobie. Nasz plik.
I teraz przejdźmy do omówienia tego, co widzisz na ekranie.
Po lewej stronie mamy sekcję Pages, czyli
po prostu strony, z których składa się cały weekend.
Na chwilę obecny jestem tutaj na stronie desktop, ale mogę przejść na mobile
responsive albo na Standard and Components.
I tutaj posprawdzać różne elementy.
Poniżej mamy drzewko z warstwami, z których składa się cały taki layout.
Znów jak widzisz jest to bardzo zbliżone do tego, co mamy w Babel.
Nie ma tutaj nic trudnego, po prostu możemy to rozwinąć i po prostu przechodzić
grupa po grupie albo kliknąć gdziekolwiek tutaj i
znów przejdziemy do właściwej grupy w naszym drzewku.
Wróćmy jednak do tego Page'a Desktop.
Nas interesuje przede wszystkim tutaj ta prawa część, czyli po prostu
panel właściwości, które już znasz z Bubble.
Tutaj działa to bardzo podobnie.
Mamy odpowiednie sekcje, możemy
posprawdzać wszystko, czego potrzebujemy w pierwszej kolejności.
Jeżeli kliknę sobie tutaj na cały ten
landing page, to mam informację, że on ma szerokość 1440
pikseli, natomiast dokładnie taką, jaką ustawiliśmy w naszym edytorze na pracę ze
stronami, a więc ta wartość mamy zachowaną.
To jest wartość dotycząca wysokości.
Nas to nie interesuje, bo będziemy po prostu dawać sekcja po sekcji.
Nasza strona dostosuje się automatycznie.
To, co mnie natomiast teraz interesuje, to namierzenie tutaj tego contentu w środku.
Wygląda na to, że ten element.
Rozciąga się tutaj na całą taką szerokość contentu.
Mogę go zaznaczyć, czyli kliknąć na tą sekcję.
Aby przybliżyć widok 3 Mama.
Command albo Control i skaluje za pomocą scrolla na myszce.
Teraz sobie przybliżam. Kolejna.
Zaznaczam całą tą grupę.
Aby się kliknąć wystarczy, że kliknę gdziekolwiek.
Poza tym i teraz wciśniętym Commander wybiorę właśnie tą właściwą grupę.
Ona ma tutaj 1000 120 pikseli.
Doliczmy do tego jeszcze nasze padding po lewej prawej stronie, czyli 32 i 32 po
każdej stronie, a więc powiedzmy 1120 pikseli + 64 daje 1000 184.
Ja zaokrąglić to do tysiąca dwustu.
Zresztą ta wartość nie jest przypadkowa.
Jeszcze sobie o tym porozmawiamy, jeżeli będziemy poruszać temat responsive design.
Ale jak widzisz, tutaj mamy naprawdę
niewielką różnicę rzędu 16 pikseli, a więc możemy założyć, że nasz content, czyli ta
grupa container, której zawsze korzystamy ma maksymalnie 1200 pikseli.
Gdybyś pracował z plikiem bezpośrednio od
Twojego designera, to najczęściej będziesz musiał przenosić te wszystkie wartości
piksel do piksela, a więc jeden do jednego.
Czyli dokładnie tak, jak ustalił to właśnie Twój designer.
Natomiast ponieważ ja składam to z kilku
różnych kitów, to staram się to dostosować, powiedzmy na oko na wyczucie
i starać się stosować takie wartości, które uważam, że powinny być prawidłowe.
A więc mamy tutaj ten container równe 1200.
Zjedź więc niżej do sekcji, która nas interesuje.
A więc tej klikam znowu cały ten element, żeby sprawdzić jaki on ma kolor.
Aby to zrobić muszę sobie zaznaczyć całą tą sekcję CETA i przejść tutaj do kolorów.
A w zasadzie spróbujmy zaznaczyć właśnie
ten element, bo to jest Red Angel, który nadaje tutaj cały kolor.
W tym przypadku jest to taka wartość kolorystyczna.
Ciebie interesuje tutaj fill, czyli wypełnienie kolorem.
Ja tutaj odpiąłem wartość, która była wcześniej.
Natomiast u nas ten kolor jest już zapisany jako zmienna kolorystyczna.
Jest to po prostu kolor Primary 600.
A więc wiesz już jaki kolor nadać całej tej sekcji.
Wiesz, że trzeba w środku zastosować
kontener o maksymalnej szerokości 1200 pikseli.
I teraz możemy krok po kroku przenosić pozostałe elementy.
Najpierw sprawdźmy odstępy.
Zaznaczam sobie tą grupę.
Muszę przytrzymać alt albo option na klawiaturze.
Jak widzisz pojawiają się takie wartości pomocnicze.
U góry mam odstęp 95 pikseli, ale to jest pewnie tylko gdzieś przesunięte.
Pewnie ruszałem gdzieś myszką.
Jeżeli zaznaczę ten tekst to mam na dole 96.
A więc możemy uśrednić, że padding góra dół powinno być równe 96 pikseli
dla kontenera lewy i prawy standardowo 32 piksele.
Teraz zaznaczmy całą tą grupę z tymi tekstami.
Ona powinna mieć maksymalną szerokość 544 piksele.
I tak proszę ustaw, gdy będziesz to przenosił.
Następnie posprawdzaj wszystkie te teksty.
A więc sobie to przybliżymy.
Zaznaczam pierwszy tekst, muszę się od kliknąć.
I wybrać ten.
Tutaj jest to Helsing 4
Kolor to main, kolor primary, czyli właśnie nasz kolor Primary 600.
A styl tekstu to H4.
Tutaj z tego tekstu to będzie po prostu healing drugiego typu.
Natomiast tutaj.
Mamy takie wartości dla tekstu.
Musisz sprawdzić, czy taki styl mamy już dodany.
To jest, jak się domyślasz, rozmiar fontu.
To jest grubość medium.
Z reguły oznacza wartość 500, regular wartość 400.
A więc powinieneś mieć grubość 500.
To jest lajt hit.
150% to po prostu jeden kapeć, które zawsze stosujemy.
Ten tekst powinien być wyśrodkować
i podobnie jak ten nagłówek mieć kolor biały.
Sprawdźmy teraz odstępy.
Odstęp pomiędzy tym tekstem a tym powinien
wynosić 16 pikseli, bo takie mamy zawsze z reguły odstępy i się zgadza.
Natomiast odstęp pomiędzy tą grupą z tymi dwoma tekstami a tym tekstem to 8 pikseli.
Czyli dla tej grupy nadajesz odstęp, a
więc GAP równy 8 pikseli, a dla tej w środku 16.
Następnie mamy tutaj tą grupę.
Ona powinna być maksymalną szerokość 520 pikseli.
Wysokość nas naprawdę nie interesuje. Dlaczego?
Ponieważ jeżeli dodasz do środka na
standardowy przycisk, który ma wysokość 48 pikseli.
To samo zresztą jak tutaj.
Jego szerokość dopasujesz do treści w
środku, czyli to, co zawsze robimy i dla całej tej grupy.
Nadasz padding równe 16 pikseli z każdej strony.
To dla nas z automatu ustawi się na wartość wysokości 80 pikseli.
Dla całej tej grupy.
Dodaj w środku GAP dla kolumn równy 32 piksele.
A tutaj miejsca tego tekstu wraz z grupę zawierającą ikonkę oraz pole input.
Możesz po prostu taką grupę skopiować
sobie z sekcji Hero, bo tam już korzystaliśmy z takich grup.
To jaką ikonkę zastosować.
I podobnie z resztą wszystkie teksty,
które powinnaś tutaj umieścić, bo te pomijamy to nas nie interesują.
Te są tylko przykładowe
znajdziesz albo w naszym pliku wzorcowym, albo właśnie w linku.
Na mojego edytora swego zawsze możesz skorzystać.
Jeżeli coś jest dla Ciebie niejasne.
Tam będziesz miał jaką ikonkę wykorzystać.
I tutaj pole input.
W sekcji Hero ustawialiśmy dla tej grupy z polem input maksymalną szerokość.
Tutaj możesz to pominąć.
Ona powinna się rozciągnąć na całą dostępną tutaj przestrzeń.
Kolejno odstępy pomiędzy tą grupą a tym i tą grupą i tym tekstem, czyli dla całego
naszego kontenera powinny wynosić 32 piksele.
Zerknijmy tutaj jest 32.
Tutaj znowu są jakieś przesunięcia, którymi się nie przejmujemy.
My ustawiamy Gap Space ping równy 32 piksele dla całego naszego kontenera.
I na koniec zostaje Ci tutaj dodanie jeszcze tego tekstu.
Jak sobie kliknę tutaj na ten tekst i odepnę tutaj te style podczas dietach.
Mam wartości. Znów będziesz mógł wykorzystać nasz
standardowy styl, który pewnie gdzieś już mamy.
Lindsey zmieńmy na 150, żeby pasował do naszego projektu.
Natomiast to, co może cię zaskoczyć, to to, że tutaj część tego tekstu w środku
jest pogrubiona i podobnie zresztą będzie właśnie w naszym przykładzie.
Tam też część tekstu pogubiłem.
Zastanów się proszę, w jaki sposób, aby osiągnąć taki efekt.
Pamiętaj, że nie chodzi mi o to, aby
mieszać tutaj 3 pola tekstowe i ustawić to w rogu.
Nie, nie, nie.
To nie jest dobry pomysł.
Postaraj się znaleźć jakiś inny, a jeżeli
nie będziesz w stanie wykombinować żadnego rozwiązania, to po prostu nie przejmuj
się, bo ja wrócę do tego w lekcji kolejnej.
A więc jak widzisz, tych umiejętności,
które są potrzebne do pracy z firmą, jest tak naprawdę bardzo niewiele.
Wystarczy, żebyś potrafił się tutaj poruszać po firmie.
Ale tak jak mówię, do tego wystarczy jakiś jeden bardzo prosty tutorial
przerobiony w weekend, który da Ci przynajmniej podstawy, a potem
wiedział jak sprawdzać te elementy, skąd wyciągać wartości dla stylów, kolory
i odstępy i odpowiednio przenosić je właśnie do Babel.
A także od razu widząc taki właśnie element, jaki układ powinieneś stosować.
Ponieważ pracujemy z tymi układami już tak
długo, że będę się domyślić, że to na pewno jest kolumn.
Ponieważ mamy te elementy jeden pod drugim.
Tu na pewno będziesz musiał mieć ROW,
ponieważ mamy mamy grupę tutaj z importem oraz przycisk jak zastosować padding itd.
Nie ma tego dużo, a więc mam nadzieję, że sobie poradzisz.
Jeszcze raz przypominam korzystaj z mojego edytora jeżeli zajdzie
taka potrzeba, a najlepiej po prostu postaraj się samemu to odwzorować.
Przejrzyj jeszcze raz te ustawienia, czyli cofnij sobie ten filmik do momentu tutaj
pokazywać te wszystkie odstępy i wartości i postaraj się je odwzorować.
To jest twoje zadanie w tej lekcji, a my widzimy się za moment.