Webflow: Podstawowe ustawienia

Webflow 2020+

0:00Witaj w kolejnej lekcji jesteśmy dokładnie tam gdzie skończyliśmy przed chwilą czyli

0:03w ustawieniach projektu i w sekcji general tych sekcji jest tutaj sporo.

0:07Nie będę ich omawiał ale znów chciałbym

0:08żebyś chociaż miał świadomość co one robią i się trochę z nimi zaprzyjaźnił.

0:12Wiedział gdzie w razie czego można przejść i coś zmieniać.

0:16Więc w sekcji general ważną rzeczą jest

0:18sudomena pod tą sudomeną będziemy publikować naszą stronę.

0:21O ile nie zaczniemy swojej własnej domeny

0:23ja nie będę tego robił ale mimo wszystko nazwę tej subdomeny w domenie webflow.io

0:28Warto by było zmienić juice niestety jest już zajęta.

0:31Ale jeśli piszemy na przykład juice-website to już jest wolna i pod takim

0:36adresem wszyscy będą mogli oglądać naszą stronę nawet gdy ją będziemy tworzyć

0:40kolejną mamy favikonę ważna sprawa więc wybiorę sobie upload.

0:44Przejdę do plików źródłowych do tej lekcji, a następnie wybiorę plik trzydzieści dwa to jest

0:49obrazek PNG w tej wielkości którą tutaj webflow tutaj chcę.

0:54Czyli trzydzieści dwa na trzydzieści dwa piksele

0:56które musimy przygotować to Web clip w rozdzielczości dwieście pięćdziesiąt sześć na dwieście pięćdziesiąt sześć pikseli.

1:02I on też tutaj znajduje. Więc wybieram i został już zauplodowany.

1:05Jeśli chodzi o strefę czasową proszę wybierz poprawną zwłaszcza dla

1:08dynamicznych treści jest to istotne i stąd być może jeszcze będziesz chciał np.

1:11zabezpieczyć Twoją stronę hasłem.

1:13Wtedy gdy ktoś wejdzie pod ten adres w sudomenie łatwo ją zanim zobaczy stronę.

1:17Będzie musiał podać hasło to co możesz jeszcze usunąć webflow brading

1:21czyli informacja o tym, że strona została zrobiona w webflow.

1:24Domyślnie jest wyłączony taki beath który

1:26się z prawej strony na dole wyświetla made in webflow.

1:29Ale możesz też wyłączyć brading webflow HTML - u jeżeli nie chcesz żeby ktokolwiek

1:34widział w jakim edytor że zrobiłeś stronę. To wszystko z tej zakładki.

1:38W zakładce hosting będziesz mógł wykupić cały plan hostingowe.

1:41Zarówno dla zwykłego hostingu jak i dla sklepów e-commerce.

1:44Może wejdę tutaj na chwilę żeby trochę przybliżyć ci to w jaki sposób w ogóle

1:48odbywa się płacenie za używanie webflow bo to może nie być na początku bardzo

1:51intuicyjne, a chodzi o to że możemy w zasadzie z w ogóle korzystać całkowicie za

1:56darmo ale tylko wtedy gdy używamy designera tworzymy własne projekty i

2:01hostujemy i używamy tego tej subdomeny webflow do tego żeby ją podglądać.

2:06Czyli w zasadzie na potrzeby tego kursu

2:08spokojnie możesz korzystać z zupełnie darmowej wersji webflow.

2:12Natomiast ta wersja darmowa ma też sporo

2:13ograniczeń przykładowo gdybyś chciał pobrać cały kod źródłowy Twojej strony w

2:17ZIP nie mógłbyś tego zrobić na wersji darmowej trzeba by było przejść na jakiś

2:20plan płatny i teraz te plany płatne to nie są te które są tutaj wylistowane.

2:25Są to plany które umożliwiają na jakimś

2:27lepszym poziomie na wyższym poziomie korzystanie z samego designera.

2:31Natomiast jeżeli zdecydujemy się hostować to

2:33naszą stronę na serwerach Webflow wtedy musimy dopłacić osobno za hosting.

2:38I to są właśnie te plany.

2:39Czyli jedną podstawową opłaty abonamentową

2:42płacimy za korzystanie z designerów w wyższej wersji, a dodatkowo będziemy mogli

2:46sobie wybrać jakiś plan w zależności od opcji które tutaj nam się będą potrzebne.

2:52Jeżeli chodzi o hostowanie naszej strony jest to bardzo wygodnie moim

2:56zdaniem cennik jest w miarę konkurencyjny więc warto taką stronę hostować na webflow.

3:00Ogromną zaletą jest to że możemy cały czas

3:02korzystać z edytora, a w momencie gdy będziemy hostować u nas musimy na jakimś

3:06etapie ściągnąć tą stronę z Zip-ie . Już nie wrócimy tego ZiP-a do zauploadujemy jeszcze raz do edytora.

3:11Także warto się nad tym zastanowić,

3:14a dodatkowo mamy tutaj zakładkę e-commerce gdybyśmy korzystali z sekcji e-commerce.

3:18To webflow ma specjalny hosting dla e-commerce

3:20który jest droższy ale zawiera jakieś udogodnienia np.

3:23brak opłat transakcyjnych możliwość podjęcia stripe itd.

3:27I wtedy musielibyśmy skorzystać z któregoś z tych planów.

3:30Czyli podsumowując jeżeli chcemy na jakimś

3:32swoim serwerze utrzymywać stronę nie musimy mieć żadnego z tych planów

3:36i ewentualnie musimy tylko dokupić subskrypcję na korzystanie z designera.

3:40Natomiast jeśli chcemy równocześnie hostować to webflow będziemy potrzebowali

3:45czegoś z zakładki hosting następnie edytor czyli właśnie to miejsce.

3:48Gdzie nasi klienci mogą wejść na stronę zalogować się jako administrator to możemy

3:53tymi administratorem. Zarządzać dodawać ich i zmieniać bezpośrednio w przeglądarce.

3:57Sekcja billing to sekcja w której znajdziemy wszystkie swoje rachunki np.

4:00za hosting ale zobacz że jest tutaj też coś takiego jak klient billing czyli

4:03możemy automatycznie czardzować naszych klientów za ich stronę.

4:07Jeżeli utrzymujemy je na webflow.

4:09Kolejna sekcja to SEO i tutaj się zaczęłam

4:12bo jest to bardzo ważna sekcja domyślnie nasza strona jest wyłączona spod

4:15indeksowane przez roboty czyli przez Google.

4:18W momencie gdy jesteśmy gotowi żeby ją

4:20opublikować to trzeba też przełączyć to aby się ona indeksowi była na tej sudomenie.

4:25Zwykle nie będziemy nigdy chcieli żeby się indeksowała.

4:28Dopiero wtedy będziemy chcieli kiedy dodamy tutaj swoją własną domenę.

4:33Kolejne opcje są głównie dostępne w momencie kiedy mamy hosting na webflow.

4:37Wtedy można dodać sobie plik z txt można wygenerować automatycznie sitemapę.

4:42Masa rzeczy która nam ułatwia życie

4:43gdybyśmy znów musieli to robić na swoim serwerze.

4:46Musielibyśmy sprawdzić jak to zrobić. Co tam dodać.

4:49Jak wygenerować sobie sitemapę i samodzielnie grać.

4:51Poniżej znajduje się natomiast sekcja weryfikacji Google dla naszej strony.

4:55Warto założyć konto na tzw.

4:56google search consol po to żeby monitorować to jak.

5:00Radzi sobie w internecie, ile jest ruchu

5:02organicznego na jakie frazy się pozycjonujemy jakie są problemy z indeksowaniem.

5:07Bardzo ważna diagnostyczną rzecz dla

5:09każdej osoby która utrzymuje stronę w momencie gdy jesteśmy na tej subdomenie webflow.

5:13Ono nie ma sensu tego robić ale już gdy połączymy się na produkcję trzeba będzie

5:17założyć konto w google search consol i teraz wtedy google search consol poprosi

5:21nas żebyśmy zweryfikowali identyfikatorem który trzeba tutaj wkleić i można to zrobić.

5:27Dodatkowo SEO i optymalizacja naszej

5:30strony polega na ustawieniu ważnych znaczników meta tittle oraz meta description.

5:35Tutaj webflow linkuje wyłącznie do artykułu do materiału.

5:39Jak to zrobić ale ja dokładnie pokażę ci jak zrobić naszą stronę żeby

5:43seo friendly żeby zawierała wszystkie te potrzebne tagi.

5:46W każdym razie pamiętaj że tutaj też znajdują się opcje indeksowania i dopóki

5:50ich nie przełączyć strona nie będzie widoczna w wyszukiwarce Google.

5:55Kolejna zakładka to ustawienia formularzy.

5:57Możemy z bloków w ramach webflow wybrać sobie

5:59rozmaite formularze i pozwolić je wysyłać naszym klientom.

6:02Będą one mogły być wysyłane nawet jeżeli

6:04jesteśmy na tej roboczej w subdomenie uprawiają z tym że wtedy mamy ograniczenie

6:09do pięćdziesięciu wysłanych z formularzy maili w ten sposób możemy tutaj ustalić powiadomienia.

6:14W momencie gdy ktokolwiek wyśle maila

6:17z adresu no-reply@webform.io dostaniemy na jakiś adres e-mail który sobie podamy

6:22informację o tym że formularz został wypełniony i możemy tutaj nawet przekazać

6:26jakieś różne dane do takiego maila zostaniemy informacje .

6:29O tym ile takich maili już zostało wysłanych, a w formularzach dodatkowo stąd

6:33możemy włączyć walidacje re-captcha czyli puzzle od Google które zapobiegają z

6:38spamerom i maszyną które mogłyby spamować z naszych formularzy.

6:41Swoją drogą świetny ruch google w ten sposób my też uczymy algorytmy google tego

6:46co znajduje się na obrazkach więc naprawdę spoko tutaj dodatkowych rzeczy już nie

6:50będę tłumaczył nie ma tu na razie nic istotnego.

6:53Fonty ominę i zaraz do nich przejdziemy w

6:55sekcji backupów znajdują się te wszystkie snap shoty o których mówiłem ci wcześniej.

6:59Ja w ten sam sposób też zorganizuje pliki źródłowe i spróbuję stany poszczególnych

7:04lekcji zapisać też do backupów, a następnie udostępnić ten szablon żebyś mógł

7:09przeglądać sobie do każdej lekcji odpowiednią wersję strony.

7:12Kolejna zakładka to integracja gdzie będziemy wpisać kod Analytics czy np.

7:16Facebook piksela i będę to omawiał na samym końcu.

7:20Także teraz nie poświęcamy na to zbyt dużo czasu. W końcu custom code w każdym

7:24momencie możemy dodać do sekcji head i do sekcji footer naszej stronę jakiś kod.

7:30Gdybyśmy chcieli przykładowo zintegrować

7:32się z różnymi narzędziami z analityki, z narzędziami których nie wspiera natywnie webflow

7:38łatwo możemy zawsze taki kod sobie tutaj wstrzyknąć i będzie działać.

7:43Więc to wszystko poza fontami przejdźmy

7:45teraz do zakładki fontów i chciałbym omówić je w kolejnej lekcji.