Bubble: Uzupełniamy treści

0:00Nadal kontynuujemy naszą pracę z sekcją features.

0:03Natomiast naszym zadaniem w tej lekcji będzie przekształcenie przygotowanego

0:06wcześniej prostego wireframe'u w rzeczywisty layout, a więc przystąpmy do działania

0:13zaznaczmy sobie grupe features i usuńmy jej styl wire, przywracając ten domyślny style dla grupy.

0:20To samo musimy potem zrobić dla grupy feature.

0:24Tutaj znów przywracamy

0:27default group.

0:29Kolejno przechodzimy do sekcji feature image dla tej grupy feature image.

0:34Tutaj również usuwamy ten styl wire, przywracając ten domyślne.

0:40Następnie możemy pozbyć się tej grupy,

0:42ponieważ wstawimy tutaj teraz rzeczywisty obrazek.

0:46Usuwam.

0:48Wybieram image.

0:49Dodaję go tutaj do środka.

0:52Mogę go sobie nazwać

1:01feature image-image.

1:05Załadujmy właściwy obrazek, w moim przypadku

1:12jest to taka grafika.

1:15Następnie przechodzimy do zakładki layout.

1:17W pierwszej kolejności chcemy

1:19wyśrodkować taki obrazek, następnie dodać tutaj marginesy z każdej strony.

1:28Kolejno chcę tutaj odznaczyć fixed-width.

1:32Minimalnej szerokości nawet nie muszę

1:34podawać, ponieważ będzie ona definiowana przez cały tutaj kontener rodzica.

1:39Mogę więc odznaczyć tą wartość.

1:40Natomiast nie chcę,

1:42aby mój obrazek rozciągał się poza szerokość równą 540 pixeli.

1:47Jeszcze tylko zaznaczam keep aspect ratio,

1:52dzięki czemu uzyskuję dokładnie taki efekt, na jakim mi zależało.

1:57Sekcję z obrazkiem mamy już gotową.

1:59Przejdźmy więc tutaj do grupy features content.

2:03Oczywiście jak się domyślasz,

2:05pierwszej kolejności pozbywamy się tutaj naszego stylu wire.

2:11Następnie przechodzimy tutaj do naszego głównego nagłówka.

2:14Usuwamy styl body copy i ustalamy tutaj własne wartości, w moim przypadku

2:21jest to nunito sanas

2:24700.

2:26Rozmiar fonta 44 pixele.

2:30Line spacing ustawiam na 1.2.

2:35A kolor tekstu będzie dokładnie taki sam

2:38jak tutaj, więc mogę go skopiować, wrócić do naszego nagłówka,

2:44wkleić tą wartość i pozostaje nam jeszcze uzupełnienie tej treści.

2:51Kopiuję tekst,

2:53wracam

2:55i oczywiście wstawiam go w te miejsce.

2:59Nagłówek mamy gotowy, możemy więc przejść tutaj do grupy features content-inner.

3:06Oczywiście odznaczamy

3:10styl wire zamieniając go na default group.

3:12I teraz przejdźmy tutaj do grupy feature icon.

3:18Jak widzisz jest ona tutaj okrągła, a dodatkowo w środku zawiera ikonkę.

3:24Aby więc to osiągnąć, ustalamy nowe style.

3:29W tym przypadku kolor będzie dokładnie taki sam jak tutaj cały ten kolor sekcji.

3:34A więc znów mogę go sobie zaznaczyć.

3:37I skopiować, wklejając go tutaj.

3:41Oczywiście wartość musimy ustawić na 100.

3:44A tutaj zaokrąglenie też na 100, aby osiągnąć okrąg.

3:52Nadajmy mu tutaj layout na align to parent

3:56i wstawmy ikonkę oczywiście, znów wykorzystując plugin iconify.

4:03Wrzucam ją tutaj,

4:05wyśrodkowuje, ustalam rozmiar 36 na 36 pixeli.

4:11Kolor będzie dokładnie taki sam jak tu.

4:13Nie przejmuj się, że pojawiają się tu takie dziwne treści.

4:16Czasami się coś zadzieje, jeżeli korzysta

4:18się z pluginu iconify, natomiast wyświetlają się one tylko tutaj po stronie

4:22edytora, a na stronie podglądu wszystko jest ok.

4:26A więc pozostaje nam skopiowania wartości koloru.

4:31Nadajemy tutaj i teraz

4:34musimy tylko namierzyć odpowiednią ikonkę.

4:37W moim przypadku będzie to ta ikonka.

4:46Mogę oczywiście skopiować jej nazwę.

4:49Wrócić na naszego edytora i ją tutaj wkleić w ten sposób.

4:55Tą część mamy tutaj już gotową.

4:56Dodatkowo chcę, żeby ta ikonka była tutaj

4:58wyśrodkowana wewnątrz całej grupy, więc jakby feature icon w zakładce layout

5:06ustalam oczywiście tę opcję.

5:08Teraz musimy zadbać o to, aby

5:11ta grupa cała features text też nie posiadała tutaj tego stylu

5:14wire.

5:17Odznaczamy go,

5:18przesuńmy sobie to okienko właściwości, żeby to było lepiej widać.

5:21I przejdźmy teraz do ustawień tych tekstów w środku, dla tego tego tekstu

5:27usuwamy style.

5:29Wykorzystujemy znane Ci już nunito sans tym razem 600,

5:39rozmiar fonta to 16 pixeli.

5:41Kolor będzie dokładnie taki sam jak tutaj,

5:43ten kolor dużego nagłówka, a więc kopiujemy tą wartość.

5:50Wstawiamy line spacing tutaj chcę ustawić na 1.5.

5:58Skopiować sobie tutaj wartość tego nagłówka i ją wkleić.

6:06Dodatkowo muszę oczywiście zadbać o odpowiednie ustawienia

6:09w sekcji layout, czyli odznaczamy fixed-width.

6:14Usuwamy minimalną szerokość i oczywiście usuwamy minimalną wysokość.

6:20Teraz to wszystko wygląda dokładnie tak, jak trzeba.

6:23Zajmijmy się więc tym tekstem poniżej.

6:27Tutaj też od razu możemy sobie odznaczyć

6:29fixed-width, odznaczyć minimalną szerokość, minimalną wysokość

6:35i teraz przejść do zakładki appearance i ustalić tutaj odpowiednie style.

6:40Tutaj wykorzystamy oczywiście nunito sans,

6:45tym razem regular, rozmiar fonta 14 pixeli.

6:50Line spacing możemy wybrać 1.5, a kolor tekstu to dokładnie taki

6:56sam jak tutaj, a więc go zaznaczamy, kopiujemy

7:03i wklejamy.

7:06Skopiujmy jeszcze tylko sam tekst.

7:13I wklejamy go w to miejsce.

7:16Jak widzisz teraz

7:17sama grupa z tekstem jest mniejsza niż tutaj ta grupa z ikonką.

7:21A więc tym razem musimy właśnie zaznaczyć całą tą grupę, czyli wybierzmy tutaj.

7:30Select first parent i oczywiście dla całej grupy

7:34feature text ustawmy wyśrodkowanie.

7:39Teraz taka pojedyncza grupa feature

7:41content-inner wygląda dokładnie tak, jak wyglądać powinna.

7:46Mogę więc usunąć te grupy.

7:51I skopiować sobie teraz tą.

7:56Oczywiście nie wstawiamy ją do środka tylko zaznaczamy, kopiujemy control C i

8:01wstawiamy control V tutaj do całego elementu rodzica.

8:04Następnie musimy zadbać jeszcze o

8:07odpowiednie odstępy.

8:09Przejdźmy więc do nagłówka.

8:13Tu jak widzisz też mamy zaznaczoną minimalną szerokość.

8:16Odznaczamy, odznaczamy minimalną wysokość i ustawiamy margines pod spodem, na

8:2250 pixeli i jest dokładnie takie jaki być powinien.

8:26Natomiast dla samej grupy tym razem marginesy

8:29chcę ustawić na dole na 40 pixeli dla tej grupy i 40 pixeli dla tej.

8:38To co nam jeszcze pozostaje tutaj, do zrobienia to dla całej tej grupy feature

8:43content ustawić wyśrodkowanie, aby zgadzała się tutaj z tym obrazkiem.

8:48Podejrzyjmy sobie, jak to wygląda.

8:56Przechodzimy niżej.

8:57Jak widzisz.

8:59Tutaj ta nasza sekcja już wygląda tak jak powinna.

9:02Musimy jeszcze odpowiednio

9:04tutaj dostosować te ikonki i treści w nagłówkach.

9:07A więc wystarczy, że skopiujemy sobie te

9:09wartości i powstawiamy w odpowiednie miejsce.

9:23Pozostaje nam jeszcze

9:26ten nagłówek

9:31i ta treść.

9:38I oczywiście jeszcze dostosowanie tutaj tych ikonek.

9:41Musimy namierzyć właściwe.

9:42W moim przypadku druga ikonka to będzie

9:48buildings, czyli właśnie ta ikonka.

9:52Mogę sobie skopiować wartość.

9:56I odpowiednio ją tutaj wkleić.

9:59A trzecia

10:05to ikonka czatu.

10:13Wklejam w odpowiednie miejsce.

10:16I teraz jeżeli przejdziemy do podglądu.

10:23To uzyskaliśmy dokładnie taki efekt końcowy, na jakim nam zależało.

10:27Jedyna rzecz, która nam teraz pozostała, to skopiowanie całej tej sekcji.

10:32Wróćmy więc do edytora i skopiujmy tą naszą główną sekcję, czyli group feature.

10:38Zaznaczamy ją, kopiujemy i wklejamy to, co musimy zrobić w pierwszej kolejności to

10:45poprawić tutaj jej nazwę usuwając ten tekst copy.

10:50Dodatkowo usuwamy jej również górny margines.

10:54Nie będzie on tutaj potrzebny.

10:58Następnie musimy zadbać o odpowiednią

10:59kolejność elementów w takiej sekcji, w naszym przypadku

11:02tutaj grupa feature image będzie po prawej stronie, a więc wybieramy tylko make last

11:09i oczywiście wgrywamy tutaj odpowiedni obrazek.

11:14Muszę się szybko przełączyć między zakładkami i wczytać

11:18poprawny.

11:23Obrazek został wczytany, więc pozostaje

11:26nam tutaj jeszcze pouzupełniać odpowiednie wartości dla tych tekstów.

11:31A więc zaznaczmy tą wartość,

11:38wklejmy ją tutaj i to samo zróbmy dla nagłówków i tych tekstów pod spodem.

12:00Kolejny nagłówek.

12:07I oczywiście kolejny tekst.

12:17I jeszcze ostatni nagłówek.

12:25I ostatni tekst.

12:31Więc jedyną rzeczą, która nam teraz

12:32została to oczywiście podmiana tutaj ikonek na właściwe.

12:36Wróćmy więc do strony z ikonami i namierzmy te, które są nam potrzebne.

12:47W moim przypadku to będzie pierwsza ikonka.

12:58Teraz ikonka kalendarza.

13:10I na koniec potrzebujemy jeszcze ikonki z wykresem.

13:25I to wszystko. Jeżeli teraz przejdziemy do podglądu,

13:31to cała

13:32nasza sekcja features wygląda dokładnie tak, jak wyglądać powinna.

13:35Wszystko zgadza się tutaj z naszym designem.

13:38Chociaż zerknijmy jeszcze tutaj na te odstępy.

13:40Czy są właściwe pomiędzy tymi sekcjami?

13:44Ta duża sekcja pierwsza posiada margines 80 pixeli w górę, 80 od dołu.

13:51Ta takiego marginesu już tu u góry nie posiada,

13:53wszystko jest ok,

13:55posiada tylko margines na dole, czyli dokładnie tak jak mamy w naszym layoucie.

13:59A więc nasza praca tutaj z sekcją features

14:01jest już zakończona, a w kolejnej lekcji porozmawiamy sobie o stylach.

14:05Tak więc widzimy się już za chwilę.