Jak działa Webflow? Kompletny przegląd kreatora stron WWW dla początkujących.
Poradnik Webflow
Webflow to nowoczesny kreator stron WWW i CMS, który rewolucjonizuje proces tworzenia stron internetowych, łącząc w sobie zaawansowane możliwości kodowania z prostotą wizualnych edytorów. Ten wszechstronny przewodnik zapewnia dogłębne zrozumienie jak działa Webflow i jakie ma możliwości: od jego podstaw po zaawansowane funkcje, takie jak dynamiczne treści CMS, personalizacja za pomocą szablonów, a także możliwości e-commerce.
Dzięki unikalnym narzędziom, takim jak Designer i Editor, oraz potężnemu systemowi CMS, które opisujemy, kreator stron WWW Webflow umożliwia tworzenie wyjątkowych, responsywnych i funkcjonalnych stron internetowych.
Strony internetowe Webflow w łatwy sposób są dostosowywane do potrzeb każdego projektanta, dewelopera czy właściciela biznesu, oferując intuicyjne i zaawansowane zarządzanie treścią i opcje SEO bez konieczności pisania kodu.
W tym poradniku przeprowadzimy Cię przez pierwsze kroki po zalogowaniu do Webflow. Omówimy logowanie, wygląd konta w Webflow, podział na konta i Workspace Webflow, plany Workspace, a także omówimy najważniejsze narzędzie, które jest sercem platformy: Designer Webflow. Na zdjęciach pokażemy paski narzędzi i ich elementy, omawiając opcje tworzenia stron internetowych w Webflow. Zapraszamy do lektury!
Logowanie do Webflow i zarządzanie kontem to proste i intuicyjne procesy. Poniżej opisujemy jak zalogować się do platformy.
Aby uzyskać dostęp do swojego konta, wystarczy skorzystać z opcji "webflow login" lub "webflow sign in". Dla nowych użytkowników platforma oferuje możliwość szybkiej rejestracji poprzez "webflow sign up".
W pierwszej kolejności należy wpisać swój adres e-mail, na który założono konto lub nazwę użytkownika (username) w pierwszym polu (zdjęcie poniżej).
Dalej niezbędne jest wpisanie hasła w kolejnym polu (zdjęcie poniżej). Ustawiając hasło w Webflow wymagane jest jako minimum: hasło musi mieć co najmniej 10 znaków, przynajmniej 1 cyfrę, przynajmniej 1 małą literę oraz przynajmniej 1 dużą literę.
Po wpisaniu hasła klikamy w przycisk “Login” i przechodzimy do Dashboardu w Panelu użytkownika Webflow.
Webflow wspiera logowanie za pośrednictwem Google, co przyspiesza logowanie i zabezpiecza dodatkowo posiadane konto. W tej opcji nie jest wymagane wpisanie hasła. W przeglądarce pojawia się nowe okno, proszące o uwierzytelnienie poprzez wybranie jednego z kont Google, do których jesteśmy zalogowani w przeglądarce. Jeśli brakuje takiego zalogowanego konta w przeglądarce, może pojawić się opcja wpisania hasła do konta Google. Wpisanie hasła jest w tym oknie bezpieczne.
Po uwierzytelnieniu zostaniemy przekierowani do Dashboardu w Panelu użytkownika Webflow, w którym widoczna będzie zawartość Workspace, czyli przede wszystkim założone na platformie strony WWW. Poniżej screen z ekranu widoku My Sites, który jest widoczny po zalogowaniu do konta.
Po zalogowaniu się z poziomu Dashboardu i innych ekranów, użytkownik ma dostęp w górnym menu do swojego indywidualnego konta "Webflow Account". Tam może zarządzać wieloma aspektami, od ustawień prywatności po zarządzanie subskrypcją.
W zakładce ustawień konta w Webflow użytkownik ma możliwość personalizacji swojego profilu. Może dodać lub zmienić awatar o maksymalnych wymiarach 256x256 pikseli, który będzie widoczny w publicznym profilu oraz powiadomieniach zespołowych. W sekcji "Account info" można wprowadzić podstawowe informacje takie jak imię, nazwisko i nazwa użytkownika. W sekcji "Profile info" użytkownik może podać miejsce zamieszkania, tytuł zawodowy, pracodawcę oraz link do projektów. Istnieje również opcja włączenia/wyłączenia dostępności do kontaktu oraz decyzja o tym, czy profil ma być publiczny. W zakładce znajdują się także informacje o dacie utworzenia konta. Edytujemy też powiadomienia emailowe, zmienimy hasło i sprawdzimy historię logowań do konta.
Poza kontami Webflow istnieją również tzw. Workspaces, czyli przestrzenie robocze, których można posiadać kilka. Workspace Webflow to miejsce, w którym przechowywane są projekty tworzonych stron internetowych, nad którymi może pracować zespół użytkowników. W ramach poszczególnych przestrzeni można zapraszać więc kolegów z zespołu, współpracowników czy klientów do wspólnego projektowania stron. W swoim koncie Webflow możesz posiadać wiele Workspaces. Możesz też zostać zaproszony do Workspace Webflow, przez klienta, który jest właścicielem strony, dla którego na przykład prowadzisz prace.
W zakładce General, na lewym panelu ustawień Workspace, zmienimy nazwę przestrzeni roboczej, ustawimy ikonę przestrzeni, a także ustawimy czy ta przestrzeń jest defaultowa, jej URL oraz wybierzemy czy Workspace jest publiczny czy nie.
Plany Workspace dedykowane są freelancerom tworzącym strony WWW lub agencjom. Podstawowa oferta zaczyna się od darmowej przestrzeni roboczej dla początkujących. W miarę rozwoju Twojego zespołu lub zwiększania wymagań możesz przejść na płatny plan Workspace, aby dodać więcej członków zespołu, zwiększyć limit stron niehostowanych i odblokować dodatkowe funkcje, które pozwolą pracować szybciej i wydajniej.
Plany Workspace można znaleźć po zalogowaniu się tutaj:
Webflow oferuje cztery różnorodne plany Workspace dostosowane do potrzeb użytkowników na różnych etapach korzystania z platformy.
Istnieją dwa typy planów Workspace Webflow:
Plan "Starter" jest darmową opcją dla początkujących, która pozwala na posiadanie 3 projektów stron w koncie Webflow. Posiadamy też w tym planie dostęp do jednego workspace’u.
Płatne $19 i $49 przy zakupie na rok z góry ($28 i $60 przy płatności miesięcznej) są plany "Core" i "Growth".
Te dwa profesjonalne plany Workspace Webflow, przeznaczone dla małych i rozwijających się zespołów, oferując do 10 tworzonych projektów (Core) lub nielimitowane (Growth), a także dostęp dla 3 i 9 użytkowników tworzących strony i 10 komentatorów.
To idealne plany dla niedużych organizacji, które potrzebują kilku strony i niewielkiej grupy użytkowników. Dla dużych organizacji, plan "Enterprise" dostarcza funkcje na poziomie dużych firm, które posiadają działy marketingu, wiele stron dla kilku marek lub chcą eksportować kod Webflow na własne serwery. Pozwalają wpuszczać tzw. gości - czyli freelancerów lub pracowników agencji, którzy tworzą nowe strony lub edytują strony Webflow.
Workspace Webflow oferuje różne plany, dedykowane zarówno freelancerom, jak i agencjom, aby pomóc im rozwijać biznes oparty na platformie Webflow.
Plan Workspace Freelancer kosztuje 24 USD na osobę miesięcznie ($16 przy płatności za cały rok z góry). Jest idealny dla samodzielnych freelancerów i małych zespołów. Otrzymasz 10 niehostowanych stron na domenach webflow.io, pełny dostęp do systemu zarządzania treścią (CMS), oraz możliwość darmowej współpracy z klientami w ich przestrzeni roboczej. Możesz również zatrudniać do 3 osób i korzystać z 10 darmowych komentatorów.
Plan Workspace Agencja kosztuje 42 USD na osobę miesięcznie ($35 przy płatności za cały rok z góry). Jest przeznaczony dla rosnących firm obsługujących wielu klientów. Daje nieograniczoną liczbę niehostowanych stron, pełny dostęp do CMS i możliwość współpracy z klientami. Możesz zatrudniać do 9 osób i korzystać z 10 darmowych komentatorów.
Plan Starter jest bezpłatny i skierowany jest do tych, którzy dopiero uczą się Webflow. Oferuje 2 niehostowane strony, 1 osobę i 2 darmowych komentatorów.
W zakładce "Team" w ustawieniach Workspace Webflow użytkownik ma możliwość zarządzania członkami swojego zespołu oraz przypisywania im odpowiednich ról. Zwykle jeden użytkownik posiada rolę "Owner" (Właściciel) i jest adminem Workspace. Istnieje również możliwość dodawania Komentatorów do przestrzeni roboczej za darmo - Klientów, którzy będą mogli przeglądać i komentować wszystkie strony w tej przestrzeni. Aktualnie nie ma wykorzystanych miejsc dla komentatorów. Dodatkowo, użytkownik może zapraszać gości typu "Agency or Freelancer" do swojego Workspace.
Panel rozliczeń znajdziesz w ustawieniach Workspace (zdjęcie poniżej).
W zakładce rozliczeń pod nazwą "Billing" w Webflow użytkownik ma dostęp podsumowanie wszystkich płatnych planów witryn w ramach planów Workspace lub planów Stron, wraz z cenami, datami rozliczeń i dostępem do faktur. Użytkownik może zarządzać ustawieniami dotyczącymi faktur, takimi jak adres e-mail do faktur, profil firmy, numer VAT oraz preferencje dotyczące powiadomień o płatnościach. Dodatkowo, dostępne są informacje o bieżącym saldzie konta, historii faktur oraz szczegółach dotyczących następnego rachunku. W zakładce można również zarządzać metodą płatności, aktualizując lub usuwając dane karty płatniczej.
W zakładce "Apps and Integrations" użytkownik ma możliwość połączenia swojego konta Webflow z Adobe Fonts poprzez wprowadzenie tokena API, który można uzyskać na stronie konta Adobe Fonts. Sekcja "Connected Apps" pozwala na zarządzanie aplikacjami stron trzecich, które mają dostęp do danych witryny, chociaż obecnie żadne aplikacje nie są połączone. Użytkownik ma również możliwość tworzenia własnych aplikacji, które rozszerzają funkcjonalność oferowaną przez Webflow, ale obecnie nie ma zarejestrowanych aplikacji. W zakładce znajduje się również sekcja "Marketing automation integrations", która umożliwia dodawanie integracji z platformami automatyzacji marketingu.
Wszystkie zakupione szablony Webflow znajdziesz w zakładce "Templates" w sekcji ustawień Workspace w Webflow. Zakładka składa się z kilku sekcji:
Zakładka "Templates" w Webflow pozwala na zarządzanie i korzystanie z różnych szablonów Webflow - zarówno tych stworzonych przez użytkownika, jak i zakupionych z zewnętrznych źródeł, takich jak ThemeForest czy Creative Market.
Webflow oddaje dwa panele edycji strony internetowej: Editor oraz Designer. Znajomość obu narzędzi, jest kluczowa, aby zrozumieć jak działa Webflow i zacząć korzystać z tego kreatora WWW. Zacznijmy zatem!
Designer Webflow to główny panel tworzenia stron internetowych Webflow, który umożliwia tworzenie struktury strony WWW, dodawanie elementów, sekcji, bloków, gotowych komponentów, a także dodawanie treści, tekstu, grafik, wideo, oraz nakładanie na design strony interakcji i animacji czy niestandardowego kodu.
Designer Webflow daje możliwość manipulowania treścią HTML, ustawiania właściwości CSS i tworzenia interakcji, wszystko to bez pisania ani jednej linii kodu. Podczas budowania strony internetowej Webflow, narzędzie Designer generuje czysty, semantyczny kod gotowy do wykorzystania w sieci, który przeglądarki internetowe użyją do wyświetlenia Twojej strony. Ten kod można również eksportować z panelu platformy Webflow do innych aplikacji.
Interfejs projektanta, czyli tzw. Designer Webflow został zaprojektowany z myślą o intuicyjności i elastyczności. W jednym oknie przeglądarki możemy otworzyć Designer Webflow i projektować stronę internetową, dzięki kompletnemu zestawowi narzędzi.
Wejście do Designera Webflow odbywa się przez kliknięcie błękitnego przycisku na karcie Strony Webflow w środku Workspace’u Webflow. W ten sposób przechodzi się do wnętrza panelu tworzenia strony internetowej Webflow. Można jeszcze trafić do Designera z poziomu Edytora Webflow, przełączając tryb z edycji na projektowanie. Innym sposobem jest wybór opcji Ustawień Strony (Site Settings) i kliknięcie w Designer na górnym pasku narzędzi.
Zanim rozpoczniesz projektowanie w tej platformie, ważne jest, aby zrozumieć, które przeglądarki są oficjalnie wspierane przez Designer Webflow.
Webflow oficjalnie obsługuje Designer na trzech ostatnich wersjach wszystkich nowoczesnych przeglądarek, takich jak Chrome, Edge, Firefox i Safari. Dlaczego to ważne? Dzięki temu możesz mieć pewność, że Twoje projekty będą wyświetlane zgodnie z oczekiwaniami użytkowników na tych popularnych przeglądarkach.
Jednak istnieją pewne wyjątki i niuanse. Na przykład, niektóre zaawansowane funkcje mogą działać nieco inaczej w zależności od przeglądarki, co jest naturalne, biorąc pod uwagę różnice w ich implementacji. Dlatego warto sprawdzić, jakie cechy mają ograniczone wsparcie w niektórych przeglądarkach i dostosować swoje projekty, jeśli to konieczne.
Należy również pamiętać, że Webflow nie oferuje wsparcia dla przeglądarki Internet Explorer. Oznacza to, że choć Twoje strony w Webflow nadal będą obsługiwać standardowe funkcje nowoczesnych przeglądarek, nie możemy zagwarantować, że będą one działać prawidłowo w przypadku użytkowników Internet Explorer. Dlatego zawsze warto zachęcać do korzystania z bardziej nowoczesnych przeglądarek, które oferują lepsze wrażenia użytkownika i bezpieczeństwo online.
Poniżej przeprowadzamy przez panel użytkownika narzędzie do projektowania strony internetowych Webflow. Omawiamy główne paski narzędzi, których znajomość jest istotna, gdy rozpoczyna się przygodę z projektowaniem stron w Webflow.
Największą powierzchnią w Designerze jest tzw. "canvas" (czyli płótno). To tutaj możesz w pełni oddać się interakcji z Twoją stroną i projektować w czasie rzeczywistym. Możesz wybierać elementy, przemieszczać je i edytować zawartość bezpośrednio na stronie. Aby dowiedzieć się więcej o płótnie, kliknij tutaj.
Znajduje się na górze ekranu i zawiera narzędzia do zarządzania stroną, takie jak publikowanie, eksport kodu i ustawienia strony. Pasek pokazuje po lewej stronie nazwę aktualnie edytowanej strony Webflow.
Na tym pasku narzędzi mamy również dostęp do wyboru widoków, w jakich edytujemy stronę Webflow. Designer Webflow pozwala na edycję w kilku podstawowych wymiarach strony, zgodnych z różnymi rozdzielczościami obsługiwanymi przez duże ekrany, monitory PC, tablety czy smartfony (widok horyzontalny i wertykalny).
W ten sposób projektant pracujący w Designerze Webflow tworzy responsywne strony internetowe. Wybierając różne widoki, mamy możliwość ustawiania indywidualnych parametrów różnych elementów na stronie WWW, dla każdego widoku. W ten sposób zapisujemy różne wersje strony dla rozmaitych urządzeń lub rozdzielczości.
Na górnym panelu mamy również opcje podglądu strony w widoku dla użytkownika. Opcja podglądu strony jest dostępna pod przyciskiem z ikoną “play”.
Pasek górny pozwala również na opcję udostępnienia strony w opcji Share.
Z tego paska również dokonujemy publikacji strony Webflow na wybrane domeny.
Po lewej stronie ekranu użytkownicy mogą przeciągać i upuszczać różne elementy na swoją stronę, takie jak obrazy, tekst czy formularze.
Panel "Add" pozwala na dodawanie elementów z zakładki "Elements" lub prebuilt layouts z zakładki "Layouts".
Panel "Pages" pozwala na organizowanie i zarządzanie stronami swojej witryny oraz ustawieniami stron.
Navigator pokazuje hierarchię elementów na płótnie dla bieżącej strony. Tutaj możesz edytować je i pracować z tymi elementami, przesuwając ich kolejność lub zmieniając hierarchię.
Panel "Components" umożliwia tworzenie komponentów i dodawanie ich na płótno projektu.
Panel "Variables" pozwala na przeglądanie i tworzenie zmiennych, które można wielokrotnie wykorzystać, zapewniając jednolite doświadczenia wizualne.
Panel "Style selectors" pozwala na przeglądanie, zmianę nazw, porządkowanie oraz wyszukiwanie klas i tagów używanych na stronie.
Panel "Assets" umożliwia przesyłanie i organizowanie zasobów (np. dokumentów, obrazów i animacji) do wykorzystania na stronie.
Panel "CMS" pozwala na tworzenie, przeglądanie i modyfikowanie Collections oraz elementów Collection.
Panel "Logic" pozwala na tworzenie, przeglądanie i modyfikowanie automatycznych workflowów (zwanych także "flows").
Panel "Users" pozwala na tworzenie i zarządzanie kontami użytkowników oraz grupami dostępu dla członków Twojej strony.
Panel "Ecommerce" to miejsce, gdzie możesz tworzyć i modyfikować produkty oraz kategorie produktów. Tutaj możesz także przeglądać otrzymane zamówienia.
Panel "Apps" wyświetla zainstalowane aplikacje dostępne na Twojej stronie lub w przestrzeni roboczej.
Pozostałe panele po prawej stronie Designera dają Ci niezwykle szczegółową kontrolę nad Twoimi elementami.
W tej sekcji znajdują się 4 główne panele:
W panelu "Styl" w Designera masz kontrolę nad wyglądem i stylem każdego elementu w swoim projekcie. Niezależnie od tego, czy chcesz zmienić układ elementu, kolor tła czy czcionkę, wszystko to można zrobić w panelu "Styl".
Panel stylu to miejsce, w którym masz dostęp do wszystkich właściwości CSS dostępnych dla wybranego elementu. Możesz wprowadzać lub wybierać te wartości w odpowiednich polach, a style zostaną natychmiast zastosowane do Twoich elementów na płótnie.
Nie tylko możesz dostosowywać pojedyncze elementy, ale także zapisywać style jako klasy i wykorzystywać je wielokrotnie w całym projekcie. Zanim przejdziemy do szczegółów dotyczących panelu "Styl", omówimy klasy i klasy kombinowane, abyś wiedział, kiedy i jak z nich korzystać w swoim projekcie.
Dodatkowo, poza tworzeniem, edytowaniem i stylizowaniem elementów i klas, możesz również dostosowywać układy dla różnych urządzeń w panelu "Styl" za pomocą wbudowanych w Webflow punktów przerwania responsywnego, nazywanych również zapytaniami media.
Panel ustawień elementu daje Ci dostęp do różnych opcji dostępnych dla obecnie wybranego elementu.
Panel interakcji pozwala Ci tworzyć interakcje i stosować je do wybranego elementu. Aby dowiedzieć się więcej o interakcjach, kliknij tutaj.
Po prawej stronie ekranu użytkownicy mogą dostosowywać wygląd i zachowanie każdego elementu, od kolorów i czcionek po animacje i przejścia.
W tym kompleksowym przewodniku przyjrzeliśmy się temu jak działa Webflow. Przeprowadziliśmy Ciebie przez najważniejsze zagadnienia, odpowiadające na pytanie jak rozpocząć korzystanie z Webflow, odkrywając jego kluczowe funkcje i możliwości, które umożliwiają tworzenie stron internetowych i zarządzanie treścią. Od procesu logowania, przez zarządzanie kontem i przestrzenią roboczą (workspace) w Webflow, po wykorzystanie innowacyjnego narzędzia Designer. Mamy nadzieję, że ten przewodnik zapewnił holistyczne spojrzenie na platformę. Jeśli jednak masz jakiekolwiek pytania lub wątpliwości, napisz do mind&matter. Nasi eksperci Webflow odpowiedzą na Twoje pytania i chętnie podzielą się wiedzą o projektowaniu stron w Webflow lub jego możliwościach.
Jerzy jest ekspertem od cyfrowych technologii i tworzenia stron internetowych przy pomocy technologii no-code. Pasjonat Webflow, designu, brandingu i technologii. Założyciel startupu Artplanet, z doświadczeniem we współpracy z firmami e-commerce i B2B, w obszarach digital marketingu, marketing automation i technologii IT od 2015 roku.
Stwórzmy razem coś wyjątkowego!
Opowiedz nam o swoich wyzwaniach.
Tatiana
Executive Assistant / Designer
.png)