Strony WWW bez Kodowania
5 godz. 47 min · Webflow · UI, UX i Webdesign
Grzegorz RógIdea ArchitectJeśli edytory wizualne stron kojarzysz z technologiami określanymi jako WYSiWYG - Webflow nie ma z nimi praktycznie nic wspólnego. Kod, który generowany jest przez Webflow to czysty, estetyczny HTML, CSS, JavaScript a o jego jakości decyduje jedynie to, jak dobrze znasz narzędzie a także technologie webowe. Można więc powiedzieć, że Webflow raczej pozwala Ci tworzyć strony w rekordowym czasie, dzięki temu że nie musisz pisać kodu, a układ wyklikujesz w interfejsie. Takie podejście gwarantuje, że nasze strony będą przygotowane w oparciu o semantyczny kod i nowoczesne standardy!
Są praktycznie nieograniczone. Poza tym, że możesz tworzyć strony statyczne, masz też możliwość przygotowania dynamicznych witryn w oparciu o CMS a nawet kompletnych systemów E-commerce, budując je z gotowych komponentów. Webflow tym jednak różni się od "kreatorów stron", że zaczynamy w nim pracę zwykle od czystej kartki, a co za tym idzie możemy zaimplementować dowolny layout! Następnie, z pomocą Webflow możemy opublikować gotową stronę, dodać do niej naszą domenę, dołożyć hosting i... violla! Bez zbędnych konfiguracji strona jest widoczna w sieci. Dodatkowo, klient może edytować ją bezpośrednio w przeglądarce, z pomocą wbudowanego Edytora CMS, a także dodawać treści!
W tym kursie skupimy się na Layoucie, który jest podstawą efektywnej pracy w Webflow. To znaczy, że omówimy elementy semantyczne strony jak również jej ostylowanie. Dowiesz się, jak zastosować w Webflow popularne konstrukcje CSS Layout, takie jak Grid czy Flexbox. Pokażę Ci jak od czystej kartki wdrożyć kompletny layout strony, którą wcześniej przygotowaliśmy w kursie Adobe XD. Jeśli chcesz dowiedzieć się, jak zaprojektowałem samą witrynę - odsyłam Cię właśnie do tego kursu. Możesz przerobić go wcześniej, lub równolegle z kursem Webflow, który masz przed sobą.
Po opanowaniu podstaw Webflow będziesz mógł z powodzeniem tworzyć statyczne witryny, w rekordowym czasie. Poznasz wszystkie zasady konstrukcji i stylowania. Będziesz więc mógł wyruszyć w dalszą podróż z Webflow z kolejnymi kursami, które znajdziesz na eduweb.pl i dodać do Twojej strony dynamiczne dane (w kursie Zaawansowanym przygotujemy bloga), jak również cały system E-commerce (który stworzymy w osobnym kursie). Wszystkie materiały przygotowałem tak, aby się dopełniały i abyś mógł poznać wszystkie, nawet najbardziej zaawansowane funkcje Webflow w rekordowym czasie!
Można powiedzieć, że Webflow ze swoim podejściem i integracją z wieloma narzędziami no-code to WordPress na miarę naszych czasów. Trudno powiedzieć, że w każdym aspekcie tworzenia stron będzie lepsze, jednak WordPress ma niewątpliwie sporo wad, które Webflow eliminuje - przykładem jest dość archaiczny codebase, dziurawe wtyczki, podatność na ataki, konieczność ciągłego utrzymania, własnego hostingu etc. Nie ulega wątpliwości, że Webflow jako platforma zarządzana i nowoczesna, ze świetnie rozwiązanym, skalowalnym hostingiem, darmowym SSL itp. ma wiele atutów. Jednak dalej WordPress będzie przydatny w niektórych zastosowaniach i np. budżetowych rozwiązaniach na potrzeby blogów, oraz tam, gdzie wtyczki mogą zastąpić funkcjonalności, których brakuje w Webflow. Nadal te dwa narzędzia są ważne w zasobniku każdego web designera i na pewno warto je znać a następnie na potrzeby konkretnego projektu - wybrać to bardziej odpowiednie!
Webflow to genialne narzędzie dla wszystkich osób, które chcą zacząć swoją przygodę z tworzeniem stron WWW - prosty interfejs wizualny, rozbudowane możliwości, hosting, SSL, domena - to wszystko w kilka kliknięć. Dlatego ten kurs to dobra propozycja dla osób początkujących, które chcą zacząć tworzyć strony. Ale uwaga! Bez solidnych podstaw HTML i CSS Twoje strony nigdy nie będą optymalnie przygotowane. Będziesz także często sfrustrowany tym, że jakieś ustawienie nie działa - tymczasem będzie to pożądane zachowanie wynikające ze specyfikacji HTML. Dlatego zdecydowanie polecam przed kursami Webflow przerobić przynajmniej kurs podstawowy HTML i CSS, a optymalnie jeszcze kursy CSS Grid i Flexbox. Webflow swój największy potencjał jest bowiem w stanie odkryć przed tymi z Was, którzy rozumieją już technologię web i potrafią tworzyć strony. W rękach takich osób Webflow to narzędzie, które niesamowicie przyspiesza pracę i dowożenie nowych projektów dla klientów. Mimo więc, że Webflow jest przyjazny dla początkujących (którzy nawet równolegle mogą uczyć się HTML), jego zalety w największej mierze docenią web designerzy, UI/UX designerzy i web developerzy, którzy mogą pracować i dostarczać projekty w zupełnie nowy sposób!
Webflow 2020+
W kolejnej lekcji.
Przed nami następne
ciekawe zadanie bo będziemy musieli zrobić te kafelki ale najpierw prosta rzecz czyli.
Nagłówek możemy sobie powielić na
np. z tej sekcji delivery command "C" command "V".
Wrzucamy to tu na dół.
Musimy dostosować w ten sposób, że nie potrzebujemy tych kształtów i grafik
zamiast usuwać stąd. Oczywiście usuwamy klasę bo tak to przygotowaliśmy, że po
usunięciu klasy dostajemy. Dokładnie to co chcemy w tej sekcji musimy jedynie zmienić
treść description wyrzucimy. Nie będzie potrzebne w tekście wstawimy our clients, a poniżej
kawałek który teraz skopiuje i wkleje, a tutaj po prostu wpisze mając our clients. Nie dbam o wielkość
liter bo to mi się wszystko powiększy. Teraz możemy
np. sekcję features może sobie skopiować i ją
przerzucić na dół. Będziemy pożyczali sobie z tej sekcji features.
Elementy najpierw wejdę do środka mamy
tutaj content i featured grid które usuwamy, a następnie wrzucamy do tego kontentu coś
co będzie trzymać nam wszystkie te logotypy.
Myślę, że to po prostu może być jakieś
techniczne DiV. W jego właściwościach na razie może
zróbmy sobie jakiś max high typu pięćset pikseli żeby to wszystko było trzymane
w jakiejś rozsądnej szerokości. Jeszcze chcemy wycentrować go w kontenerze.
Jest jedna bardzo fajna opcja w webflow do centrowania wykorzystujemy to małą ikonkę.
Center horizontally. To wymaga żeby był ustawiony weight albo max weight.
Już zadziała po prostu element taki jest centrowany.
Bardzo fajnie jeśli chodzi o samą sekcję features.
Na razie dajemy jakiś margines od dołu.
Później go zmienimy ale teraz chciałem po
prostu środkować to też widoku żeby wygodnie nam się pracowało.
Do tego Div blocka wrzucamy obrazki po prostu. Na razie luzem klikamy na image. Wrzucimy
pierwszy obrazek choose image będziemy musieli
wygrać tu wszystkie obrazki które są do tej lekcji są to te wszystkie logotypy
eksportowane jako pliki SVG jest przezroczystym tłem z xd.
Wrzucamy sobie w zasadzie dowolne
teraz do takiego obrazka ustawiły właściwości command return. Wpiszemy, że to
jest logo lub też logo image na razie może zostać logo.
Chciałbym dla niego zrobić kolor tła czyli biały.
Dodatkowo chcemy wrzucić jakieś border radius.
Zdaje się, że dwanaście ale upewnij się i sprawdzę na layoucie. Tak dwanaście i jeszcze.
Shadow sześć, dwadzieścia pięć, trzy procent
czyli box shadow ustawiamy na
sześć.
dwadzieścia pięć.
Przez czystość koloru czarnego. Tylko trzy procent
taki naprawdę bardzo delikatny cień.
Ale jednak jest widoczny. W tej lekcji chciałbym nauczyć cię dwóch technik
tworzenia takiego tak zwanego maison grid czyli po prostu grid w którym mamy w miarę
nieregularnie ułożone elementy. Pierwszy nie będziemy go finalnie
wykorzystywać ale chcę żebyś go znał polega na ułożeniu kolumn dla tekstu czy
obrazków. Skopiuje sobie na chwilę content. Wkleje go tutaj. Przejdę teraz do contentu w
DiV blocku usune logo ale w DiV blocku rzucę sobie jakiś paragraf. Teraz zobaczysz ten akapit
jest oczywiście w jednej kolumnie ale możemy to zmienić bo jeśli przejdziemy do
właściwości tekstu to w sekcji typography. Znajduje się coś takiego jak more layout options
jeśli to rozwinięmy to mamy między innymi opcje z których już korzystaliśmy.
Ale także opcję columns. Teraz jest to bardzo fajna ciekawa opcja
bo domyślnie jest wyłączona ale jeżeli włączymy
np. dwie kolumny zobaczy tekst się
automatycznie dzieli na dwie kolumny trzy, cztery itd.
Pamiętaj proszę, że wszystko to co robimy
na tekście może dotyczyć też znaczników img.
W związku z tym jeśli mielibyśmy tu kilka
czy kilkanaście obrazków to moglibyśmy na tym w DiV blocku ustawić ilość kolumn
np. dwie i mielibyśmy dwie kolumny.
Dodatkowo te właściwości możemy zmieniać jeśli klikniemy na trzy kropki
np. zarządzać podstępem gap między kolumnami.
Zostawiam to dla jednych i drugich bo została dodana taka sama klasa.
Ale generalnie chciałem ci to
zaprezentować i jest to najprostsza z możliwych.
Ona działa na tekst i obrazki ale bardzo często jest wystarczająca.
Te obrazki można fajnie ułożyć nawet jeżeli one są na przykład
nierównej wysokości szerokości to bardzo ładnie się rozłoży możemy dostosować dla
nich marginesy. Inne opcje a nawet wstawić linie pomiędzy te kolumny.
Natomiast z punktu widzenia responsywności jest to też bardzo fajne ponieważ przykładowo
na tablecie możemy teraz po prostu zmienić ilość tych kolumn na dwie i to będzie
działać będziemy mieć w rozdzielczości desktopowej trzy kolumny, a tabletowej dwie.
Więc chciałem Ci pokazać i powiedzieć o tym że takie rozwiązanie istnieje.
My nie będziemy z niego korzystać ponieważ chciałem pokazać jeszcze inne rozwiązania.
Teraz kontent takie które da nam większą swobodę.
Ten DiV block trzy zmieni jego nazwę na logos
będzie zawierał wszystkie logo. Zmienimy jego wyświetlanie.
Pewnie się już domyślacie na grid i teraz.
Grid daje nam bardzo fajną opcję, która pozwoli.
Na razie zostawmy dla kolumn ale pozwoli nam w tej sekcji inline zmienić układ.
Zależy nam na tym żeby elementy które są wewnątrz tego grid, a po prostu rozciągają
się na całą dostępną szerokość. Całą dostępną wysokość.
W momencie gdy to zmienię zobaczysz, że
automatycznie logo wypełnia całą dostępną przestrzeń gridzie.
Cały ten kawałek próbujemy teraz dodać pozostałe logotypy to czyli command "V" command "V".
Myślę że trzeba było je policzyć raz dwa, trzy, cztery
pięć, siedem. Potrzebujemy więc nie będzie to regularne.
Mamy cztery potrzebujemy jeszcze trzy, pięć, sześć, siedem i w samym gridzie.
Teraz spróbujmy go uzupełnić zobacz, że brakuje nam kolumn więc spróbujmy dodać
kolumny czy rzędy. Potrzebujemy cztery rozmieścić. Trzy pod spodem zrobimy cztery kolumny.
Jeśli chodzi o rzędy to zostawimy takie jakie jest po to nam pozwoli wyświetlać
trzy pod spodem odstęp pomiędzy tymi elementami ustawimy na trzydzieści. Zamknijmy i zróbmy trzydzieści.
Dodatkowo rozciągnimy to ponieważ ta przestrzeń jest zdecydowanie za mała.
W związku z tym wychodzę z escapem czyli
stwierdzam to i zamiast max weight pięćset zrobimy tak jak mamy tutaj.
Jaka jest szerokość tego elementu sześćset czterdzieści.
Nie to jest wysokość tysiąc dwieście czterdzieści to zrobimy sobie może jeden tysiąc dwieście.
Teraz najfajniejsze bo zależy nam na tym żeby zrobić jakieś nieregularne wielkości
np. na półtora wysokości tego i chcemy
np. to mieć na dwie szerokości.
Więc jak grid nam to umożliwia to już bardzo łatwo możemy wejść do właściwości
grida i domyślnie jest tak że mamy wszystko na jedną frakcję czyli
mamy całą dostępną szerokość sto czyli te jeden tysiąc dwieście podzielone na cztery odjęte
marginesy. To zajmuje dokładnie jedną czwartą.
Natomiast my możemy zrobić tak żeby zajmowało to
np. jeden i pół czyli w stosunku do pozostałych elementów
ten będzie jeden i pół raza większy albo jeden dwadzieścia pięć raza większy.
Robimy to per kolumna w tym przypadku
więc możemy w ten sposób różnicować ale dodatkowo grid daje nam jeszcze taką opcję,
że teraz gdy wyjdę. Zatwierdze czyli wybieram polecenie done. Klikę na jakimś
elemencie ja mogę go przeciągnąć przesunąć czyli moglibyśmy
np. zrobić sobie jeszcze jedną kolumnę tutaj.
Sprawić, że ta kolumna będzie na połowę czyli zobaczmy.
Jeżeli dodam jeszcze jedną kolumnę
to teraz powiedzmy, że te logo będą na całą wysokość, a to będzie tylko na połowę.
Możemy tak zrobić, że po prostu zmniejszymy
to do połowy frakcji ale z kolei pod spodem to logo ma być większe.
W związku z tym możemy wprowadzić jeszcze jedną kolumnę.
W ten sposób. Teraz samo to logo rozciągnąć
np. na półtora. Zobacz, że to tworzy właśnie
tego typu rozwiązania tego typu możliwości przed nami otwiera nas na to żeby w ten
sposób tworzyć przykładowo to logo rozciągnąć.
Jeśli to zrobili byśmy jeszcze większe wszystkie nam przesuną się ale to jest
nawet w porządku ponieważ możemy zrobić to w taki sposób. Wydłużyć je jak i ostatnie
zostanie nam na jedną szerokość. Czyli powinno zostać wpasować się tutaj.
Jeżeli potrzebujemy na przykład w
takiej przestrzeni zawsze możemy przejść do edycji grid-a . Dodać tutaj jeszcze jedną
kolejną kolumnę. Znowu zacząć to jakoś rozmieścić w tym momencie mamy
więcej opcji więcej możliwości przykładowo to rozsuniemy sobie na całość oraz
na cztery kolumny teraz teraz już chyba jesteśmy bardzo blisko naszego układu
wystarczy, że dodamy jeszcze jedną kolumnę po prawej stronie. Teraz możemy
zatwierdzić, a następnie rozciągnąć tą kolumnę.
Jeśli to jest nawet trochę za dużo ok. Wejdziemy w ustawienia i może zmniejszymy
którąś z tych frakcji żeby nie było to aż tak regularne.
Możemy zmniejszyć to możemy zmniejszyć też w ten sposób.
Zobacz teraz jak mniej więcej to wygląda projekt.
Myślę, że prawie jesteśmy w domu.
Może to logo powinno być jednak trochę większe.
Czy ta cała frakcja powinniśmy jednak teraz powiększyć do jeden siedemdziesiąt pięć.
Chyba udało nam się to odtworzyć.
Tutaj mamy tą przestrzeń moglibyśmy dodać jeszcze jedną kolumnę.
Oczywiście o to można zarządzać tutaj wszystkimi innymi ustawieniami takimi jak
marginesy itd. Więc można to sobie dowolnie zmieniać.
Ja już teraz nie będę tego robił ale za to przejdę do zmiany obrazków.
Tutaj powinno być to fox logo.
Później mamy tak amara, liva. Muzica czyli tutaj podmienimy sobie na.
To jest tutaj.
Tutaj będzie kolejne logo replace,
użyjemy tego później Muzica jest tutaj circle, light, foosa
czyli tutaj potrzebujemy wstawić logo circle.
Są oczywiście jakieś fikcyjne firmy które
wymyśliliśmy sobie wcześniej w kursie xd. Ale light al.
Ostatni kawałek to będzie fossa gdzieś tutaj. Jest dobra.
No to mamy to ale teraz trzeba jeszcze przetestować responsywne warianty.
Przejdźmy do tabletu. Zobaczmy co się z tym stanie.
Out of the box.
Jest to w miarę ok ponieważ naturalnie ten.
Grid będzie się dostosowywać do szerokości ale z drugiej strony my mamy teraz nad tym
pełną kontrolę czyli możemy tutaj przejść możemy pozmieniać przede wszystkim
np. to jak prezentują się marginesy.
Zmienimy je na szesnaście albo nawet na osiem pikseli.
To już zaczyna wyglądać lepiej ale w każdym układzie możemy teraz zmieniać
położenie. Pozycję tych logo. Zobaczyć jak one będą najlepiej się
prezentować czyli gdybyśmy chcieli przykładowo tutaj zmienić to
przestrzeń jaką zawiera zabiera logo live. Zrezygnować z tej jednej kolumny.
Myślę że to wygląda naprawdę całkiem ok.
Oczywiście jest dziedziczone na telefony.
W ten sposób zobaczymy czy potrzebujemy jakichś zmian.
Wydaje mi się, że może jest już za dużo ściśnięte.
Tak więc przechodzimy do grida. Usuwamy te kolumny które nam nie są potrzebne czyli.
Tę ostatnią wielkość jednej frakcji. Może jeszcze jedną.
Może jeszcze jedną.
Zależy jak chcemy żeby te logo ile zajmowały miejsce. Jakie były duże.
Myślę, że teraz jest ok.
Teraz te przestrzenie może nie są najszczęśliwsze więc można po prostu
sprawić że pozostałe logo będą wypełniały nam całą dostępną przestrzeń.
Znów można zarządzać marginesami. Można zarządzać postępami.
Widziałem widzę, że źle zmieniłem w tabletowej
szerokości więc może cofnę to tutaj wrócę do tabletowej.
Nie miałem kłódki zaznaczone. Zmienię to na osiem.
Więc tak to wygląda na telefonie.
Tak to wygląda na mniejszym telefonie
tutaj też możemy już sobie pozwolić na to żeby po prostu usunąć jedną czy dwie
dodatkowe kolumny. Rozmieścić to troszeczkę inaczej czyli
np. light al możemy zrobić tak ale za to live circle. Co zrobimy sobie w ten sposób że będzie to
zajmowało miejsca obok siebie, a fosse z kolei możemy rozciągnąć.
Naprawdę zależy to już dokładnie od naszej inwencji. Jak wymyślimy je teraz
spróbuję podejrzeć to pod przeglądarką tak jak to wygląda. Jak się skaluje.
Myślę że w tej rozdzielczości jeszcze nie jest jakoś fajnie.
Może to light al po prostu byśmy mogli tutaj
dociągnąć czyli zaraz wrócę jeszcze do tabletowej, a tutaj już jest super na tej
rozdzielczości desktopowej dokładnie tak jak chcieliśmy.
Wróćmy do tabletowej.
Przejdźmy w tryb edycji. Teraz light al
rozciąnimy tak żeby zajmowało całe dostępne miejsce ponieważ, trzeci cały rząd jest nam
niepotrzebny to możemy go wyrzucić po prostu w rozdzielczości telefonowej używamy
jeszcze więcej rzędów więc dodajmy tutaj te dwa rzędy żeby to było ok. W telefonowej
zobaczymy też potrzebujemy tutaj jeszcze
dodać jeden rząd. Teraz dopiero jest w porządku. No to co mamy zrobione.
Kolejny element i nauczyliśmy się operować grid-em w trochę bardziej zaawansowany sposób.
Grid daje nam naprawdę niesamowite bardzo ciekawe możliwości.
Ciebie teraz ośmielam do tego żebyś
eksperymentował z tym jak to działa. Słyszymy że w kolejnej lekcji.