Bubble: Wireframe sekcji Pricing
od Podstaw
6 godz. 34 min · Bubble · Full-stack i Programowanie
Krzysiek PiekarzAutomation Specialist / No-code DeveloperCzego się nauczysz
- Podstawy pracy z edytorem
- Wprowadzenie do workflows
- Praca z nowym silnikiem responsywnym
- Praktyczne wykorzystanie pluginów
- Statyczna strona główna
- Funkcjonalna strona logowania i rejestracji
Praca w stylu no-code
Zapomnij o ręcznym pisaniu kodu i żmudnym tworzeniu stron www lub aplikacji! Wykorzystując przejrzysty edytor Bubble będziemy w stanie rozpocząć naszą pracę od czystej kartki i wyklikać cały układ bezpośrednio w interfejsie. Dodatkowo pokażę Ci w jaki sposób można wdrożyć do projektu w pełni funkcjonalną logikę obsługi użytkowników nawet wtedy, gdy nie posiadasz żadnej wiedzy programistycznej. A to wszystko w niemal ekspresowym tempie i bez zbędnych konfiguracji, które bywają zmorą programistów.
Dlaczego warto korzystać z Bubble?
Edytor zapewnia spójny i intuicyjny interfejs, dzięki któremu stworzenie nawet skomplikowanej aplikacji staje się wyjątkowo proste. Dodatkowo wbudowana baza danych sprawia, że nie musimy korzystać z żadnych zewnętrznych rozwiązań a zarządzanie nią jest na tyle intuicyjne, że poradzi sobie z tym nawet niedoświadczony użytkownik. Kolejną zaletą jest dostęp do ogromnej biblioteki pluginów, dzięki którym będziemy mogli wzbogacić naszą aplikację o obsługę płatności, analitykę, SEO i wiele więcej.
Co można zbudować w Bubble?
Niemal wszystko, z wykorzystaniem Bubble bezproblemowo stworzymy klony takich serwisów jak: Twitter, Asana, Todoist, AirBnB, Trip Advisor lub Yelp. Edytor pozwala stworzyć w pełni funkcjonalną aplikację w ciągu nawet kilku dni! Dzięki temu nie będziemy musieli przepalać naszego budżetu na zewnętrzne software house, którym wdrożenie podobnych rozwiązań może zająć tygodnie pracy.
Czego dowiesz się z kursu?
W tym kursie skupimy się na podstawach pracy z edytorem, tak aby korzystanie z niego stało się dla Ciebie naturalne. Wykorzystamy w praktyce zakładkę Design, która jest odpowiedzialna za front-end naszej strony oraz zapoznamy się z działaniem workflows, które "tchną życie" w nasz projekt. Efektem naszej pracy będzie nowoczesny landing page oraz w pełni funkcjonalna strona logowania/rejestracji. Dodatkowo zadbamy również o to, by całość była w pełni responsywna i dobrze prezentowała się zarówno na ekranach desktopowych, jak i urządzeniach mobilnych.
Wykraczamy poza edytor
Jedną z zalet edytora Bubble jest to, że nie stanowi on hermetycznego środowiska, w którym jesteśmy skazani na korzystanie jedynie z rozwiązań zaprojektowanych przez jego twórców. To niesamowicie funkcjonalna platforma, którą w prosty sposób możemy połączyć również z zewnętrznymi usługami wykorzystując gotowe pluginy. Pokażę Ci w jaki sposób możemy zaimplementować do naszego projektu opcję logowania i rejestracji z wykorzystaniem Google, tak, aby użytkownik mógł utworzyć konto w naszym serwisie za pomocą jednego kliknięcia. A kolejnym bonusem będzie przesyłanie adresów e-mail z formularza zapisu na newsletter bezpośrednio do bazy w Airtable!
Dla kogo jest ten kurs?
Ten kurs powstał z myślą o osobach, które chcą poznać edytor Bubble i nowy kierunek rozwoju aplikacji no-code. Będzie również doskonałym punktem startowym dla tych wszystkich, którzy nie posiadają żadnej wiedzy programistycznej ale nadal chcą tworzyć w pełni funkcjonalne serwisy i strony internetowe. Poziom kursu został dopasowany zarówno do osób, które do tej pory nie korzystały z Bubble, jak i tych, którzy posiadają już przynajmniej podstawowe doświadczenie w tym zakresie. Dzięki zdobytej w nim wiedzy będziesz mógł postawić pierwszy krok na drodze, która pozwoli Ci przekuć Twój pomysł w działający startup.
Kontynuujemy naszą przygodę z budową strony indeksowej.
Jak widzisz, w międzyczasie powstawiałem
tutaj wszędzie odpowiednie obrazki z logotypami.
Dodatkowo dla grupy company nadałem zaokrąglenie narożników o wartości
równej 16 pixeli i zdefiniowałem nowy styl.
Skoro to mamy wyjaśnione, to przejdźmy do naszego projektu wzorcowego.
I teraz w tej lekcji skupimy się na
budowie sekcji pricing, ponieważ taka karta znów będzie składała
się z wielu zagnieżdżonych wewnątrz elementów.
To wykorzystam znany Ci już wireframe.
Najpierw stworzymy taki prosty szkic
takiej karty, a potem będziemy ją uzupełniać o takie wartości końcowe.
Wracamy więc do edytora i przystępujemy do pracy.
Dodajemy naszą grupę o nazwie pricing.
Layout to oczywiście column.
Grupa musi być wycentrowana
usuwamy minimalną szerokość, nie definiujemy maksymalnej.
A więc skoro główny kontener mamy gotowy to teraz skopiujmy całą grupę top.
Wklejmy ją do grupy pricinig.
Pozbyliśmy się ikonki i oczywiście musimy teraz uzupełnić te teksty właściwymi.
Kopiuje więc nagłówek.
I podmieniam treść.
To samo robię dla tekstu poniżej.
Skoro tą część mamy gotową, to dodajmy tutaj
kolejną grupę, tym razem nazwijmy ją pricing-cards.
Layout typu row, grupa ma być wycentrowana.
Usuwamy minimalną szerokość, definiujemy maksymalną na 960 pixeli
i teraz możemy tutaj przystąpić do budowania
wireframe'u dla pojedynczej karty.
Zanim jednak to zrobimy, to nadajemy tej grupie, już Ci znany styl wire.
Będzie to po prostu lepiej widoczne.
Teraz dodaję tutaj nową grupę.
Ja nazywam pricing-card-wrapper.
Nadajmy jej oczywiście styl wire.
Przejdźmy do layout'u.
W tym przypadku może to być nawet i row,
tutaj nie ma to znaczenia, bo w środku będzie tylko jedna grupa.
Tutaj nie odznaczamy tego checkbox'a, ponieważ
chcę, aby taka grupa miała stałą szerokość równą 320 pixeli.
Następnie wybieram grupa,
dodaję ją w to miejsce.
Tym razem będzie ona nosiła nazwę pricing-card.
Oczywiście zmieniamy styl na wire.
Ta z kolei będzie miała tutaj layout ustawiony na align to parent.
Chcę tutaj odznaczyć ten checkbox.
Usunąć minimalną szerokość.
Minimalna wysokość, ustawmy ją chwilowo na 250.
Zaraz to oczywiście poprawimy
I dodajmy tutaj jeszcze marginesy z lewej i z prawej strony.
To co teraz musimy zrobić, to przejść do
rodzica grupy pricing-card, czyli wybieramy oczywiście select first parent.
Tu usuwamy minimalną wysokość, kolejno przechodzimy do całej grupy
pricing-cards i tu również usuwamy minimalną wysokość.
Wracamy
do grupy pricing-card i tutaj dodajemy kolejną grupę.
Ta grupa będzie z kolei wyśrodkowana tutaj wewnątrz elementu rodzica.
Nazwijmy ją pricing-card-inner.
Nadajmy jej oczywiście stylu wire i przejdźmy do layout'u.
To z kolei wybieram column.
Odznaczamy tą opcję, minimalna wysokość przywróćmy 250.
Potem będziemy to poprawiać.
Minimalna szerokość nas nie interesuje, natomiast dodajemy tutaj marginesy.
Z każdej strony równe 30 pixeli.
I taki wstępny szkic karty mamy już gotowy.
Rozwińmy tutaj drzewko elementów, żebyś mógł zobaczyć jak to jest skonstruowane.
Mamy całą grupę pricing-cards, czyli całą tą niebieską tutaj grupę.
Wewnątrz mamy pricing-card-wrapper, czyli wrapper dla takiej pojedynczej karty,
wewnątrz niego grupę pricing-card, która będzie odpowiadała za taką
pojedynczą kartę, a wewnątrz niej grupę pricing-card-inner.
No skoro szkielet karty mamy już gotowy, to
zastanówmy się jak rozplanowana jest treść wewnątrz niej.
Wracamy więc do projektu wzorcowego.
Jak widzisz, mamy tutaj nagłówek, pod spodem tekst.
Natomiast ta część to będzie grupa, ponieważ mamy tutaj
większy tekst umieszczony obok mniejszego.
I podobnie z resztą tutaj, gdzie mamy ikonkę i następnie tekst, na końcu przycisk,
ale to nie będzie stanowiło jakiegoś większego problemu.
Wracamy więc do edytora.
Wybieramy grupę, ustawiamy ją wewnątrz grupy pricing-card-inner.
Ta będzie nosiła nazwę pricing-card, powiedzmy price.
Oczywiście typ layout'u to będzie row.
Szerokość odznaczamy, minimalną wysokość ustawmy na razie może na 50 pixeli.
Pod spodem mieliśmy tekst i znowu tekst.
A więc skopiujmy, może sobie ten tekst.
Wstawmy go tutaj.
Musimy się pozbyć marginesów.
I w tym przypadku widać to będzie,
starter nie jest wycentrowana, więc kod bb-code jest nam niepotrzebny.
Kolejno, kopiujemy sobie tutaj ten tekst.
Wstawiamy go.
Znów pozbywamy się marginesów i
podmieniamy ten tekst na właściwy.
Kolejne możemy skopiować tą grupę.
Ona będzie nam odpowiadała za wyjustowanie.
Ustawiamy make last.
Dajemy jej tutaj może jakiś margines, chwilowo od góry 10 pixeli.
Sprawdźmy ile takich podpunktów mamy tutaj
w naszej karcie 1, 2, 3, 4, 5, a więc 5 takich grup.
Żeby to było lepiej widoczne, to oczywiście nadajmy im styl wire.
Teraz będą się one odznaczały tutaj odpowiednio.
A na końcu zgodnie z projektem mieliśmy jeszcze przycisk.
Możemy go więc sobie skopiować.
Z tego miejsca i wkleić tutaj do całej grupy pricing-card-inner.
Oczywiście musi on być na samym końcu.
I teraz w zasadzie taki szkic naszej karty jest już gotowy.
Możemy więc przekazywać tutaj odpowiednie wartości, w to miejsce.
No i oczywiście tutaj zastosować odpowiednie style.
W pierwszej kolejności kopiuję sobie tekst
starter i wklejam go tutaj do grupy pricing-card-price.
Przechodzę do zakładki appearance.
Usuwam style h2 dark.
W tym przypadku będzie rozmiar fonta równy
40 pixeli, linespacing chce ustawić na 1, a treść zmienić na 0 dolarów.
Dodatkowo chcę tutaj jeszcze zaznaczyć
opcję fit width to content, ponieważ zaraz obok wstawię tutaj dodatkowy tekst.
W tym celu mogę tym razem skopiować sobie ten tekst, znów wstawić go tutaj.
Odznaczyć te style.
Rozmiar fonta zmienić na 16 pixeli i treść zamienić na month.
Coraz bardziej przypomina to nasz właściwy projekt.
Zerknijmy co tutaj jeszcze mamy.
Margines u góry jest niepotrzebny.
Natomiast chcę ten tekst przyciągnąć tutaj do dolnej krawędzi konteneru rodzica.
Jest ok.
Tutaj czy mamy jeszcze jakieś marginesy,
że ta grupa dziwnie nam się tutaj rozciąga?
Rozciąga nam się dlatego, że ustawiliśmy jej minimalną wysokość.
Możemy to oczywiście wyzerować, wyzerować minimalną szerokość.
I teraz tutaj wszystko dopasowuje się już do elementu w środku.
Dodatkowo dla tego tekstu month dodajemy tutaj
7 pixeli odstępu.
A więc ta grupa pricing-card-price jest już praktycznie skończona.
Musimy jej tylko dodać margines dolny.
W moim przypadku jest to 30 pixeli.
Przechodzimy teraz tutaj do tego tekstu.
W tym przypadku znów usuwamy styl
i zmieniamy rozmiar fonta na 32 piksele.
Resztę właściwości pozostawiamy bez zmian
i tylko margines dolny chcę ustalić na 20 pixeli.
Przechodzimy do tego tekstu.
Tu pozbywamy się marginesu górnego.
Odznaczamy ten styl, a w zasadzie tutaj mogę wykorzystać już nawet
istniejący, ponieważ będzie to w moim przypadku paragraf 200 midlle.
Usuwam ten styl i tylko dodaję tutaj
pogrubienie, czyli zmieniam tutaj grubość fonta na 700 pixeli.
Mogę sobie teraz skopiować ten tekst i wkleić go tutaj.
Do grupy, którą nazwiemy np.
pricing-card-feature.
Wstawiam go do środka.
W tym przypadku będę korzystał już z gotowego stylu paragraf 200 middle bez pogrubienia.
Tylko podmienimy sobie ten tekst.
Dodatkowo te treści przestają być już tutaj widoczne.
Tak więc może po usuwajmy ten styl wire,
żeby to lepiej wyglądało dla wszystkich tych grup.
Przywróćmy ten domyślny.
Teraz dla tej grupy,
dla tej,
i jeszcze tutaj,
dla tej.
I dodatkowo jeszcze usuńmy styl dla całej pricing-cards, czyli ustawiamy default
group.
No i teraz mamy przezroczyste tło i dużo lepiej to wygląda.
To co chcę zrobić tutaj to oczywiście podmienić tekst.
Zaczyna to coraz lepiej wyglądać.
Dajmy tutaj fit width to content, ponieważ zaraz dodamy do całej tej grupy jeszcze ikonkę.
Oczywiście wykorzystamy iconify.
W tym przypadku rozmiar ikonki to 24 na 24 pixele.
Przejdźmy do zakładki appearance.
I tutaj nadajmy odpowiedni kolor.
Będzie to 0049C6,
czyli taki ciemny kolor niebieski i namierzmy jeszcze odpowiednią ikonkę.
Nie u tylko i.
Zastosujemy tą ikonę.
To, co jeszcze musimy tutaj zrobić,
to odsunąć tekst od ikonki o 10 pixeli, przejść do całego elementu rodzica, czyli
do grupy pricing-card-feature i odznaczyć minimalną wysokość.
Margines u góry ustawiam na 20 pixeli.
Teraz mogę pozbyć się tych
pozostałych grup, ponieważ chcę sobie skopiować już taką grupę tutaj.
Muszę jeszcze zadbać o to, aby ten tekst
był wycentrowany w ramach konteneru rodzica i ustawiamy to tutaj.
I teraz taki pojedynczy feature wygląda już tak jak powinien.
Mogę go skopiować i wkleić oczywiście do elementu rodzica.
I jeszcze raz.
I teraz tylko podmienić te teksty.
I jeszcze te dwa.
No i to już mamy z głowy.
Tutaj oczywiście usuńmy ten styl wire.
Teraz przejdźmy jeszcze do przycisku.
Natomiast to, na co zwróciłem uwagę, że ten tekst jest tutaj jakoś bardzo
ściśnięty, więc chciałbym poprawić te style dla wszystkich swoich przycisków.
Klikam edit style.
I line spacing zmieniam na 1.5.
Wróćmy do podglądu.
Jak widzisz, teraz ten przycisk dużo lepiej wygląda.
Natomiast skoro poprawiliśmy przycisk
primary, to jeśli wrócimy na samą górę, to okaże się, że musimy to samo zrobić tutaj
dla przycisku outline, żeby się zgadzał rozmiarowo z tym.
It's style 1.5.
I teraz wszystko dużo lepiej wygląda.
Jak widzisz, dzięki stylom to wszystko
jest bardzo proste i bardzo szybkie w implementacji.
Przechodzę więc do tego przycisku.
Tutaj usuwam style.
I zdefiniuje je trochę inaczej.
Przede wszystkim kolor to będzie ten kolor.
Tutaj będę chciał nadać większe zaokrąglenie rogów 24 pixele.
Myślę, że będzie ok.
Kolejno zmieniam tło dla takiego przycisku.
Przesuńmy sobie to okienko właściwości i tutaj ustalmy odpowiednią wartość.
Będzie to FFEBF6.
Taki różowy
jasny kolor.
To co jeszcze chcę zrobić, to usunąć
tutaj ten cień będzie mi niepotrzebny.
Przejdź do zakładki layout.
Nadal jesteśmy na przycisku i odznaczyć opcję fit width to content,
dzięki czemu tutaj rozciągnie nam się to na całą szerokość.
Oczywiście musimy jeszcze zadbać o to, aby tekst w środku był wycentrowany.
Możemy to zrobić w ten sposób. Nie ma problemu.
Ten tekst będzie wycentrowany na wszystkich
naszych przyciskach, więc wygląda to już tak, jak powinno.
Przejdźmy do podglądu.
Jedna taka nasza karta została już tutaj odpowiednio wstawiona.
Oczywiście brakuje jej tła itd.
Ale nie ma z tym najmniejszego problemu.
Mogę teraz wrócić do całej grupy pricing-cards i tutaj z kolei wykorzystać styl
white-round16.
To co jeszcze chcę zrobić.
To dodać tutaj cieniowanie, a więc usuwam style.
Przechodzę do cieni.
Wybieram outset.
Wartości już są Ci doskonale znane
0816
tutaj kolor middle o wartości przezroczystości równej 15%.
Teraz już wygląda to dużo lepiej.
A więc skoro taka jedna karta jest już gotowa, mogę ją skopiować
I wkleić tu
i oczywiście nie tutaj, tylko skopiować i wkleić do całego rodzica.
Teraz zaczyna to wyglądać dużo lepiej.
Ale ponieważ czeka nas tutaj jeszcze sporo
pracy z poprawianiem treści i przygotowaniem osobnego wyglądu dla tej
trzeciej karty, to zrobimy to w kolejnej lekcji.