Strony WWW z SystemFlow: Wdrożenie w Webflow
Framework dla Webflow
4 godz. 22 min · Webflow · UI, UX i Webdesign
Grzegorz RógIdea ArchitectCzego się nauczysz
- Omówienie dokumentacji SystemFlow
- Praktyczny Case Study - Tworzenie strony
- Praca z UI Kitem w Figma
- Live Componenty
- Korzystanie z klas i tokenów
- I wiele więcej!
Tworzenie prostych stron i Landing Page'y
Duża część naszej pracy sprowadza się do projektowania prostych stron - wydarzeń, małych sklepów, ofert, landing page'y. SystemFlow znacznie upraszcza i przyspiesza naszą pracę w tym zakresie, oferując szereg gotowych komponentów, sekcji i template'ów, które możesz wykorzystać do poskładania takiej strony w kilka minut.
Od Figmy do Webflow
SystemFlow jest w całości zmapowany na Figmę, co znaczy, że otrzymujesz kompletny UI Kit dla Figmy, z pomocą którego możesz projektować. Następnie, stworzone w ten sposób projekty w prosty sposób przeniesiesz do Webflow, korzystając z tych samych nazw komponentów, tworząc z tego gotowy, działający projekt strony.
Design Tokeny - Kolory, Fonty, Spacing
W SystemFlow masz możliwość zdefiniowania własnej stylistyki całego systemu - globalne zmiany do typografii oraz swatchy kolorystycznych sprawią, że fonty i kolory zmienią się na przestrzeni całego Twojego projektu! W ten sposób łatwo przygotujesz strony, które stylistycznie znacznie odbiegają od pierwotnej koncepcji framework'u i są dopasowane do identyfikacji Twojego klienta.
Żyjący Design System
Plik Webflow, na którym pracujesz z Frameworkiem, zawiera pełną dokumentację, która zmienia się na żywo, w trakcie projektowania. Oznacza to, że po publikacji samej strony w Webflow, otrzymujesz kompletną referencję z design tokenami, wyglądem formularzy, przycisków, komponentów i innych elementów, którą możesz przekazać klientowi. Przykład dokumentacji wygląda tak: https://systemflow-v-1-1-51e1ee81-49590199e0f65.webflow.io/style-guide/about/overview
Pracuj Sprytniej
SystemFlow powstał w jednym celu - aby pomóc nam tworzyć projekty dla siebie i naszych klientów znacznie szybciej, wydajniej, w sposób zorganizowany. Ponadto, aby wykorzystać Webflow jako najlepszy edytor, dający nam łatwy dostęp do zmian w ramach uporządkowanej struktury, obsługę CMS, E-Commerce, a klientowi możliwość edycji elementów strony z przeglądarki. Z drugiej strony, wykorzystaliśmy Figmę czyli najlepsze narzędzie do projektowania UI z masą dodatków i pluginów, które usprawnią Twoją pracę!
Dla kogo jest ten kurs?
Ten kurs przygotowany jest z myślą o osobach, które w swoich firmach tworzą wiele stron, na przykład marketingowych i chcą czy to do tworzenia finalnych stron czy prototypów, wykorzystać Webflow i ewentualnie Figmę. Kurs nadaje się też doskonale dla Freelancerów którzy oferują swoje usługi tworzenia stron w Webflow, a także agencji kreatywnych, które mogą znacznie przyspieszyć swoją pracę dzięki SystemFlow!
SystemFlow 1.0+
Cześć, Witaj w kolejnej lekcji, w której
rozpoczynamy pracę tworzenia gotowej strony web.
Mamy już layout w firmie.
Teraz chcemy ten layout jeden do jednego przenieść na działającą stronę w Web Flow.
Pokażę Ci krok po kroku jak to robić.
W jednej z poprzednich lekcji już pokazywałem jak przenosić poszczególne
elementy, ale tutaj zrobimy wolniejszy proces od A do Z.
Przeniesiemy wszystko tak, jak ja bym to robił.
To jest dosyć prosta strona, ponieważ jest
to tylko jeden taki single page i rzeczywiście te komponenty nie aż tak
bardzo się różnią od naszych komponentów system flow.
No ale tak czy inaczej postaramy się wykonać wszystkie operacje, które są
potrzebne do tego, żeby odzyskać ten sam efekt Web Flow.
Ja tworzę sobie kopię frameworku.
Czyli koniecznie pamiętaj, żeby zduplikowane Najpierw framework.
System Flow zanim zaczniesz pracować na takiej czystej kopii, żeby mieć oczywiście
czystą wersję System flow do kolejnych projektów.
Więc na kopi System flow przechodzę do tej podstrony home.
Z niej usunąłem niepotrzebne rzeczy i
teraz mogę ustawić się na body po to, żeby dodawać komponenty.
Mamy tutaj listę komponentów.
Firma układa je od dołu do góry, czyli to
co jest tutaj na górze będzie w firmie na dole mamy na Bar Lite 1.
Ponieważ struktura nazwy jest taka sama w
web i firmie, wystarczy, że dwa razy na to klikniemy Command C czyli kopiujemy i
tutaj Command Web flow wyszukiwarka wklejamy do niej to co mamy w schowku i
wciskamy return enter po to żeby wstawić taki na bar.
I w ten właśnie prosty sposób będziemy lecieli po kolejnych komponentach, czyli
za każdym razem kopiowali nazwę, która znajduje się w firmie.
Następnie wklejam ją tutaj do okna
wyszukiwarki Web Flow i uzyskiwali odpowiedni komponent.
Tutaj mamy ficzer Left 3.
Ja pamiętam, że ja ten komponent Left 3 pomyliłem dwa razy, dlatego on ma nazwę 4
i 5, ale tak naprawdę to powinien być ten komponent ficzer left i ficzer right.
Zatem teraz zamiast feature left
wyszukujemy sobie feature right 3 i mamy go.
To jest odpowiedni kolejny symbol.
Kolejnym symbolem będzie feature left 3 i mamy już odtworzone te 3 elementy.
Lecimy dalej. Kolejny to jest trzy kolumny Grid,
Vertical Command F Web Flow wklejamy i kolejny komponent Mamy już na scenie.
Teraz testy, ale będziemy je musieli trochę przerobić w stosunku do wersji
oryginalnej, ale dalej bazujemy na tym podstawowym komponencie.
Następne jest pricing, sekcja z pressingiem i zbliżamy się do końca.
Została nam jeszcze FX oraz footer effect 2 kolumnowy.
Zwróć uwagę na to, że warto zachować te same nazwy.
Po prostu nie zmieniać nazw komponentów tutaj, dlatego, że później łatwo nam jest
namierzyć te same komponenty w system flow.
I tym sposobem właśnie odtworzyłem całą strukturę strony w system Flow.
Teraz wciskamy kombinację klawiszy Command
Shift, a po to, żeby odłączyć te komponenty.
Alternatywą jest prawy przycisk i amp link
instancji i robimy to na każdym komponencie tutaj, czyli Command Shift.
Na efekt upewniam się, że jest zaznaczone,
następnie Command shift, a na briefingu testy.
Ale idę sobie po prostu po tej liście i korzystam ze skrótu Command Shift a po
to żeby wszystko wyciągnąć z tych komponentów.
Będzie mi łatwiej to edytować bezpośrednio na scenie.
Custom kod oczywiście zostawiam, musi być
na każdej stronie i najlepiej jakby był na górze, czyli pod samym body.
I zaczynamy po kolei od naw bara.
W przypadku naw bara warto by było uzupełnić treści.
Będziemy potrzebowali tutaj tę drobną.
Jest niepotrzebne, więc możemy go usunąć.
Będziemy potrzebowali zakładkę Features.
Następnie będzie zakładka FX.
Zaznaczmy sobie całość i kontakt zmienimy na pricing.
Kolejny mamy przycisk na przycisku jest treść Get Free Demo.
Możemy to zrobić bezpośrednio w Override, czyli musimy wchodzić do tego symbolu i
możemy w override nadpisać ten button tekst na Get Free Demo.
Natomiast sam przycisk powinien wyglądać inaczej.
To jest nasz button medium primary
i możemy teraz zająć się po kolei, skoro lecimy edycją tego przycisku.
Przejdźmy do Buttons, czyli do sekcji, w której znajdują się komponenty.
Tutaj znajduje się Buttons
i w ramach tej strony będziemy mogli wyedytować ten nasz podstawowy przycisk.
Natomiast sekcja z edycją znajduje się w Custom, czyli przejdźmy na dół do Custom.
A w ogóle, żeby łatwiej mi się przyglądało
te sekcje, to jeszcze na chwilę wejdę do strony custom site I tutaj na dole mam coś
takiego jak dokumentacja, czyli ukryte station file.
I teraz jeśli wejdę na stronę Buttons.
Mam tutaj fajny, czysty interfejs i mogę zjechać na sam dół.
Uwaga nie edytujemy tych elementów tutaj, tylko zjeżdżamy na sam dół.
Tutaj znajdują się sekcje Custom size.
W tej sekcji Custom mamy edycję padding tekst size border radius.
W tej części tutaj mamy kolory i stany, więc przechodzimy do tego buttona, a
następnie zmieniamy dla niego border radius.
Tutaj jest ta właściwość ustawiamy border
radius na 4 i tak samo robimy dla batona small.
OK i przechodzimy teraz do stanu, ponieważ
potrzebujemy zaokrąglenie także po najechaniu.
Więc wybierzmy button medium i przejdźmy do hover state.
I tutaj upewnijmy się, że radius jest na 4.
Co prawda wypluł nam.
Nie wiem czy to pokazuje dobrze, ale
zobaczmy w podglądzie i wygląda na to, że jest jak najbardziej ok.
Czyli mamy zaokrąglone krawędzie.
W sumie jak już tu jesteśmy, wszystkie nasze buttony mają być zaokrąglone, więc
te batony typu fluid też od razu przerobimy na 4 piksele zaokrąglenia.
Zarówno ten podstawowy, jak i ten kolejny.
OK, one już mają 4 piksele, więc wszystkie guziki mamy teraz zaokrąglone.
Kolorów tutaj nie edytujemy, Kolory edytujemy na stronie głównej.
Tymczasem na razie border radius udało nam się skutecznie wyedytować.
No i będziemy chcieli zmienić teraz może ten główny kolor.
Jak zerknęła Sigmę to tutaj w betonie mamy
podpięty Power Primer 60, który wybieramy teraz dla niego edycję i kopiujemy tą
wartość szesnastkowym czyli przenosimy na bieżąco kolor primer 60.
Musimy zaznaczyć sobie coś co jest tym kolorem zrobione np.
tutaj.
Ten złoty pozwala nam łatwo go wybrać, wkleić.
Przy edycji musimy kliknąć edit, wkleić tą wartość.
Jest nas ok. Teraz enter zatwierdzamy
i się ładnie nam kolor zmienił, ale my jeszcze musimy zapisać ten primary six.
Możemy naturalnie zrobić to samo w sekcji
kolor i tutaj wyedytować sobie te kolory hurtowo.
Moglibyśmy zrobić to tak, że przeniesiemy
z tej sekcji kolor, którą tutaj mamy w firmie.
Ten nasz cały złoty wiek.
Sortujemy go.
Napisałem ten plik na pulpicie jako plik png i teraz wybieram Replace Image.
Tutaj wgrywam plik ze zboczami okey i
zobaczmy, które kolory musimy głównie zmienić.
Wydaje mi się, że tylko dwa kolory są
tutaj zmienione, więc na pewno ten kolor secondary.
Więc zamiast robić to w layoucie możemy
przejść po tych kolorach Ładnie tutaj w zakładce kolor.
Jeśli zwłaszcza jest więcej zmian i chcemy to zrobić za jednym razem.
W naszym przypadku tylko dwa chyba są zmienione.
Ten wygląda na to, że też jest zmienione,
więc zaznaczamy po lewej stronie w kolor odpowiedni kolor złoty.
Teraz wybieramy jego edycję, następnie
PR i pobieramy ten sam kolor Sigmy z tego z pliku, który wkleić w filmie.
I ten kolor Primary 10 też na pewno jest do zmiany.
Zaznaczamy w związku z tym ten primary.
Pamiętamy, żeby wybrać edycję Smocza.
Następnie kolejno wskazujemy ten kolor, który zmieniliśmy w firmie.
Zapisujemy te zmiany save i mamy w zasadzie wszystkie kolory zrobione.
Wracamy na stronę główną i wygląda na to,
że ten kolor nam się ładnie ustawił na większości elementów.
Teraz jeszcze będąc tutaj mamy brand logo jako element bara.
Jest to zagnieżdżone symbol wcześniej był, teraz już jest pojedynczy symbol.
My będziemy chcieli go wyedytować, ale chcemy wyedytować ten master symbol, czyli
wchodzimy do środka tutaj właśnie jako master podmienić to logo.
W jego ustawieniach wybieramy Override Image i tutaj chcemy wstawić obrazek z
naszym custom owym logo, które trzeba wyeksportować z firmę Na stronie home
zaznaczam po prostu ten element, a następnie eksportuje go.
Jeśli mogę wyeksportować to jako plik
wektorowy, czyli to robię, to wszystko będę wrzucał do jednego katalogu.
Wybieram polecenie save i teraz chcemy podmienić ten obrazek z image.
Następnie wgrywamy go.
OK, został podmieniony.
Przejdźmy jeszcze do styli i tutaj mamy hit 1 i 5 rema.
Możemy powiększyć ten obrazek wybierając tutaj 2 albo np.
2.
Kropka 1 jeszcze większy i wracamy do tej instancji.
Jako, że mieliśmy brand logo jako symbol, czyli obrazek wewnątrz symbolu, to
wszędzie gdzie ten symbol jest, czyli we wszystkich w barach, w naszym system Flow.
Teraz jest to odpowiednie logo.
To prawie wszystko jeśli chodzi o nasz bar, ale chciałbym jeszcze go zablokować,
więc zmieniam jego pozycję z relative na pozycję fixed i zablokujemy go na górze.
Czyli wybieramy tą opcję. Jest w porządku.
W zasadzie gdybyśmy wybrali styki wydaje mi się, że mielibyśmy tutaj.
No właśnie odsunięto ten górny margines, więc taki będzie lepszą opcją.
000 tutaj z prawej strony u góry i z lewej strony.
I teraz już fajnie to wygląda.
Przykrywa nam ten na stronę, ale oprócz tego w designie mam jeszcze na tym barze
delikatny border na dole, więc ustalmy sobie tutaj border w kolorze
chyba 30 na 30, jedno pixel owe solid i wtedy będzie się.
Zerknijmy na to w podglądzie.
Będzie się fajnie odcinał, bo właśnie tutaj od pozostałych elementów strony mamy
białe z białym, więc fajnie takie odcięcie zrobić.
A on jest taki i ładnie nam się wyświetla teraz, w momencie gdy spróbujemy.
Teraz przejdźmy do kolejnego komponentu.
Mamy tą sekcję Hero Hero u sekcji i przede wszystkim trzeba zadbać o odpowiednie tło.
Tutaj jest ustawione Linear gradient.
Chcemy go usunąć i chcemy jak.
Background color ustawić nasz kolor primary 60 Primary cx.
Oprócz tego będziemy musieli zmienić
kolory nagłówków i te guziki, które tutaj się znajdują.
Ale to jeszcze zróbmy za chwilę, ponieważ
jeśli jesteśmy przy typografii, to trzeba by było ustawić też globalną typografię.
Wracamy więc na chwilę do firmy i firmy.
Korzystaliśmy z konta systemowego dla
Windowsa, czyli Go I Way i mamy te jego właściwości dla nagłówków.
Natomiast chciałbym zrobić tak w tym projekcie, że rzeczywiście będzie to font
systemowy, czyli font, który będzie na Windowsie, a na Maku będzie herbatką.
I w tym przypadku, gdybym chciał ustawić
globalnie taki font systemowe wybieram body.
Następnie w Body ol pages ustawiam sobie
te właściwości i tego podstawowego fontu muszę zmienić go z Inter.
Jest tu coś takiego jak System Guide.
Będę chciał skorzystać z systemu
gdzie mieli ładną herbatkę na Maku, a na Windowsie będzie ten font.
Ponieważ jego licencja nie pozwala na osadzenie tego funta na stronie, to w ten
sposób będziemy mogli rozwiązać ten problem.
No i jeśli chodzi o podstawowe ustawienia mamy tutaj fonts 1 ram i limit 1 i 5.
Zobaczmy jak to wygląda w przypadku
podstawowego stylu dla tekstów w filmie jest to body text medium regular.
Możemy też przejść do pluginów i znaleźć tutaj batch Steinera,
skorzystać z trailera po to, żeby sprawdzić sobie szybko body text regular.
Mamy 16 24 limit 16 to jest rzeczywiście jeden RAM dla nas, a 24 limit.
Przenieśmy się do strony Pixel, które ma
kalkulator i jeśli chodzi o wielkość 24 jest to 1 x5 rema.
W związku z tym te wartości są w porządku i zostawiamy je.
Jeśli chodzi o nagłówek pierwszy, czyli Head Quorn.
Znów sprawdzamy go najpierw tutaj.
To będzie nagłówek Head XL 38 44.
My znowu do kalkulatora.
No i tutaj najpierw musimy wyliczyć ile to jest 38 38 to będzie 2, 3, 7, 5 rema.
Czyli dokładnie jak tak jak tutaj mamy 2 3, 7, 5 rama, natomiast line height.
Sprawdźmy 44 i w przypadku 44 to zobaczmy ile to jest RAWów.
44 to 2 75.
Możemy to nawet skopiować i możemy to wkleić tutaj.
26 od 5 rema Chcemy się upewnić, żeby jednostki zmienić tutaj na REM.
Jeśli chcemy w ten sposób odnieść się do tego hitu i zrobiliśmy tu
odpowiedni już nagłówek, a jeszcze musimy teraz zmienić jego tekst.
Kolor, czyli dla Digi XL.
W zasadzie tylko dla tego konkretnego holdingu.
Chcemy to zmienić.
No bo zastanówmy się, czy mamy tutaj jeszcze jakieś nagłówki?
Tak, one są tutaj, tutaj i wszędzie są jasne, wszędzie są białe.
Czy to są nagłówki typu H1?
Nie, to są nagłówki large, czyli tylko jedna H1 ka się tutaj znajduje.
Ale okej, możemy zmienić ją tak, aby było.
Wszystkie jedynki, czyli wszystkie te XL były jednak białym kolorem.
Czyli w typografii wybieramy kolor i wybieramy nasz kolor.
Jutro 10. Tutaj już jestem.
To teraz przekleić treść odpowiednią, którą chciałbym tutaj wstawić.
No i kolejne body text.
Zmienimy jego właściwość koloru na też ten
kolor jutra 10 i dorzucimy tutaj wrzucimy kawałek tekstu, który mam przygotowane.
Dodatkowo ten kawałek tekstu będzie zawierał link i zróbmy z tego link.
Teraz jak widzisz link pokolorowany nam się od razu w odpowiedni sposób, a my
chcemy zmienić te właściwości dla linku, czyli wszystkie linki będziemy chcieli.
Zobaczmy z czego dziedziczy się ten styl Holdings.
My wszystkie linki będziemy chcieli zaznaczyć.
Teraz dla linków zrobimy kolor nie primary
system, a secondary system w ten sposób i teraz jest ok.
Dodatkowo jeszcze Mam talent, który mi
zginął i też chciałem żeby był sformatowany tym kolorem secondary sekcji.
OK, to teraz zobaczmy jak wyglądają guziki.
Mamy tutaj guzik z ikoną i po prawej stronie guzik typu ghost.
Przejdźmy więc do tego rapera.
Dodajmy do niego baton Outline.
To jest medium i potrzebujemy z ikoną, czyli baza miliona ikon.
Z lewej strony jest ikona.
Dobra, teraz jeszcze zmieńmy tę ikonę na
Down LOT z tego co kojarzę i w zasadzie ten button text.
Możemy też od razu zmienić plik demo. OK.
Kolejny przycisk, którego będziemy potrzebować to jest Ghost.
Baton Medium Ghost tylko tekstowy.
Czyli dokładnie ten.
I możemy te dwa pozostałe przyciski, które już są nam niepotrzebne, wyrzucić baton,
separator wrzucić pomiędzy nasze przyciski.
Teraz jeszcze zmienimy tekst na tym przycisku.
W zasadzie możemy to zrobić Override spokojnie na WP Rising.
I możemy jeszcze zadbać, żeby te przyciski.
Dlaczego ten jest odrobinę niżej niesamowity.
Zobaczmy jego style.
Nie ma tutaj żadnych dodatkowych zabiegów.
Ustawmy może to na Flex Box i powinno być ok.
Jeszcze na rowerze ten element.
Ten przycisk na hover ma niebieski tekst, więc przejdźmy do jego stanu hover.
Tutaj to edytuje cały ten button ghost,
cały ten symbol i spróbujmy się dobrać do koloru tekstu.
Tutaj jest niebieski, zmienimy go na kolor biały i teraz już powinno być ok.
Czyli mamy po najechaniu.
Nie mamy żadnej żadnej tutaj zmiany.
Zobaczmy jak to wygląda.
Jest w porządku.
Natomiast outline się robi niebieski.
Fajnie by było gdyby było różowe.
Więc jeszcze raz wejdźmy do tego stanu
i tutaj sprawdźmy ten border w trybie gdzie jesteśmy na rowerze.
Tutaj mamy jakieś box shadow dodawany i to prawdopodobnie jest ten efekt.
Chcemy go zmienić na
nasz kolor SA Canary Fixed i zobaczmy teraz jak to będzie wyglądało.
No i teraz jest ok.
Wygląda więc na to, że przyszedł czas na
podmianę grafiki i możemy zająć się też od razu tymi ikonami i wszystkimi poniżej.
Raczej dobrą praktyką jest to, żeby wszystkie grafiki sobie hurtowo
wyeksportować, czyli zaznaczamy jakąś grafikę.
Ja te grafiki wyrzucam po prostu do lewej strony.
Przebyliśmy się tutaj.
I staram się je.
No właśnie tutaj trzeba będzie z komentarzem kliknąć, zaznaczyć sobie np.
ten icon holder i wyciągnąć w ten sposób wszystkie te ikony tylko trzeba.
Zaznaczyć dobre elementy Contract holder i mamy tutaj ikonki.
Poniżej też będziemy mieli jeszcze te grafiki.
Zaraz je stąd wyciągnę.
Moglibyśmy jakoś to po rozkładać wszystko raz zgrupować.
Wtedy byłoby nam może trochę łatwiej.
A wydaje mi się, że to teraz też nie jest źle.
A zostawiamy tę strukturę, którą chcieliśmy.
M&M Klikam ewentualnie na to, żeby te grafiki stąd zaznaczyć.
Tutaj są kolejne prace, foldery, które będę potrzebował
i te grafiki, które możemy wyeksportować jako grafiki wektorowe.
Oczywiście eksportujemy.
W naszym przypadku będą to praktycznie wszystkie grafiki.
Tutaj też mamy grupę z gwiazdkami.
Na razie eksportujemy jako grafikę.
Zobaczymy jak później zmienimy zdanie.
To jest zwykła ikona, więc nie eksportujemy zwykłych ikon.
No i to wszystko.
Nawet nie mamy tego logo odmienionego.
Trzeba było może zrobić alternatywną
wersję logo i zobaczmy teraz, jakie mamy grafiki.
Tutaj mamy tyle grafik i które z nich to wektory?
Wszystkie te wektory, a ta będzie bitmapy.
Więc tą eksportujemy jako plik PNG.
Możemy zrobić to w skali 2 razy, jeśli chcemy mieć dobrą jakość.
Wybieram eksport Small,
eksportujemy to tutaj, a resztę grafik eksportujemy jako pliki v g.
Mając to wyeksportowane wracamy do Web Flow.
Przechodzimy do assetów.
Najpierw importujemy sobie wszystkie grafiki, czyli te z tego folderu.
Zaznaczamy w zasadzie wszystko.
I tutaj jeszcze mamy assets, czyli zobaczmy napad na bar.
Było tylko logo.
Więc tak to wygląda.
Fajnie by było może mieć jakieś sensowne nazwy dla tych ikonek.
Gdybyśmy mieli sensowne nazwy warstw to oczywiście by tutaj się znalazły.
W tym przypadku już nie będę ich
poprawiał, ale polecam rzeczywiście zrobić jakieś bardziej intuicyjne te nazwy.
Później jeszcze i takie opiszemy trochę inaczej.
Natomiast teraz możemy po prostu Replace Image zastąpić sobie obrazek.
Tutaj akurat mamy to wideo, ale poza tym,
że zastąpimy obrazek, patrzymy też na jego funkcję.
Czyli w tym kroku wypadałoby umieścić tutaj np.
jakiś lightbox, który by odtwarzał nam wideo.
Tutaj mamy lightbox
i wstawię sobie ten lightbox, a następnie dopiero do niego wstawię ten obrazek.
I ten stary obrazek z boxa usuniemy.
No i teraz będziemy mogli w tym lightbox
uruchomić taki modal video więc to jest ok.
Jeśli chodzi o ten mecz.
Może wygenerujemy go po prostu.
A sam lightbox?
Przejdźmy do jego właściwości.
Upewnijmy się, że jest też wyśrodkować to video w tym boksie.
Ewentualnie do samego image możemy dodać jakiś delikatny efekt typu shadow.
Wybierzmy box shadow i np.
zróbmy 10 20 i Sith zostawimy na 0, ale ten kolor czarny.
Oczywiście mocno zdejmiemy ten cień.
Myślę, że teraz wygląda całkiem fajnie.
Podejdziemy to jest okej.
Teraz kolejne elementy kolejnej ikony.
Znów prosta rzecz można je podmieniać.
Po prostu wybieramy sobie ten ficzer ikon, ficzer ikony.
Raper powinien nam przyjąć idealnie te ikonki, które chcemy.
Materia ikon Tutaj jest ta ikona w środku.
Będziemy musieli się jej pozbyć, bo w tym
przypadku nie korzystamy z Ikon Material, tylko z naszych custom owych ikon.
W związku z tym w taki ficzer ikon po prostu chcemy wstawić obrazek.
Wybierzmy w środku image.
W ten sposób zmodyfikujemy ten cały ficzer ikon wrapper komponent.
Ale to o to nam chodzi.
I tutaj możemy wybrać poszczególne ikonki.
Czy zaczniemy od tej ikony?
Co więcej, modyfikując taki
ficzer icon ripper możemy sobie teraz ustawić, że ten nowo wstawiony miecz
będzie override, czyli stworzymy nowe override filter typu Image.
Nazwiemy to Image Client Link i teraz będziemy mogli na
każdym kolejny każdej kolejnej instancji podmieniać sobie po prostu to z pomocą
Replace Ikon i wstawiać tutaj kolejne wersje ikon.
To będzie dużo prostsze, a więc w ten sposób jakby ulepszamy framework.
Można powiedzieć, że dostosowujemy go trochę do naszych potrzeb, dlatego, że
wygodnie nam się z niego będzie korzystało.
Jeśli np. nie chcemy tych ikon material, to
wygodniej nam się będzie korzystało z niego, jeśli dodamy to nowe pole override.
Wiedząc jak to działa można bardzo łatwo.
Teraz te ikony wszystkie po podmieniać.
No i została nam podmiana tekstów treści.
Te treści też mam przygotowane.
Tak jak wspomniałem chciałbym żeby to video było kompletne, więc po prostu
podmienię sobie teraz te treści, ale też zadbam o to, żeby przy okazji podmieniając
te treści upewnić się, że fonty typografia jest tutaj spójna z projektem, czyli
przykładowo head typu trzeciego Też upewniam się, że jest dobrze zrobione,
konsultuję to z designem i jeśli trzeba to zmieniam jego właściwości.
W tym przypadku jest to Healing S i
chciałbym zmienić jego white na 6 type semi bold.
Mam tutaj otwartą firmę z prawej strony
jeśli chodzi o jego rozmiar oraz line height.
Również chciałbym to odrobinę zmodyfikować.
Będzie to 1 4 rema, a line height ustalimy sobie na 1 rema już.
Jak to robić? I jak to wyliczyć?
Z pomocą magii kina przykleiłem tutaj teksty.
To było samo kopiowanie i wklejanie, więc
Ci już tego oszczędziłem, a my możemy zająć się teraz kolejnym elementem.
I znów ta sama rzecz, czyli replace image.
I tutaj wstawiamy kolejny obrazek w to miejsce w kopii.
Natomiast tutaj chciałbym mieć kopii, które składa się.
Najpierw napiszemy Pixel perfect.
A następnie komponent.
I chcemy zadbać jeszcze o właściwości tego
tekstu, ponieważ po raz pierwszy zajmujemy się nagłówkiem typu drugiego.
Szóste Upewnijmy się, że tutaj mamy
odpowiednie wartości i rzeczywiście to jest OK i jesteśmy zgodni z layoutem,
jeśli chodzi o wszystkie te nagłówki i line height zmienimy też z
bold na semi bold w tych nagłówkach drugiego typu.
Tutaj pixel perfect weźmiemy sobie span.
A następnie ustawimy dla niego kolor.
Nie background, tylko tekst kolor i zmienimy to na ten nasze różowe.
Jeśli chodzi o ten przycisk, to będzie to ten sam przycisk, który mamy tutaj Medium
outline, więc możemy go w ogóle sobie skopiować i wrzucić do tego CPS rapera.
A ten poprzedni guzik wyrzucić stąd i
dodatkowo będzie nam potrzebna w tym miejscu lista, czyli on an order list.
Będziemy chcieli ją wstawić w to miejsce do folderu content rapera.
Teraz Command List icons, czyli An order na ikonę Symbol.
To jest dokładnie ta lista i potrzebujemy przywróćmy ją nad przycisk w to miejsce.
I w tym przypadku akurat ikonka check jest w porządku.
Z niej będziemy chcieli skorzystać, więc możemy od razu podlinkować tą instancję.
Będziemy potrzebowali jeszcze jednej listy, jednego list item.
A więc kopiujemy i wklejamy ten list item.
No i musimy zmienić ten material kolor czyli wybieramy dla list itemów.
W zasadzie wszystkie będziemy chcieli zmienić, więc wystarczy, że tutaj zmienimy
kolor na ten kolor secondary six i wszystkie się ładnie nam zmieniły
i można powiedzieć, że mamy gotową strukturę poza jednym elementem.
Tutaj jeszcze wrzucę jeden body tekst skopiuję i przeniosę go pod element listy.
Chciałbym go jednak dodatkowo pogrubić, więc zaznaczę wszystko i wybieram be bold.
I skoro już mam to zaznaczone, to po
prostu wkleję tutaj tekst, którego potrzebuję.
Tutaj też mam ten tekst przygotowany.
No i elementy list wypełnij może trochę później, bo będzie to
znów powtarzanie tych wszystkich czynności.
Jeśli chodzi o kolejne rzeczy, to znów
będziemy musieli tutaj ustawić następne obrazek.
W tym przypadku jest to ten obraz.
Zerknijmy teraz na design.
Tutaj mamy odstęp.
Tu macie czarne tło, a tu będzie nasze tło
Primary six, więc wszystkie te elementy mają różne tło.
Myślę, że to jest dobry pomysł, żeby na
ten element i na ten dać nasze własne, customowe klasy.
W związku z tym możemy tutaj się przenieść feature sekcji w będziemy edytować Section
box wrapper, więc tak naprawdę możemy dodać tutaj klasę typu Custom wrapper.
1. Na przykład stwórzmy sobie tę klasę i
dorzućmy od razu do niej 64 piksele marginesu od góry.
I Custom Super 1 też zrobimy innym kolorem
tła, czyli background color damy tutaj na kolor czarny.
A jeśli chodzi o ten sezon Box Reaper to tutaj Custom Box Wrapper
2 i będzie to klasa, w której też będziemy mieli 64 piksele
marginesu, ale już tło będzie inne, bo ustawimy nasz kolor Primary 60 i zmienimy.
Oczywiście tutaj też obrazek Replace image wybierzemy ten obrazek.
W porządku i trzeba jeszcze zmienić odpowiednio teksty.
I teraz o ile ten custom box Ripper był całkiem dobrym kandydatem do tego,
żeby dodać tą osobną custom ową klasę, bo chcieliśmy wrzucić zmienić kolor, ale
jeszcze dodać customowe margines, o tyle tutaj możemy dodać sobie klasę
odpowiednio do Healing el po to, żeby go pokolorować na biało, ponieważ tutaj np.
jest Head 2 to samo.
Nie chcemy go zmienić, więc wybieramy Control Enter Command return i dodajemy
tutaj kolor text, a następnie będzie to nauczone 20.
I w tym momencie mamy już to pokolorowane.
To samo zrobimy z tekstem Kolor Tekst jutro 20.
I w przypadku tego
koloru to nie będzie primary six, tylko to będzie secondary six.
I możemy to w sumie zmienić w ten sposób.
I powinno zadziałać o ile zmienimy na
dobrą klasę i tak samo zrobimy w tym miejscu.
Body text zrobimy kolor text primer 20 i
ring 2 też kolor text primary i użyjemy nawet primary 10.
OK, teraz jeszcze ten przycisk ten przycisk zobaczmy tu Tego wogóle nie
ma, tu też w ogóle nie ma przycisku tylko jest lista.
W związku z tym pozbywamy się przycisku.
Jeżeli chodzi o listę cały ten upper mógłby być wycięte.
No to mamy już listę, z której możemy skorzystać.
Jest ona podobna do tego co chcemy osiągnąć, więc wrzucamy ją tutaj.
Proponuję, żebyśmy do całej tej klasy dodali sobie kolor text.
No i skorzystali z tej klasy N Jutro 10 albo 20 i już mamy zrobione.
Tutaj z tego co widzę też nie ma
przycisku, więc też usuńmy stąd ten przycisk razem z CTI raperem.
I w tym miejscu mamy jeszcze pogrubiony jakiś kawałek
tekstu, więc za symbol ten tekst, a ja go później zaznaczmy, a ja go później zmienię
na ten właściwy tekst, którego potrzebujemy.
Lecimy niżej do kolejnej sekcji, czyli tutaj ficzer icon.
Będziemy chcieli zmienić obrazki. Replace image.
Mamy trzy ikony, z których chciałbym skorzystać.
Są już przygotowane.
No i naturalnie zaraz zmienimy tam jeszcze treści.
Kolejna sekcja nie będzie miała tych nagłówków i możemy po prostu je usunąć.
Czyli usuwamy Harding, usuwamy body text,
sprawdzamy, czy odpowiada nam margines między tymi dwoma elementami, który jest.
Jeśli nam nie odpowiada, to możemy przestawiać.
Tutaj trochę mamy padding na wrapper, ale
jeśli chcemy to zrobić, to musimy wpisać custom ripper albo możemy zmienić to w
taki sposób, że zmienimy sobie klasą z passing padding top i tutaj zmieńmy to np.
na 0.
W ten sposób zresetowałem
padding na górze i ta klasa nam pozwala właśnie zrobić taki myk.
Następna rzecz
to są te gwiazdki, które chcieliśmy wrzucić tutaj jako obrazek Replace image.
Na razie możemy je zasymulować.
Nie mam do końca pomysłu jak powinny one
działać, więc po prostu wrzucę tu chwilowo obrazki.
Kolejna sekcja to jest sekcja Pricing i tutaj mamy kilka zmian.
Przede wszystkim będziemy chcieli zmienić ten przycisk button fluid na taki nasz
customowe przycisk, który zawiera strzałkę select.
Można by było to zrobić właśnie komponentem SELECT.
Wrzućmy może select do tego div blocka w czasach drop down.
Tak, drop down nam jest potrzebne.
Te treści możemy wyrzucić, bo nie są
potrzebne, a drop Downa przerobimy tak, żeby wyglądał jak nasz przycisk.
Czyli ten button.
Fluid możemy wrzucić na razie do środka Tutaj to drobne to go,
wyciągnąć z niego ten tekst i samego button fluid tego linku się pozbyć.
Ikona jest potrzebna, TextBox jest niepotrzebny.
W sumie go tutaj mamy.
I teraz jeśli chodzi o Toggle to dodamy mu klasę Button Fluid.
Czy skorzystamy z tej klasy z naszego frameworka i też z rozmiaru medium.
Potrzebujemy idealnie zmienić display na
block po to, żeby nam się wyświetlał na całą szerokość.
No i to już wygląda całkiem nieźle, tylko musimy ten hover jeszcze dorobić.
Wydaje mi się, że to jest stan na tym button fluid medium.
Przejdźmy do hover i zmieńmy jego stan po najechaniu.
W zasadzie możemy go nie podświetlić, nawet zostawić.
Taki stan jest ok.
Natomiast jest tutaj jakiś delikatny
margines, nad którym moglibyśmy jeszcze ewentualnie popracować.
Tutaj widzę, że ten blog się trochę wcześniej zaczyna.
To zobaczmy. OK.
Ten guzik też trzeba będzie ten ten Batman wróci.
Trzeba będzie nad nim trochę popracować,
nad jego stanem hover i tutaj zmienić kolor tekstu na białe.
OK.
A jeśli chodzi o te małe marginesy zobaczmy może właśnie ten baton Fluid ma
marginesy bottom, ale usuńmy tę klasę i tak samo zrobimy na tym.
Przy okazji też na tym będzie nam trochę
trudniej, bo widzę, że tu jest jakaś combo klasa.
Zobaczę co jest tej combo klasie Organization, tylko kolor wrzucony.
Także nie przejmujmy się tym i usuńmy te obie klasy, a kolor sobie wrzucimy.
Kolor BG i to jest nasz secondary CX i.
Więc wrzućmy to w ten sposób.
I jeszcze stan hover możemy zostawić w zasadzie taki.
Jeśli chodzi o tę pricing cart jeszcze chciałbym dla nich zrobić zaokrąglone
narożniki, czyli border radius dać na 8 command Shift.
Fajny skrót do preview.
Zobaczmy jak to wygląda.
Mamy ładne karty, mamy kolory z frameworku.
Mamy tutaj taki stan hover.
To jest taki stan hover.
Wygląda to całkiem dobrze, spójnie.
OK, to możemy jeszcze przejść do tego elementu, który pojawia się podpis ING.
Przypominam, że my go dorabiali jako taki customowe element tutaj z ikonami.
No i jak można było to odtworzyć? Web?
Otóż przejdźmy sobie do tego wrapper i może na chwilę do naszej dokumentacji.
Czyli zerknijmy na sekcję Feature grid.
Tutaj znajdują się elementy ficzery grida.
Ten wygląda nieźle, chyba nawet z niego korzystaliśmy.
Tutaj kojarzę, że mamy też taki z gwiazdkami.
Samymi ikonami to jeszcze lepiej wygląda,
tyle, że mam akurat 4 kolumny, ale to w sumie nic.
Możemy na tym bazować i dodać sobie do tego naszego trapera
dodać cztero kolumnowy grid, a nie da się go tutaj wkleić?
Dobra, to wrzućmy go w ten sposób.
Wrzućmy go po prostu na body.
I pojawi się na dole.
My będziemy mogli go oczywiście od linkować.
I będziemy potrzebowali tego tak jak w filmie.
W zasadzie to zrobiliśmy tylko tę część taką LG 4 col, więc cały ten element można
sobie usunąć w momencie, gdy już mamy skopiowane LG 4 Color.
Oczywiście do schowka i do rapera wrzucić.
Samo LG 4 Cell wygląda nieźle, tyle że nie chcemy mieć czterech kolumn tylko chcemy
mieć 3, więc ten grid trzeba by było jeszcze wyedytować.
Wybierzmy Edit Grid i usuńmy sobie jedną kolumnę.
Teraz wygląda dużo lepiej.
No i dodatkowo wrzućmy na niego twierdzę.
Wrzućmy na niego jeszcze margines, czyli na cały wrzucimy passing margin top
64 albo 48, bo jesteśmy w obrębie tej samej sekcji.
No i wygląda nieźle.
Trzeba było oczywiście podmienić teraz ikonki.
Czyli możemy sobie zrobić tutaj katalog i zmienić na tą
ikonkę kłódki i zaraz to podmienię na te pozostałe
ikony, które mam, a także na pozostałe właściwe treści.
No i wygląda nieźle.
Poza tym chcemy usunąć ten body tekst, bo nie mamy go w projekcie.
Wygląda nieźle.
Zgłaszając podmieniamy tylko treść tutaj i też są do zrobienia tylko w zasadzie
techniczne rzeczy, podmiana tekstów i obrazka.
Natomiast ważniejsze jest tutaj, żebyśmy
sprawdzili sobie jeszcze warianty responsywne, czyli przenieśli się np.
do wersji tablet.
Tutaj spróbowali zobaczyć jak ten design się nam wyświetla, bo nie wszystko jest
idealnie i trzeba by było tutaj porobić parę zmian.
Zobaczmy na najpierw na górę.
Te przyciski chcielibyśmy w wersji tablet generować, bo wystarczy przejść do stylów
teraz i ponieważ layout mam ustawiony na flex wystarczy, że ustawianie tych
elementów damy na pionowe i wygląda to już całkiem nieźle.
Ten kroimy. Czy jest w porządku?
Zejdźmy niżej. Ta sekcja nie wymaga moim zdaniem poprawy.
Za to w tych trzech sekcjach, które stworzyliśmy, wypadałoby coś zmienić.
Oczywiście jest to kwestia indywidualnej
decyzji, ale moim zdaniem nie ma w sumie co ściskać tych obrazków np.
obok siebie albo nad tymi Pixel perfect Components.
W zasadzie ja akurat podejmę taką decyzję,
że ten obrazek ukryje i tak samo zrobię z tym obrazkiem ukryje.
On nie wnosi aż tak dużo do mojego designu i wydaje mi się, że ważniejsze są akurat
tutaj te ficzery, więc te ficzery chciałbym wyeksponować.
Jeśli chodzi o ten button get free demo to
chciałbym zarówno wyrównać go do lewej i wygląda to już całkiem nieźle.
Te trzy sekcje są ok jeszcze przynajmniej w tym widoku.
Tablet Moim zdaniem to też jest w porządku.
I mamy sekcję pricing.
Ona z automatu przeszła na jedną kolumnę i też to jest moim zdaniem ok.
Przejdźmy do edycji Grida i moim zdaniem
powinna to być jeszcze jedna kolumna i tam się raczej zmieści, a za to wywali ten
dodatkowy rząd, który jest niepotrzebne i jest ok.
Poza tym, że margines może jest trochę za duży nie jest, jest w porządku.
Następnie efekt też się mieści jeszcze na tablecie i jest ok.
Ponieważ jesteśmy teraz w największej
wersji, to w szerszej raczej wszystko powinno być w porządku.
Natomiast zobaczmy jeszcze na mobile u.
Na mobile lecąc od dołu też to wygląda wszystko dobrze.
Czy te trzy rzeczy już powinniśmy zmienić?
Wydaje mi się, że też nie może być.
Zmienimy je dopiero na tej mniejszej wersji mobile owej.
Tutaj już te
komentarze automatycznie się umieszczają jeden pod drugim, podobnie jak
automatyczne zachowanie tych pozostałych sekcji.
W zasadzie moglibyśmy już tych sekcji Section Box na Custom
Ripper zresetować, margines na custom zresetuje marginesy i na tym
papierze też zresetuje marginesy i trochę wciśniemy te sekcje na mobile.
Natomiast reszta wydaje mi się, że wygląda ok.
Tutaj zastanawiam się dlaczego to
ustawienie ustawiania nie zostało odziedziczone na tym papierze.
Musimy je tutaj włączyć z powrotem. Zobaczmy jeszcze tu.
No właśnie. Może nie zostało tutaj.
Zapisane.
No i.
I to by było tyle na tym widoku, na tym widoku mobilnym.
Wygląda to ok.
Get free demo Ten guzik widzę, że jest nie wyśrodkować.
W tym miejscu moglibyśmy wycen darować.
Może to jest pomyłka, którą musimy sprawdzić we frameworku.
I kolejne rzeczy to jest ok. Chcemy.
Chcemy też zostawić to demo.
Tutaj wygląda to dobrze.
Myślę, że jest ok.
Ta sekcja mogłaby już nie mieć aż tak dużego marginesu.
Może puddingu?
I możemy to zmienić tutaj np.
na 32.
OK.
Pricing jest też w porządku.
I tę sekcję na pewno chcielibyśmy już teraz wyedytować, zmienić.
Zaznaczmy ten grid i tutaj zróbmy Usuńmy dwie kolumny.
Zróbmy dwa dodatkowe rzędy.
I teraz wygląda to w porządku.
Z tym, że znów tutaj i tutaj chyba też ten margines 64 zostawimy.
Może ewentualnie też zmienimy go na 32? OK.
No i footer jest ok.
Także mamy wersje responsywne, również działające.
I zobacz, że jakby te wersje responsywne nie wymagały od nas naprawdę dużo pracy,
ponieważ same komponenty są już responsywne we frameworku.
Zobaczmy jeszcze jak działa menu.
Tutaj działa w porządku na mobile.
W tej wersji działa też ok i na tablecie zakładam, że też nie będzie problemów.
Jedyne co, to moglibyśmy zmienić ten hamburger.
Przejdźmy do menu i wybierzmy Open.
I w tym miejscu zmienimy On ma background, nie tutaj background.
Kolor ma zmieniony, a my byśmy chcieli go po prostu zrobić przezroczysty.
I zmieńmy jeszcze typografii.
Upewnij się, że tu jest czarny kolor dla tej ikony.
Wydaje mi się, że teraz jest w porządku.
Spróbujmy uruchomić to menu.
No i zdecydowanie lepiej.
Także myślę, że to wszystko jeśli chodzi o przeniesienie tej strony.
Jak widzisz, udało nam się to bardzo
szybko zrobić również z widokami mobilnymi.
I w zasadzie takie ostatnie rzeczy, oczywiście poza uzupełnieniem treści,
które moglibyśmy tutaj wprowadzić, to delikatne np.
animacje, które mogłyby się pokazywać w momencie, gdy ktoś otwiera stronę.
Przykładowo na takim elemencie możemy szybko zrobić fajną animację.
W momencie, gdy zostanie to rolowane widok.
I tutaj jako akcję możemy wybrać jedną z
predefiniowanych akcji po to, żeby było szybciej.
Wybierzemy sobie akcję grą i wybierzemy grą.
I tutaj zostawimy 0, a tutaj zrobimy jakiś delay typu np.
150 milisekund.
Zobaczmy jak to będzie wyglądać i w ten sposób ładnie to sobie wejdzie.
W zasadzie potrzebujemy to tylko na
desktopie, nie będziemy animować tego elementu w innych miejscach.
No i zobacz, że fajny jest efekt, który w
ciekawy sposób pokazuje nam ten element i to samo moglibyśmy wstawić sobie np.
na te obrazki. Finalnie tak zrobiłem i finalnie moja
strona po drobnych poprawkach i wypełnieniu tego treścią wygląda tak.
I te elementy się tutaj ładnie pojawiają.
Tu mamy wstawione już gotowe docelowe treści.
Tak samo tutaj skorzystałem z listy.
Tutaj też jest jakaś delikatna animacja efektu i jak widzisz
ta strona wygląda dokładnie tak, jak zaprojektowaliśmy ją w firmie.
Po uzupełnieniu treścią zrobiliśmy to razem z omówieniem w 40 minut, ok.
Mamy też gotowe wersje responsywne.
Można powiedzieć, że design razem z omówieniem zajął nam trochę
ponad godzinę, więc myślę, że jest to całkiem dobry wynik.
Zatem dziękuję Ci za uwagę w tej części. Do usłyszenia.