Strona 404 to jeden z tych elementów, o których myśli się dopiero wtedy, gdy coś już nie działa.
Ktoś kliknie stary link, wpisze zły adres, zmieni się struktura URL-i, zniknie wpis albo podstrona — i nagle użytkownik ląduje na pustkowiu. W wielu przypadkach to po prostu koniec wizyty.
I właśnie dlatego 404 jest ciekawa. Bo technicznie to „tylko” strona błędu, ale w praktyce może:
-
zatrzymać użytkownika,
-
pomóc mu wrócić do właściwego miejsca,
-
uratować część ruchu,
-
i sprawić, że błąd nie wygląda jak awaria całej strony.
W Divi 5 zrobisz taką stronę bez wtyczki i bez kombinowania. To bardzo dobry temat do „Zrób to w Divi 5”, bo jest konkretny, praktyczny i wyraźnie różni się od szerokich tematów o strukturze strony.
W tym poradniku zrobisz prosty szablon 404 krok po kroku.
Po co w ogóle robić własną stronę 404
Bo domyślna strona 404 bardzo często niczego nie ratuje.
Zwykle informuje tylko, że:
-
strona nie istnieje,
-
coś poszło nie tak,
-
użytkownik może wrócić na stronę główną.
To za mało.
Dobra strona 404 nie ma tylko komunikować błędu. Ma też pokazać:
-
gdzie można iść dalej,
-
co zrobić teraz,
-
jak wrócić do sensownej ścieżki.
Jeśli ktoś trafił na zły adres, to nie znaczy jeszcze, że trzeba go stracić. Czasem wystarczy dobrze podana kolejna opcja.
Kiedy 404 naprawdę robi różnicę
Najbardziej wtedy, gdy:
-
przebudowujesz stronę,
-
zmieniasz strukturę URL-i,
-
usuwasz stare wpisy albo podstrony,
-
masz blog albo rozbudowaną sekcję treści,
-
ruch wpada z Google, starych linków, social mediów albo poleceń.
W takich sytuacjach 404 przestaje być „detalem technicznym”, a zaczyna być normalnym elementem doświadczenia użytkownika.
Zanim wejdziesz do buildera
Najpierw ustal jedną rzecz:
co użytkownik ma zrobić po trafieniu na 404?
Najczęściej sens mają 3 kierunki:
-
wrócić na stronę główną,
-
przejść do bloga albo oferty,
-
skorzystać z wyszukiwarki.
To ważne, bo bez tej decyzji łatwo zrobić stronę 404, która jest ładna, ale nadal ślepa użytkowo.
Krok 1 — otwórz Theme Builder
Wejdź do:
Divi → Theme Builder
To właśnie tam powinien trafić szablon 404, bo nie budujesz zwykłej strony, tylko specjalny template systemowy, który ma się wyświetlać automatycznie przy błędzie.
To dobrze wpisuje się w całą logikę tej praktycznej serii: header, footer, single post, archiwum kategorii, mobile menu, a teraz kolejny konkretny szablon, który robi jedną robotę i ma działać globalnie.
Krok 2 — dodaj nowy template dla strony 404
Dodaj nowy szablon i wybierz warunek dla:
404 Page
To kluczowe, bo nie tworzysz strony „na wszelki wypadek”, tylko przypisujesz konkretny układ do bardzo konkretnego przypadku.
Dzięki temu każda niedziałająca ścieżka na stronie będzie ładować właśnie ten szablon, a nie domyślny widok WordPressa.
Krok 3 — zbuduj prosty układ, nie mini landing page
Najczęstszy błąd przy stronie 404 to przesada.
Nie musisz robić:
-
wielkiego hero,
-
pięciu sekcji,
-
długiego opisu marki,
-
rozbudowanej sprzedaży,
-
osobnej historii „jak to się stało”.
Strona 404 powinna być prosta.
Na start wystarczy:
-
nagłówek,
-
krótki tekst,
-
1–2 przyciski,
-
opcjonalnie wyszukiwarka albo lista popularnych miejsc.
To naprawdę wystarczy, żeby użytkownik nie czuł się porzucony.
Krok 4 — napisz normalny komunikat
To ważniejsze niż się wydaje.
Komunikat 404 nie musi być sztywny ani techniczny. Ale też nie powinien być przesadnie zabawny, jeśli niczego nie wyjaśnia.
Dobrze działa coś prostego:
Nie znaleziono tej strony
Wygląda na to, że ten adres już nie działa albo został wpisany niepoprawnie.
Albo:
Tej strony już tu nie ma
Możesz wrócić na stronę główną albo przejść do jednej z poniższych sekcji.
To wystarczy.
Nie rób z tego komunikatu systemowego ani kreatywnego żartu, jeśli później użytkownik i tak nie wie, gdzie kliknąć.
Krok 5 — dodaj jeden główny przycisk
Najbezpieczniejsza opcja to:
Wróć na stronę główną
To najprostszy ruch i w wielu przypadkach w zupełności wystarczy.
Jeśli chcesz, możesz dodać też drugi przycisk, na przykład:
-
Zobacz blog
-
Przejdź do oferty
-
Skontaktuj się
Ale nie przesadzaj z liczbą opcji. Strona 404 nie powinna wyglądać jak pełne menu alternatywne.
Najczęściej dobrze działa:
-
jeden główny przycisk,
-
jeden pomocniczy link albo drugi spokojniejszy przycisk.
Krok 6 — rozważ dodanie wyszukiwarki
To jest moment, w którym 404 zaczyna być naprawdę użyteczna.
Jeśli strona ma więcej treści, szczególnie blog albo rozbudowaną bazę artykułów, warto dodać:
-
pole wyszukiwania,
-
albo link do strony wyników wyszukiwania / bloga.
To dobry most do kolejnego praktycznego wpisu, bo szablon 404 i strona wyników wyszukiwania bardzo dobrze się ze sobą spinają.
Jeśli użytkownik trafił na pusty adres, wyszukiwarka często jest najszybszą drogą ratunkową.
Krok 7 — pokaż kilka sensownych dróg wyjścia
Poza przyciskiem i wyszukiwarką możesz dodać prostą listę linków, na przykład:
-
Strona główna
-
Oferta
-
Blog
-
Kontakt
Ale właśnie prostą.
Nie chodzi o to, żeby 404 stała się drugą stopką albo rozbudowanym hubem. Chodzi o to, żeby użytkownik miał 2–4 oczywiste miejsca, do których może wrócić.
To bardzo często wystarcza.
Krok 8 — nie obciążaj tej strony za bardzo
To częsty błąd.
Ktoś myśli:
„skoro użytkownik tu wpadł, to może jeszcze pokażę mu ofertę, portfolio, wpisy, formularz, social media i trochę marki”.
I wtedy 404 robi się cięższa niż zwykła podstrona.
A przecież jej rola jest prostsza:
-
poinformować,
-
uspokoić,
-
przekierować dalej.
Im mniej tarcia, tym lepiej.
Krok 9 — sprawdź, czy 404 pasuje do reszty strony
To nadal jest część tego samego serwisu.
Sprawdź więc:
-
czy typografia pasuje do reszty projektu,
-
czy przyciski są spójne,
-
czy header i footer nadal się zgadzają,
-
czy strona błędu nie wygląda jak obcy element z innego motywu.
To ważne, bo nawet jeśli użytkownik trafił na błąd, nadal powinien czuć, że jest w tym samym miejscu, a nie na awaryjnej stronie systemowej.
Krok 10 — sprawdź wersję mobilną
Na telefonie 404 też potrafi się rozjechać.
Najczęstsze problemy:
-
za duży nagłówek,
-
za dużo pustego miejsca,
-
za długi tekst,
-
zbyt małe przyciski,
-
wyszukiwarka, która wygląda ciężko.
Sprawdź:
-
czy komunikat jest czytelny,
-
czy przycisk da się wygodnie kliknąć,
-
czy strona nie wygląda na „pustą” albo „dziwnie rozciągniętą”,
-
czy cały układ nadal prowadzi dalej.
Na mobile 404 powinna być jeszcze prostsza niż na desktopie.
Co naprawdę powinno znaleźć się na dobrej stronie 404
W pierwszej wersji spokojnie wystarczą:
-
jasny komunikat,
-
krótki opis,
-
przycisk do strony głównej,
-
opcjonalnie wyszukiwarka,
-
opcjonalnie 2–3 pomocnicze linki.
To już jest dobra 404.
Nie trzeba z niej robić projektu specjalnego. Wystarczy, że zatrzyma użytkownika i pokaże mu następną ścieżkę.
Najczęstszy błąd przy budowie strony 404 w Divi 5
Najczęstszy błąd nie polega na złym module.
Polega na tym, że 404 jest traktowana albo zbyt lekko, albo zbyt ciężko.
W pierwszym przypadku masz pusty komunikat typu:
„Nie znaleziono strony”.
W drugim:
masz przeładowaną stronę, która próbuje być landing page’em, blogiem, stopką i CTA jednocześnie.
Lepsza zasada brzmi:
to ma być krótka strona ratunkowa, nie pełna podstrona sprzedażowa.
Jak powinna wyglądać dobra pierwsza 404
Pierwsza wersja powinna być:
-
prosta,
-
czytelna,
-
szybka do zeskanowania,
-
spójna z resztą strony,
-
nastawiona na „co dalej”.
To wystarczy.
404 nie musi zachwycać. Ma po prostu działać lepiej niż domyślna wersja.