Webflow: Budujemy footer cz. 1

Webflow 2020+

0:00Witaj. W kolejnej lekcji.

0:01Zajmiemy się w

0:02niej ostatnim elementem naszej strony czyli footer-em.

0:05Footer jest dosyć standardowy i dzięki temu

0:08będziecie mogli skorzystać z wbudowanego w webflow gotowego layotu.

0:12Znajduje się layot footer i będziemy chcieli go wstawić.

0:15Natomiast najpierw będziemy w zasadzie potrzebowali sobie powielić

0:20np. forum section i zmienić to na footer section.

0:25Chcemy zachować wszystkie ustawienia

0:28np. elementu kontener który znajduje się

0:31content który znajduje się w środku mogę wyrzucić sobie forum.

0:34A jeśli chodzi o przerzucenie footera to

0:37najłatwiej będzie to zrobić sekcji layout. Po prostu przeciągnąć go i upuścić tam

0:41gdzie możemy go dodać czyli powinna taka niebieska kreska się zapalić.

0:45No i mamy to. Teraz dodaliśmy footer ale mamy też footer sekcję z kontentem.

0:50Jak zajrzeć do footera. To on posiada też swój własny kontener.

0:55Tyle że my chcemy skorzystać z tego naszego więc to co zrobimy to po prostu

0:59przerzucić te elementy footera do naszego kontentu.

1:02Tutaj jest jeszcze tekst block który jest

1:04na dole i teraz możemy usunąć pozostałości po footerze który dodał nam webflow.

1:08Mamy wszystko w naszej strukturze. Co jest

1:10istotne bo wiadomo, że będziemy mogli sterować

1:14np. maksymalną szerokością kontentu

1:16i chcemy żeby to wszystko w nim się znajdowało więc wtedy footer flex contener

1:20mamy taki jeden duży kontener który zawiera, a który jest flex - boxem ma

1:24direction horyzontal. On będzie zmieniał swoje ustawienia w

1:28miarę przesuwania się w kolejne breakpointy responsywne.

1:31Czyli

1:32np. w tym mobilnym będzie już w vertical zamiast horizonal.

1:36Natomiast tak to jego konstrukcja jest

1:38bardzo prosta zaczniemy jak zwykle od wersji desktopowej.

1:41No i wygląda to tak, że w środku znajduje się logo link i później takie DiV blocki.

1:47My tych sekcji mamy raz, dwa, trzy, cztery,

1:50więc możemy od razu dorzucić jednego DiV blocka na tę kolejną sekcję.

1:55W ten sposób i ona automatycznie bardzo fajnie się doda.

1:58Nie potrzebujemy też tego footer image.

2:01Aczkolwiek nasze footer image i się powinno znaleźć, gdzieś tu poniżej.

2:05W związku z tym

2:06co można zrobić to footer link logo po prostu wyciągnąć z tej struktury.

2:10Na razie umieścił je poniżej.

2:12Później się nim zajmiemy.

2:13Teraz struktura wygląda na zbliżoną do tego co potrzebujemy.

2:17Spróbujmy przenosić odpowiednie treści.

2:19No ale najpierw musimy całą sekcję czyli całe forum section.

2:24No tak bo powinniśmy najpierw usunąć tą

2:27klasę forms section, remove class i dopiero teraz dodać footer section

2:33więc źle to zrobiłem na początku tej lekcji ale już ja poprawiłem.

2:36A my dla całego footer section potrzebujemy jako

2:39background ustawić kolor midnight blue w ten sposób no i dla wszystkich treści.

2:46Ogólnie wszystkie teksty powinny być białe więc umieść tutaj już taką regułę.

2:51Nie dotyczy to tych tekstów jak widzicie tych footer linków list item które tutaj są. Dlaczego?

2:56No bo jest to pewien charakterystyczny

2:58element o którym jeszcze się nie spotkaliśmy.

2:59Czyli lista ma oczywiście HTML-u listy. Podstawowa rzecz.

3:03My jeszcze akurat nie mieliśmy okazji z nich korzystać w webflow.

3:06Natomiast znajdują się one tutaj w sekcji basic.

3:08Mamy list i list item, list czyli lista nie uporządkowana czy uporządkowana którą

3:13możemy wstawić do środku listy do środka listy wrzucamy list item i podobnie jak

3:18inne elementy nie łatwo się domyślić że te listy są jakoś preformatowane.

3:23Z pomocą HTML-u tagu.

3:25W tym przypadku all unordered list.

3:28Dodatkowo w środku znajdują się jeszcze list item.

3:30I one też są reformatowane HTML tagiem.

3:33all list item też moglibyśmy ewentualnie zmodyfikować.

3:36No ale w końcu mamy też footer linki. One tutaj mają konkretną klasę footer linki to

3:42jest ostatnia rzecz jak widzisz w nich kolor jest nadpisany.

3:45Więc gdybyśmy nawet mieli cokolwiek

3:47wcześniej czego w tym przypadku raczej nie warto robić dlaczego.

3:50Dlatego, że gdybyśmy HTML tagi zmodyfikowali list to zrobilibyśmy je białe, a na naszej

3:56stronie tam gdzie występują listy na białym tle.

3:58Powinny być jednak koloru ciemnego więc

4:01footer to raczej wyjątek więc nie powinniśmy na nim modyfikować klas tagów.

4:05No ale zeszliśmy tutaj jeszcze niżej i

4:06okazuje się że kolor jest nałożony bezpośrednio na tę klasę footer link więc my

4:10możemy teraz tylko zmienić albo na nasz jest jasno niebieski albo wręcz biały.

4:14I teraz wszystko będzie działać poprawnie.

4:17No i jeszcze jedna rzecz to są wszystko linki my w tym przypadku. Akurat nie

4:21potrzebujemy linków tylko opis najpierw wklejmy tutaj heading label czyli what's juice, a

4:27następnie będziemy potrzebowali akapit tekstu.

4:29Więc tak naprawdę ta cała lista będzie nam akurat w tym przypadku niepotrzebna.

4:33Mogę się jej pozbyć, a zamiast tego

4:35skorzystam z po prostu sekcji paragraf i paragraf wkleje sobie

4:40tekst którym jest potrzebny w ten piękny sposób rozleciał mi się cały layout

4:44ale nic nie szkodzi w DiV blocku po prostu możemy ustawić dla niego

4:48maksymalną szerokość i maksymalna szerokość dlatego w DiV blocka to będzie ok.

4:52trzysta dwadzieścia pikseli więc

4:54przejdźmy do jego właściwości footer section jeden. Możemy tak to nazwać.

4:59Przynajmniej na razie. A następnie ustalić że tutaj maksymalna

5:03szerokość to będzie trzysta dwadzieścia pikseli i już wygląda to dobrze.

5:08Poza tym że ustawienia paragrafu footer

5:11paragraf możemy dodać kolejną klasę powinniśmy zmienić w taki sposób, że

5:18dm sans szesnaście i ono ma w ogóle oppaccity na pięćdziesiąt procent

5:22koloru białego możemy wiernie

5:24odwzorować z layoutu. Przejdźmy do

5:27ustawień to jest szesnaście dm sans bold zamiast bold też ustawiamy tutaj medium i żeby być

5:33w zgodzie z projektem możemy całe oppacity od tego zamienić na pięćdziesiąt procent.

5:41No to teraz jeszcze zadbamy o ten "H" dwa footer heading.

5:44On ma jakąś specyficzną swoją klasę.

5:46No i dobrze w zasadzie chcemy żeby to było coś dedykowanego dla footera dm sans z osiemnaście, bold dwadzieścia cztery.

5:52Więc zmienimy te ustawienia.

5:54osiemnaście bold i high robimy dwadzieścia cztery piksele.

5:58Było to ustawione w innych jednostkach niż

6:00piksele czyli w remach więc musieliśmy też zmienić na piksele, ponieważ wszystkie tekst

6:05linki powinny być sformatowane w ten sam sposób.

6:08No to przejdźmy może do nich i ustawmy

6:10na nich wariant medium i ustawmy na nich też pięćdziesiąt procent

6:15oppacity.

6:16To jest też

6:18w ten sposób zrobione, że będziemy mogli sobie teraz po najechaniu na taki link

6:22ustawić dla niego wersję hover i w tej wersji hover. On jest podkreślony.

6:27Zamiast podkreślenia chcemy to podkreślenie wyłączyć decoration.

6:31Po prostu zwiększymy oppacity do stu procent

6:33czyli podświetlenie fajnie linki, a ja wrócę teraz do statusu none.

6:38No i dobra kolejny label który

6:40potrzebujemy about juice. To już teraz szybciutko kopiuje, kopiuje, wklejam te wszystkie

6:46nazwy sekcji oraz nazwę linków które nam są potrzebne.

6:50Będę potrzebował taki sam akapit czyli

6:52footer paragraf pod tym elementem czyli tego wklejam pod "H" dwa. Subsribe to newsletter.

6:58Tutaj też nie będzie żadnych linków tylko przykleje kawałek tekstu

7:02i tekst linki czyli ten list item, razem z całą listą po prostu stąd usunę. Cały

7:08ten DiV block z newsletterem nazwę footer section cztery i stworzymy sobie taką klasę, a to dzięki

7:15temu będziemy mogli w środku jeszcze umieścić kilka elementów.

7:19Potrzebny jest mini formularz w środku czyli pole tekstowe i subscribe.

7:23Czyli przejdźmy teraz do, "A" i wrzućmy tutaj podstawowe form block.

7:28Gdybyśmy wrzucili sam imput to

7:30zobaczysz, że nie pozwoli nam tego zrobić bo musimy mieć najpierw formę block.

7:34To jest to co mówiłem wcześniej czyli musimy najpierw wrzucić sobie taki główny

7:38kontener w form block, a dopiero później będziemy mogli zmieniać.

7:41Tutaj dorzuca się jakieś imputy zamiast tych

7:45pól w zasadzie potrzebne nam jest tylko jedno pole imput i guzik submit.

7:50Jeśli chodzi o tekst subsribe czyli ten guzik

7:53w zasadzie jest to proste do zrobienia, a zobaczmy jak on wygląda dm sans szesnaście.

7:58Białe podkreślone.

7:59Czyli przejdźmy na submit.

8:00Zmieńmy to subsribe.

8:03Dwie strzałki następnie musimy go oczywiście

8:07nazwać odpowiednio czyli footer form submit.

8:11I teraz zmieniamy właściwości czyli kolor

8:14na przezroczysty tła kolejno dm sans bold zmienimy na medium i damy,

8:21tu podkreślenie w ten sposób, a rozmiar zmienimy na szesnaście i dwadzieścia jeden.

8:27No i to by było na tyle jeśli chodzi o tekst.

8:30Teraz jeszcze zobacz że mamy tutaj border wrzucony biały ale opppacity niecałe dwadzieścia procent

8:36czyli zróbmy najpierw ten stan czyli mamy kolor przezroczysty.

8:41Ustawmy go z pomocą tego skrótu natomiast będziemy chcieli

8:45radius na osiem pikseli, a sam border

8:49grubość na dwa i kolor zmienimy na kolor biały.

8:54Dajmy też nazwę footer form text field.

9:00Bardziej intuicyjną.

9:01Do środka będziemy chcieli też dodać w

9:04ustawieniach place holder czyli "enter " your email.

9:08Całość na pewno w tym podstawowym stanie

9:11będziemy chcieli zmienić tak żeby oppacity te było na dwadzieścia procent.

9:15A od razu sobie zrobimy stan hover do

9:16tego i w tym stanie hover oppacity też będzie na sto procent

9:19. Wróćmy do stanu normalnego.

9:22No i jeszcze co powinniśmy tu zrobić.

9:25Na pewno dodać małą ikonkę w środku imputa to możemy spróbować to zrobić z pomocą

9:30obrazka w tle czyli wybieram image and gradient.

9:32Jeśli chodzi o background następnie choose image

9:35dodaje nowy obrazek w plikach źródłowych mam coś takiego jak mail icon SVG.

9:40W ten sposób usuwamy powielanie umieścimy go z lewej strony na

9:44środku i teraz dla niego size możemy ustawić na custom cover czy content.

9:51Nie będzie dobrze wyglądało więc wrzucamy sobie custom

9:55i w tym momencie on automatycznie ustawi się na taki rozmiar jaki był za

9:58importowany czyli dokładnie takie jak wpisanie dwadzieścia pięć na siedemnaście.

10:02Więc możemy to zostawić jeżeli chodzi o padding w środku to musimy od lewej krawędzi

10:08odsunąć tekst w taki sposób żeby pozostało miejsce na e-mail ale samo tło sam e-mail

10:13też jak widzisz teraz przylega idealnie do lewej krawędzi tego pola.

10:17W związku z tym musimy jeszcze raz wejść w jego edycję i left.

10:20Ustawić

10:21np. na kilka procent np. na dwa proc.

10:24choć oczywiście możemy to też zrobić w pixelach i ustawić tutaj przykładowo osiem

10:28pikseli i dodatkowo na tekst też ustawić zawsze żebyśmy mieli tutaj

10:35padding taki który nam odsunie to około osiem pikseli więc trzeba było to przeliczyć.

10:41Ale moim zdaniem teraz wygląda to dobrze i mamy też zrobione ten stan hover który

10:45ładnie się to wszystko zapala i pozwala nam wpisać adres e-mail.

10:50Problem powstaje taki że przy wpisywaniu

10:53tego adresu e-mail mamy taki mocny szary tekst.

10:55W związku z tym trzeba tutaj wrócić i sam tekst ustawić też na kolor biały.

11:00Jeśli chodzi o typografie niby wybrane light blue ale upewnijmy się, że zostanie to nadpisane.

11:07I teraz już będziemy mieli jaśniejszy

11:09kolor przy wpisywaniu mamy tutaj kolor biały.

11:12Więc dokładnie tak jak chcieliśmy.

11:14I co jeszcze nam jest potrzebne teraz

11:16musimy po prostu to poukładać wszystko czyli warto by było. Zobaczmy jak wygląda

11:21teraz struktura, a mamy formularz, mamy footer section te dwa elementy oczywiście trzeba

11:26zgrupować w jakimś kontenerze takim technicznym czyli DiV block do którego wrzucimy.

11:32"H" dwa footer heading nie jest łatwe i akapit poniżej.

11:38I obok tego będzie nasz form block.

11:41Dzięki temu możemy całą footer sekcję ustawić jako flex

11:46i teraz upewnić się, że wariant horizontal, a nie vertical jest wybrany zostawiamy tutaj

11:51horizontal ale jeśli chodzi o ten DiV block to damy mu max weight czyli maksymalną szerokość i

11:57będzie to około dwieście pięćdziesiąt pikseli więc dajemy max dwieście pięćdziesiąt pikseli.

12:03Tutaj została stworzona dla niego

12:05dodatkowa klasa czyli może to być nasz footer section

12:12tekst .

12:15Ok i reszta zajmuje całą dostępną

12:18przestrzeń więc można powiedzieć, że jest ok.

12:20Przycisk subscribe nie jest tutaj dobrze

12:23wyrównany więc trzeba go wyrównać do prawej strony.

12:26Jeśli wybierzemy cały formularz.

12:33Jeśli wybierzemy cały formularz i

12:34wyrównamy to do prawej strony to będzie już ok.

12:37No i teraz wygląda na to, że mamy

12:39przynajmniej w tym widoku ułożone dobrze to co należałoby jeszcze zrobić. Naturalnie

12:45na całą footer section dać konkretny padding i zobaczmy ile ten

12:48padding wynosi sto pięć pikseli więc na razie dajmy padding sto pięć pikseli od góry z dołu też

12:54będzie potrzebne ale to zaraz jeszcze zobaczymy.

12:56No a teraz spróbujemy dopracować tę sekcję która jest poniżej na dole ale to już

12:59zrobimy, a w kolejnej akcji do której Cie zapraszam.