Webflow: Promowane produkty

0:00W kolejnej lekcji gdzie chciałbym stworzyć jeden dodatkowy element.

0:03Tutaj znajduje się taka sekcja gdzie

0:05będzie można wrzucić sobie jakieś informacje do nowej kolekcji.

0:09Chciałem zrobić to w formie takiego

0:10ciekawego efektu Relax i dodatkowo mam jeszcze eter a także.

0:15No dobra to przejdźmy do stworzenia tego

0:17elementu w zasadzie na razie mamy tylko jedną sekcję.

0:20Wydaje mi się że fajnie by było właśnie

0:22dodać na to nową sekcję czyli wstawić tutaj sekcję a do tej sekcji do ośrodka

0:28wrócimy jak kontener tak żeby wyrównać treść.

0:32Jeżeli chodzi o ustawienia tego kontenera to od razu warto o nie zadbać.

0:35W ten sposób żeby ustawić dla niego

0:38maksymalną szerokość poprzednia szerokość maks tutaj była 1204 64 piksele więc to

0:45też ustawiamy dla tego kolejnego kontenera i będę chciał wrzucić do niego do środka

0:51obrazek ale w taki sposób żeby ten obrazek był cały czas w tym samym miejscu stworzyć

0:57dzięki temu taki efekt para Maks pokaże ci jak to zrobić.

0:59To bardzo proste wystarczy że wybierzemy

1:02sekcję Belgrad i mieczem gradient tutaj chcielibyśmy oczywiście

1:05skorzystać z nowego obrazka wybieramy po zalogowaniu oddamy ten obrazek a następnie

1:11będziemy chcieli ustawić dla niego parametry.

1:14Tutaj wybierzemy Don't Tell

1:16umieściły go na środku i wybierzemy cover a następnie wybierzemy opcję fix it.

1:24Jeśli wybierzemy opcję Fix It to to sprawi

1:27że poruszamy ten kontener i on jest jak gdyby Maską dla tego obrazka.

1:31W ogóle fantastycznie to wygląda a bardzo

1:34łatwo można to osiągnąć po prostu klikając na fix.

1:37Gdybyśmy mieli nos Fix no to oczywiście obrazek podąża za kontener em a w

1:40wariancie First będziemy mieli obrazek który jest zablokowany i kontener go

1:45zwyczajnie odkrywa więc jedno kliknięcie i mamy to zrobione.

1:49Teraz wrzucamy do środka do tego kontenera pozostałe elementy oczywiście on będzie

1:53wyższy ale jego wysokości determinują te elementy które się tam znajdą.

1:57Czyli tak możemy wrzucić taki techniczne papier który będzie zawierał tekst.

2:03Czyli możemy go nazwać

2:06kategorię tekst raper.

2:09I teraz do środka wrócimy następujące elementy.

2:12Najpierw będzie to Herning później wrócimy może tekst bloga standardowego.

2:17Następnie wrócimy jeszcze baton przycisk i te wszystkie elementy.

2:22Tutaj Herning w zasadzie na kategorie tekst raper możemy dodać nadrzędny kolor

2:27jako kolor biały i kolejno przerzucił morze tutaj treści

2:32które się tu znajdują w projekcie Hurricane.

2:36Wewnątrz tego tekstu w blokach wrzuci ma treść.

2:41I jeszcze przycisk który do którego mam specjalną klasę będzie to baton 2

2:47i mam przygotowaną specjalną combo klasę baton Gos Zrobiłem ją sobie w międzyczasie

2:51bo to powtarzanie elementów tak fajnie się potwierdza ten przycisk w tym momencie

2:56no i zobaczmy tutaj jeszcze możemy zmienić dlatego

3:00główka margines margines w zasadzie może tutaj zostać.

3:04Może zmienimy ten margines dla Xboksa na damy mu może specjalną klasę kategorię

3:08tekst i ustalimy odpowiedni margines od przycisku.

3:12I tutaj jeszcze przydałoby się na całe kategorie tekst raper nadać szerokość np.

3:1735 proc. W ten sposób no i jakiś margines.

3:21W zasadzie może wrzucić na kontener trzeci odpowiedni spadek zrobimy tutaj może zatem

3:26ten spadek wielkości powiedzmy 40 8 pikseli a od góry zrobimy jeszcze

3:33dodatkowo większy parking na przykład 200 i teraz królują ten kontener wszystko

3:37naprawdę fajnie wygląda i to zdjęcie ładnie odkrywamy odpowiednio wysokie.

3:41Natomiast w projekcie mamy tutaj jeszcze takie ciemne tło po lewej stronie.

3:45I rzeczywiście ten tekst nie jest zbyt

3:47dobrze widoczny a może jeszcze wrócimy tekst o Hurricane.

3:52Natomiast żeby ten tekst był lepiej

3:54widoczny to moglibyśmy zastosować też bardzo fajną sztuczkę a polega ona na tym

3:59żeby do elementu kontener 3 teraz może nie jest jakaś szczególnie szczęśliwa nazwa

4:04może zróbmy kategorię kontener i możemy wstawić tutaj dodatkowe tło czyli mamy tło

4:10w postaci obrazka ale możemy dodać jeszcze jedno tło które będzie Gradient.

4:14Wybierzmy sobie linii a gradient i ego czyli kąt padania gradient tu wybierzmy na

4:2090 stopni następnie kolor biały który jest tutaj z prawej strony możemy go zaznaczyć

4:25i wybierzmy kolor wybierzmy dla niego opcję przed uroczystością i teraz widzisz

4:30mamy kolor czarny który przechodzi przez uroczystość.

4:34Oczywiście jeżeli chcesz możesz to zrobić też np.

4:37właśnie w ten sposób pod kątem bo tutaj na dole jest tekst no i dodatkowo ten kolor

4:41czarny można zmienić jeśli chodzi o jego parametry opaski te parametry krycia.

4:46Teraz wygląda to dużo lepiej i tekst jest

4:49też lepiej zdecydowanie lepiej czytelny na całą tą kategorię kontener.

4:53Moglibyśmy też jeszcze wrzucić dodatkowo

4:57Border RAID czyli zaokrąglone krawędzie bo tak jest w projekcie

5:01i można powiedzieć że mamy taki naprawdę fajny element gdzie przez klonowanie

5:06ten element odkrywa nam zdjęcie które znajduje się w tle.

5:10Warto by było jeszcze pod Link ten przycisk i teraz możemy zrobić to znów

5:14tak jak robiliśmy tutaj czyli statyczne link do jakiejś kategorii.

5:20Tutaj była kategoria Jump absurd ale

5:22moglibyśmy zrobić ten link statyczny do kategorii chód na

5:26podobnej zasadzie ale tak naprawdę zdecydowanie lepiej by w ogóle było żeby

5:31tutaj wstawić jakieś dynamiczne dane i teraz moglibyśmy się zastanowić jak to

5:36przerobić czy w strukturze naszego sklepu na przykład w produktach

5:40nie dodać przypadkiem czegoś co pozwoli jakiś któryś z tych produktów albo którąś

5:45z tych kategorii promować na stronie głównej no i w zależności od tego czy

5:49chcielibyśmy promować produkt czy kategorię.

5:51Moglibyśmy przejść do ustawień i dodać

5:53sobie jeszcze jedno kartonowe pole Custom Films.

5:56W kategoriach możemy wybrać polecenie

5:58Anfield i przykładowo dodać zwykłego słuchacza dla niego label On Home Page.

6:02I wybieram polecenie Safe Field w momencie

6:05gdy ktoś przełącza ten switch to my będziemy taką kategorię pokazywać na

6:09stronie głównej wybierz polecenie Collection i przełączyć się to dla hot

6:14with a wybieram klikamy ono także włączamy to wybieram polecenie save.

6:19I teraz jeśli przejdę na stronę główną

6:22zamkniemy sekcję to będę mógł skorzystać tutaj z kategorii text raper do środka tak

6:28naprawdę fajnie było wrócić tutaj Collection list.

6:32Dwa razy klikamy na tym żeby połączyć to z

6:34odpowiednią kolekcją czyli w naszym przypadku kategorii następnie przechodzę

6:38do wszystkich ustawień i wybieram tutaj filtr polegający na tym

6:42że będę chciał tutaj pokazywać tylko te kategorie które mają opcję Shop on home

6:49page włączona czy czyli wybraną na on jednak dodatkowo będziemy chcieli uratować

6:55to od najnowszej czyli mamy update on albo to on w zależności co wybierzemy np.

7:02po tej najnowszej zaktualizowany kolekcji i wybieramy tu.

7:08I jeszcze będziemy chcieli eliminować

7:10ilość wyświetlanych elementów tak żeby pokazywała się tylko jedna.

7:14Dzięki temu została wybrana kolekcja hut i

7:17tylko hut i ma ona zaznaczone tą opcję szaloną Page ale gdyby miał kilka kolekcji

7:23oznaczoną opcję on page nie będzie trzeba ich po prostu wyłączać w momencie gdy

7:27wejdzie nowa kolekcja która ma być promowana.

7:29To wtedy i tak będzie wszystko OK ponieważ

7:31będziemy startowali po najnowszej zaktualizowane i będziemy emitować ilość

7:36temu które się tu pojawiają do jednego więc teraz już możemy odkryć.

7:41Idziemy i przerzucić do nich po kolei te wszystkie rzeczy czyli Helsinki 1.

7:46Wróćmy do kolekcji.

7:49Nasza kategoria Tekst i również baton 2

7:53zadbają o ich kolejność i nimi te dane tak aby były dynamiczne.

7:57Czyli wybieramy sobie Get teksty kategorii i wybierzemy tutaj nazwę.

8:01Czyli akurat zmieniła się akurat w kategorii tekst.

8:04Będziemy też brali tekst z kategorii tym razem będziemy brali te skrypty.

8:08I tutaj możemy też do Buttona dodać jakiś Custom owy tekst w zasadzie tutaj pasowało

8:15by po prostu wybrać się o to żeby był dość uniwersalny.

8:19Natomiast link będziemy aplikować do Karen w kategorii czyli do tej bieżącej strony

8:24można by było też spojrzeć tutaj na projekt.

8:26Tutaj znajduje się taka strzałka.

8:28Ona jest zrobiona w postaci grafiki.

8:30Jeśli szukamy np.

8:32frazę ASK around to będziemy mogli z

8:34jakiejś dowolnej strony która właśnie oferuje możliwość skopiowania

8:38znaku ASCII dla strzałki pobrać sobie taką strzałka i wstawić ją tutaj.

8:42No i teraz super bo mamy te wszystkie dane dynamiczne.

8:45Na koniec jeszcze może odrobinę to do

8:47stylu wiemy czyli na całe kategorie kontener dorzuci też margines oddało około

8:51osiemdziesięciu pikseli tak jak w projekcie no i mamy kolejną część gotową w

8:55następnej lekcji zrobimy eter oraz folder do usłyszenia.