Webflow: Edytor dla Klienta

0:00Cześć! Witaj w kolejnej lekcji, w której

0:01chciałbym pokazać Ci panel Edytor, czyli bardzo prostą, ale jednocześnie bardzo

0:06potężną funkcję Webflow, która wyposaży naszych współpracowników lub naszych

0:11klientów w możliwość edycji treści na stronie, edycji obrazów, edycji elementów, na

0:16które generalnie my jako twórcy strony zezwolimy.

0:19Jak to działa? Jestem na mojej stronie, pokażę Ci adres

0:23webflow-blog.eduweb.pl, czyli ta właściwa strona opublikowana już

0:27pod właściwą domeną. Moglibyśmy oczywiście wejść na stronę główną,

0:30stąd przejść na bloga i jesteśmy w tym

0:34miejscu, które projektowaliśmy w kursie i mamy do dyspozycji taki mały przycisk, który

0:38jest widoczny tylko dla nas, przycisk "Edit site". Gdybym wszedł na tę stronę w karcie

0:42incognito, nie widziałbym tego przycisku. Musimy być zalogowani w przeglądarce do

0:47Webflow i mieć uprawnienia do edycji po to, aby ten przycisk był dla nas dostępny.

0:52Jak takie uprawnienia można zdobyć?

0:54Przejdźmy do panelu Webflow i de facto

0:57tutaj z pomocą tego lewego górnego przycisku możemy

1:01przejść bezpośrednio do edytora wybierając Editor.

1:03Ale mi zależy na tym, żeby wejść na chwilę

1:05w Project settings i żeby pokazać Ci tę zakładkę Editor, bo to

1:09właśnie tutaj dodajemy osoby, które razem z nami mogą współpracować przy tej stronie,

1:14jak również możemy zmienić Branding i wybrać odpowiednie logo,

1:18które w tym trybie edytora będzie pokazywało się zamiast logo Webflow.

1:22Ale najważniejsze jest właśnie to, że

1:23możemy dodać kolaboratorów, czyli osoby, które mają uprawnienia do tego, żeby naszą

1:28stronę zmieniać. Jeżeli wpiszemy adres e-mail, wyślemy takiej osobie zaproszenie,

1:33ona będzie mogła kliknąć link, który otrzyma w mailu Webflow i wtedy założyć

1:38odpowiednie konto, ustawić sobie hasło. W momencie kiedy przejdzie na naszą stronę

1:43i wejdzie na nią z parametrem "edit", czyli znak zapytania w adresie.

1:48Jeżeli nie będzie zautoryzowany na naszej

1:50stronie, będzie proszony o zalogowanie się i musi podać te dane, które ustawił.

1:56A, jeżeli będzie już zalogowany to będzie

1:58miał dokładnie taki widok jak teraz, czyli jestem w tym momencie w widoku edytora

2:02i ten widok nie różni się prawie niczym od naszej normalnej strony.

2:05Poza tym, że ma takie małe menu tutaj na dole, ale najważniejsza jego funkcja to ta,

2:10że możemy najechać na dowolny praktycznie element i wybrać małą ikonkę edycji. Jeśli

2:14wybierzemy edycję będziemy mogli zacząć wprowadzać tutaj zmiany.

2:18Czyli możemy wprowadzić taką zmianę, możemy

2:21edytować kolejny element, możemy wyedytować nawet elementy menu, czyli dopisać coś do

2:26software, ale zwrócił uwagę, że możemy nawet wskazać inne zdjęcie z naszego komputera.

2:31I teraz, jeśli wybrałbym i zupload'ował tutaj jakieś przykładowe zdjęcie,

2:36zobacz teraz, że podmiana tego zdjęcia w tym miejscu ma taki skutek, że ono zmieniło

2:41się rzeczywiście w kolekcji CMSa, czyli jest też widoczne na miniaturkach.

2:45Jeżeli wejdę do tego konkretnego posta

2:47oczywiście to zdjęcie będzie też wyświetlane tutaj na samej górze.

2:51W związku z tym zostało ono podmienione w odpowiednim miejscu.

2:54Jeśli chodzi o ten element typu Rich text to zauważ, że po przejściu do jego edycji

3:00będziemy mogli też dopisywać do niego rozmaite rzeczy.

3:03Możemy zaznaczyć fragmenty tekstu i w tym momencie możemy też oznaczyć je w takim

3:08elemencie Rich text jakimiś znacznikami. Możemy je podlinkować, pogrubić, pochylić,

3:13stworzyć jako cytat. W związku z tym niektóre części, niektóre fragmenty naszej

3:17strony będą nawet zawierały więcej możliwości edycji. Teraz wszystkie

3:21modyfikacje, które wprowadzamy w ten sposób na stronie nie są od razu widoczne Live,

3:26tylko wymagają opublikowania. W tym momencie mam trzy nieopublikowane zmiany,

3:30które mogę podejrzeć. Jest tutaj edycja tekstu, edycja drugiego tekstu,

3:34zmiana zdjęcia. I dopiero w momencie, gdy

3:37kliknę guzik Publish to te wszystkie zmiany zostaną wdrożone na mojej

3:43Live site tak zwanej, czyli na stronie na którą mogę się teraz przenieść. Jeżeli

3:47przeszedłem na stronę, na bloga zobacz, że te zmiany nie są widoczne, ale jeżeli

3:52wrócę do edycji to będę miał je zakolejkowane do opublikowania no i o ile wcześniej mi

3:59nikt ich nie nadpisze to będę mógł opublikować taką stronę.

4:02Wybieram polecenie Publish changes.

4:05Przeglądam sobie te rzeczy, które tutaj są, a następnie czekam chwilę i moja strona

4:09zostanie zaktualizowana o zmiany, które tutaj zrobiłem.

4:13Cofnięcie tych zmian, przynajmniej na razie w Webflow,

4:15sprowadza się do tego, że trzeba znów wyedytować taki element i po prostu np.

4:20wykonać powrotną operację i taką zmianę też trzeba będzie opublikować.

4:25Ale to co chciałbym Ci pokazać to jeszcze jest menu na dole.

4:27Możemy stąd iść do Designer'a,

4:29do ustawień projektu, do naszego Dashboard'u, ale możemy także nawigować po stronach.

4:34Mamy tutaj Pages, czyli wszystkie strony, które znajdują się w naszym projekcie i

4:38możemy zarówno przejść do takiej strony po prostu klikając na nią np.

4:42przejść na stronę bloga.

4:43Możemy także przejść sobie raz jeszcze do

4:46Pages, a następnie przejść do ustawień właściwości tej strony.

4:51Mamy tutaj możliwość włączenia hasła, mamy

4:53te ustawienia SEO, mamy Open graph settings czyli ustawienia też pod kątem np.

4:58Facebooka i publikowania w social media,

5:00Site search settings i to jest wszystko bardzo ważne, że jest dostępne w Edytorze, dlatego, że nasz klient może

5:04sobie na spokojnie powypełniać wszystkie metadescription albo nasi współpracownicy

5:09na poszczególnych stronach, a następnie to zapisać. Można to albo zapisać od razu,

5:14aczkolwiek taka zmiana, jeśli wybierzemy polecenie Save nie zostanie też od razu

5:18opublikowana. Ona wskoczy nam do tych zmian, które są nieopublikowane.

5:22Natomiast istnieje jeszcze jeden sposób.

5:24Możemy kliknąć tutaj i zapisać to jako Szkic.

5:27Czyli w momencie kiedy zapisujemy to jako

5:30Szkic, oznacza, że jeszcze pracujemy nad tą sekcją i ona nie wskoczy do nieopublikowanych

5:34zmian. Będą tutaj widoczne te zmiany jako szkice, ale, gdy klikniemy Publish to nie

5:39zostaną nadpisane na stronie na żywo, czy nie będą widoczne.

5:44I to się przydaje zwłaszcza wtedy, kiedy pracujemy np.

5:47z kolekcjami.

5:48Zauważ, że kolekcje można tutaj również dodawać oraz edytować.

5:51Przykładowo możemy wejść do blog postów i każdy z tych blog postów ma jakiś

5:55konkretny określony status. W tym poście np.

5:59mamy jakieś zmiany, które są zakolejkowane. Staged

6:02to znaczy, że będziemy musieli opublikować

6:05stronę, żeby były widoczne. Ale możemy też sobie poza tym, że wejdziemy w edycję

6:10jakiegoś posta i zmienimy te wszystkie rzeczy.

6:12Możemy także, wybiorę polecenie Cancel,

6:14dodawać nowe Itemy do kolekcji. Czyli przykładowo dodać sobie nowy blog post, wpisać nazwę,

6:20slug się wygeneruje, dodać tutaj nasze obrazki, excerpt, content, czyli treść

6:25tego całego posta i jako, że jest to pole Rich text to, jeżeli będziemy pisać

6:30posta, będziemy mogli też wstawić tu wideo, obrazki i inne rzeczy.

6:33Możemy praktycznie edytować to tak jak w Wordpress. Możemy wskazać kategorię,

6:37możemy także wskazać tag oraz autora, jeżeli

6:40jesteśmy gotowi, mogę wpisać na razie test, to wtedy wybieramy polecenie Create.

6:45Jeżeli ciągle nad tym pracujemy, możemy wybrać, zobacz, że jest tutaj kilka opcji: Save as draft

6:50będzie pozwalało nam zapisać to jako szkic.

6:52Teraz co prawda wpadło to do

6:54nieopublikowanych zmian, bo dodaliśmy posta, ale nie będzie on widoczny na stronie, ponieważ

6:58ma cały czas status draft i możemy nadpisywać go jako draft, czyli jako szkic.

7:01Nie będzie ciągle widoczny, ale jeżeli

7:03będziemy chcieli go opublikować, możemy zrobić to na w zasadzie trzy sposoby. Po

7:07pierwsze możemy kliknąć od razu Publish i wtedy będzie widoczne na stronie Live

7:11bez konieczności publikowania całej strony.

7:14Jeżeli wybierzemy polecenie Stage for publish to wtedy zostanie zakolejkowane do

7:18opublikowania i będzie widoczne opublikowane dopiero wtedy, kiedy

7:22klikniemy guzik Publish, opublikujemy stronę stąd, czy z Designera.

7:26I w końcu mamy opcję Schedule, która pozwoli

7:29nam ustalić konkretny czas, kiedy ten wpis będzie miał zostać opublikowany.

7:34Takie coś mamy do dyspozycji w przypadku każdego CMS Item'a, zatem możemy rozszerzać

7:39naszą bazę danych i wszystkie rekordy, które tutaj się znajdują.

7:42Kolejna zakładka to formularze. Jeżeli na

7:44naszej stronie znajduje się jakiś formularz to wszystkie zgłoszenia, które

7:48przez ten formularz zostaną wysłane, wpadną tutaj jako "Form Submission Data", czyli będzie np.

7:52tutaj dodane pole e-mail, treść zgłoszenia,

7:55treść tego co ktoś wpisał w polu Text area np.

7:58w polu kontaktowym.

8:00Ponieważ my nie mamy żadnego formularza to tutaj tych danych nie ma.

8:03Ustawienia dotyczą naszego konta.

8:05Możemy zmienić swego awatara, możemy go usunąć, możemy zmienić nasze dane.

8:09Kolejno sekcja Help and support i możliwość wylogowania się.

8:13Publikujemy zmiany lub przechodzimy do Designera, jeśli mamy taką możliwość,

8:18jeżeli z Designera opublikujemy zmianę, czyli po prostu

8:22klikniemy na Publish i wybierzemy "Publish to selected domains" to te zmiany też zostaną

8:27opublikowane, które wdrożyliśmy właśnie w Edytorze.

8:31A dodatkowo chciałem pokazać Ci jeszcze

8:33jak można zarządzać tym co nasz klient może, a czego nie może edytować.

8:37Jeśli wybierzemy dowolny element na

8:39stronie, a następnie przejdziemy do jego ustawień, Settings, to na samym dole znajduje

8:43się coś takiego jak "Editor settings" i tutaj możemy zaznaczyć "Collaborators can edit this

8:48element", czyli opcję, która pozwoli (jest domyślnie włączona) edytować taki element tekstowy.

8:53Jeśli to odznaczymy,

8:55to po opublikowaniu zmian nie będzie można tego zmieniać z poziomu edytora.

8:59Na razie Webflow nie posiada jakiejś

9:01zaawansowanej wersji uprawnień, przypisania jakiejś właściwości edycji do

9:05konkretnego użytkownika danego elementu, ale z mojego doświadczenia wynika, że w

9:09zasadzie jest osoba, która zajmuje się zarządzaniem całą stroną i ona i tak ma

9:14dostęp do Designera, może tutaj wszystko pozmieniać, a edytor to tylko taka osoba,

9:18która uzupełnia treści, ewentualnie dokonuje jakichś małych zmian,

9:21więc można wtedy wyłączyć dla niej

9:22poszczególne sekcje. Natomiast prawdopodobnie w przyszłości i w Webflow

9:26znajdzie się jeszcze wiele ustawień i zarządzanie odpowiednimi uprawnieniami, a

9:30także edytor będzie zyskiwał szereg nowych dodatkowych funkcji, które będzie można

9:34wykorzystać, także polecam Ci sprawdzić edytor, jeżeli tylko masz plan hostingowy.

9:39Poklikać trochę i teraz już wiesz jakie są jego możliwości.

9:42Dziękuję Ci za uwagę w tej lekcji.

9:44Do usłyszenia w kolejnej.