Strony WWW bez Kodowania: Warianty Web Builderów

0:00W tej lekcji chciałbym przedstawić Ci moją własną klasyfikację Web builder'ów i

0:03powiedzieć, które nadają się lepiej do jakich zastosowań.

0:06Myślę, że warto jest mieć taką wiedzę na

0:08początek, dlatego, że no teoretycznie możemy wpaść w pewną pułapkę myślenia polegającą

0:12na tym, że jeżeli coś ma naprawdę ogromne możliwości i pozwala nam zrobić dużo

0:17różnych rzeczy, to będzie automatycznie narzędziem najlepszym.

0:20Otóż w świecie no-code zupełnie jest odwrotnie, tzn.

0:24na ogół te bardzo wyspecjalizowane

0:26narzędzia pozwalają nam coś zrobić naprawdę dobrze, a te wielkie kombajny,

0:31które mają mnóstwo funkcji, na ogół niestety pozwalają nas doprowadzić

0:36do jakiegoś etapu, a później utkniemy i nie jesteśmy w stanie zrobić nic więcej.

0:40To wcale nie znaczy, że nie należy z nich korzystać.

0:44Po prostu warto znać wiele narzędzi oraz ich ograniczenia, a także mocne strony

0:49po to, żeby w zależności od potrzeby podjąć odpowiednią decyzję.

0:53Patrząc na to z lotu ptaka, mamy takie Web builder'y, które bazują na

0:57pewnych gotowych szablonach, z których możemy wybierać.

1:00Jednym z nich jest Squarespace. Squarespace

1:03to jest strona, na której możemy wybrać

1:05spośród szeregu template'ów, czyli gotowych, predefiniowanych stron, które

1:10zostały przygotowane, podzielone na jakieś kategorie.

1:13Możemy wybrać sobie np.

1:15jewelry i zobaczyć, zaznaczyć sobie jakieś

1:18jeszcze rzeczy, które chcemy zrobić, czy chcemy zbudować

1:21społeczność, czy chcemy coś sprzedawać, czy chcemy rozwijać istniejący biznes.

1:25I na tym, na tej podstawie zostaną nam

1:27zasugerowane gotowe szablony stron, z których możemy skorzystać.

1:31I wybierając sobie taki szablon stronę w danej kategorii

1:35możemy zawsze zacząć od takiego designu, czyli wybrać polecenie start with this design.

1:40Zobacz jak wygląda taka demo

1:41strona stworzona z pomocą takiego buildera.

1:45No wygląda spoko, ma jakieś fajne różne obrazki na te obrazki można kliknąć one

1:49przenoszą nas do produktu i mamy dodatkowe jakieś animacje, więc

1:53generalnie z pomocą tego szablonu będziemy mogli wygenerować taką stronę praktycznie

1:58identyczną albo tylko trochę różniącą się od tej strony.

2:02Co za tym idzie będziemy mieli bardzo ograniczone możliwości edycji.

2:06Naturalnie możemy zmienić teksty, możemy zmienić kolory, możemy wstawić swoje

2:10własne zdjęcia, ale często napotkamy już problem, gdy będziemy przykładowo chcieli

2:15chcieli dodać jakieś social media, którego tutaj przykładowo nie ma, np.

2:19LinkedIn albo coś innego.

2:20Prawdopodobnie moglibyśmy z tym mieć problem.

2:24Tak samo w niektórych szablonach np.

2:25będziemy ograniczeni do tylko kilku pozycji w menu.

2:29No i musimy się liczyć z tym, że

2:32taki szablon, mimo że bardzo ładny i już zrobiony dla nas wcześniej, może być

2:36zastosowany tylko w bardzo prostych przypadkach, gdzie rzeczywiście znajdziemy

2:40szablon, który praktycznie w całości odpowiada naszym potrzebom

2:44i musimy w nim wykonać jedynie nieznaczne poprawki po to, żeby wszystko było ok.

2:49Jeśli taki jest nasz plan i znajdziemy np.

2:51na Squrespace coś, co nas interesuje, no to śmiało możemy z tego skorzystać.

2:57Jednak mając na uwadze to, że możliwość rozbudowania takiego szablonu, dodanie do

3:01niego kolejnych modułów będzie bardzo skomplikowane.

3:05Podobnym kreatorem jest Wix.

3:07Działa on na bardzo podobnej zasadzie.

3:09Przechodzimy do sekcji Szablony i tu możemy wybierać z setek czy tysięcy

3:12predefiniowanych szablonów, a następnie edytować je we wbudowanym edytorze Wix'a.

3:18No i szczerze mówiąc ja nie jestem fanem ani Squarespace, ani Wix'a.

3:22Jeśli rzeczywiście jesteś osobą A: bardzo

3:25początkującą albo B: znajdziesz tutaj szablon, który naprawdę prawie idealnie z

3:30małymi poprawkami tylko będzie spełniał Twoje oczekiwania.

3:33Być może będzie to rozwiązanie dla Ciebie.

3:35Natomiast jest bardzo wiele wad takich

3:38kombajnów, które zawierają niby masę rzeczy, a tak naprawdę rozszerzanie stron,

3:42które będziemy robić w ten sposób jest bardzo trudne.

3:45Natomiast dobra wiadomość jest taka, że te

3:47narzędzia w większości są przeznaczone dla osób początkujących i my nie będziemy

3:50koncentrować się na nich w programie, ale polecam Ci je sprawdzić.

3:54Natomiast nie wymagają one jakiegoś

3:56ogromnego tutoriala, ponieważ obsługa jest naprawdę banalnie prosta, więc możesz

4:00sobie zobaczyć jak to działa we własnym zakresie.

4:02Ja tymczasem przejdę do drugiego typu, czyli do takich Web builder'ów, które bazują na

4:06pewnych półproduktach i dziele je na takie, które pozwalają nam hostować strony,

4:10albo musimy to zrobić sami, ale o tym zaraz.

4:13Na razie zobaczmy przykład na Launchace.com

4:15Oczywiście każdy,

4:17każdego typu tych Web builder'ów jest cała masa

4:19i pokazuję Ci tylko jakiś wybrany przykład po to, żebyś zrozumiał, jak działa ta idea.

4:24Podajemy tutaj jakąś nazwę i decydujemy, że to ma być np.

4:27strona internetowa.

4:28I teraz możemy określić jakiś styl

4:30czyli definiujemy sobie jakąś kolorystykę, definiujemy jakieś fonty.

4:33Mamy tutaj mały zamknięty zakres.

4:35Następnie mamy pierwszy komponent, który został dla nas przygotowany i wszystkie

4:39rzeczy, które możemy wyedytować są tutaj, więc np.

4:42możemy sobie zmienić trochę tło, możemy

4:44zmienić treści, ale już nie możemy przełożyć tego guzika na górę.

4:46Po prostu musimy się

4:48zgodzić, że ten guzik ma być tutaj, a jeśli chcemy to zrobić jakoś inaczej, no

4:52to wybieramy inny komponent, więc one na ogół mają taką bibliotekę komponentów.

4:56Czy na górze zrobiliśmy jakiś hero.

4:57Teraz dodajemy np. sekcję pricing

5:00I możemy tutaj dodać jakiś nagłówek Sub Heading, zmienić kolory,

5:06możemy dodać tiery pricingu, jakiś kolejny pricing tier i np. jeszcze jeden.

5:12I w momencie gdy zakończymy to mamy

5:15następny moduł, który został automatycznie dodane.

5:18No i te wszystkie rzeczy, które możemy

5:20edytować znajdują się w opcjach tego bloku.

5:22I my sobie z takich bloków po prostu budujemy całą taką naszą stronę.

5:26No i w momencie gdy jesteśmy gotowi to przechodzimy do jej publikacji i teraz

5:32podzieliłem to na te z hostingiem i przeznaczone do eksportu.

5:35Tutaj tak naprawdę w Launchac'u

5:36możemy zrobić albo jedno, albo drugie, czyli albo możemy zadecydować czy teraz

5:41chcemy opublikować tą stronę na Lounchaco oni nam dadzą jakąś subdomenę, albo możemy

5:47po prostu podać swoją własną domenę i zapłacić.

5:50Na ogół ta wersja jest płatna, że jak chcemy się przepiąć na swoją

5:53domenę, no to już nie jesteśmy w trybie budowania, tylko jesteśmy w trybie już

5:57prowadzenia biznesu, więc na ogół musimy parę dolarów zapłacić za taką usługę.

6:02Albo możemy wybrać opcję download i po

6:03prostu pobrać sobie kod źródłowy do tego i dalej pracować sami na tym kodzie i

6:08dokonywać zmian bezpośrednio w HTML i CSS'ie.

6:11Taka opcja eksportu jest bardzo przydatna, ponieważ pozwala nam np.

6:14dobudować sobie samodzielnie bloki, które tutaj nie istnieją.

6:18Jest jakiś zamknięty katalog bloków, które możemy dodać, a jeśli chcielibyśmy

6:22stworzyć jakieś własne, no to wtedy możemy ściągnąć sobie tę stronę, możemy ją

6:27zmodyfikować i hostować, umieścić na jakimś naszym własnym wykupionym serwerze.

6:31I tej właśnie opcji nie mają te poprzednio

6:34pokazane przeze mnie kombajny, takie jak Wix czy Squarespace.

6:37Czyli w zasadzie tam taka jest idea, że zostajesz na zawsze na Squarespace'ie i tam

6:42nie musisz nic wiedzieć o samodzielnym hostowaniu stron, serwerach,

6:45domenach i tak dalej, tylko po prostu korzystasz z wbudowanych opcji, które tam

6:49są i raczej oni nie pozwalają Ci eksportować takiej strony i takiego kodu.

6:53Tutaj w tego typu Web builder'ach

6:55możesz już jako bardziej zaawansowany użytkownik, który zna trochę więcej HTML'a,

7:00wie jak sobie poradzić z hostowaniem takiej strony, po prostu ją pobrać i dzięki temu

7:04też daję Ci to możliwość dopasowania jej trochę bardziej do swoich potrzeb.

7:08I takich Web builder'ów znowu jest bardzo dużo.

7:11Te wszystkie Web builder'y w jakimś stopniu

7:12mogą się różnić, mogą być trochę bardziej zaawansowane, dawać nam na przykład

7:16możliwość edycji kodu HTML w środku, albo dawać nam jakieś inne moduły, inne bloki,

7:21jeszcze więcej opcji, możliwość wpinania jakiejś analityki itd, itd.

7:24Więc warto znać przegląd różnych tego typu

7:27Web builder'ów, tych jakościowych, no i decydować sobie w zależności od projektu.

7:31Przykładowo Slides jest ciekawym, ponieważ można powiedzieć, że to jest trochę

7:34kolejny poziom nad tym Launchaco, gdzie w Launchaco nie mogliśmy edytować np.

7:39kodu dopóki nie pobraliśmy całości, a

7:42tutaj w momencie gdy otworzymy sobie aplikację wygląda to w ten sposób, że

7:45robimy nowy projekt, też nadajemy mu jakąś konkretną nazwę.

7:48W tym projekcie mamy strony, czyli nowe, konkretne page.

7:52Jeżeli chcemy zrobić taki one page layout,

7:54czyli na jednej stronie wystarczy nam jedna.

7:56Wybieramy polecenie create.

7:58No i teraz decydujemy jakich slajdów chcemy użyć.

8:01Czyli są to moduły, ale tutaj akurat moduły są na całą wielkość strony, na całą

8:06szerokość i wysokość i możemy sobie wybrać czy chcemy

8:10skorzystać z białych czy z takich ze zdjęciem.

8:13Ma to narzędzie jakąś wersję płatną, w której w ogóle jest mnóstwo jakiś różnych

8:16modułów, które możemy dodawać z licznikami, z cenami, z testimonil'ami itd.

8:22Więc zobacz, że mnóstwo predefiniowanych jakiś w miare fajnych modułów.

8:26Jeżeli jakiś moduł nam się spodoba to po prostu dodajemy go plusem.

8:29Jeżeli chcemy poniżej dodać jakiś inny to też dodajemy go plusem i w szablonie

8:33template od razu te moduły nam się pojawiają, możemy je przestawiać.

8:36Zaraz jeszcze przejdę do tej edycji.

8:38Dodatkowo możemy wybrać top panel opcjonalnie i bottom panel.

8:41Czyli jeśli chcemy mieć jakąś stopkę i

8:45jakiś footer to możemy wybrać go tutaj, czy Stop panel i wybieramy sobie jakiś.

8:50On ma też jakieś opcje, że może znikać w

8:52momencie gdy scroll'ujemy i bottom panel też może sobie wybrać np.

8:56taki. Wyżej była jeszcze opcja animacji.

8:58Możemy wybrać jakieś przechodzenie tych slajdów w nieco inny

9:01sposób, zgodnie z jakimiś predefiniowanymi presetami.

9:05No i tego też np.

9:05nie było w Launchaco, więc zostawmy sobie default też mamy

9:09tutaj jakieś różne opcje tej animacji.

9:11Powiedzmy, że nasza strona na razie

9:12wygląda w ten sposób mamy top panel, slajdy i bottom panel.

9:16Teraz jeśli ją podajrzymy, wybiorę Preview.

9:19Zobacz, że ten edytor dał nam już jakieś predefiniowane animacje.

9:22Fajnie to wygląda, a także to, że to jest na całą stronę.

9:26No i dodatkowo mamy tutaj kropeczki, którymi możemy przełączać kolejne slajdy.

9:30Kolejny slajd też ma jakąś animację no i de facto to wszystko możemy kontrolować.

9:34Jak sobie wykupimy płatną wersję za parę dolarów, to możemy też zdecydować czy to

9:37mają być kropeczki, czy ma być jakaś inna nawigacja.

9:40Możemy zdecydować o stylach, czy chcemy mieć szeryfowe fonty, czy bez szeryfowe.

9:45Więc na takim podstawowym poziomie możemy to edytować.

9:48Ale mówiłem o tym, że Slides idzie o krok dalej.

9:50I gdzie jest ten krok dalej?

9:51Otóż jeśli wejdziemy w template, to możemy po prostu każdy z tych elementów edytować.

9:57Jeśli wejdziemy w jego edycję to mamy

10:00edytor HTML.

10:01To znaczy, że zamiast edytować tak jak w Launchaco

10:05mieliśmy blog, że możemy wypełnić ten tekst i on się tu pojawi.

10:08To my mamy do dyspozycji kod HTML, w którym możemy bezpośrednio ingerować i w

10:13ten sposób zmieniać te rzeczy, które są wyświetlane na samym slajdzie.

10:17W związku z tym to daje nam dużo większą

10:19kontrolę, bo mamy już na etapie tego narzędzia w środku w przeglądarce

10:23możliwość modyfikacji wszystkich rzeczy, które znajdują się w HTML'u.

10:27Wspomniałem jednak o tym i teraz zamknę ten projekt, zamknę sobie tą stronę całą.

10:31Można tutaj dodawać kilka stron i w tym menu na górze po nich nawigować.

10:36Ale to co jest ciekawe akurat tutaj to wspomniałem o tym, że mamy ten podział na

10:41te bazujące na półproduktach narzędzia, ale z hostingiem np.

10:44na Launchaco w kilka kliknięć możemy

10:46opublikować tą stronę na ich subdomenie albo podać swoją własną domenę i wtedy

10:51nie musimy się przejmować ściąganiem tego kodu i hostowania tego samemu.

10:55No a te które pokazuje Ci teraz to są bazujące na produktach, ale przeznaczone

11:00do eksportu dlatego, że w Slides nawet nie znajdziemy takiej opcji, że

11:03ok, to teraz opublikuj mi to w sieci dla osób odwiedzających. Tylko znajdziemy opcję

11:08download, czyli możemy pobrać sobie cały kod takiej strony.

11:12Cały ten kod źródłowy będziemy musieli umieścić na jakimś naszym serwerze.

11:16Czy to będzie serwer FTP jakiś wykupiony u dostawcy hostingu, czy to będzie jakaś

11:21jakiś Netlify czy Github pages czy inna rzecz.

11:24No musimy generalnie taką stronę sobie po pobraniu sami gdzieś hostować.

11:30No i to oczywiście daje nam większe

11:32supermoce i nie uzależnia nas od takiego rozwiązania.

11:35Również jeśli chodzi o hosting, bo zwykle

11:37też kilka kilkanaście dolarów będzie kosztowało hosting co miesiąc.

11:40Często wyjdzie nam drożej, niż gdybyśmy

11:42hostowali to samo w takim gotowym rozwiązaniu.

11:45No i daje nam więcej możliwości, ale

11:47jednocześnie oczekuje od nas więcej umiejętności, bo oczekuje znajomości HTML,

11:51CSS, no i jeszcze umieszczenia tego na jakimś naszym serwerze.

11:54Kolejnym rozwiązaniem od Designmodo jest

11:56start up, które też oferuje nam możliwość tworzenia z blogów różnych rzeczy.

12:00Ja szczegółowo omawiałem, pokazywałem jak to ogólnie działa.

12:03Tworząc w kursie stronę niekoduj.pl, ale tutaj mamy to podobnie rozwiązane po

12:07prostu z gotowych bloków predefiniowanych, które możemy tu ustawić.

12:11Możemy sobie stworzyć taką stronę.

12:13Następnie możemy te bloki wyedytować i

12:16tutaj akurat edycja np. w przeciwieństwie do Slides, gdzie musielibyśmy edytować sami

12:20HTML, tu edycja jest trochę prostsza, bo zobacz, że jak zaznaczymy niektóre rzeczy,

12:25to po prostu mamy możliwość zmiany tego tekstu.

12:28Z prawej strony w prawej kolumnie, ale de facto też trochę jest mniej opcji.

12:31No bo o ile tam mogliśmy dodać sobie

12:33jakieś własne marginesy, mogliśmy dodać jakiś obrazek, to tutaj już nie ma

12:36możliwości tego dodania, tego dodatkowego swojego kodu.

12:40To co musimy zrobić, to najpierw zbudować sobie taką stronę, a następnie ją

12:44eksportujemy i to znowu pobierze nam paczkę zip z wszystkimi plikami, które

12:48możemy zacząć edytować i w skrócie po prostu zacząć dodawać tutaj

12:52rzeczy, których tu nie ma, których nie możemy wyedytować taki jak np.

12:57tekst. Jeśli użyli byśmy sobie jakiegoś

12:59komponentu nawigacji to w tym komponencie może akurat nie być

13:03możliwości dodania jakiegoś kolejnego linku.

13:06Czyli możemy wyedytować to co są, ale

13:07gdybym chciał dodać kolejny element, to po prostu muszę to zrobić już poza

13:11modelowaniu całej strony po jej eksporcie i dodać to w HTML'u.

13:15Jest to więc kolejne narzędzie, które

13:17bazuje na półproduktach, czyli gotowych blokach, ale finalnie przeznaczone jest do

13:22eksportu, bo chodzi w tym o to, żeby na koniec dnia wyeksportować sobie cały kod,

13:26ewentualnie dokonać w nim zmian i samodzielnie hostować taką stronę.

13:30No i w końcu ostatni typ tych Web builder'ów, które wyróżniłem, to

13:34takie, które pozwalają tworzyć od czystej kartki.

13:37Bo w rozwiązaniach, z którymi

13:38pracowaliśmy, zawsze mamy coś predefiniowane.

13:41Czyli te bloki są już wcześniej przez

13:43kogoś zaprojektowane, One mają jakiś specyficzny wygląd.

13:46My mamy albo trochę więcej wpływu na to,

13:48jak one wyglądają w takich Web builder'ach jak Startup czy jak Slides, albo

13:53zdecydowanie mniej w takich jak Wix czy przykładowo Squrespace.

13:57No ale zawsze mamy coś predefiniowane mamy

13:59jakieś bloki zbudowane, więc co by się stało, gdybyśmy my chcieli zacząć od

14:04czystej kartki i samodzielnie zaprojektować sobie w Canvie no w Canvie

14:08może nie projektujmy stron, ale w Figmie czy w Sketch'u, czy w Adobe xD

14:11zaprojektować sobie od podstaw jak nasza

14:14strona może wyglądać, a później to dopiero zakodować.

14:18Czy musimy to kodować z palca?

14:19Czy są takie edytory, które pozwalają nam to zrobić?

14:22Okazuje się, że są edytory, które

14:23pozwalają nam to zrobić i są one już bardziej zaawansowanymi narzędziami.

14:27Też na ogół pracują, działają w przeglądarce.

14:29Nie trzeba ściągać żadnych aplikacji np.

14:31jest Bootstrap Studio, które pozwala to robić.

14:33Jest też WebFlow, który jest moim ulubionym edytorem.

14:36Pozwala zacząć od czystej kartki, ale pozwala dojść do naprawdę zaawansowanych serwisów,

14:42takich, które nawet korzystają z dynamicznych danych.

14:44Czy możemy robić z pomocą WebFlow sklepy internetowe?

14:46I co do zasady możemy też zacząć od sekcji Resources i wybrać sobie szablony.

14:50I tutaj mamy masę już predefiniowanych,

14:52gotowych szablonów, które możemy kupić i rozpocząć po prostu od nich pracę,

14:56ale w wielu przypadkach będziemy zaczynali pracę w WebFlow

14:59od zaprojektowania jakiegoś swojego

15:01własnego layoutu, a później od czystej kartki.

15:04I to jest tak naprawdę narzędzie, które trochę przesuwa

15:07myślenie o tym, jak projektujemy strony z tej warstwy kodowania na warstwę wizualną,

15:12ale jednocześnie my musimy wiedzieć, co jest pod spodem.

15:16Czyli trzeba znać HTML, CSS, różne

15:18właściwości i dopiero wtedy możemy posłużyć się takim wizualnym

15:22edytorem, który nam po prostu upraszcza pracę.

15:24Bo jeśli ja wiem, że

15:26ten layout, który zaprojektowałem, powinien teraz składać się z jakiegoś

15:29kontenera, z nagłówka, z jakiegoś diva, z przycisku, to mogę bardzo łatwo to tutaj

15:34wyklikać, wyklikać również różne odstępy, właściwości CSS itd.

15:38Ale jednak żeby zrobić to dobrze to muszę rozumieć jak ten kod działa pod spodem.

15:43Czyli WebFlow znacznie mi przyspiesza

15:45pracę jeśli chodzi o tworzenie frontendu stron internetowych, ale nie zabiera ze

15:50mnie odpowiedzialności stworzenia czytelnego i intuicyjnego kodu.

15:53A więc najlepiej jest mieć przynajmniej podstawy HTML i CSS.

15:57W momencie, gdy zaczynamy w nim pracę.

15:59Naturalnie też poskładanie strony w taki sposób i przygotowanie jeszcze jej wersji

16:03responsywnych, mimo że WebFlow to w tym pomaga, zajmię relatywnie najwięcej czasu

16:07w porównaniu do tych wszystkich edytorów, które bazują na gotowych prekomponentach.

16:11No ale też with great power comes great responsibility, więc da nam najwięcej

16:16możliwości i praktycznie możliwość zrobienia takiego layoutu od podstaw.

16:20No i co więcej jest to przygotowane pod

16:22takie poważniejsze projekty, które mają też ewoluować.

16:26O ile w tych wcześniejszych Web builder'ach, które pokazywałem, raczej budujemy takie

16:30projekty, których czas życia jest naprawdę krótki, czyli

16:33może to być jakiś landing page marketingowy, strona konferencji, może to

16:37być jakiś prosty MVP, gdzie my chcemy pozbierać jakieś adresy, zobaczyć czy w

16:41ogóle nasz produkt się sprzeda, czy będzie działał, o tyle w WebFlow

16:45mamy już potencjał do tego, żeby stworzyć produkt, którego później nie wyrzucimy do

16:49śmieci, a będziemy bazować na tym kodzie HTML i CSS i czy go pobierzemy,

16:54bo oczywiście możemy sobie pobrać taki

16:56gotowy kod, czy też będziemy go hostowali na WebFlow, bo też możemy to zrobić.

17:00Możemy wtedy rozwijać go o nowe

17:02funkcjonalności, nawet takie jak przykładowo wpięcie w to struktury bazy

17:07danych i CMS'a edycję takiej strony w przeglądarce.

17:10Podobnie jak WordPress, czyli np. sprzedanie

17:12jej klientowi tak, aby mógł ją później edytować np.

17:16moduł e-commerce, który możemy podłączyć,

17:18dzięki czemu będziemy mogli zdefiniować produkty i WebFlow pomoże nam w

17:21procesowaniu płatności, dodawanie do koszyka itd.

17:24Więc to jest naprawdę już taki kombajn, który wymaga największej wiedzy, ale

17:28oferuje najwięcej możliwości, a jednocześnie jest narzędziem no-code,

17:32ponieważ ten kod rzeczywiście jest pod spodem,

17:35ale w wielu przypadkach takich, których

17:37nie musimy kodować sami z palca, możemy to zrobić z pomocą edytora.

17:41I obiecuję Wam, że z pomocą tego edytora ja każdą stronę wyklikać szybciej niż

17:45każdy programista miałby napisać ją z palca.

17:48Naturalnie mowa tutaj o frontend'zie,

17:49czyli raczej HTML'u i CSS'ie, a nie jakiejś logice biznesowej w postaci zaawansowanych

17:54skryptów JavaScript czy jakiejś logice serwerowej.

17:57Więc mamy takie edytory, które pozwalają tworzyć od czystej kartki jak WebFlow.

18:01No i w końcu wyróżniłem też taką specjalną

18:03kategorię, czyli takie rozwiązania, w których możemy tworzyć strony, ale

18:08towarzyszy to raczej jakiemuś innemu wyspecjalizowanemu narzędziu.

18:11Już tłumaczę o co mi chodzi.

18:13Na przykładzie MailChimp'a. MailChimp jest

18:15narzędziem do organizacji i wysyłania maili, czyli organizacji listy mailowej.

18:20Czyli możemy sobie założyć nową listę mailową.

18:22Tam nam się ludzie zapisują.

18:24Możemy z pomocą MailChimp wysyłać do nich

18:26maile, ale jednocześnie to narzędzie ma jakąś jakiś prosty generator landing page'y.

18:32Po to, żeby było nam łatwiej zbierać

18:34adresy, możemy z poziomu samego MailChimp'a po prostu wygenerować sobie jakiś landing

18:38page, gdzie będzie pole email i automatycznie z tego pola email ludzie

18:42będą nam się zapisywać na naszą listę mailową do MailChimp'a,

18:45to też jest jakiś pewnie prosty edytor, który ma jakieś ograniczone opcje,

18:49ale jednak towarzyszy temu narzędziu i możemy to w tym zrobić.

18:53Podobnym przykładem jest GetResponse, który też w zasadzie obsługuje dla nas

18:57mailing, ale może robić jakieś inne rzeczy, np.

19:00automatyzację marketingu, różne takie rzeczy jak webinary.

19:04I ma też coś takiego jak landing pages, który jest w zasadzie modułem, który

19:08pozwala nam wybrać z jakiegoś gotowego szablonu.

19:11Możemy stworzyć sobie landing page i on automatycznie zintegruje się z tą

19:15platformą GetResponse, czyli automatycznie.

19:17Dzięki temu landing page będziemy mieli np.

19:19formularz, który zbiera nam

19:20maile na tą listę, którą mamy w GetResponse'ie, który sprzedaje nam produkty,

19:24które mamy zdefiniowane jako produkty w GetResponse'ie itd.

19:27Więc jest jakby częścią tej większej platformy, która służy jakiemuś

19:31konkretnemu celowi, czyli przykładowo w GetResponse'ie zbieraniu i utrzymywaniu listy

19:36i sprzedawaniu jakiś produktów w internecie.

19:38Podobnie jest z ConvertKit'em.

19:40ConvertKit to w zasadzie taki kombajn,

19:42platforma dla twórców, która pozwala zbierać adresy, wysyłać maile, organizować

19:47te maile w różne sekwencje, dzięki czemu np.

19:51maile się wysyłają co kilka dni do określonych osób.

19:55Jeśli ktoś kliknie, to dostaje jakiś scoring i tak dalej.

19:58Więc można powiedzieć, że jest to

19:59takie narzędzie, dość rozbudowane do

20:01tworzenia jakiś automatyzacji marketingu i budowania swoich list mailowych dla

20:04twórców, dla osób, które coś sprzedają w sieci.

20:07No i jednocześnie ConvertKit ma po prostu bazę szablonów, z której możemy wybrać.

20:13Po to, żeby

20:14sobie z takiego predefiniowanego szablonu stworzyć landing page, gdzie on jest

20:18automatycznie już z tym całym narzędziem zintegrowany.

20:22Więc jest to zastosowanie dość specyficzne

20:24i specjalistyczne, ale jeżeli ConvertKit jest np.

20:27platformą, która w całości nam odpowiada jeśli chodzi o funkcje, czyli my chcemy

20:31stworzyć listę, chcemy sprzedawać produkt, spełniamy wszystkie warunki, które ConvertKit

20:35adresuje, no to warto się zastanowić nad tym, czy tego landing page'a też sobie nie

20:39postawić na ConvertKit'cie, bo wtedy to będzie znacznie szybciej, zajmie nam mniej

20:44czasu, no i jednocześnie będzie wszystko ze sobą zintegrowane.

20:47No i oczywiście minusem jest to, że

20:49ani ConverKit, ani GetResponse, ani MailChimp nie powstał po to, żeby robić

20:53landing page, więc naturalnie będzie to trochę gorszej jakości.

20:56Będziemy mieli mniej możliwości, edytor będzie gorszy, no i po jakimś czasie okaże

20:59się, że takie rozwiązanie przestaje wystarczać.

21:01Ja jestem ogólnie ogromnym fanem tego,

21:04żeby robić takie rozwiązanie, które na ten moment jest dla nas odpowiednie.

21:07W związku z tym absolutnie nie wykluczam takich rzeczy, nawet jeśli miałbym pójść

21:11na jakiś kompromis i nie mógłbym użyć mojego ulubionego koloru albo umieścić

21:15przycisku w moim ulubionym miejscu, to naprawdę warto oszczędzić czas.

21:19I jeśli nie jest to sprawa krytyczna i kluczowa, można zacząć od czegoś takiego,

21:24a później dopiero przesiąść się na jakieś bardziej zaawansowane rozwiązania.

21:28No i np. jeśli przestanie nam to wystarczać, zrobić

21:30coś z pomocą narzędzi, które wspomniałem wcześniej w tej lekcji.

21:34No i właśnie wtedy dojdziemy do takiego miejsca, gdzie będziemy musieli się

21:39zgodzić na to, że landing page to nie wszystko.

21:41No bo oczywiście pokazałem Ci jakieś różne

21:43sposoby na to, jak można sobie wyklikać taką stronę.

21:46I załóżmy, że nawet ta strona już jest pod jakąś naszą domeną.

21:49Tylko że co my oczekujemy od tej strony?

21:51Oczekujemy np.

21:52tego, że ludzie będą mogli się z nami jakoś skontaktować, zostawić swój adres

21:56email, kupić produkt, czyli dodać go do koszyka.

21:59My chcemy jakoś zorganizować komunikację z

22:01tymi osobami, czyli wysyłać im jakieś maile.

22:03Chcemy stworzyć jakiś mini CRM, gdzie te osoby będą trafiać.

22:06Chcemy połączyć to z listami, notyfikacjami i masą jeszcze innych rzeczy.

22:11No i teraz pytanie jak tą całą

22:13infrastrukturę, jeżeli nie będziemy korzystali z takich narzędzi jak np.

22:16ConverKit, które daje tą całą infrastrukturę a on top jeszcze jakiś landing page.

22:20To jak z pomocą właśnie dowolnego generatora takiego który pokazywałem

22:25dorobić do tego tą całą infrastrukturę, która nam jest potrzebna.

22:29I podobnie jak przed chwilą pokazałem te różne typy Web builder'ów, to w kolejnej lekcji

22:33przedstawię Ci sposób myślenia o tym jak możemy taką stronę czy landing page zacząć

22:38rozszerzać o kolejne usługi i jaki mindset warto tutaj przyjąć.

22:42Do usłyszenia!