Webflow: Puste Stany

0:00Cześć! Witaj w kolejnej lekcji.

0:01Zauważyłem, że wyniki wyszukiwania nie

0:04pokazują się dobrze, a przynajmniej nie pokazują się przy nich poprawne zdjęcia.

0:07I dlatego style trochę się rozjeżdżają.

0:11Natomiast te zdjęcia powinny się pokazywać przynajmniej tak, jak tutaj mamy rozjechane

0:15style, w przypadku postów na blogu. Jak widzisz tutaj już mamy rzeczywiste wyniki

0:19wyszukiwania z postów na blogu, ale niestety zdjęcia nie są widoczne, jeśli

0:22klikniemy sobie na Search results image i zobaczymy skąd ten obrazek jest brany, to teoretycznie jest

0:28pobierany poprawnie, dynamicznie z Search index'u.

0:31Problem w tym, że, jeśli wyłączymy jest OK,

0:33a, jeśli to włączymy nie jest OK, więc problem w tym, że w tym Search indeksie

0:38nie ma dobrych zdjęć. W związku z tym skąd Search Index bierze zdjęcia?

0:42Jeżeli przejdziemy do właściwości i tutaj

0:44akurat chodzi nam o stronę wyników naszego bloga, czyli przejdźmy do stron i do

0:49wszystkich stron z postami, czyli Blog post templates.

0:53Teraz, jeśli rozwiniemy Site search settings

0:56znajduje się tutaj Search image. To jest właśnie ten obrazek. On jest brany z

1:01ustawień Open graph image url, czyli z tej sekcji i mamy tutaj image url, Open graph

1:07image, powinniśmy wybrać sobie odpowiedni obrazek.

1:10Ewentualnie możemy to odznaczyć.

1:13I wybrać po prostu obrazek dla samych wyników wyszukiwania.

1:16Przykładowo nasz obrazek 16 na 9. Zróbmy

1:18ten obrazek już taki sam rzeczywiście jak w ustawieniach Open graph, o których powiem

1:22trochę później i wybiorę po prostu image 16 na 9.

1:26Jeżeli takie zmiany zapiszemy, wybieram polecenie Save.

1:31To teraz już wszystko powinno działać.

1:33Natomiast będziemy musieli jeszcze wybrać

1:36zaindeksowanie wyników, czyli wybieramy Ustawienia następnie Search i Index now.

1:41W tym momencie nasze wyniki się manualnie indeksują.

1:44Po opublikowaniu strony zaraz powinny być dostępne również zdjęcia.

1:49W międzyczasie jak to się przeładowuje, można to zamknąć, to się dzieje w tle,

1:53chciałbym pokazać Ci,

1:54o właśnie już obrazki zaczęły się pojawiać. Ale chciałbym pokazać jeszcze jedną ważną

1:58rzecz. Mianowicie wyniki wyszukiwania mają różne stany.

2:01Jeśli przejdziemy do Search result wrapper

2:03okaże się, że możemy przejść do stanu Default, który jest aktualnie wyświetlany.

2:08Możemy tu zarządzać długością snippetów i długością rezultatu, to już Ci pokazywałem,

2:13ale możemy też przejść do sekcji No results. I okazuje się, że w tym miejscu

2:17wyświetli się to, co będzie pokazywane użytkownikowi w momencie, gdy dana fraza

2:23wpisana przez niego w wyszukiwarkę nie zostanie odnaleziona.

2:26Warto jest stylować również te stany

2:28No results i zaraz pokażę Ci ich więcej. Z plików źródłowych

2:31do tego kursu dodam do naszej biblioteki obrazków jeszcze 3 pliki svg.

2:35Teraz przeciągnijmy jeden z tych obrazków na scenę, w to miejsce. Do Empty state

2:40dodajmy jakieś proste stylowanie,

2:42czyli możemy zrobić Flex box'a.

2:44Wybierzmy Direction vertical, wybierzmy

2:46wycentrowanie też w pionie oraz wstawmy odpowiedni Padding

2:50na przykład

2:51w ten sposób, ustawmy go na 165 pikseli i to jest dużo bardziej przyjazny ekran niż ten,

2:56który mieliśmy na początku z brakiem wyników wyszukiwania.

2:59Ale ten brak wyników jest też dostępny w

3:02zasadzie we wszystkich elementach kolekcji.

3:03Gdybyśmy przykładowo przeszli sobie do

3:05wszystkich postów albo do naszej strony głównej bloga, to możemy przygotować się na

3:11sytuację, w której nie będzie zwróconych żadnych wyników.

3:14Przykładowo, gdybyśmy nie mieli żadnych postów w kategorii Mobile,

3:19to wtedy zostałby automatycznie wyświetlony dla nas taki widok.

3:22Przejdźmy do Collection list wrappera,

3:24a następnie do jego Settings, Ustawień i mamy tutaj Empty.

3:28Jak widzisz nie jest to też zbyt fajne,

3:31czyli mamy tylko coś takiego jak No items found.

3:33Znajduje się to w takim specjalnym stanie

3:36Empty state, który warto teraz trochę dostylować.

3:38Czyli na razie mamy tutaj tylko Text block'a.

3:40Przejdźmy do stylowania.

3:42Zaraz może ustawmy od razu wyświetlanie

3:45na Flex'a, natomiast zrobimy sobie jakiś większy margines. Chcę zmienić też kolor

3:52ten kolor tła mi jest niepotrzebny więc po prostu go usunę.

3:55Mamy No items found, ale obok tego Text block'a

3:58wrzucimy sobie jeszcze obrazek i wybierzemy jeden z obrazków, który zaimportowałem np.

4:03taki albo taki obrazek z kawą i możemy wrzucić np.

4:08GIFa, oczywiście GIFy też możesz importować i na Empty state ustawimy to Vertical

4:12i znów wycentrujemy te Itemy.

4:14Wydaje mi się, że tak jest OK.

4:16Klasa, która tutaj powstała to Empty state 2.

4:19Moglibyśmy np. zmienić ją na Empty state cards.

4:23I teraz całkiem fajnym pomysłem byłoby dysponowanie taką klasą po to, aby po

4:27prostu definiować sobie dla wszystkich widoków, gdzie mamy karty, takie puste stany.

4:32Problem, na który byśmy tutaj trafili to obrazek, który trzeba za każdym razem

4:37byłoby dokładać do takiego kontenera Empty state cards.

4:40Więc to co moglibyśmy zrobić to usunąć ten obrazek i po prostu wrzucić go jako tło.

4:44Więc Empty state cards, przejdźmy do jego właściwości, a następnie jako Background image

4:50and gradient dodajmy sobie nowy obrazek jako wypełnienie. Wybieram

4:55polecenie Choose image, wybieram obrazek z kawą.

4:58Następnie wybierzmy opcję Cover, umieśćmy

5:01go na środku, nie chcemy żeby był powielany.

5:04No i wygląda to już OK,

5:06natomiast to, co musimy zrobić to zmienić

5:09wielkość i rozmiary tego samego kontenera. Nadajmy mu rozmiary np.

5:13minimum 300 na 300 pikseli.

5:16I teraz wypadałoby jeszcze ten Text block

5:19umieścić gdzieś na górze, na przykład nad tym obrazkiem.

5:22No i dobrze by było zrobić to na tej samej klasie, którą mamy Empty state cards, a nie na samym Text

5:26block'u. Więc moglibyśmy to zrobić na tej klasie Empty state cards w ten sposób, że zmienimy Padding.

5:32Jak widzisz zarządzanie Paddingiem w ten

5:35sposób powoduje, że będziemy automatycznie przesuwać ten tekst,

5:39czyli musimy dolny Padding po prostu zmienić tak, aby tekst wylądował nam na

5:44górze. I mając coś takiego możemy już teraz skopiować nazwę klasy,

5:49następnie przejść sobie do Blockchain na przykład, do Empty state i wstawić

5:54tutaj Cmd + Return tę samą klasę Empty state cards i zostanie to automatycznie

5:59dodane. Także w bardzo prosty sposób

6:02przygotowaliśmy sobie uniwersalną klasę, która zarówno zawiera obrazek jak i pozycjonuje

6:06odpowiednio elementy, które będą pojawiać się przy pustych stanach.

6:09Warto o te stany zadbać. Zawsze jak stawiamy coś dynamicznie, jak stawiamy kolekcje, to mamy

6:14do dyspozycji w ustawieniach takie ustawienie UI state jak Empty,

6:18no i trzeba je dostosować.

6:20Teraz pozostało nam stronę opublikować,

6:22a jeśli chodzi o jakieś fajne ilustracje do pustych stanów, to możesz znaleźć masę

6:27ciekawych linków, ciekawych inspiracji w sieci.

6:29Na pewno zaprezentowanie

6:30jakiejś przyjaznej ilustracji w pustym stanie, zamiast zwykłego suchego tekstu

6:35będzie dla użytkownika UX'owo dużo lepsze.

6:37To wszystko w tej lekcji. Dzięki za uwagę i do usłyszenia.