Bubble: Dodajemy sekcję Contact

0:00Witam Cię w kolejnej lekcji, w której tym razem skupimy się na budowie sekcji

0:03contact, a więc tej sekcji z opcją zapisu na nasz newsletter.

0:07Jest ona wyjątkowo prosta. Myślę, że jej

0:09budowanie nie zajmie nam zbyt wiele czasu.

0:11Zanim jednak przystąpimy do pracy, chciałbym wyjaśnić jedną bardzo ważną

0:14kwestię osobom, które korzystają z takich narzędzi jak Webflow bądź edytor X.

0:19Jeżeli przejdziemy do edytora, to mowa oczywiście o zakładce responsive.

0:23Jak doskonale wiesz, w tych narzędziach, które wcześniej

0:25wymieniłem jesteśmy w stanie przełączyć się w konkretny widok np.

0:29widok desktopowy bądź widok mobilny

0:31i tylko dla niego zdefiniować odpowiednie style.

0:34Wówczas będą one miały zastosowanie tylko i wyłącznie dla tego widoku.

0:38Niestety w Bubble na chwilę obecną taka funkcjonalność nie istnieje,

0:42a ta zakładka i te opcje tutaj przełączania się pomiędzy poszczególnymi widokami.

0:46Służą wyłącznie do tego, aby podejrzeć jak

0:48nasza strona bądź aplikacja będzie się zachowywała na różnych rozdzielczościach.

0:53Skoro tą kwestię mamy wyjaśnioną, to wróćmy jeszcze do edytora.

0:57Jak widzisz w międzyczasie poprawiłem tutaj teksty na przyciskach.

1:00Dodatkowo tutaj dla karty pricing-pro

1:03dodałem taki obrazek w tle,

1:05ponieważ nadaliśmy jej layout typu align to parent.

1:08Jesteśmy w stanie umieścić tutaj kilka elementów, które nachodzą na siebie.

1:12Wystarczy podejrzeć sobie to tutaj w drzewku elementów.

1:16Jak widzisz mam kartę pricing-pro,

1:18a wewnątrz niej obrazek oraz grupę tutaj z tymi treściami.

1:23Oczywiście ten obrazek ma charakter czysto

1:25stylistyczny, nie wpływa w żaden sposób na funkcjonalność naszej strony.

1:29Możesz więc pozostać w tej wersji po prostu z

1:31jednolitym tłem i przystąpić razem ze mną do dalszej pracy.

1:36W pierwszej kolejności oczywiście dodajemy

1:38grupę, ale zanim to zrobimy, jeszcze dla grupy pricing chcę

1:41ustalić margines dolny na 40 pixeli.

1:46Teraz dopiero dodajemy nową grupę.

1:50Nazwijmy ją grupą contact.

1:55Oczywiście w tym przypadku layout to column.

1:58Chcemy ją wycentrować, usunąć minimalną i maksymalną szerokość.

2:04Nie będą nam one tutaj potrzebne.

2:07Następnie dodajemy kolejną grupę.

2:12Nazwijmy ją może contact-inner.

2:19W tym przypadku również będziemy mieć column.

2:22Chcemy ją wycentorwać.

2:25Odznaczyć ten checkbox, usunąć minimalną szerokość.

2:32A maksymalną ustawić na 960 pixeli.

2:37Dodatkowo chcę ją jeszcze tutaj odsunąć od góry o 80 pixeli.

2:44Albo jednak o 60 będzie trochę lepiej wyglądało i 80 pixeli na dole.

2:51Teraz dla kontenera rodzica, czyli dla grupy

2:53contact usuwamy oczywiście minimalną wysokość.

2:57Wracamy do grupy contact-inner i nadajemy jej teraz jeszcze odpowiedni styl.

3:03Ja mogę wybrać ten.

3:05Co prawda mam tutaj bardzo mocno zaokrąglone rogi,

3:08natomiast nie ma najmniejszego problemu abym zmienił tą wartość tylko na 16.

3:12Jak widzisz tutaj wszystko odpowiednio nam

3:14już wskoczyło, a co musimy zrobić teraz to oczywiście dodać teksty.

3:20W tym celu mogę skopiować grupę top.

3:25I wstawić ją do grupy contact-inner.

3:28W tym przypadku margines u góry to

3:3260 pixeli, a margines na dole to 30 pixeli.

3:38Oczywiście musimy zmienić kolory tekstów.

3:43Zerknijmy, czy mamy nagłówek w wersji białej.

3:46Nie mamy.

3:47Usuwamy więc styl i tylko oczywiście zmieniamy kolor na biały.

3:54To samo robimy tutaj.

3:56Oczywiście też zmieniamy kolor na biały.

3:59Pozostaje nam jeszcze teraz tylko dodać pole input.

4:04Wybieramy je tutaj z listy

4:07I wstawiamy wewnątrz grupy.

4:11Nazwijmy je input contact.

4:16Usuwam standardowe style i nadaję własne.

4:20Będzie to oczywiście nunito sans

4:25w wersji regular.

4:27Kolor fonta to oczywiście nasz kolor dark.

4:30Rozmiar może pozostać 16. Placeholder

4:34musimy pozostawić w kolorze szarym.

4:36Niestety nie możemy go tutaj zdefiniować we własnym kolorze.

4:39Jak widzisz mamy tutaj tylko takie standardowe kolory do wyboru.

4:43Zostawiamy więc grey.

4:46Kolor tutaj ustawiamy na standardowy kolor biały.

4:53Zaokrąglenie rogów ustawiam na 8 pixeli,

4:58a kolor obramowania definiujemy na DB.

5:05Nie, przepraszam D8DBE6,

5:11czyli taki jasnoszary kolor.

5:14Dodatkowo tutaj, aby zmniejszyć lub

5:17zwiększyć przezroczystość stosujemy ten suwak.

5:20Ja ustawiam go tutaj na maksa.

5:25Horizontal padding możemy zostawić na 10 pixeli.

5:29Nie chcę dodawać cienia.

5:30Przechodzę więc tutaj do zakładki layout.

5:35Odznaczamy ten checkbox, nie chcę minimalnej szerokości i zaraz

5:40ustawimy ją w nieco inny sposób, natomiast wysokość chcę ustawić na 60 pixeli.

5:51OK.

5:53Jeśli wrócimy do naszego layout'u

5:54wzorcowego, to jak widzisz tutaj dodatkowo mamy jeszcze ikonkę.

5:59Aby więc ją dodać,

6:00to co musimy zrobić w pierwszej kolejności to oczywiście ubrać taki input w

6:06dodatkową grupe.

6:08Jak się domyślasz, ponieważ tutaj ta ikonka nachodzi na pole input, to

6:13oczywiście zastosujemy znane Ci już align to parent.

6:17Klikając prawym przyciskiem myszy

6:19wybieram opcję group elements in an align to parent container.

6:25Nazwijmy ją

6:28input-contact-wrapper, tutaj

6:37tym razem odznaczamy minimalną szerokość, maksymalną chcę ustawić na 440 pixeli.

6:44Nie chcę, żeby ta grupa oraz pole input w środku mi się poza nią rozciągało.

6:49Oznaczam fit to content.

6:52Minimalna wysokość może pozostać tutaj nawet nie musimy tego zmieniać.

6:55Oczywiście chcemy to pole sobie

6:59wycentrować i nadać pod spodem margines równy 60 pixeli.

7:04Jak widzisz, tutaj nasza sekcja newsletter'a

7:06już coraz bardziej wygląda tak, jak wyglądać powinna.

7:09Pozostaje nam oczywiście jeszcze dodać tylko ikonkę.

7:14Natomiast zanim to zrobimy, to w pierwszej

7:17kolejności będę chciał dodać grupę, która posłuży tutaj za background dla naszej ikonki.

7:26Mogę to więc zrobić w ten sposób.

7:29Jak widzisz teraz nachodzi nam ta grupa tutaj na pole input.

7:33Mamy ją tutaj odpowiednio ustawioną.

7:37Wymiary takiej grupy to 48 na 48 pixeli.

7:43Chcę ją tutaj odsunąć

7:45o 6 pixeli od tej strony, aby zachować tutaj odpowiednie odstępy nazwijmy ją

7:53Contact-icon-bg, ponieważ posłuży nam po prostu jako tło dla naszej ikonki.

8:03Usuwamy więc style, wybieramy jednolity kolor, nasz kolor

8:09primary.

8:11Tutaj ustawiam zaokrąglenie na 8 pixeli.

8:16Nie chce żadnego shadow.

8:18Wszystko jest tak jak trzeba. Layout ustawiamy tutaj znów na align to parent

8:23tylko po to, aby w środku idealnie umieścić ikonkę.

8:27Oczywiście jak się domyślasz wykorzystamy iconify.

8:32Rysujemy więc ikonę.

8:35Centrujemy.

8:37Nadajemy jej rozmiary 36 na 36 pixeli.

8:42Wracamy.

8:44Styl wybieramy na icon white, czyli biały kolor ikony.

8:49Jeszcze tylko musimy namierzyć odpowiednią ikonkę.

8:52W moim przypadku jest to

8:56ta ikona.

9:04Stawiam wartość.

9:06I to co jeszcze muszę zrobić, to dla całej grupy tutaj.

9:12Muszą sobie ją odpowiednio namierzyć

9:14contact-wrapper, ustawić marginesy z lewej i prawej strony na 20 pixeli, aby na

9:21tych mobilnych rozdzielczościach było to odpowiednio odsunięte tutaj od krawędzi.

9:29Dodatkowo tutaj dla samej tej grupy również nadaje marginesy 20 na 20 pixeli

9:38i teraz wszystko już powinno wyglądać tak jak trzeba.

9:40Podejrzyjmy sobie to jeszcze w trybie responsywnym.

9:45Tutaj jest ok.

9:46Jak widzisz wszystko jest w porządku.

9:47Jeżeli zjadę do najniższej rozdzielczości to wszystko jest tak jak być powinno.

9:55Obejrzyjmy jeszcze naszą stronę.

10:03Jak widzisz wszystko jest ok.

10:05Tu po najechaniu wyskakują nam jakieś dziwne style, ale to tylko dlatego, że nie

10:09usunąłem tych domyślnych warunków na pola input.

10:13Muszę przejść tutaj i pousuwać te warunki.

10:17W moim przypadku nie będą one potrzebne.

10:21A więc to wszystko, co musieliśmy zrobić w tej lekcji.

10:24Dziękuję Ci za uwagę i widzimy się już za moment.