Jak stworzyć stronę internetową projektu w Webflow? Przewodnik krok po kroku

Rozpoczynasz nowy projekt i chcesz opowiedzieć o nim światu? Jeśli szukasz narzędzia, które ułatwi ci stworzenie strony dla projektu, sprawdź Webflow – platformę, która pozwala tworzyć efektowne i funkcjonalne strony w tzw. podejściu no-code, czyli bez znajomości programowania. Z tego artykułu dowiesz się, jak krok po kroku przygotować prostą stronę startową projektu tzw. landing page z menu, opisem projektu, rekomendacjami uczestników, sekcją FAQ i formularzem zapisu.

Webflow – co to takiego?

Webflow to platforma, która umożliwia wizualne projektowanie i tworzenie stron internetowych bez konieczności pisania kodu (jest to tzw. podejście no-code). W edytorze Webflow możesz stworzyć szablon strony z gotowych komponentów, korzystając z interfejsu typu „przeciągnij i upuść” (drag-and-drop), a Webflow wygeneruje dla niej zoptymalizowany kod i opublikuje ją w Internecie. Twoja strona będzie responsywna (czyli będzie się dobrze wyświetlała na różnych urządzeniach) i od razu będzie dostępna dla twoich odbiorców.

Czym charakteryzuje się darmowa wersja Webflow?

Webflow oferuje kilka pakietów cenowych. Darmowy plan Starter dobrze sprawdzi się jako bezpieczna „piaskownica” do nauki i testów. Możesz w nim stworzyć maksymalnie dwie strony, korzystać z większości funkcji edytora, zapisywać szkice i publikować stronę na bezpłatnej subdomenie webflow.io.

Jeśli zatem chcesz stworzyć prostą stronę startową (tzw. landing page) dla projektu i nie masz nic przeciwko, aby była ona opublikowana w domenie webflow.io (np. wolontariat-mlodziezowy.webflow.io), plan Starter będzie wystarczający.

Tworzenie stron internetowych w Webflow krok po kroku

W ramach poniższej instrukcji zbudujemy stronę startową (tzw. landing page), wykorzystując gotowe komponenty (np. menu, sekcja nagłówkowa, stopka) z biblioteki Relume Library Lite. Osiągniemy następujący efekt (zobacz w nowym oknie):

Krok 1: Załóż konto na Webflow

Wejdź na stronę www.webflow.com i zarejestruj się (Get Started). 

Krok 2: Stwórz pusty szablon strony

Po zalogowaniu zobaczysz tzw. Dashboard – pulpit, na którym będą widoczne wszystkie stworzone przez ciebie strony. Kliknij przycisk New site.

Dostępne są trzy sposoby tworzenia strony:

1. Za pomocą generatora bazującego na sztucznej inteligencji (AI site builder) – Webflow wygeneruje szablon strony na podstawie twojego polecenia (tzw. promptu).
2. Z gotowego szablonu (Template) – możesz wybrać jeden z gotowych szablonów, a następnie dostosować go do swoich potrzeb.
3. Samodzielnie, za pomocą gotowych elementów strony (Blank Site). 

Wybierz opcję „Blank Site”.
Wpisz nazwę swojej strony i kliknij przycisk „Create site”. 

Webflow wygeneruje tzw. canvas – wirtualne „płótno”, do którego będziemy dodawać elementy strony.  Zostaniesz przeniesiony/przeniesiona do widoku edytora (tzw. Designer).

Krok 3. Dodaj bibliotekę z gotowymi komponentami

Kliknij „+” znajdujący się w menu po lewej stronie – to zakładka Add Elements. Będą się w niej znajdowały elementy, z których zbudujemy stronę. Webflow oferuje kilka gotowych elementów, ale możemy też skorzystać z pakietu elementów z zewnętrznej biblioteki. 

Wykorzystamy bibliotekę o nazwie Relume Library Lite. Aby dodać ją do projektu, kliknij zakładkę „Layouts” i w niebieski przycisk „Browse more libraries”.

Zostaniesz przeniesiony/przeniesiona na stronę tzw. Webflow Marketplace. W znajdującej się tam wyszukiwarce zaznacz opcję „Free Libraries” i wyszukuj nazwę „Relume”.

Kliknij kartę biblioteki, aby zobaczyć szczegółowe informacje na jej temat. Aby dodać bibliotekę do swojego projektu w Webflow, kliknij przycisk „Install library – Free”.

Zaznacz projekt, do którego chcesz dodać tę bibliotekę, i kliknij „Install”.

Biblioteka dodana! Teraz po ponownym wejściu do edytora strony i po kliknięciu „+” (Add Elements) w menu po lewej stronie. W zakładce Layouts będą już widoczne komponenty z biblioteki Relume Library Lite. 

Po kliknięciu kafelek Relume Library Lite zobaczysz dostępne komponenty. Zacznijmy zatem projektowanie!

Krok 4: Dodaj komponenty do szablonu strony

Dodawanie komponentów jest bardzo proste: wystarczy wybrać gotowy komponent z biblioteki i kliknąć w niego – od razu pojawi się na „płotnie”.

1. Dodaj menu: kliknij element (Navbar):

Menu jest widoczne w szablonie strony:

2. W analogiczny sposób dodaj sekcję główną (Header Section):

3. Dodaj sekcję, w której opiszesz krótko projekt (Feature Section):

4. Dodaj sekcję z zachętą do działania (CTA – call to action):

5. Dodaj sekcję z wypowiedziami uczestników (Testimonial):

6. Dodaj sekcję z najczęściej zadawanymi pytaniami (FAQ):

7. Dodaj stopkę (Footer):

Krok 5: Dostosuj treści strony i poznaj zaawansowane funkcje

Komponenty zawierają przykładowe treści, ale wszystkie są edytowalne.

1. Zmiana treści: Aby je zmienić, kliknij dwa razy na wybrany tekst i wpisz swoją treść.

2. Zmiana grafik: Kliknij grafikę obrazka. Pojawi się niebieski przycisk z nazwą elementu i ikona zębatki. Kliknij w nią. Wyświetli się okienko, w którym możesz dodać swoją grafikę.

3. Usuwanie niepotrzebnych elementów: Aby usunąć jakiś element, kliknij w niego i usuń, klikając na klawiaturze klawisz Delete. 
4. Zmiana stylowania (np. koloru tła, fontów): Aby zmienić wygląd poszczególnych elementów, kliknij na wybrany element, a następnie zmień wybrane ustawienia w panelu po prawej stronie. 

Podpowiedź: Jeśli napotkasz na problem albo będziesz poszukiwał/poszukiwała porady, jak zmienić jakiś element strony, zapytaj AI! Możesz użyć prompta w stylu: „Korzystam z Webflow.com i biblioteki Relume Linrary Light. Chcę zmienić tło sekcji Navbar 1. Jak to zrobić?”. Możesz też skorzystać z tutoriali w Webflow University.

Krok 6: Skonfiguruj formularz

1. Dostosuj wygląd formularza.

Kliknij pole formularza w sekcji „Dołącz do nas”. Wyświetli się niebieska ikona zębatki. Kliknij ją. W oknie edycji formularza możesz zmienić nazwę formularza (Name) i tekst pomocniczy, który wyświetla się w polu (Placeholder).

2. Skonfiguruj przesyłanie treści z formularza

Wejdź w ustawienia strony (Site settings), a następnie z menu po lewej stronie wybierz Forms.

Zgłoszenia, które użytkownicy dodadzą za pośrednictwem formularza, będą wysyłane na wybrany przez ciebie adres e–mail. Możesz skonfigurować szczegóły wiadomości, którą otrzymasz od Webflow, kiedy w formularzu pojawi się nowe zgłoszenie:

• Sender name: nazwa nadawcy maila.
• Send form submissions to: adres e–mail, na który Weblow wyśle mail zawierający zgłoszenie z formularza.
• Subject line: tytuł maila.
• Email template: Treść maila.

Porada: W planie Starter możesz odebrać maksymalnie 50 zgłoszeń z formularza.

Krok 7: Opublikuj stronę internetową

Aby opublikować stronę, kliknij przycisk „Publish”, znajdujący się w prawym górnym rogu strony, a następnie kliknij przycisk „Publish to selected domains”.

I gotowe! Twoja strona jest widoczna w Internecie pod wybraną domeną.

Krok 8: Testuj i udoskonalaj!

Jeśli znajdziesz coś, co chcesz poprawić, albo jeśli zechcesz dodać lub usunąć jakiś komponent – śmiało! Stronę możesz edytować w dowolnym momencie. 

Pamiętaj tylko, aby po wprowadzeniu zmian ponownie opublikować stronę!

Plusy i minusy Webflow

Jak widzisz, budowanie stron z Webflow jest bardzo proste! 

Zalety Webflow:

1. Możesz korzystać z wielu bibliotek dostępnych w Webflow Marketplace.
2. Stronę możesz zbudować z gotowych komponentów.
3. Łatwo możesz dostosować treści i styl komponentów.
4. Możesz wielokrotnie edytować, poprawiać stronę.
5. Stronę możesz szybko opublikować w Internecie na serwerze Webflow.
6. To tzw. rozwiązanie no-code – aby stworzyć stronę, nie musisz umieć programować!

Wady:

1. W wersji bezpłatnej Webflow nie pozwala na publikację strony pod własną domeną.
2. Jeśli chcesz zbudować bardziej rozbudowaną stronę (np. taką, która ma kilka podstron, albo która przez formularz przyjmuje więcej niż 50 odpowiedzi), musisz wykupić płatny pakiet.

Chcesz nauczyć się, jak zaprojektować i stworzyć stronę www? Weź udział w bezpłatnym kursie e-learningowym pt. Strona www – internetowa kwatera główna organizacji społecznej przygotowanym przez Sektor 3.0.

Tworzenie profesjonalnych stron z pomocą Webflow – podsumowanie

Webflow to narzędzie, które uczy projektowania stron i pozwala błyskawicznie eksperymentować: tworzyć, publikować, sprawdzać, jak działa i zmieniać w razie potrzeby. Jeśli twój projekt dopiero startuje, Webflow w wersji darmowej może być dla niego dobrym sposobem na pokazanie się w sieci bez wysokich kosztów startowych. A kiedy twój projekt się rozwinie i plan bezpłatny okaże się niewystarczający, będziesz mógł/mogła przenieść stronę na płatny plan i podpiąć ją pod własną domenę, albo wyeksportować i opublikować na innym hostingu. Powodzenia!

Przeczytaj także:

• Landing page z misją społeczną
• Strona internetowa NGO powinna służyć do zbierania pieniędzy. Jak stworzyć atrakcyjną i skuteczną donate page?
• Ruch na stronie Sektor 3.0 spadł o 60%. Dlaczego winne są pliki cookies i co to znaczy dla NGO?
• Linki, które działają: praktyczny przewodnik po linkowaniu w NGO
• Substack – co to za platforma? Newslettery jako alternatywa dla mediów społecznościowych