Webflow: Strony Produktu cz. 1

0:00Cześć Witaj w kolejnej lekcji w której

0:02jesteśmy we produkt tempomat i będziemy teraz pojedyncze produkty do

0:08Walii i trochę chciałbym zmienić ten szablon produktu.

0:12Zobacz że mamy kilka produktów do wyboru i

0:14w zależności od wariantów również pojawiają się tutaj różne opcje.

0:18Sam ten szablon działa już całkiem nieźle

0:20aczkolwiek oczywiście jest do dopracowania.

0:22Zgodnie z projektem Mamy więc

0:25całą tą sekcję gdzie jest produkt czyli produkt lidera.

0:28W zasadzie zostawimy natomiast chciałbym wewnątrz niej umieścić dodatkowe elementy.

0:33W zasadzie chyba grill będzie mi najprościej w pozycjonowanie.

0:36Te elementy to jeden z moich ulubionych sposobów na

0:40pozycjonowanie na proces autem daje naprawdę bardzo duże możliwości i jeśli

0:44chodzi o ustawienia sekcji to zobacz że mamy Display Flex mamy jakiś margines

0:49moglibyśmy dla samej tej sekcji ustawić nasze standardowe sparing czyli.

0:55Ten element tutaj ustawić Max suit na 1246 w zasadzie to wystarczy.

1:02Zwykle dostawaliśmy jeszcze jeden element jeden kontener w środku ale nic nie stoi

1:06na przeszkodzie żeby zrobić to właśnie w ten sposób i trochę też uprościć.

1:10Zmienię także ustawienie display na blok tak żeby nic tam nam nie mieszkało w

1:14środku jakiejś Flex boksy i przejdźmy do samych ustawień Ingrid.

1:18Teraz jeśli chodzi o GRID to zostawię domyślne ustawienia w jego edycji

1:23mamy dwie kolumny tutaj te dwie możemy usunąć spokojnie.

1:27Przepraszam te dwa kolejne rzędy

1:30i dodatkowo możemy też GAP ustawić na zero tak aby te elementy przylegają do siebie.

1:36Poza tym nie będę wprowadzał tutaj jakichś

1:37większych zmian natomiast chciałbym omówić ten produkt ten projekt i mecze w tym

1:41momencie zawiera jakiś obrazek on jest podłożona jako tło.

1:45Czyli tutaj jest meczem Gradient.

1:47Jeżeli ja go wyrzuca to założę dalej jakiś obrazek jest wyświetlany.

1:50Dlaczego tak jest.

1:51Ponieważ jest to spięte dynamicznie z polem BG i mecz z kolekcji produktów.

1:57I wtedy łatwo informuje nas że jeżeli

2:00takie coś jest to będzie wpisywać te ustawienia dla b gram.

2:05W związku z tym trzeba to wyłączyć żeby w

2:07ogóle się nie pokazywała aczkolwiek w zasadzie w ogóle nie będzie interesował

2:11ten produkt i mecz ponieważ chcemy tutaj wstawić coś innego.

2:14Co takiego chcemy wstawić.

2:16Lider Box skorzystamy z komponentu który

2:18pozwoli nam fajny sposób wyświetlać zdjęcia.

2:21Jeśli chodzi o to co znajduje się w środku na razie to jest mecz który musimy

2:26dynamicznie pobrać z produktów i wybieramy tutaj Main Events czyli główny obrazek.

2:31Natomiast obok tego chciałbym jeszcze

2:33zrobić fajną galerię zdjęć które należą też do tego produktu i

2:38zrobimy to w następujący sposób dodam tutaj kolejną kolekcję bo będę musiał

2:42oczywiście tylko wejdziemy do Green i dodamy kolekcję wewnątrz gry.

2:46Będę chciał w ramach tej kolekcji

2:48wyświetlić zdjęcia jako że znajdujemy się wewnątrz tej strony produktowej czyli

2:52produkcji tabletu ona jest na fioletowy ma wszystkie dane z produktów to teraz jeśli

2:57będę chciał to połączyć dwa razy klikać będę obok tej kategorii

3:00Produkt miał też dostęp do tych poszczególnych pól produktów.

3:05I te pola produktów z których mogę

3:06skorzystać to kategorię do których możemy aplikować ponieważ jest to pole Multi

3:11Reflex i dlatego jakby jest połączone z produktami ale jest też coś takiego jak my

3:16czyli pole Multi i mecz gdzie mamy wiele obrazków dla naszego produktu.

3:21Skąd we Lwowie aby pobrać odpowiednie obrazki.

3:23No właśnie dlatego że jest to ten

3:24fioletowy tablet który zawiera dane o tym konkretnym produkcie.

3:28W naszym przypadku adres datę możemy się

3:31przełączać pomiędzy innymi produktami i możemy tu jako Source wybrać teraz image.

3:36Jeśli wybierzemy to w

3:38Collection ie będziemy mogli umieścić obrazek z Media wybieram mecz i klikamy a

3:43następnie połączymy to z produktami i właśnie z polem MLS.

3:47W ten sposób zostały wyświetlone wszystkie zdjęcia które znajdują się

3:52są przypisane powiązane z tą kolekcją z tym konkretnym produktem.

3:56No i świetnie w tym momencie

3:59fajnie że się wyświetlają nam te zdjęcia ale z drugiej strony będziemy chcieli

4:03połączyć je jakoś dodatkowo z boksem czyli trochę się pospieszyli bo powinniśmy wejść

4:08najpierw tutaj w sekcję komponentów a następnie dodać kolejny Live Box.

4:12Jak to dwa boksy jeden i drugi właśnie w ten sposób chcemy to rozwiązać

4:16dlatego że łatwo nam było ubrać zdjęcie ale pokażę ci przy okazji jak można łączyć

4:21ligę boksy ze sobą i właśnie sprawić że będą one na naszej

4:26stronie rozumiał i teraz ten mecz mogę przenieść do ligi a ten który był

4:30poprzednio usunąć i teraz wszystkie te obrazki znalazły się w lidze Box linku.

4:35Teraz musimy jeszcze zadbać o to aby po

4:37pierwsze może te obrazki trochę zmniejszyć prawda.

4:40Max Fit możemy ustawić dla nich 88 tak

4:43było w projekcie ale po drugie chcemy teraz żeby te dwa

4:46boksy się ze sobą zaczęły komunikować jak możemy to zrobić w preferencjach dowolnego

4:51light box a mamy możliwość zaznaczenia opcji link w Adelaide boks i w ten sposób

4:56stworzymy sobie taką grupę i ta grupa będzie.

5:00Jeżeli posłużył się odpowiednią nazwą

5:02grupy będzie mogła połączyć właśnie te dwa lub więcej boksów ze sobą.

5:07Przykładowo podajemy nazwę produkt i Marquez i po prostu chodzi o to że musimy

5:12taką samą nazwę dać w tym miejscu Product Image.

5:15I w tym momencie gdy grupy Light boksów zostały już ze sobą połączone.

5:20Ostatnia rzecz którą musimy zrobić była na razie tylko te zdjęcia są połączone to

5:25połączyć też Lite boksy z właśnie tymi obrazkami z kolekcji.

5:31Czyli same boksy LIVE BOX linki również

5:34powinny być połączone czyli Get media from produkcji.

5:37I tutaj mamy Main image i w tym momencie jak już wszystko mamy

5:40podłączone to w podgląd gdzie powinniśmy mieć możliwość kliknąć na jakim elemencie

5:45ale nie tylko działa on jako light box ale też jest pod linkiem.

5:48Z tym drugim boksem a zatem zdjęcia z

5:51drugiego nawet BOX również wyświetlają się w tym pierwszym i vice versa.

5:55Jeżeli mielibyśmy na dowolne zdjęcie w tym miejscu to mamy też publikowane wszystkie

5:59dodatkowe zdjęcia czyli udało nam się stworzyć grupę.

6:01Udało nam się wyświetlić dynamicznie zdjęcia produktu super.

6:05Wszystko działa tak jak powinno.

6:07Nadajemy może jakąś klasę np.

6:09produkt image light box 1 możemy zrobić a w tym miejscu ZROBIMY DWA.

6:14Chyba nigdy nie byłem dobry w nazwach ale

6:16ok może tak możemy spróbować tak to zrobić czyli Product Image light box 1.

6:20Damy mu jeszcze jakiś dodatkowy margines z

6:24prawej strony tak żeby oddzielić od siebie w Jałcie było to 16 pikseli.

6:28Te zdjęcia są już od siebie oddzielone.

6:31Jeżeli chcielibyśmy jakiś większy margines

6:33na tym light box 2 możemy oczywiście go tutaj zrobić.

6:36Możemy jeszcze same obrazki i na przykład nadać im jakąś konkretną klasę czyli np.

6:42produkty light box 2 i mecz.

6:46I do nich też dodatkowo dostosować dodać

6:49jakieś opcje Przykładowo możemy tutaj Border radiu zrobić na 4.

6:53Natomiast w przypadku tego obrazku tutaj obrazka tutaj może dla niego też nadajemy

6:58klasę odpowiednią a następnie zmienimy zaokrągleniu krawędzi na 8.

7:03Wygląda to naprawdę fajnie elegancko

7:05i jeszcze teraz musimy zatroszczyć się o wyświetlanie poprawne naszego Greena no bo

7:11teraz mamy trzy elementy a powinniśmy mieć dwa czyli wewnątrz.

7:14Proponuję żebyśmy jeszcze dodali jeden

7:16kontener techniczny który nazwiemy produkt i mecz raper np.

7:22i do niego właśnie dodamy zarówno ten

7:26light box pierwszy i to do niego wrócimy light box pierwszy jak i cała kolekcja.

7:32Raper no i właśnie teraz jeszcze musimy zadbać o to żeby produkt i mecze raper

7:37dobrze nam zmieścił między sobą te elementy.

7:40I tu chyba najprościej będzie zmienić dla

7:42niego ustawienie display na Flex i to załatwia sprawę.

7:46Powinna też całkiem nieźle być na różnych

7:47rozdzielczości ale o to jeszcze zaraz się zatroszczyć.

7:50No i w końcu produkt bity rap on też już

7:53był wcześniej zrobiony z resetu może margines margines od dołu.

7:58Rzeczywiście ten margines fajnie było tutaj dać ale może zamiast tego zostawimy

8:02dla niego spójny parking z każdej strony w aucie był ustawiony na 40 8 pikseli z

8:08resetu i ma szerokość 50 x resetu i ma max 470.

8:12I teraz już wygląda to całkiem nieźle więc mamy dane produktu mamy informacje o

8:16cenach chcemy to akurat właśnie w ten sposób zestawić.

8:19Natomiast tutaj gdzie znajduje się paragraf czyli opis naszego produktu

8:23chcielibyśmy wstawić dwie zakładki czyli chcemy tutaj mieć

8:27tak naprawdę tabele które będą zawierały zarówno opis jak i dostawę.

8:32W związku z tym wrzucamy dodatkowe elementy będzie to znowu

8:36element z komponentów tym razem Tab i mamy menu oraz kontent.

8:42Jeśli będziemy usuwali linki link np.

8:45trzeci to analogicznie zostanie usunięty kontent.

8:48No i nam potrzebne są dwa aby w jednym z

8:50tych klubów będziemy chcieli umieścić w Konwencie.

8:53Wróćmy do środka.

8:54Ten paragraf który zawiera dane możemy przełączyć się teraz w Things na pierwszy.

9:01Zawiera on dane opisu produktu jeszcze

9:04upewnij się że rzeczywiście mamy Get text from Products i pobieramy jego skrypt.

9:09Natomiast w drugim skupimy to i wklej.

9:12Następnie Przejdźmy do drugiego.

9:14Upewnij się że to drugie jest zaznaczone OK.

9:17I w to miejsce będziemy chcieli wprowadzić informację o dostawie.

9:19Natomiast informacja o dostawie nie mamy danych produktu.

9:22Te informacje są tak naprawdę statyczne czyli moglibyśmy oczywiście dołożyć

9:26dodatkowe pole które mogłoby opisywać specyficzne warunki dostawy.

9:31Jeżeli nasze produkty w sklepie np.

9:33różniły by się rozmaitymi opcjami które wpływają na te

9:36dostawy ale w naszym przypadku jest to dokładnie to samo.

9:38W związku z tym potrzebne nam są tutaj

9:40tylko statyczne dane więc możemy być tutaj na razie jakiejś place Holder typu

9:44standard Delaware uzupełnić sobie ten opis trochę później

9:48teraz zajmijmy się przed sterowaniem sztabów i w zasadzie to można przypuszczać

9:53że to jest prosta sprawa a tak naprawdę trzeba do tego podejść metodycznie dlatego

9:57że mamy po pierwsze możliwość przyłączenia się.

10:00Etap drugi i w ramach tych etapów znajdują się tabliczki z oznaczeniem B1 i B2.

10:07To spowoduje że jeżeli my zaczniemy zmieniać jakiekolwiek właściwości to

10:11zostanie utworzona specyficzna klasa dla tego konkretnego pierwszego bo ja to

10:15cofnęła i żeby tego uniknąć po prostu proponuję zrobić sobie własną klasę link i

10:22zaraz ją dorzucić też do tego drugiego linku więc będziemy mieli linki on teraz

10:26jest w tym stanie nie aktywnym ponieważ jesteśmy przemęczeni na Tab 2.

10:30Gdybyśmy przyłączyli się nawet jeden on byłby w tym stanie.

10:33To jest błąd że tego nie pokazuje.

10:35Gdy wrócimy do niego będzie w stanie Karen

10:37czyli w tym stanie aktywnym no to może rzeczywiście Zróbmy najpierw stan aktywny

10:41zrobimy go na tej zasadzie że reprezentujemy kolor kolor zrobimy na nasz

10:46Blue teraz kolor wypełnienia jeszcze sobie usuną w stanie aktywnym będziemy mieli dwa

10:51piksele owe podkreślenie koloru takiego właśnie naszego granatu owego.

10:56I to jest ten stan aktywny to teraz musimy przejść do tego stanu aktywnego więc można

11:01ewentualnie przełączyć się na Tab 2 i znowu wrócić do naszego linku.

11:05Nie wiem dlaczego ta nazwa się nie

11:06zakwalifikowała powinna znów błąd we Flocie.

11:09No i teraz możemy stylowo być w stanie nie

11:12aktywnym czyli zrobimy znowu ten sam kolor znowu zrobimy

11:17tutaj transparent i tym razem nie będziemy dodawali żadnego orderu tak będzie OK

11:22aczkolwiek cały ten link chciałbym żeby miał większy parking ale po prostu

11:27zwiększyć ten parking w ten sposób no i odpowiednie nazwy.

11:31To będzie lepszy.

11:33Natomiast tutaj będziemy mieli Shipping.

11:35No i teraz jak na ten link drugi dodać odpowiednie klasy po prostu wystarczy już

11:41skorzystać z tej naszej klasy tablic którą stworzyliśmy i dzięki temu zarówno aktywne

11:46jak i nieaktywne zostanie poprawnie sterowane.

11:50Dodatkowo możemy jeszcze wrzucić tutaj

11:52jakiś margines od dołu na oba te elementy żeby odsunąć sam kontent.

11:57Czasem warto tak zrobić

11:59po to żeby nie korzystać z dodatkowych klas byśmy musieli dodać klasę kontent

12:03zrobić margines na górze więc myślę że jest w porządku.

12:06Przenieśliśmy się do pierwszego etapu i zobaczmy jak to wygląda.

12:09Jest OK. Dobra to to mamy zrobione.

12:12Jeszcze jedna drobna stylistycznie rzecz którą chciałbym dopracować w tym produkty

12:17i mecze papieża to tu mamy 48 pikseli parkingu z każdej strony.

12:22Natomiast tu można było ten parking dodać tylko od góry czyli na produkt czy papier

12:28można było wrzucić sobie parking od góry wielkości 40 a rzuciłem

12:34też od dołu wielkości 48 pikseli to może piszemy z palca.

12:37I teraz jest to jakby równo zrobione może

12:40nawet trochę więcej żeby żeby to było po prostu optycznie równo

12:44i zostawiliśmy trochę oddechu pomiędzy menu a samą treścią na stronie OK.

12:50W związku z tym udało nam się teraz zrobić część tej naszej strony produktowej.

12:53Zostały nam rozmaite opcje i dodawanie do

12:55koszyka a także chciałbym podłączyć do niej jeszcze jedną sekcję produktów które

12:59są powiązane kategorią A które być może spodobają się też naszym kupującym i tym

13:04wszystkim zajmiemy się w kolejnej elekcji do której teraz zapraszam.