Webflow: Dodatki na stronę główną

0:00Cześć Witaj w kolejnej lekcji w której zajmiemy się Peterem i wystawimy do niego

0:04odpowiednie elementy a także zajmiemy się fotelem.

0:07Szybko można to zrobić więc żeby ta reakcja była jeszcze trochę ciekawsza.

0:11Pokażę ci jak można jeszcze osadzić taki Instagram nowymi zdjęciami.

0:16Najpierw jednak przejdźmy do symbolu IS Letter który już tutaj jest.

0:19Chciałbym żeby on został ale chciałbym

0:21wymienić Charliego albo smoka na holding typu drugiego.

0:25Więc wybieram sobie Harding i to ma być Harding a dwa jeszcze wrócę tu jeden

0:30element czyli wybierzmy jeszcze raz a następnie wrócimy.

0:34Tekst bloga oczywiście musimy te wszystkie elementy

0:37poukładać czyli tak tekst będzie tutaj na górze i on będzie miał taką klasę label

0:43wybierzemy klasę label którą stworzyłem już wcześniej.

0:47Odmienił się też label w tym miejscu i

0:49będziemy mogli dodatkowo przerzucić ten link poniżej.

0:53W to miejsce będzie Harris 2 on będzie zawierał treści Get

0:59Off a tutaj po prostu będzie fraza Just Letter.

1:04Może zostawimy ją właśnie takim stylem

1:06niebieskim tekstem a poniżej znajdzie się akapit tekstu w który chciałbym po prostu

1:14usunąć tę klasę i zostawić ten klasyczny akapit.

1:18Fajnie by było jeszcze trochę zmniejszyć

1:20to pole tekstowe a więc wybierzmy może Just later

1:24tekst jako klasę dla niego i użyjemy tutaj szerokości na przykład 35 proc.

1:31To może być trochę za mało.

1:33Dobra to dajmy tutaj 45 proc.

1:35teraz jest OK.

1:37Musimy jeszcze oscylować tekst filtr

1:39któremu ma jakąś specjalną klasę nadal może zostawmy tę klasę

1:44natomiast zmienimy zmienimy jej ustawienia tutaj parking postawimy na 24 piksele

1:50później na dole też robimy 24 a tu zrobimy z obu stron po 16 pikseli czyli tutaj z

1:56lewej i prawej mamy 16 pikseli tak żeby wyrównać go w kontekście przycisku bo

2:01przycisk jest zrobiony naszym stylem Button i to jest OK.

2:05Czyli może zmienimy jeszcze tutaj.

2:08AP.

2:10I dodajmy w tym miejscu zaokrąglony narożnik i zrobimy osiem nie osiemdziesiąt

2:16tylko osiem i zostawimy to teraz tak jak jest.

2:21No i w końcu szerokość tej całej sekcji w zasadzie powinniśmy się przyjrzeć

2:24szerokości i wszystkich elementów na naszej stronie głównej bo zobacz że w tym

2:29momencie te sekcje są rozciąga się na całą szerokość w zasadzie

2:32w przypadku niektórych to fajnie wygląda w przypadku innych trochę gorzej.

2:36W związku z tym chciałbym to ujednolicić.

2:39Mianowicie najprościej jest zrobić to w

2:41łeb na takiej zasadzie aczkolwiek sposobów jest mnóstwo.

2:43Na przykład nawigację możemy ograniczyć dając jej maksymalną szerokość np.

2:491246.

2:51Tak było w projekcie.

2:53Możemy to w ten sposób zrobić i teraz żeby

2:55wyrównać ten element wystarczy że sparing damy as Enter Horizon i to wtedy nada

3:01margines na auto i powinno nam wędrować ten element.

3:04Tak samo możemy zrobić w przypadku HDR czyli max suit przykładowo damy 1246.

3:10I też to w centrum.

3:11Ponieważ inne części też są zaokrąglone to bądźmy tutaj konsekwentni i jeśli jesteśmy

3:17już przy intro HDR to dodajemy Border Ladies też na 12 pikseli.

3:21Kolejno trzeba usunąć cały ten nagłówek.

3:24Wydaje mi się że bez niego wygląda to

3:26trochę lepiej więc może zróbmy to w ten sposób.

3:29Może jak już poprawiamy trochę to również

3:32tutaj w całym kontenerze on zdaje się że ma jakiś moment.

3:37Zobaczmy co ma na dane.

3:39Margines od dołu ten paragraf rap może by go przesunąć mur Lisy zresztą też chyba

3:45chciałbym przesunąć trochę bardziej do zaznacz Ten kontener i projekt happening

3:51mam 80 pikseli więc mi go trochę bardziej do tych elementów i cały kolektor

3:57listy raper też mógłby dostać max 1246 i też moglibyśmy go wycenę zrobić.

4:05Następny element

4:07listy jest chyba ten przycisk powinien być trochę wyżej Collection rap ma margines

4:12dajmy tutaj trochę wyżej ten przycisk i kategorię Kontener ma max.

4:181264 to zmieńmy to już żeby było spójne na 46.

4:23I tak samo zrobimy tutaj w przypadku tera wejdziemy do środka.

4:27No i mamy sekcję i kontener będziemy

4:29chcieli tą sekcję całą zrobić tak żeby miała maksymalnie 1246 i umieścić ją na

4:35środku koncentrujemy i teraz to będzie w porządku.

4:39Jeżeli chodzi o futer to myślę że jest OK

4:43i może zostać mają zresztą białe tło a pozostałe sekcje zobaczy teraz został

4:47ładnie wygenerowany i będą miały najszerzej.

4:51To będzie tak jak teraz jeżeli

4:53chcielibyśmy oczywiście możemy przygotować wersję kolejną Response i np.

4:57dodać tutaj break pointy po 1920 wybrać polecenie Create i trochę poszerzyć te

5:03kontenery ale właśnie z reguły w ten sposób pracujemy że

5:07nawet jeśli dodamy tutaj teraz break point to możemy do niego wejść no i zobacz że

5:11łatwo nam jest to zmienić przykładowo na 1446 i wszystkie te elementy w tym tylko

5:17konkretnym brak bądźcie nawigację też możemy zmienić tak aby były odrobinę

5:22szersze to możemy zostawić na środku bo jest ładnie wciśnięty.

5:26Ale już na przykład ten Collection list

5:28raper możemy zmienić albo trochę rozszerzyć i tak samo kategorię raper.

5:32Więc w ten sposób zwykle postępuje po to żeby dostosować to jeszcze do

5:37tych innych rozdzielczości i to jest sposób który daje nam dosyć dużą kontrolę.

5:42I teraz zobaczmy jak to wygląda i mamy wszystkie sekcje również w innych

5:47rozdzielczość jest troszeczkę szerzej w tej rozdzielczości jest trochę więcej.

5:51Moim zdaniem to wygląda ok. .

5:52Zaraz jeszcze robimy wariant Response bo nie wszystko tutaj jest idealnie ale

5:57najpierw jeszcze skupmy się na tym naszym głównym widoku po to żeby dorobić i

6:01zmienić trochę dwie ostatnie sekcje w zasadzie zaraz zajmiemy się tą sekcją

6:04skuterem ale na razie pożycza sobie jeszcze ten link.

6:08W zasadzie cały kontener możemy tutaj do tej sekcji cały ten kontener jest może

6:14wyciągniemy go na lewo i teraz tutaj zamiast S.S. wrócimy.

6:20Wróćmy do podniósł later.

6:22Może cały kontener podniósł Letter i tutaj będziemy mieli Instagram.

6:29Chciałbym dorzucić filtr Instagrama więc możemy pod w Herning do tego

6:34kontenera dodać coś co pozwoli nam budować kody z zewnątrz.

6:39To jest sekcja MB.

6:40I tutaj w sekcji Custom Code znajdzie się taki ujrzeć z Instagrama który

6:45wygenerowała sobie przez taką witrynę EF Side.

6:48Niestety te budżety nie są darmowe trzeba

6:51za nie kilka dolarów zapłacić ale jest tutaj naprawdę pokaźna biblioteka tych

6:55gadżetów być może będziesz chciał z tego skorzystać.

6:58Jest mnóstwo różnych kategorii np.

7:01w słyszał znajduje się Instagram Fit prawdopodobnie jakiś inny serwis by też

7:05był w stanie pomóc coś takiego wygenerować.

7:08Tutaj korzystamy z.

7:09Definiowana go szablonu.

7:11Przykładowo my będziemy chcieli sobie utworzyć grid czyli siatkę.

7:16Następnie wybieramy polecenie KOD.

7:18Kolejno wskazujemy user name na

7:21Instagramie możemy te posty sobie filtrowanie możemy je po sortowanie

7:26odpowiednio możemy zmienić tutaj leje out mamy lay out GRID możemy też przełączyć

7:31Thomas lider więc masa opcji jest do dostosowania np.

7:35erą. Możemy wybrać tylko jeden rząd.

7:38Można też zmienić ten baton który tutaj jest wyświetlany.

7:42W zasadzie można też

7:44usunąć te wszystkie przyciski są i będą nam tutaj potrzebne dodać nowa.

7:49Można też zarządzać tym jakie ustawienia postów mamy jak mam się otwierać te posty.

7:56Docelowo mamy taki podział który nam otworzy dany post.

7:59Masa ustawień ogólnie nie chcę przez to

8:00przechodzić ponieważ można się przepychać przez wszystkie ustawienia.

8:04Jeżeli już będziesz gotowy to zapisujemy

8:05sobie taki Widzew a następnie niestety w tym przypadku akurat musimy zapłacić.

8:11Natomiast po wybraniu polecenia up side będzie można

8:15budować sobie taki kod bezpośrednio na naszą stronę i w przypadku tego gadżetu ja

8:21mam już ten kawałek kodu gotowy wrzucamy tutaj po prostu kod który nam

8:25podała tamta strona wybieram polecenie safe haven Klaus.

8:29I w tym miejscu nasz Instagram się pojawi

8:32natomiast pojawi się dopiero w momencie gdy opublikuje to pod naszą domeną.

8:37Zatem możemy wybrać tę opcję i po opublikowaniu podejrzeć jak to wygląda

8:41ewentualnie zmienić jeszcze jakieś parametry wyświetlania.

8:45Tutaj akurat zrobiłem dwa rzędy inne ustawienia.

8:47Jak widzisz ten ładuje ładują się też podgląd.

8:51Zmieniają się posty naprawdę mnóstwo opcji

8:53można tutaj dostosować i polecam ci właśnie wykorzystać czasem takie

8:57zewnętrzne narzędzia do tego żeby sobie jakoś pójdzie na stronę instalować.

9:01Jeżeli chodzi o futer to jego struktura jest bardzo prosta w zasadzie my chcemy ją

9:06przerobić też w ten sposób aby nawet była w pełni estetyczna.

9:10Tutaj akurat w tym miejscu też jest szablonu mamy Collection listę Paper które

9:14listę nam wszystkie kolekcje czyli bluzy Hut itd.

9:18My nie będziemy z tego korzystać.

9:20Chcemy trochę dostosować i jedynie zrobić

9:23ostatecznie w związku z tym ponieważ uczyliśmy się tego we wszystkich innych

9:26kursach to nie chcę żeby zajmowało nam to dodatkowo kilka minut tylko po prostu do

9:31tej sekcji wklej je to co dla Pottera przygotowałem wcześniej.

9:34Tak nasz fotel będzie wyglądał.

9:36Są to statyczne linki a te linki już spełniłem.

9:39Mamy po prostu zorganizowane to w link sekcję i dokładnie taki GRID jak mieliśmy

9:45wcześniej czyli właśnie ten futer Grid który zawiera poszczególne elementy.

9:49Jest on rozłożony w ten sposób na dole mamy kopię rajd po prawej stronie jedynie

9:54umieściła sekcję social media social media wyrzuciłem po prostu do kontenera.

10:00Raper i każdy z nich jest linkiem a w środku zawiera obrazek i w zasadzie tyle.

10:05Super proste ale uważam że nie ma chyba

10:07sensu tego tłumaczyć takie rzeczy po obejrzeniu pozostałych

10:10kursów na pewno już nie są dla ciebie trudne.

10:13Tu zobaczyłem że użyłem ten sam obrazek

10:16dwa razy więc użyję innego trzeciego obrazka.

10:19Można by było uznać że nasza strona główna jest teraz już gotowa.

10:24Warto jednak zadbać o jej pasywne wersje czyli przełączyć się na tablet zobaczyć

10:30czy wszystko jest OK można by było dodać np.

10:33na elementy takie jak ta sekcja w której znajduje się chód.

10:38Przykładowo margines z lewej i z prawej strony na całą tą sekcję można by było

10:44wrzucić margines rzędu 20 pikseli czyli tę sekcję zniósł Peterem.

10:50Tutaj w zasadzie włączymy ten podgląd

10:53wygląda to OK a tak nie widać nas produktów.

10:56Jeśli wybierzemy cały collection system to moglibyśmy tutaj po prostu powiększyć ten

11:01margines po to żeby było widać nazwy produktów i teraz jest OK.

11:06Sekcje powyżej w wariancie tabletu ale w

11:08zasadzie możemy jeszcze tak zestawić wariancie telefon nowym już jest ona

11:12automatycznie zmieniona czyli zmieniane są ustawienia GRID a także mamy tylko jedną

11:16kolumnę i jeśli chodzi o tę sekcję powyżej jeszcze przejdźmy do tabletu.

11:21Ds.

11:21edycji GRID klikając na ikonkę to warto by było samo intro HDR zmienić

11:28tak aby przejdźmy do sekcji MSN gradient dodajmy nowy element który kryje całość.

11:34Będzie to kolor wybierzmy kolor biały.

11:36No i właśnie zmieniliśmy jego opaskę ok okolice 50 60 proc.

11:41było OK.

11:42Teraz mamy fajny obrazek w tle on będzie dziedziczone na te warianty na wersje

11:46mobilne i wydaje mi się że z grubsza to jest oczywiście można jeszcze chwilę na

11:50pewno spędzić na poprawieniu tych pasywnych stylów ale wydaje mi się że na

11:54ten moment tutaj w sumie jeszcze przydałby się do tego kontenera jakiś

12:01cały kontener jakiś margines który moglibyśmy dodać na dole.

12:05No i można powiedzieć że z grubsza ten nasz projekt jest gotowy.

12:09Oczywiście dla nas kluczowe jest wspinanie tych wszystkich ustawień i koszmar związku

12:14z tym na tym się koncentrujemy ale chciałem żeby też pokazać jak szybko można

12:19dostosować gotowy tablet złap Flow do naszych potrzeb.

12:22Dzięki za uwagę w tej lekcji i do usłyszenia.