Jak działa Webflow? Kompletny przegląd kreatora stron WWW dla początkujących. 

Poradnik Webflow

Czym dokładnie jest 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. 

Wprowadzenie 

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 Webflow 

Logowanie do Webflow i zarządzanie kontem to proste i intuicyjne procesy. Poniżej opisujemy jak zalogować się do platformy. 

Jak zalogować się do Webflow?

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. 

Logowanie Google w 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.




Konto Webflow

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ą. 

Ustawienia konta Webflow

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.

Workspace Webflow

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.

Podstawowe ustawienia Workspace w Webflow

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 w Webflow

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:

Jakie są plany Workspace Webflow? 

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:

  1. Plany dla zespołów in-house.
  2. Plany dla freelancerów i agencji.

Plany Workspace Webflow dla zespołów in-house

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.

Plany Workspace Webflow dla freelancerów i agencji

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.

Ustawienia zespołu w Webflow

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. 

Rozliczenia Webflow

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.

Ustawienia integracji Webflow

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.

Zakupione szablony Webflow

Wszystkie zakupione szablony Webflow znajdziesz w zakładce "Templates" w sekcji ustawień Workspace w Webflow. Zakładka składa się z kilku sekcji:

  • Shared Workspace templates: W tej sekcji widoczne są niestandardowe szablony dla Workspace, utworzone przez Ciebie lub Twój zespół
  • Purchased templates: Tutaj możesz przeglądać dostępne szablony Webflow, zakupione na Marketplace Webflow, z opcją pobrania faktury. 
  • ThemeForest purchases: Możesz połączyć się z ThemeForest, aby przeglądać historię zakupów szablonów Webflow z ThemeForest.
  • Creative Market redemption: W tej sekcji możesz wprowadzić kod do wykorzystania. Kod ten można znaleźć w modalu Webflow, który pojawia się po otwarciu strony HTML.

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.


Designer Webflow

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! 

Czym jest Designer Webflow?

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.

Jakie działa Designer Webflow?

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.

Jak korzystać z Designer Webflow?

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.

Gdzie znajdę Designer Webflow?

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. 

Jakie przeglądarki wspiera Designer Webflow? 

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.

Panel użytkownika w Designer Webflow

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

Canvas w Designer 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.

Pasek górny (top bar) w Designer Webflow

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.


Panel boczny Designera Webflow po lewej stronie

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" w Designer Webflow 

Panel "Add" pozwala na dodawanie elementów z zakładki "Elements" lub prebuilt layouts z zakładki "Layouts".

Panel "Pages" w Designer Webflow  

Panel "Pages" pozwala na organizowanie i zarządzanie stronami swojej witryny oraz ustawieniami stron.

Navigator w Designer Webflow

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" w Designer Webflow  

Panel "Components" umożliwia tworzenie komponentów i dodawanie ich na płótno projektu.

Panel "Variables" w Designer Webflow 

Panel "Variables" pozwala na przeglądanie i tworzenie zmiennych, które można wielokrotnie wykorzystać, zapewniając jednolite doświadczenia wizualne.

Panel "Style selectors" w Designer Webflow 

Panel "Style selectors" pozwala na przeglądanie, zmianę nazw, porządkowanie oraz wyszukiwanie klas i tagów używanych na stronie.

Panel "Assets" w Designer Webflow 

Panel "Assets" umożliwia przesyłanie i organizowanie zasobów (np. dokumentów, obrazów i animacji) do wykorzystania na stronie.


Panel "CMS” w Designer Webflow 

Panel "CMS" pozwala na tworzenie, przeglądanie i modyfikowanie Collections oraz elementów Collection.

Panel "Logic" w Designer Webflow 

Panel "Logic" pozwala na tworzenie, przeglądanie i modyfikowanie automatycznych workflowów (zwanych także "flows").

Panel "Users" w Designer Webflow 

Panel "Users" pozwala na tworzenie i zarządzanie kontami użytkowników oraz grupami dostępu dla członków Twojej strony.

Panel "Ecommerce" w Designer Webflow 

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" w Designer Webflow 

Panel "Apps" wyświetla zainstalowane aplikacje dostępne na Twojej stronie lub w przestrzeni roboczej.

Panel “Settings” w Designer Webflow

Panele po prawej stronie w Designer Webflow

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:

Panel “Style” do edycji stylów

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 “Element settings”

Panel ustawień elementu daje Ci dostęp do różnych opcji dostępnych dla obecnie wybranego elementu.

Panel “Interactions”

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.

Podsumowanie

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 Opar

o autorze

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.

Kontakt

Jerzy

Client Partner & CEO

jerzy@mindandmatter.pl

Tatiana

Executive Assistant / Designer