Aplikacje no-code z Bubble: Blog i przesuwana lista

0:00Zanim przejdziemy do pracy nad kolejną sekcją.

0:02Jedna bardzo ważna poprawka.

0:04Otóż cała nasza sekcja wideo ma nałożone

0:06tło z gradientem, więc musimy to uwzględnić.

0:09Czyli to co musimy zrobić to nasz.

0:11Naszą grupę Video Container Group ubrać w kolejną grupę.

0:16Czyli Video Group.

0:17Tutaj nadać jej gradient standardowy od koloru białego.

0:22Tutaj do tej wartości kolorystycznej Gradient Direction ustawiamy na top,

0:27a layout ustawiamy na środku elementy w środku.

0:31Kiedy to zrobisz, możemy przystąpić do pracy nad sekcję bloga.

0:34Tu też już zacząłem powoli to wdrażać.

0:37Znów.

0:38Mamy jedną grupę. Ten sam gradient.

0:42Tym razem Direction ustawiamy na Bottom.

0:44A więc robimy to, co przedtem robiliśmy już wcześniej.

0:47Na listingu.

0:50Tutaj dodałem sobie standardowo container.

0:55Jak widzisz mamy standardowe wartości

0:57maksymalnej szerokości padding, a ramka ustawiłem w tym przypadku na 32 piksele.

1:03To po prostu skopiowałem grupę.

1:05Nazwałem ją Video top G

1:08i tym razem nadałem jej maksymalną szerokość 544 piksele.

1:11Podobnie jak robiliśmy to dla sekcji z Peterem, ponieważ ten tekst jest znacznie

1:15dłuższy i dlatego chcę chciałem zawęzić sobie tą grupę.

1:20A skoro już wiesz, co masz robić, to zatrzymaj na chwilę to wideo, wprowadźcie

1:24odpowiednie poprawki dla sekcji wideo i oczywiście zacznij tutaj pracować nad tą

1:28sekcją bloga przynajmniej aby osiągnąć ten sam efekt, jaki ja mam tutaj.

1:39OK.

1:39Mam nadzieję, że jesteśmy w tym samym miejscu.

1:42Mamy tutaj sekcję bloga.

1:43Wróćmy do naszego pliku wzorcowego.

1:48Jak widzisz, mamy tutaj listę, tym razem

1:50przestawną, którą możemy sobie skalować w poziomie.

1:53A skoro lista.

1:55Skoro elementy.

1:56No to jestem pewien, że domyślasz się, co

1:58trzeba będzie zrobić, zanim przystąpimy do dalszej pracy.

2:00Oczywiście tak.

2:02Czyli przechodzimy do naszej tabeli tabel

2:06i będziemy musieli utworzyć nowy Option set o nazwie OS Block.

2:11Znów możesz wykorzystać wszystkie te wartości, wykorzystać prompt.

2:14Jeżeli chcesz wygenerować inne grafiki

2:16i oczywiście dodać je tutaj do naszego edytora.

2:22Czyli OS Blog.

2:24To są typy atrybutów.

2:26Jak widzisz nie ma tutaj nic trudnego.

2:27Nie mamy żadnych list,

2:29a następnie dodaj proszę wszystkie rekordy, a ja znów dam Ci na to chwilę

2:32czasu i zaraz przystąpimy do dalszego działania.

2:42Skoro tą część mamy gotową to wracamy do sekcji Design.

2:47I możemy tutaj zaprojektować

2:49pierwszą kartę, tudzież ona jest bardzo zbliżona do tego, co mieliśmy w listingu.

2:53A przynajmniej właśnie ten obrazek tutaj tekst.

2:57Wiadomo, nie jest to dokładnie to samo, ale żeby ułatwić sobie zadanie możemy

3:01przystąpić do pracy bazując już na takim elemencie.

3:04Jak to zrobić?

3:06Wracamy do edytora i dodajmy tutaj

3:09element, który już stworzyliśmy, czyli listing kart.

3:12Wklejamy go tutaj.

3:17I to co chcę zrobić to przede wszystkim odpiąć ten element od elementu rodzica.

3:23Czyli nie potrzebujemy, żeby on korzystał z tego Listing kartę chcemy to odpiąć.

3:28Robimy to klikając tutaj prawym guzikiem

3:30myszki, a następnie wybieramy detal Priusa lub element.

3:35To wszystko.

3:37Teraz nam się to już to odpłaci tak jak powinno.

3:40Mamy tutaj odpowiedni layout.

3:43Jak widzisz mamy tutaj grupę.

3:46Listing rano i wewnątrz naszą już właściwą kartę.

3:51A więc zmieńmy tutaj tą nazwę.

3:55Na razie dajmy to po prostu blog post.

4:02I tak będzie to ten element, który zostanie zamieniony na Rufusa.

4:05Element więc tutaj nazwa może być dowolna.

4:07Zostawmy to jako blog post chwilowo.

4:09Jedyne co musimy zmienić to oczywiście type of content.

4:12Nie będzie to s listing, tylko jak się domyślasz oczywiście S Blog.

4:18Na razie nie przekazujemy żadnego data Source.

4:21Zostawiamy to puste.

4:24I przechodzimy do edycji samej karty.

4:27Znów zmieniamy to na Blog Arena Groups Blog, tym razem Data Source.

4:33I zastanówmy się co nam będzie potrzebne.

4:36Nazwa to będzie blok Post.

4:39Grób.

4:40Wszystkie ustawienia na karty pozostają takie, jakie były.

4:43Nic nie musimy tutaj więcej zmieniać.

4:46Zerknijmy na layoutu.

4:47Mamy tutaj maksymalną szerokość 350.

4:50Może to zmieńmy tutaj na 320 pikseli?

4:54Niech ta karta będzie troszkę węższa.

4:57Dobra.

4:59Papirus. Zostawiamy wszystko tak jak jest.

5:03Rozwijamy to drzewko tak jak będziemy potrzebować tej grupy.

5:06Tutaj z obrazkiem środku nam wystarczy sam obrazek, a sam mogę go sobie wyciągnąć.

5:11A tą grupę po prostu zaznaczyć i usunąć.

5:16To będzie oczywiście.

5:19Blog Post.

5:21MG.

5:23Jak się domyślasz to będzie parent groups blog.

5:26Muszę kliknąć tu na null i wybrać oczywiście Image.

5:31Zostawiamy ZUM.

5:33Zostawiamy tutaj odpowiednie zaokrąglenia.

5:37Aspect ratio trzy do dwóch.

5:39Nic więcej nie zmieniamy.

5:41Wróćmy więc do tej grupy.

5:43Listing Nr grup.

5:46To będzie jak się domyślasz blog, post i.

5:52Te wartości pozostawiamy takie jakie są, czyli padding 24 raw gap 24.

5:57Tu nic nie musimy zmieniać, oczywiście

5:59oprócz typowy content na OS block i parent group OS block.

6:05Kolor biały.

6:08Tutaj te zaokrąglenia narożników tak jak powinny być nazwijmy to drzewka elementów.

6:14I będziemy potrzebować tylko tej pierwszej

6:16grupy, a więc te pozostałe mogę chwilowo usunąć.

6:22Potrzebujemy tutaj dewelopera.

6:24Ani tej grupy info.

6:27Przechodzimy tu zmieniamy nazwę.

6:36No to zmieniamy oczywiście na OS Blog, a więc grupę OS Blog.

6:41To co chcę zrobić tak, to tutaj zaznaczyć ten tekst.

6:46Zostawiamy ten font, który tutaj był.

6:49Zmieniamy tylko kolor na kolor primary.

6:52To co chcę zrobić to kliknąć prawym guzikiem myszki Clear Expression, ponieważ

6:57będziemy tu mieć połączenie tekstu i wartości dynamicznej.

7:00Zaczniemy od tego statycznego tekstu.

7:03To będzie reading time dwukropek.

7:08Spacja, spacja, spacja, trzy spacje i min.

7:14Teraz mogę wrócić

7:16przejść tutaj o jeden odstęp, a w zasadzie dwa i zróbmy tak, żeby był odstęp.

7:22Czyli mamy dwukropek, spacja i potem znowu spacja.

7:26Tu wstawiamy sobie.

7:29Parents Groups OS Blog Reading Time.

7:34Czyli mamy odstęp po dwukropek i odstęp po tej wartości dynamicznej, a tekst min.

7:41Teraz przechodzimy do tego tekstu.

7:43Odpinamy ten styl i tym razem będzie tutaj nagłówek piątego typu.

7:55A w zasadzie chyba nawet 6.

7:57O ile się nie mylę, bo piątego chyba mamy.

8:035. Mamy tak?

8:04Czyli musimy tutaj h6 ustawić i będzie to.

8:0918 pikseli, grubość 600.

8:14Kolor neutral.

8:17800.

8:19Namespace Link ustawmy na 1 4 czyli 100 40%.

8:26I zapiszmy ten styl.

8:31Ja to H6.

8:3318 pikseli.

8:38Będzie to oczywiście display, więc tutaj

8:40nie musimy nic zmieniać jako wartość dynamiczną.

8:43Przechodzę niżej.

8:44Pozbywam się tego tekstu.

8:47Czyli dylemat zostawiam ten.

8:50Zostawiam ten styl.

8:52Tutaj nic nie zmieniamy, a jedynie tutaj wybieramy jako wartość dynamiczną.

8:56Short description.

9:01Sprawdźmy jeszcze tutaj całą tą grupę blog post.

9:06Może chwilowo wybierzmy tutaj jakiś jeden

9:08element, żeby zobaczyć czy nam się wszystko wyświetla poprawnie.

9:11Na przykład właśnie ten.

9:13Przejdźmy do podglądu.

9:14Odświeżamy.

9:20Zejdźmy niżej.

9:22OK, wygląda na to, że wszystko jest właściwie.

9:24Mamy zdjęcie Reading Time.

9:26Mamy tutaj nasz tekst, czyli po prostu tytuł tego artykułu na bloga.

9:33Krótki opis i potrzebujemy jeszcze autora.

9:37A więc wracamy.

9:40Dodajemy tutaj najpierw obrazek.

9:50To będzie autor.

9:54A w zasadzie blog post.

9:57Autor i MG.

10:04Wymiary to 40 pikseli na 40 pikseli, czyli aspect ratio 1:1.

10:11A u nas chce ustawić na bardzo duża wartość żeby to było okrągłe czyli np.

10:15na 100.

10:16I teraz jeszcze ubrać ten obrazek w grupę.

10:22Będzie to grupa typu ROW, czyli Group Element Row Container.

10:28To będzie.

10:30Blog.

10:33Autor.

10:37Jak widzisz, Babel jest na tyle sprytny, że od razu uzupełni te wartości.

10:41Domyślił się, że to powinien być OS Block i Parent Group OS Block, a więc my możemy

10:45wrócić do obrazka i wskazać dynamiczną wartość, czyli Parent Group OS Block.

10:51Oczywiście. Autor Avatar.

10:55I zmieniamy to nazwą.

10:59To, co chcę zrobić to.

11:01Teraz po prostu skopiować sobie całą tą grupę.

11:07I wstawić ją tutaj do Blog Post Author Group.

11:12I tak przede wszystkim pozbyć się tego nagłówka.

11:18I zaraz tutaj podmieniamy odpowiednio style.

11:26Ten pierwszy tekst to będzie Body SM 14 pikseli 500 kolor neutral.

11:35Chwalmy całą tę wartość, czyli po prostu za pomocą delete usuńmy to wszystko.

11:40Tym razem będzie to parent as block.

11:42Autor nam.

11:47Odstęp w środku 4 piksele jest ok.

11:55I tutaj jeszcze zmieńmy style dla tego długiego tekstu.

11:58Będzie to Body XS 12 pikseli.

12:03Wywal tą wartość i wstaw tutaj narazie ręcznie.

12:10Jesteśmy August 2, 023.

12:15To, co chcę zrobić.

12:17To tak wyśrodkować ten obrazek?

12:22A dla całej tej grupy grup Black Past autor grup nadać tutaj odcień.

12:29Powiedzmy na szesnaście pikseli.

12:32I zerknijmy teraz do podglądu.

12:39OK.

12:40Nasza karta z pojedynczym artykułem na bloga jest już gotowa.

12:46Co możemy zrobić?

12:47Oczywiście zamienić ją na ref.

12:48Zapal element.

12:50Już myślę, że wiesz jak to zrobić.

12:52Zaznaczamy ten główny element, czyli w naszym przypadku ten blok post.

12:56Klikamy Edit.

13:01I konwerter. Konwertytów.

13:05Isabel Element.

13:07To będzie.

13:09Blog Post.

13:21To, co musimy jeszcze zrobić.

13:24To tutaj.

13:26Może zmniejszymy tą szerokość dla buildera?

13:31Cała ta grupa ma 320 pikseli, dajmy tutaj 340.

13:36A właśnie dużo fajniej to wygląda.

13:38Nie mamy takiej ogromnej grupy, a to jest tak, jak pamiętasz dla Buildera w środku.

13:44To co chcemy powiedzieć jeszcze tutaj.

13:45Tak, cały ten.

13:48Isabella Element to jest oczywiście po

13:49prostu zwykła grupa ad Content, którego powinien się spodziewać.

13:53To po prostu OS Blog, czyli nasz sklep z artykułami na bloga.

13:59A więc zostawiamy to.

14:01Tak jak jest tutaj.

14:03Teraz możemy sobie wrócić.

14:05Na stronę indeksowe.

14:08I oczywiście przejść.

14:11Do sekcji z blogiem.

14:13Pozbyć się całego tego elementu.

14:16Jest on nam już niepotrzebny.

14:17Zamieniliśmy go na radiu za element i dodajmy teraz repeat ING Group.

14:26Type of content.

14:27Oczywiście blok Data source.

14:30Wszystkie elementy, czyli OS Blog.

14:35Nie potrzebujemy tutaj separatora.

14:39Chcę tak ustawić 1 row

14:42i zaraz poprawimy tutaj układ kolumnowy, a w zasadzie ilość tych kolumn.

14:47Na razie niech będzie to 1.

14:50Przychodzę tutaj, zmieniam układ na RAW lub na kolor to mamy w środku jeden

14:55element, więc to nie ma najmniejszego znaczenia jaki layout wybierzesz.

14:58Pod warunkiem oczywiście, że nie będzie to fixed albo all in to parent.

15:03Raczej z tego się nie korzysta.

15:04Zawsze zostawiamy RAW albo column.

15:07Odznaczamy to.

15:10Postawmy tutaj oczywiście.

15:12Nasz blog post.

15:18Jest ok.

15:19Musimy mu oczywiście przekazać data sources, czyli pojedynczy element z całej

15:23naszej listy Repeat group, czyli Current set as Block.

15:29I to co chcę teraz zrobić to zaznaczyć

15:31całą tą repeat ink grupę, którą to ustawiliśmy.

15:37Zmienić jej nazwę.

15:40Będzie to blog post.

15:43Energia.

15:46RIP Setting Group i przejdźmy jeszcze na chwilę do wzorca.

15:49A już mamy tutaj listę, którą możemy sklonować.

15:52W jaki sposób to zrobić? Otóż Babel.

15:55Jest to niesamowicie proste.

15:56Do tej pory

15:57wskazywaliśmy jasno i wyraźnie, ile chcemy mieć kolumn i ile rzędów.

16:01Pamiętasz?

16:01Ustawialiśmy tutaj na przykład dwie kolumny, trzy rzędy itd.

16:05Ale mogę wykonać tutaj taki krok.

16:07Mianowicie odznaczyć tą opcję.

16:10I powiedzieć, że nie chcemy mieć tutaj jasno określonej

16:14liczby kolumn, ale chcemy mieć tyle, ile Babel da radę tam wstawić.

16:18A minimalna szerokość pojedynczej komórki pojedynczej kolumny ma być równa.

16:24320 pikseli.

16:27Nic to więcej nie zmieniamy.

16:30Nie potrzebujemy chwilowo żadnych innych tutaj opcji.

16:33Za pomocą tej opcji możesz pokazać

16:35wszystkie rzeczy na raz, czyli szablon zanim się tutaj załaduje.

16:38Postaraj się pobrać wszystkie elementy i na raz wyświetlić je na liście.

16:42To jest przydatne tylko wtedy, jeżeli te listy są niewielkie.

16:45Ja rzadko zaznaczam tutaj tą opcję.

16:49Po prostu czekam aż Bubble sobie tam załaduje wszystkie elementy.

16:53I zobacz, co się teraz stanie, jeżeli przejdziemy do podglądu.

17:02Jak wejdziesz to co się stało, to Babel postanowił wydzielić całą listę.

17:07Zrobił to dokładnie w taki sposób, jaki mu

17:09zdefiniowaliśmy, a więc zadbał o to, aby ta pojedyncza

17:13komórka miała minimalną szerokość równą 320 pikseli.

17:17Cała ta nasza lista jest ograniczona elementem rodzica, czyli kontenerem,

17:21który ma maksymalnie 1200 pikseli, a więc Babel wyświetla tyle elementów, ile

17:26da radę, a resztę po prostu przycina, a my możemy je sobie tutaj skalować.

17:31I w ten sposób uzyskujemy taką bardzo fajną, pełną listę.

17:35Ten scroll jest dodawany z automatu i nie musieliśmy tutaj nic robić.

17:39Pablo sam zadbał o to, aby to całkiem fajnie wyglądało.

17:42Natomiast nadal wymaga tutaj kilka poprawek.

17:45Przede wszystkim te karty są nierówne.

17:47Wygląda to dosyć brzydko, zaraz o to zadbamy.

17:50Dodatkowo ten scroll też nie wygląda tutaj za fajnie.

17:53Natomiast największy problem z ekranami, zwłaszcza scroll barami jest taki,

17:57że możemy go dostosować głównie pod przeglądarki Chrome i Firefox.

18:01Natomiast w przypadku Safari i tak

18:03będziesz miał z reguły tutaj wartości default owe.

18:05Ale my wychodzimy z założenia, że po

18:07prostu wszyscy korzystają z Chroma i postaramy się to delikatnie poprawić.

18:12Wróćmy więc do edytora.

18:15Teraz przejdźmy do pojedynczego tego Isabel Element, czyli blog post Era.

18:21Aby go edytować,

18:22mogę to zrobić w ten sposób przejść tu i oczywiście wybrać właściwy element

18:27albo zaznaczyć go tutaj na liście, przejść do Appearance i wybrać Edit Element.

18:33To, co chcę zrobić, to przede wszystkim.

18:36Tutaj kliknąć na ten nagłówek i nadać mu maksymalną wysokość.

18:42W tym przypadku 56 pikseli.

18:44Zobacz co się stanie jak to zadziała.

18:48Odświeżam.

18:53Jak widzisz, teraz wyświetlane są tylko dwie pierwsze linijki.

18:56Natomiast jeżeli ten tekst jest za długi,

18:58to Pablo automatycznie go przycina i wstawia tutaj trzy kropki.

19:01Jest to mega fajne rozwiązanie.

19:03Nie musieliśmy nic więcej robić niż po prostu ustalić maksymalną wysokość.

19:07Zadbajmy jeszcze o ten tekst.

19:09Chciałbym, żeby zawsze wyświetlały się te trzy linijki, nawet jeżeli są dwie.

19:13A więc tym razem musimy ustalić minimalną

19:15wysokość i ustawmy ją w tym przypadku na 64 piksele.

19:20Ja już sobie odpowiednio dobrałem te wartości, dlatego wiem, jak je poustawiać.

19:25Możesz je po prostu powielić, aby uzyskać odpowiedni efekt.

19:29Teraz przejdźmy odświeżony.

19:33I już widzisz te wszystkie karty są równe i mamy całkiem fajny układ.

19:37To co chcę jeszcze zrobić to dostosować ten scroll bar.

19:41W tym przypadku musimy zainstalować odpowiedni plugin.

19:44Przechodzimy więc do sekcji Plugins.

19:47Klikamy Add plugin.

19:49W naszym przypadku ten plugin nosi nazwę Scroll bara.

19:55I będzie to Scrabble Custom.

19:57On jest darmowy, a więc możemy go sobie zainstalować.

20:00Klikamy Don.

20:02To, co muszę teraz zrobić?

20:05To dodać ten Scrabble Custom bezpośrednio na naszą stronę.

20:09On nam się tutaj pojawił w tej sekcji.

20:13Tutaj mamy Scroll bar.

20:15Więc go sobie wybieram.

20:16Tylko wróćmy oczywiście na stronę index ową, bo tam musimy go dodać, bo tam mamy

20:21całą repeat grupę, do której chcemy to zastosować.

20:27Block container. O tu jest jakaś zła nazwa.

20:29Jest. To nie jest video Top Gear tylko blog.

20:34Top Gear.

20:36I teraz wybieram sobie ten scrap bar.

20:39Wrzucam go tutaj do tej grupy.

20:42I przesuwam na sam dół.

20:45I teraz muszę go tutaj odpowiednio ustawić.

20:47Zmieńmy mu nazwę na blog.

20:51Post Scroll bar.

20:54Pozbyliśmy się tego, a.

20:57I tak ustalamy tutaj odpowiednie wartości.

21:07W naszym przypadku tak.

21:09Szerokość to 5 pikseli, wysokość.

21:125 pikseli.

21:15Bar Color to nasz kolor Primary 600 background color to nasz kolor primary 25.

21:23Border radius. W tym przypadku będzie to wartość równa 4.

21:26Po prostu wpisujemy ją z palca.

21:29To co teraz musimy zrobić, to powiedzieć

21:31do jakiego elementu ten właśnie skrobia ma mieć zastosowanie.

21:35Musimy przekazać jego ID, czyli identyfikator.

21:37Jak takie ID znaleźć?

21:39Najpierw przechodzimy tutaj na grupy

21:42Block Post rg i tu powinniśmy mieć ID, natomiast go nigdzie nie mamy.

21:48Dlaczego?

21:48Ponieważ aby się pojawiło musimy przejść do ustawień.

21:53Zakładki General.

21:55Zjechać tu na sam dół.

21:56I ostatnia dostępna opcja Expo Use the option that it is tribute elements.

22:03Musimy to zaznaczyć.

22:06Jest zaznaczone Wracamy do design.

22:09Jak widzisz teraz powinien nam się tutaj pojawić id atrybut.

22:14Teraz mogę tutaj wpisać po prostu post i dokładnie taką samą nazwę.

22:19Takie samo ID musimy przekazać tutaj.

22:23I to wszystko.

22:25To są całe ustawienia, aby uzyskać taki customowe scroll bar.

22:29Przejdźmy teraz do podglądu.

22:31Odświeżamy.

22:34Jak widzisz teraz wygląda to dużo lepiej.

22:37Scrabble jest znacznie fajniejsze,

22:39bardziej dopasowane do całego contentu na naszej stronie i całego stylu.

22:43Natomiast znów powtarzam ma on

22:45zastosowanie tylko i wyłącznie w Chromie Firefoxie.

22:48Niestety nie zadziała nam to odpowiednio w Safari.

22:52A więc to by było na tyle w tej lekcji.

22:54Pozostaje nam jeszcze jedna, ostatnia lekcja z tego modułu,

22:57w której zajmiemy się Potterem i dalej będziemy kontynuować naszą pracę.

23:01Serio, Za wiele elementów.

23:03Dzięki niej widzimy się za moment.