Webflow: Budujemy footer cz. 2

Webflow 2020+

0:00W kolejnej lekcji. Teraz spróbujemy

0:01dopracować sekcję która znajduje się na dole.

0:03Dlaczego w ogóle ten tekst block się w ten sposób wyświetla zamkniemy flex contener.

0:08Okazuje się, że tekst block znajduje się bezpośrednio pod nim w całym kontencie.

0:13I footer link logo też znajduje się bezpośrednio pod nim.

0:16My z tego chcemy zrobić bardziej

0:17uporządkowane sekcje więc musimy wszystko zamknąć w kontenery.

0:20Ok to przygotuje kolejny kontener techniczny.

0:24Będzie to znowu DiV block standardowo i gdzie. On się nam wrzucił tutaj więc go

0:29wyciągne stawia tu tekst block do którego zaraz skopiujemy nasze treści.

0:35Do tego tekst blocka powinniśmy wrzucić tylko sekcje copy right.

0:40W ten sposób

0:41footer logo link rzeczywiście jest powyżej

0:43powinniśmy do niego wybrać odpowiedni obrazek.

0:46W środku jest obrazek po prostu jako znacznik img.

0:48Ja wybieram choose image.

0:50Możemy to tak zostawić. Wybierzmy teraz wariant biały naszego logo juice ok.

0:55I upewnimy się, że

0:57ten napis copyright jest odpowiednim stylem.

1:00Możliwe że to będzie identyczny styl jak tutaj mieliśmy przy footer paragraf więc

1:05możemy po prostu command right footer paragraf i zastosować ten styl

1:10natomiast będziemy na pewno musieli te elementy po prostu ułożyć obok siebie.

1:15Można najpierw spróbować to zrobić na

1:17całym kontenerze na tym w DiV blocku czyli ułożyć jego dzieci

1:21np. flex-em.

1:22I teraz ustawione są horyzontalnie więc będą wyświetlać obok siebie.

1:26Zadbamy jeszcze żeby były centrowane w pionie.

1:29Teraz jest w ogóle już super.

1:30No i dla footer logo link można by było ustawić po prostu jakiś margines z prawej

1:36strony po to żeby odsunąć tą sekcję copyright.

1:39Dodatkowo cały DiV block cztery czyli

1:42można to nazwać footer copyright section powinien mieć określony

1:49jakiś padding od góry ponieważ chcemy to wszystko odsunąć od górnej krawędzi którą

1:54wyposażył się w przerywaną linie przerywana linia. Jeśli wejdziemy do

1:58designu ona ma dziesięć procent oppacity do białego koloru i mamy size dwa czyli grubość dwa.

2:04Później mamy dash sześć i gap osiem pikseli.

2:07Więc przejdźmy do ustawień nieprzerwanej linii które możemy wybrać stąd borders.

2:12Ustawiamy sobie ją dla top dlatego teraz tutaj będzie na górze tylko ta linia.

2:17No i teraz jeśli chodzi o jej styl zrobimy linie przerywana.

2:20Grubość mieliśmy dwa i kolor ustawiamy na kolor biały ale jego

2:26oppacity możemy zmienić tutaj w sekcji "A "alfa na dwadzieścia procent

2:31Niestety nie możemy aż tak dokładnie dopasować przynajmniej edytorze webflow.

2:35Jeszcze na razie tej linii aby miała dokładnie takie odstępy ale wydaje mi się

2:38że ona teraz jest w porządku i po prostu może tak zostać ale jak chcesz możesz też

2:43customowym CSS-em zmienić sobie dokładnie te odstępy.

2:46Zostawmy na razie tak i potrzebujemy jeszcze umieścić w footerze. Kolejne

2:50obrazki czyli logo linki tak naprawdę będziemy chcieli tam wstawić ikonki z

2:55portali społecznościowych i żeby to zrobić ja najpierw do footera copyright section.

3:00Dodam DiV blocka który będzie kontenerem na

3:04footer logo link czyli na nasze logo, a także na footer paragraf czyli my

3:09zbierzemy to do kupy dlatego, że będzie jeden DiV block który będzie wyrównany do lewej

3:13strony i stworzymy sobie DiV block który będzie wyrównany do prawej strony.

3:19Jak to zrobić no oczywiście na footer copy right section który jest display flex ustawiony.

3:23Wystarczy wrzucić tą oto właściwość

3:26justify space between i już poleciało nam to do prawej, to mamy do lewej.

3:30Tutaj trochę nam się popsuł ten kontener

3:32ale to tylko dlatego że folder paragraf ma ustawiony display na block czyli po prostu

3:37jest przepychany teraz jest na dół, a my możemy to zmienić na

3:41np. inline block.

3:42Z tym że proszę pamiętać, że footer paragraf jest też

3:45np. tutaj i tutaj. Więc akurat w tym momencie ta zmiana jest

3:47dla nas w porządku ale być może w innym przypadku by nie była.

3:51Kolejna rzecz to mamy ten footer logo link

3:53i możemy teraz zacząć wklepać te logo linki do blocku tylko, że w sumie nie chciałbym

3:58tej samej klasy ponieważ będę pewnie chciał mieć osobną

4:02klasę dla logo i osobną dla tych social mediów więc zamiast tego footer logo link

4:06ja usuną tę klasę. Remove klas i wrzucimy tutaj footer

4:12social

4:14media.

4:15Albo po prostu w footer social media.

4:17No i teraz będziemy mogli powielić taki element jeszcze trzy razy.

4:22A następnie odmieniać tutaj obrazki.

4:24Obrazki mam już przygotowane i je

4:26nawet wyrzuciłem więc pierwszym będzie facebook.

4:29Kolejno musimy wrzucić na przykład youtube'a.

4:34Następny będzie instagram, a później na koniec wrzucimy twittera.

4:38No i teraz możemy zarządzać właściwościami dla tych elementów.

4:43Zaznaczmy odpowiednią klasę czyli footer social media. Rzecz jasna to jest link więc powinniśmy

4:48tutaj wstawić URL do mediów społecznościowych podobnie jak te

4:51wszystkie linki które porobiliśmy ale nie będziemy tego robić.

4:54Możesz oczywiście później sobie kończyć natomiast footer social media powinniśmy

4:58odsunąć marginesem nie od prawej krawędzi bo to odsunie od tej prawej krawędzi

5:03również tylko od lewej powinniśmy ustawić

5:05np. margines margines rzędu dziesięciu pikseli.

5:08Myślę, że wystarczy.

5:09I dodatkowo mamy to zrobione w ten sposób,

5:12że za importowane celowo białe w stu procentach widoczne kolor biały jest

5:19ikonę po to żeby można było zmienić teraz oppacity tych ikon na dwadzieścia procent

5:25tak jak to jest w design-ie, a następnie dodać stan hover i w tym

5:28stanie hover oppacity zmienić na sto procent.

5:31Wróćmy do podstawowego ustawienia.

5:33No i ostatnia rzecz którą robię to footer

5:36section dodaję jakiś padding od dołu.

5:40Dlaczego padding , a nie margines oczywiście margines by dodał kawałek białego tła, a

5:44padding zadba o to, że to tło będzie dalej granatowe wybierzmy

5:48np. w dwadzieścia. Myślę że teraz jest ok.

5:50Możemy podejrzeć jak to wygląda design-ie.

5:53No i ostatnia rzecz która nam została jak zawsze do zrobienia to jest responsywny.

5:56Wariant responsywna wersja tego naszego

5:58footera, a tutaj nie do końca dobrze wygląda responsywnie dopiero mobilowym widoku się zmienia.

6:05Przejdźmy w związku z tym do designu, a następnie wejdziemy w widok tabletowy no

6:10i już tabletowym widoku jest tu za ciasno ale mamy na to bardzo łatwą radę ponieważ

6:14znajduje się tutaj ten nasz footer section cztery i on ma flex ustawiony na horyzontal, a my

6:20możemy przestawić go na vertical i wtedy. No myślę że tak w miarę jest ok.

6:26Poza tym moglibyśmy na całą sekcje juice

6:29jednak ustawić w momencie gdy jesteśmy w widoku tabletowym.

6:33Jakąś mniejszą maksymalną szerokość

6:36np. dwieście dwadzieścia pikseli.

6:38No i teraz jest w porządku.

6:40To jest najmniejszy wariant więc w tych większych będzie dalej ok.

6:44Natomiast w tym widoku portretowym telefonowym

6:47i landscape na pewno nie będzie już ok.

6:49Ja akurat w tym widoku wydaje mi się że zrezygnuje, z newslettera.

6:54To oczywiście jest jakaś znowu decyzja biznesowa.

6:56Moglibyśmy już od razu zacząć inaczej układać ale w tym przypadku jeżeli

7:01np. jedna z sekcji nie jest nam kluczowo

7:03potrzebna to możemy po prostu ustawić dla niej display none.

7:06I tak samo będzie w widoku tym telefonowym.

7:08Więc trzeba by się było zastanowić czy potrzebujemy te sekcje czy nie.

7:11Jeżeli potrzebujemy to ustawiamy display

7:13na block i ona wraca jest tutaj na dole jest wszystko ok.

7:17I ostatnia rzecz którą wydaje mi się że warto zrobić nawet już wcześniej.

7:21Czyli może tutaj albo w tym widoku portretowym

7:24wrzucić jakiś trochę większy margines dla footer section.

7:29Tutaj też zresztą trochę obniże się zmniejszy ten padding, w ten sposób.

7:33Ale dodam za to padding z altem z lewej i z prawej strony żeby to wszystko

7:37wcisnąć ale jednocześnie jest taki trochę lepszy oddech od lewej i prawej strony

7:41wygląda to dobrze teraz w każdej dosłownie każdej rozdzielczości. Chociaż oczywiście

7:46nie jest moim celem żeby to jakoś tak super dokładnie podopasowywać, a raczej żeby

7:50pokazać ci jakie są techniki jakie są sposoby działania.

7:53I myślę że to wszystko mamy już wyjaśnione w związku z tym można powiedzieć, że nasza

7:58strona z takim podstawowym koncepcie jest gotowa.

8:01My jeszcze poświęcimy kolejną lekcję na to żeby dopracować jakieś szczegóły

8:04no i później przejdziemy do obsługiwania tego formularza, a do usłyszenia.