Cum să creați o pagină de eroare personalizată WordPress 404

Sunt șanse mari să fi aterizat pe o pagină 404 și să fi părăsit imediat site-ul, deoarece a fost mai puțin decât util. O pagină 404 este ceea ce WordPress afișează atunci când cineva introduce sau face clic pe o adresă URL care nu există pe site-ul dvs. web. Această pagină este o eroare generică care informează vizitatorul că pagina nu a fost găsită. În acest articol, vom explora cum să creați o pagină personalizată 404 pentru WordPress. Pe parcurs, vom vedea atât modele bune, cât și cele rele.

De ce să creați o pagină personalizată 404 pentru WordPress?

Este tentant să omiteți proiectarea paginii 404 pentru că sperați că nimeni nu o va vedea. Cu toate acestea, trebuie să fie de ajutor vizitatorilor dvs. Poate fi la fel de important ca orice altă pagină. Un mesaj general este o experiență proastă a utilizatorului. Nu arată bine și nu le oferă niciun motiv să rămână pe site-ul dvs. web.

În primul rând, să ne uităm la pagina generică pe care încercăm să o evităm.

Generic 404 Pagină

Pagina standard 404 afișată de WordPress este doar un mesaj de eroare. Este plasat în zona de conținut a corpului și vă arată antetul, subsolul și barele laterale dacă le aveți.

Din păcate, nu este util. Este ca și cum ai întreba un lucrător din magazin dacă ceva pe care îl cauți este pe culoarul în care te afli și ei spun doar că nu. Vrei să te îndrepte spre culoarul corect. Vrei mai multe informații.

O pagină 404 ar trebui să vă ofere mai multe informații. Ar trebui să fie de ajutor. Ar trebui să ofere instrumente, linkuri, sfaturi sau o formă de ajutor. Nu vrei să rămâi singur pe culoar neștiind unde să mergi mai departe.

Exemple de pagini personalizate 404

Există mii de 404 de pagini uimitoare pe web. Unele sunt amuzante, altele serioase. Unele sunt mai utile decât altele. Câteva sunt simple, în timp ce altele sunt superbe. Iată o privire la câteva 404 de pagini pentru a vă face o idee despre modul în care sunt proiectate. Unele sunt simple și plictisitoare, în timp ce altele sunt utile și arată grozav.

1. Google

Pagina 404 a Google (nu WordPress) este simplă. Este o mică zonă de conținut în centrul ecranului. Mesajul vă spune doar că există o eroare și oferă o imagine a unui robot în bucăți. Nu oferă alte informații, dar este Google, deci tot ce trebuie să faceți este să tastați altceva în bara de căutare.

2. WordPress.org

Pagina 404 a WordPress.org afișează antetul și subsolul standard. Corpul include un titlu pentru a arăta că pagina nu a fost găsită, o scurtă explicație cu un strop de umor și apoi o listă de link-uri care să vă ajute. Linkurile se concentrează pe a fi de ajutor.

3. WordPress.com

Pagina 404 a WordPress.com elimină antetul și subsolul. Afișează un grafic, un titlu, o descriere cu linkuri care pot fi făcute clic, o casetă de căutare și sigla WordPress.com. Linkurile sunt utile.

4. Teme elegante

Pagina 404 a Elegant Themes (pentru că știu că oricum vei arăta) prezintă antetul ET, un titlu mare cu o mică explicație și un buton ca CTA. Aveți acces la aproape totul de aici.

5. Douăzeci și douăzeci și unu

Tema WordPress Twenty Twenty-One are o pagină 404 care folosește meniurile primare și de subsol. Are un titlu mare. Corpul are o scurtă descriere și o casetă de căutare. Liniile sunt folosite pentru coafare. Fundalul se potrivește cu site-ul.

6. Douăzeci și douăzeci

Tema Twenty Twenty de la WordPress afișează antetul și subsolul. Corpul prezintă un titlu mare în centru, o explicație și o casetă de căutare. Toți folosesc culorile temei.

7. Slăbiciune

Pagina 404 Slack (non WordPress) prezintă o casetă în centru cu informații despre eroare cu un link către centrul de ajutor. Toate meniurile sunt și ele aici. Partea interesantă este fundalul. Este un fundal de desene animate care derulează la dreapta sau la stânga pentru a vă urmări mouse-ul. Animalele animate se mișcă pe ecran.

8. Amazon

Pagina 404 Amazon (și nu WordPress) include logo-ul Amazon cu o casetă de căutare, un mesaj mare, un mesaj mai mic cu un link către pagina de pornire și o fotografie a unui animal cu un link pentru a afla mai multe. Include o mulțime de fotografii diferite care pot fi afișate. Sunt alese la întâmplare.

404 Conținutul paginii

Deci, de ce are nevoie o pagină 404? Vedem câteva elemente comune în exemplele de mai sus.

În primul rând, trebuie să fie de ajutor. Nu ar trebui doar să spui vizitatorului că există o eroare. Ar trebui să spună ce înseamnă eroarea. Imaginați-vă o lumină de eroare care se aprinde în mașină. Prima întrebare ar fi „ce înseamnă asta?” Nespecificarea informațiilor utile despre eroare este frustrantă.

Vizitatorii trebuie să știe dacă au greșit sau dacă conținutul nu există. Dacă nu știu, vor continua să caute conținutul până când vor părăsi cu furie site-ul web, jurând să nu se mai întoarcă niciodată. Acest lucru se face cel mai bine cu un mesaj simplu și, eventual, cu o imagine care atrage atenția. Ceva care iese din conținutul tău normal, care ar atrage publicul tău.

Apoi, trebuie să ofere o direcție despre ce să facă în continuare. Aceasta ar putea fi o listă de articole, o casetă de căutare, o listă de categorii, cele mai populare postări, cele mai recente postări, o modalitate de a vă contacta etc.

Este atat de simplu. 404 de pagini nu au nevoie de mult conținut. Suficient pentru a fi de ajutor.

Exemplul de mai sus include:

• Culori de fundal și modele care s-ar potrivi cu site-ul web /
• Un titlu cu un mesaj scurt despre eroare.
• Text mare care arată că este o pagină de 404.
• Câteva butoane care oferă vizitatorului câteva indicații.

Este simplu, dar elegant și util. Asta e tot ce ai nevoie.

Să vedem cum să creăm o pagină personalizată 404 pentru WordPress folosind ideile de conținut pe care tocmai le-am discutat.

Cum să creați o pagină personalizată 404 în WordPress cu Divi Theme Builder

Divi Theme Builder facilitează crearea și atribuirea unei pagini de 404. Teme elegante are mai multe 404 de pagini premade pe care le puteți descărca gratuit. Le puteți personaliza în orice mod doriți. Acestea sunt o modalitate excelentă de a începe cu un design de 404 de pagini. Dacă preferați, puteți construi unul de la zero.

Exemplul de mai sus este din pachetul de layout Fourth Theme Builder. Există o mulțime de 404 de pagini disponibile pe blogul ET. Pentru a le găsi, căutați „pachetul de aspect pentru constructorul de teme” sau verificați-le aici:

• Descărcați primul pachet GRATUIT pentru Theme Builder pentru Divi
• Descărcați cel de-al doilea pachet GRATUIT pentru constructorul de teme pentru Divi
• Descărcați al treilea pachet GRATUIT pentru constructor de teme pentru Divi
• Descărcați al patrulea pachet GRATUIT pentru constructor de teme pentru Divi
• Descărcați al cincilea pachet GRATUIT pentru constructor de teme pentru Divi
• Descărcați al șaselea pachet GRATUIT pentru Temi Builder pentru Divi

Importarea unei pagini personalizate 404 în Divi Theme Builder

Veți găsi Divi Theme Builder în tabloul de bord WordPress accesând Divi > Theme Builder . Aceasta deschide pagina în care puteți crea sau importa șabloane și le puteți atribui. În colțul din dreapta sus, veți vedea pictograma de import. Faceți clic pe această pictogramă pentru a importa șablonul de 404 pagini.

Notă - pentru tutoriale despre utilizarea Divi Theme Builder, căutați „theme builder” aici în blogul Elegant Themes.

Se deschide un modal în care puteți importa șablonul. Selectați Import și navigați la fișierul dvs. din Alegeți fișierul . Opțiunile pentru a suprascrie valorile implicite și atribuțiile sunt selectate în mod implicit. Vă recomand să le lăsați selectate. Faceți clic pentru a importa șablonul din partea de jos a modului. Import pagina 404 pentru Crowdfunding Layout Pack.

Importând o pagină 404, aceasta este atribuită automat. Apoi, faceți clic pe pictograma de editare pentru a deschide constructorul.

Acum, faceți modificările în cadrul fiecărui modul adăugând link-uri, imagini, culori, text etc. Salvați aspectul și faceți clic pe x în colțul din dreapta sus pentru a închide constructorul.

În cele din urmă, salvați modificările pentru a aplica șablonul. Acum aveți o pagină personalizată 404.

Crearea unei pagini personalizate 404 cu Divi Theme Builder

În Generatorul de teme, selectați pentru a adăuga un șablon nou.

Aceasta deschide setările șablonului. Derulați în partea de jos și selectați 404 Pagină sub Altele . Apoi, faceți clic pe Creați șablon . Setările șablonului se vor închide.

Acum, puteți crea pagina 404. Majoritatea nu folosesc antet sau subsol. Selectați Adăugați corp personalizat .

Aceasta afișează două selecții care vă permit să creați un corp personalizat sau să adăugați din bibliotecă. Selectați Construiți corp personalizat .

Construiți pagina 404 cu Divi Builder în mod normal. Salvează și ieși.

În cele din urmă, salvați modificările. Ați terminat.

Gânduri de final cu privire la crearea unei pagini personalizate 404 pentru WordPress

Acesta este aspectul nostru de a crea o pagină personalizată 404 pentru WordPress. 404 de pagini trebuie să fie utile. Din păcate, pagina generică WordPress 404 nu este utilă și oferă o experiență slabă pentru utilizator. Din fericire, vă puteți crea propria pagină 404 folosind Divi Theme Builder.

Folosind informațiile pe care le-am furnizat aici, sunteți pe drumul cel bun pentru a crea o frumoasă pagină 404 care oferă utilizatorilor o experiență extraordinară și arată uimitor în timp ce o fac.

Vrem sa auzim de la tine. Ați creat o pagină personalizată 404 pentru site-ul dvs. WordPress? Spuneți-ne despre experiența noastră în comentarii.

Imagine prezentată prin Letters-Shmetters / shutterstock.com