Wdrożenie projektu
15 godz. 6 min · UI, UX i Webdesign
Krzysiek PiekarzAutomation Specialist / No-code DeveloperMateriał szkoleniowy został zaprojektowany tak, aby mogło z niego skorzystać jak najszersze grono odbiorców. Nieważne czy jesteś totalnym laikiem, czy też posiadasz już wiedzę z zakresu programowania lub designu, na pewno znajdziesz tu coś dla siebie. A więc kto jeszcze może skorzystać z wiedzy zawartej w tym kursie?
Witam Cię w ostatniej lekcji w tym module
i do wdrożenia pozostała nam już ostatnia sekcja, czyli sekcja z futerkiem,
które jak się domyślasz zdecydowanie powinien być elementem typu Rio Isabel.
O ile ta karta tutaj dla bloga podobnie.
Z resztą ta karta dla listingu
mogłoby Ci się wydawać tak nie do końca potrzebna jako Isabel.
Element to i footer.
Zawsze takimi elementami powinny być. Dlaczego?
Ponieważ one się pojawiają na każdej
stronie, a nie chcemy wprowadzać zmian na każdej z nich.
Gdyby przyszło nam właśnie coś podmienić, np.
gdyby się zmieniło logo naszego serwisu.
Nie chciałbym przechodzić na każdą stronę, gdzie zastosowaliśmy
i to poprawiać ręcznie, ponieważ wystarczy, że zamienimy to na ref element.
Jak już wiesz przejdziemy tylko do jego edycji.
Tam zmienimy np.
logo albo teksty, albo czcionki, kolory, cokolwiek.
I będzie to miało zastosowanie wszędzie
tam, gdzie z takiego elementu korzystaliśmy.
A więc wróćmy do edytora.
Ale zanim to zrobimy, jedna ważna uwaga
tutaj mamy ten container ustawiony na 1200 pikseli.
Dla mnie jest to zdecydowanie za mało.
Chciałbym więc trochę tą wartość zmienić.
A więc Block Container Group.
Ustawmy to na 1400.
Teraz przejdźmy do podglądu.
Odświeżamy.
I ta lista zdecydowanie dużo fajniej się prezentuje.
Dużo więcej elementów na raz nam się pojawia.
I jest dokładnie tak, jak chciałem.
Wracamy więc znów do edytora i do tej
pory, aby stworzyć Jeruzalem Element, najpierw projektowaliśmy go sobie tutaj,
a następnie przechodziliśmy do Edit i Convert Isabell Element.
Natomiast mówiłem Ci, że taki
element to tak naprawdę całkiem osobna strona w naszym serwisie.
Możemy właśnie do niego przejść tutaj.
A więc oznacza to, że możemy go stworzyć np.
właśnie z tego miejsca.
I właśnie w ten sposób zaprojektujemy sobie teraz nasz footer.
A więc klikamy Add New Rebel Element.
Będzie to po prostu footer.
Możemy go sklonować z jakiegoś istniejącego.
Ta opcja jest niepotrzebna.
Klikamy Create.
Jak widzisz naszemu oczom ukaże się tak naprawdę zwykła strona, z jaką normalnie
pracujemy, a więc musimy tutaj nadać odpowiednie właściwości.
W moim przypadku będzie to row.
Standardowy szerokość, czyli 1440 pikseli.
Dodajmy tu minimalną wysokość.
Może zostawmy ją na razie na 200.
Ona i tak się będzie dostosowywać do tego, co nam wskoczy do środka.
To, co chcę tylko zmienić, to, a nawet od razu nam to wskoczyło.
Czyli background style dla całej tej
strony na fasadzie tego rozwalonego elementu.
Ustawione na kolor biały.
Zmienimy to tylko na primary contrast
biały, żeby to pochodziło z zmiennej kolorystycznej.
I przystąpimy teraz do działania.
A więc standardowo dodajemy container
w środku i my tylko jeszcze elementy w środku tego futra.
I teraz.
Przystępujemy do pracy, czyli footer.
Container Group.
Typ kolumn.
Maksymalna szerokość 1200 pikseli.
Minimalnej nie potrzebujemy.
I możemy zacząć dodawać kolejne elementy,
ale najpierw odpowiednio padding, czyli 96, 96, 32, 32.
Tutaj bez zmian zawsze stosujemy te same wartości.
To co chcę tutaj teraz dodać to tak najpierw grupa.
I będzie to po prostu footer top.
Layout. W tym przypadku chcę ustawić na.
Row.
I odsunąć te elementy od siebie.
Zaraz sprawdzę.
Tym wzorcowym? Nie.
Nie. Zostawiamy taki układ.
Jedyne co chcę zrobić, to tutaj dodać raw gap Równe.
24 piksele.
A więc ta opcja tutaj odznaczamy ten checkbox.
Pozbywamy się minimalnej szerokości i dla
całego Future Container możemy też się pozbyć minimalnej wysokości.
Teraz będziemy potrzebować logo po lewej
stronie, a więc możemy sobie wrócić do strony index owej.
I zaznaczyć tutaj całą tą grupę gdzie mamy logo.
I skopiować. Czyli jest to grupa na logo wrapper Group.
Kopiuje.
Przechodzę do komputera.
Kolejno do footer Top group wklejam.
Jedyne co chcę zrobić to pozbyć się tej minimalnej wysokości.
Niech to mi się dostosuje do elementu w środku.
Kolejno chcę tutaj dodać drugą grupę.
To będzie.
Fotele.
Links.
Grób.
Layout ustawiony na RAW.
Znów pozbawiamy się tej minimalnej szerokości.
I przesuwamy tą grupę do prawej strony.
Kolejno dodajemy tutaj następną grupę.
I będzie to footer.
Link.
On Group.
Tym razem chcę ustawić tutaj.
Layout kolumn.
Dodać Cap Space Ink równy 12 pikseli.
I zacząć wstawiać teksty.
Dodaję pierwszy tekst.
Będzie to w naszym przypadku pod MD 700.
Text to about.
Standardowo musimy się oczywiście dodajemy i pozbywamy się.
Minimalnej szerokości.
Wybieramy fit fit content,
pozbawiamy się minimalnej wysokości i teraz dodajemy kolejno linki.
A więc link.
Mamy tutaj link menu Jak on się tutaj prezentuje?
W ten sposób nie możemy odpiąć ten stary i dodać nowe.
I będzie to tak 14 pikseli.
Grubość 500.
Kolor Neutral 600.
To co chcę dodać tutaj jeszcze, to oczywiście.
Tranzystor.
Mamy tutaj font color, więc nie musimy się o to martwić.
To co będę chciał zrobić?
OK, mamy tutaj nawet odpowiednie style, to możemy pozostawić dla condition, ale.
I zmienić tutaj tą opcję i nazwijmy to po prostu jako nowy styl Create link.
Tekst.
I wstaw odpowiednią wartość.
To będzie Company.
Mogę teraz powielić jeszcze dwa razy.
Kolejna wartość to.
Haute Works.
A trzecia to po prostu kontakt.
I teraz tak dla całej tej grupy footer
Links und group ustala minimalną szerokość równą 180 pikseli.
Odznaczamy tą opcję to ustawiam 180 pikseli.
Oczywiście oznaczamy minimal hide.
I teraz całą tą grupę powielam jeszcze dwa razy.
Mogę przejść teraz do tego elementu rodzica.
Tu się pozbyć minimalnej wysokości.
Na całej footer top też się pozbywamy minimalnej wysokości.
Czy mamy tutaj jeszcze jakiś element, który nam nadaje minimalną wysokość?
Nie.
A jak widzisz, to już odpowiednio się tutaj zaktualizowano.
I to co muszę zrobić tylko teraz, to podmienić te wartości tekstowe.
A więc daj mi chwilę, żebym to szybko zrobił.
Na szczęście tych tekstów nie ma tutaj za dużo.
Muszę powielić ten link.
I wstawić tutaj wartość LP Center. OK.
Widzę, że tutaj mam te minimalne wartości.
OK, pozbądźmy się ich, czyli zróbmy porządek.
I to samo zróbmy dla pozostałych elementów.
I jeszcze oczywiście tutaj.
Nie zadbaliśmy o to wcześniej, więc niestety czeka nas trochę ręcznej pracy.
Ale to nic.
Tego się pozbywamy i wstawiamy odpowiednie wartości.
OK. Ta część jest gotowa.
Sprawdźmy, jak to się będzie w ogóle prezentowała.
Nie możemy podejrzeć samego BIOSa, bo element Musimy go zastosować najpierw
na stronie, żeby w ogóle sprawdzić jaką prezentuje.
A więc wróćmy do strony index owej.
Przejdźmy tutaj i ustawmy footer narazie tu na samą górę.
Skoczył do nas w parach wyciągnąć.
I umieścić go.
Na samym dole.
Czyli mamy najpierw potępić wrapper, a potem footer na samym dole.
Page Index.
OK, mamy RODO, więc dlatego musimy to zmienić na kolumn.
OK, teraz już jest wszystko tak jak trzeba.
Oczywiście jeszcze tylko przetestujemy tę grupę.
I teraz futro rzeczywiście jest na samym dole.
Możemy przejść do podglądu, odświeżyć.
I ten fotel rzeczywiście nam wskoczył, ale mamy tutaj mega duży odstęp.
Dlaczego?
Dlatego, że jak pamiętasz ustawiliśmy tutaj minimalną wysokość.
Pozbądźmy się jej.
I teraz już wszystko powinno działać tak jak trzeba.
OK. Footer nam tu odpowiednio wskoczył.
Mamy tu wszystkie linki.
Musimy zadbać jeszcze o dodanie DVD i linków do naszych social media.
A więc wracamy do edytora.
Przechodzimy tutaj.
Edit element i oczywiście chcę dodać tutaj Shape.
Pozbywamy się minimalnej szerokości wysokości oczywiście na 1.
Nazwa zmieniona na Divided.
I kolor to oczywiście nasz kolor Neutral 300.
A całego kontenera będę chciał ustawić odpowiednie odstępy, czyli.
Tutaj rogacz.
Ustawiony na 32 piksele.
Kolejna przesunąć ten divide na koniec.
I dodać tutaj kolejną grupę.
Będzie to po prostu footer bottom.
Ustawioną na ROW.
W tym przypadku chcę strzelić te elementy, czyli zastosować opcję space between.
Pozbywamy się minimalnej szerokości.
Skopiuję sobie ten tekst.
Ustawmy go tutaj.
Footer bottom group.
Tylko zmieńmy.
Styl na Body XS 12.
I to co chcę zrobić tutaj, to wstawić taką wartość.
Znaczek kopii.
Następnie wybieram sobie tutaj.
Chcę, aby zawsze pokazywał się
rok bieżący, a więc wybieram z tych wszystkich opcji dynamicznych.
Coś, co się nazywa tutaj current dat.
Przepraszam, nie arbiter Current Day Times.
O właśnie to formatem AS.
I teraz mogę powiedzieć co mi się tu wyświetlać.
Jak widzisz mamy tutaj różne opcje tego jaka ta data ma być sformatowana.
Ja wybieram sobie custom i wpisuję tutaj 4 razy Y.
To mi da właśnie sam.
To co chcę zrobić tutaj, to dodać kropkę i dopisać all rights.
I zero.
Kolejno będę chciał tutaj wstawić ikonkę ikonki file.
Nadać jej wymiary.
Sprawdzamy.
W naszym przypadku będzie to 32 na 32 piksele.
W pierwszej kolejności będzie to Facebook Ikon.
Będzie to PHP, Facebook, logo, filmy.
Jak widzisz stosuję tutaj nieco inny pakiet ikon.
Jest solar, ale fosfor po prostu tam jest ta ikonka dużo fajniejsza.
Kolor zmieniamy na.
Secondary 600.
Wartość 50%.
To co chcę jeszcze zrobić to transition ustawić na 300.
I dla conditions ustawić kiedy ta ikonka?
Będzie miała status Howard is Howard
to zmieniamy kolor też na secondary, ale jego wartość na 100%.
Mamy pierwszą ikonkę social i chcę ją tutaj jeszcze powielić dwa razy.
I teraz zgrupować wszystkie te ikonki.
Stawiamy. Ustalamy tym razem row container.
OK, mamy ROF.
Odstęp pomiędzy elementami dajmy tutaj powiedzmy 24 piksele tak mi się wydaje.
Nie, to będzie 32 dla kolumn i 12 dla ROW.
Dostosuj my szerokość tej grupy do contentu w środku, czyli tych ikonek.
I teraz wygląda to już całkiem fajnie.
Jedyne co musimy zrobić to oczywiście nadać jej nazwę.
Futro social z grup.
I mamy ikonkę Facebooka.
Potrzebujemy jeszcze.
Ikonki Instagrama, czyli Instagram.
Icon.
Ikonka o takiej wartości.
I jeszcze ikonka LinkedIn na.
Teraz zaznaczam całą grupę footer bo tam group.
Pozbywam się minimalnej wysokości i przesuwam ją na sam koniec.
Koncentrujemy jeszcze ten tekst.
I teraz przejdźmy do strony index owej.
I do podglądu.
Nasz fotel wygląda dokładnie tak, jak powinien.
Mamy tutaj wszystkie linki.
Mamy informację All rights reserved.
Mamy ikonki.
Czy brakuje nam tutaj coś jeszcze?
Tak brakuje nam tutaj nazwy.
Powinno być kopii 2 x 2024 Stay nest,
a więc możemy to bardzo prosty sposób poprawić.
Edycja elementu.
I tutaj przed kropką po prostu
musimy zaznaczyć ten tekst, trafić w to miejsce i wpisać spacja.
Z tej. Nest.
I to wszystko.
Nie.
Tu jeszcze mamy literówkę. Rights.
O, dokładnie.
I teraz już jest.
Wszystko dokładnie takie, jak być powinno.
Nasz fotel jest gotowy.
Natomiast pozostaje nam jeszcze jedna
rzecz, czyli zamiana naszego na Mariusa Element.
A więc wróćmy do edytora, do strony index owej.
Zaznaczmy całą tą grupę EWG.
Wybierzmy ją tutaj dodatkową grupę.
Czyli.
Aha, nie możemy tego ubrać, bo mamy tutaj Floating group.
Nie ma problemu. To nic.
Wybieramy po prostu edit.
Konwerter Rio Isabel Element.
Będzie to po prostu.
E klikamy Create.
I musimy tutaj jeszcze odpowiednio sobie to poustawiać.
Jak widzisz wyskakiwały nam tutaj elementy fixed.
Tego nie chcemy.
Chcemy mieć tutaj rolę.
1440.
Na 90 pikseli.
I teraz już wszystko powinno być tak jak trzeba.
Natomiast zanim przejdziemy dalej i wykorzystamy ten nowo utworzony
element w naszym projekcie, musimy go jeszcze odpowiednio dopracować.
Przede wszystkim chcę zaznaczyć tą grupę na w Barmani Group i dodać tutaj
odpowiedni automat, bo zapomnieliśmy to zrobić.
I tak w naszym przypadku będzie to 0.
8.
Możemy to wpisać ręcznie.
Tutaj zero.
A to kolor i miarę.
A w zasadzie secondary 600 ustawiony na 5%.
I to wszystko, co musieliśmy zrobić.
Tutaj natomiast mamy tą grupę w Armenii, ale ona nie otwiera nam naszego menu.
Zobacz tutaj jest projekt wzorcowe.
I to po kliknięciu pojawia nam się menu, o
którym zapomnieliśmy, a więc szybko je dodajmy.
Przejdźmy więc do edytora i żeby dodać takie menu musimy zastosować nowy element.
Do tej pory nie korzystaliśmy tzw.
group fokus.
Klikam tutaj, wstawiam gdziekolwiek. I grup.
Fokus działa troszkę podobnie do Floating Group.
Też jest taki wycięty z flow dokumentu.
Natomiast tutaj ustawiamy dla niego element referencyjny.
O ile Floating Group było pozycjonowane względem krawędzi ekranu, tak group fokus
pozycjonujemy względem konkretnego elementu, a takim elementem będzie właśnie
cała ta nasza grupa skopiuje sobie tą nazwę.
I właśnie tutaj musimy ją wstawić.
Jak widzisz, teraz ten element nam się tutaj odpowiednio przesunął.
Jest dopasowany właśnie do tego.
Przylega tutaj właśnie do jego lewej krawędzi.
Teraz oczywiście trzeba to dostosować.
Będzie to.
Em menu GRUB po prostu, a w zasadzie MMI Group fokus czyli GF.
I przejdźmy teraz do ustawień flat color.
Nasz color.
Tutaj Primary contrast.
Zaokrąglanie narożników równe 8 pixeli.
Tutaj jeszcze oczywiście Solid.
Portal Solid.
Nasz standardowy kolor, czyli Neutral 300.
Dodajemy ocet.
Znów będzie to zero.
8.
8.
Secondary 600 ustawione na 5%.
Tutaj będzie to layout typu kolumn.
Odznaczamy tutaj tą wartość.
A w zasadzie w naszym przypadku tym razem będę chciał zastosować stałą szerokość.
A więc wracam do tej opcji.
Będzie to 220 pikseli stałej szerokości oraz GAP ustawiony na 16 pikseli.
I dodajmy tutaj pierwszy link.
Czyli.
To.
Będzie to link menu.
I w tym przypadku.
Jeszcze tutaj zmieńmy to link menu i weźmy sobie EDIT Tyle.
Napiszmy, ze jest to lęk menu.
600.
Wracamy do dizajnu.
Ta grupa nam tu przeskakuje, kiedy
będziemy przeskakiwać między stronami, Ale tym się nie przejmuj.
Ona będzie odpowiednia, potem pozycjonowana.
Żeby to zrobić możemy tutaj zaznaczyć tą
ikonkę Orca, na chwilę ją ukryć i znowu włączyć.
Ja wskoczy tam gdzie powinna.
Do całej tej grupy GF dodajmy jeszcze
padding i równe 16 pikseli z każdej strony.
I teraz tutaj odznaczamy oczywiście te wartości.
Pierwszy link to będzie sign up.
Mogę go sobie zaznaczyć i powielić jeszcze
cztery razy, a w zasadzie raz, ponieważ będę chciał tutaj odpiąć style.
I zebrać tym razem 400 i zapisać to po prostu jako link menu 400.
Tu będzie to login.
I teraz dopiero mogę jeszcze powielić trzy razy 1-2-3.
I powstawać wartości.
To będzie ikona host.
Tutaj ciągle.
Our Community tylko muszę kopiować wartość Join community.
I ostatni to będzie Help Center.
Potrzebuję tutaj jeszcze tylko Divide a, czyli znowu Shape.
Standardowy kolor.
Standardowo zero tutaj jeden piksel tu i chcę go przesunąć.
To miejsce.
Teraz zaznaczyć całą grupę lub fokus i usunąć minimalną wysokość.
Natomiast to, co chcę zrobić, to przesunąć całą tą grupę tak, aby ona tą
krawędzią tutaj przylegała do tej krawędzi.
Jak to zrobić? Mogę przejść do Appearance.
I mamy tutaj offset top i offset left.
A w naszym przypadku.
Te wartości to będzie 16 pikseli od góry, czyli troszkę to odsuwamy.
I tutaj minus 130.
Teraz jest to już niemal odpowiednio wyprodukowane, a w zasadzie nawet nie.
Dlaczego?
Dlatego, że pewnie tutaj nie nadaliśmy minimalnej szerokości.
Ustawmy ją na 70 pikseli.
I teraz powinno to być.
Mamy tutaj 80.
Nic nie było.
A więc tak to jest 80 ma cały nasz ten element.
Cała ta grupa ma 220, a więc 220 minus 80.
Daje nam 140, a więc nie minus 130 tylko minus.
140.
A i teraz jest to odpowiednio
wyprodukowane, a w zasadzie nie wydatkowane, tylko
oczywiście wyrównane do odpowiedniej krawędzi.
Natomiast jeżeli przejdziemy do podglądu,
czyli dodamy ten nasz nowy bar, a więc wracamy do index.
Pozbawiamy się.
Tego elementu i oczywiście dodajemy na.
Tutaj.
Co się tutaj stało.
Zaraz zerkniemy i zobaczymy.
OK, mamy rapera.
On jest tutaj odpowiednio wstawiony.
Przejdźmy do Edit Element. Jak zauważyłeś.
Tym razem nie przekazywałem tutaj żadnego.
Typowy kontent z tego prawa.
Z tego powodu, że jest on tutaj niepotrzebny.
Tu nie mamy żadnych dynamicznych wartości.
Jest to po prostu element, który ma się pojawiać na X naszych stronach.
Dlatego nie musimy tutaj wskazywać żadnego.
Żadnej. Typowy content.
Natomiast to, co musimy pewnie zrobić i zaraz zerkniemy.
To pewnie zamienić to na Floating Group.
Dokładnie.
OK. Cały ten różowy element to nie ma być
grupa tylko floating Grupa Top Left Above Element.
I zerknijmy teraz na index.
Dokładnie już teraz tamto wyskoczyło poprawnie.
Nie mamy tutaj takiego odstępu dziwnego i się wcześniej pojawił.
A było to dlatego, że ustawiliśmy zwykłą
grupę, a dodatkowo mieliśmy jeszcze 90 pikseli odstępu i Babel właśnie
traktował to jako normalne ogłupianie na floating grupę.
Teraz jest to ok.
Przejdźmy do podglądu.
Odświeżamy.
Chodźmy. Musimy wracać.
Mamy nadmiar.
Wszystko działa fajnie, to mogę najechać.
Natomiast nasze menu się nie pojawia.
Dlaczego się nie pojawia? Otóż nie.
Pojawia się dlatego, że musimy je odpowiednio pokazywać po kliknięciu.
Ale to już jest temat, który zostawimy sobie na kolejny moduł.
Porozmawiamy sobie o tym, jak pokazywać różne elementy po kliknięciu np.
w button albo w grupę.
Czyli po prostu czym są workflow Babel.
Ja już Ci dziękuję za uwagę.
Nasza strona główna jest gotowa.
Zasłużyłeś na nagrodę.
Było to bardzo dużo pracy, jak widzisz.
Jak widzisz ten projekt, mimo że wydawał
się dosyć prosty, nie poruszaliśmy tutaj jakoś bardzo
zaawansowanych rzeczy, to i tak zajął nam bardzo dużo czasu.
I niestety tak to właśnie wygląda w Babel.
Mimo, że jest to nauką, to i mimo, że jest to dużo szybciej niż byśmy tego dawali,
to i tak dodawanie tego właśnie sekcja po sekcji musi trochę zająć.
Mam nadzieję, że na ten moment już będziesz sobie w stanie poradzić z dowolną
stroną startową, jaką Ci przyjdzie zbudować.
A my widzimy się już kolejne module.