15 bästa exempel på design av sidor med 404 error i WordPress

Enligt vår mening är 404-felsidan ett av de mest underskattade elementen på en WordPress-webbplats.

När besökare landar på en 404-sida befinner de sig vid ett vägskäl. De kanske är frustrerade, förvirrade eller redo att lämna din webbplats. Men med rätt design och innehåll kan du hålla kvar besökarna på din webbplats längre, uppmuntra dem att utforska vidare och till och med leda till konverteringar.

I den här artikeln delar vi med oss av några av de bästa designerna för 404-felsidor som vi har stött på. Dessa exempel visar kreativitet, funktionalitet och effektiv användarvägledning.

Varför du måste optimera din 404-design

Ett 404-fel inträffar när servern inte kan nå den sida som någon försöker besöka. Istället för att visa en tom skärm visar servern en 404-sida istället.

De flesta templates för WordPress levereras med en grundläggande 404 template, men dessa designer är vanligtvis grundläggande och enkla.

De visar inte heller något content från din website, till exempel populära posts som besökaren kanske vill läsa, eller din sites navigation menu.

Om du visar besökarna en tråkig, ohjälpsam 404 page är det mer troligt att de lämnar din website, vilket ökar din avvisningsfrekvens och skadar din sökmotorsoptimering i WordPress.

Det bästa vore om du kunde minska antalet 404-fel på din webbplats genom att omdirigera användarna till liknande innehåll.

Det är dock inte möjligt att alltid göra det. Ibland kan ett 404 error uppstå på grund av en felstavad URL eller link.

Med det i åtanke är det smart att skapa en customize 404 page som har yours eget varumärke och content. Du kan också hjälpa besökarna att hitta det de letar efter genom att lägga till sökfält, menyer, links och annat användbart content.

Det enklaste sättet att skapa en customize 404-design är genom att använda SeedProd plugin. Det är den mest populära drag and drop landing page builder, så du kan skapa en custom 404-sida utan att skriva någon kod.

SeedProd har också massor av professionellt utformade 404 templates som hjälper dig att skapa en beautiful error page, snabbt.

När du har installerat SeedProd är det en bra idé att vända dig till dina konkurrenter för inspiration. Med detta i åtanke har vi samlat de bästa designerna för 404 error pages för dig att klura på.

1. DFY

Många webbplatser använder timers för att skapa en känsla av brådska och få fler konverteringar med hjälp av FOMO. DFY tog dock det ovanliga beslutet att lägga till en nedräkningstimer på sin 404-sida.

Denna timer räknar ner sekunderna tills besökaren automatiskt omdirigeras till startsidan.

Genom att skapa en tidsgräns gör DFY omedelbart sin 404-sida mer engagerande och pressar besökarna att fatta ett beslut innan tiden går ut. Det är också ett ovanligt designval, så det kommer garanterat att fånga besökarens uppmärksamhet.

404-sidans meddelanden add to denna känsla av brådska, vilket gör detta till en mycket dramatisk och övertygande page design.

2. OptinMonster

OptinMonster är ett av de bästa tilläggen för att genomföra email för WordPress som används av över 1,2 miljoner websites. Det har allt du behöver för att förvandla besökare till prenumeranter och customers.

Inte överraskande använder OptinMonster sin 404 page som ett lead-generationsverktyg med en iögonfallande animation och clear call-to-action.

Ännu bättre är att deras pitch är relaterad till besökarens situation.

När någon landar på en 404 page finns det en stor chans att de ger upp och överger your website, eftersom de inte kan hitta det de letar efter.

OptinMonsters pitch spelar in i detta genom att fråga: ”Visste du att över 70% av besökarna som överger din website aldrig kommer tillbaka?

Eftersom besökaren redan tänker på att överge en website är det mer troligt att de agerar på denna statistik. Call-to-action erbjuder sedan besökarna en gratis e-bok som lovar att konvertera övergivna website-besökare till prenumeranter.

Genom att klicka på knappen ”Download Now” öppnas en popup där personen kan skriva in sin e-postadress och få sin gratis nedladdning.

Som vi kan se använder OptinMonster 404 error till sin fördel genom att skapa en pitch som känns väldigt relevant och aktuell.

Om du vill använda din egen 404-sida för leadgenerering kan du samla in e-postadresser med hjälp av SeedProds block Rozdanie, Contact Form eller Optin Form.

3. Kualo

Många websites använder gamification för att bygga kundlojalitet och få folk att komma tillbaka.

Kualo har tagit detta ett steg längre och spelifierat sin 404 page.

Istället för att hjälpa besökarna att hitta tillbaka till Kualos huvudwebbplats utmanar 404 page dem till ett Space Invaders-spel.

Detta förvandlar ett frustrerande error message till en rolig överraskning. Ännu bättre är att Kualo ger dig ett incitament att fortsätta spela när dina liv är slut.

Popupen erbjuder Players en rabatt på webbhotell om de hanterar att få över 1000 poäng. Det här är ett perfekt exempel på en 404 page som får besökarna att stanna kvar längre på din website och som adderar värde till användarupplevelsen.

4. Resenär

TripAdvisors 404-sida är rolig och funktionell, och inleds med ett skämt som är specifikt för resebranschen.

När någon landar på din 404-sida kan de vara frustrerade över sin upplevelse. Humor kan vara ett bra sätt att återengagera dessa människor.

Ännu bättre är att skämten alltid knyter an till TripAdvisors varumärke.

Branding är en av de största fördelarna med att ersätta WordPress 404-sida med en anpassad design, och TripAdvisors sida visar att branding inte bara är anpassade logotyper och bilder. Orden på din 404-sida är lika viktiga som grafiken.

404 page lyfter också fram alla de viktigaste area på TripAdvisor website, vilket hjälper visitorerna att hitta det de letar efter.

Eftersom navigation är så viktigt, rekommenderar vi att du tittar på SeedProd’s Nav Menu block. Det låter dig bygga alla typer av menyer direkt i page editor. Detta gör det enkelt att add to användbara menyer till din WordPress website.

5. Brett Terpstra

Vid första anblicken kan Brett Terpstras 404 page se enkel ut, men den verkliga kraften ligger i dess lista över föreslagna posts.

Brett Terpstras 404-sida visar en lista över inlägg som innehåller nyckelord som är relaterade till den länk som besökaren försökte komma åt när de fick 404-felet.

Det är ett enkelt trick som adderar mycket till upplevelsen för besökaren.

Dynamiskt content kan göra din site mer användbar, engagerande och tilltalande, så det är vettigt att utöka detta till din 404 page.

6. Constant Contact

Constant Contact är en annan 404 page som använder humor för att vinna över frustrerade besökare. Providern av email-tjänster använder ett informellt språk för att tilltala sin målgrupp, samtidigt som de ger besökarna en användarvänlig väg tillbaka till homepage.

Om du rullar ner på sidan hittar du länkar till några andra viktiga områden på Constant Contact-webbplatsen.

Men det vi verkligen gillar är den korta hover-animationen som spelas upp varje gång du för musen över ett av de blå blocken.

Animering kan göra en page mer engagerande, och de många hover-effekterna och animeringarna skapar ett berättande element när besökaren rör sig runt på 404-sidan.

Det finns några olika sätt att animera din 404 page, inklusive att markera och rotera din text med hjälp av SeedProd Animated Headline block.

SeedProd kommer också med över 40 entréanimationer som du kan add to alla block, inklusive images, text, knappar, videoklipp och mer.

För mer information, vänligen se vår guide om hur du lägger till CSS-animationer i WordPress.

7. IMDb

De flesta människor kommer att stöta på din 404 page när de letar efter något helt annat. Eftersom 404 error är oväntat är det viktigt att försäkra besökarna om att de fortfarande är på din site genom att upprätthålla varumärkeskännedom.

IMDb gör detta på ett mycket subtilt och lättsamt sätt genom att visa ett berömt citat från en film eller ett TV-program.

De innehåller också en link för att lära sig mer om TV-serien eller filmen som de citerar.

På så sätt förstärker IMDb:s 404 page deras varumärke samtidigt som den ger besökarna ett roligt sätt att utforska deras content.

Attvisa slumpmässiga citat på din 404 page kan vara roligt och engagerande. Det är dock fortfarande en bra idé att tillhandahålla länkar till webbplatsens viktigaste content, bara ifall besökaren inte är intresserad av den slumpmässigt valda länken.

Det är precis vad IMDb gör, genom att lägga till en länk till sin hemsida.

8. SteveMadden

Steve Madden försöker vända ett error-meddelande till försäljning genom att visa sina bästsäljande produkter på 404 page.

Ännu bättre är att de har add to filter, så att customers kan browsing de olika produkterna direkt från 404 page.

Om du run en onlinebutik kan du enkelt visa dina mest populära produkter genom att lägga till blocket Bästsäljande produkter på din 404 page.

SeedProd har också WooCommerce block som du kan använda för att visa produkter som är till salu, högst upp rankade produkter, senaste produkter och mer.

När du utformar din egen 404 page är det en bra idé att använda samma header och footer som resten av din website. På så sätt förstärker du ditt varumärke och hindrar besökarna från att undra om de är på rätt plats.

Detta är exakt vad vi ser med Steve Maddens 404 page, men vi gillar viss hur mycket content de hanterar för att få plats i dessa två små areas.

Headern och footern hjälper besökarna att hoppa direkt till alla delar av Steve Maddens store, eller till och med webbplatser från tredje part som företagets Twitter- och Facebook pages.

De ger även tillgång till interaktiva areas, inklusive en smart produktsökningsbar.

9. Lägenhetsterapi

Denna 404 design från Apartment Therapy fångar omedelbart besökarens uppmärksamhet med en stor hero image.

Apartment Therapy använder också detta utrymme för att förstärka sin varumärkesidentitet genom att visa ett snyggt foto av ett kök tillsammans med ett skämt om washi-tejp.

Om du vill lägga till en hjältebild i din design har SeedProd massor av färdiga hjältesektioner. Dessa är samlingar av bilder, uppmaningar till działanie och till och med enkla formulär för insamling av leads som du kan lägga till i din 404-design med ett klick på en knapp.

Det finns till och med en section som skulle passa perfekt på Apartment Therapy website.

10. Skrikande groda

I likhet med några av de andra 404 pages på den här listan använder Screaming Frog humor för att försöka engagera besökarna.

Men till skillnad från de andra företagen på den här listan skapar Screaming Frog ett verktyg som hjälper webbplatsägare att hitta och fixa trasiga länkar. Deras 404 page slösar ingen tid på att påpeka ironin i att Screaming Frog website har en trasig URL.

Genom att skämta med sig själva levererar Screaming Frog en minnesvärd 404 page som inte tar sig själv på för stort allvar.

Den animerade bakgrunden hjälper också den här 404-designen att sticka ut från mängden.

Videoklipp och animationer är ett bra sätt att göra din 404 page mer engagerande. De kan dock add to 404 sidans hämtar tider.

Följ därför våra tips för att snabba upp WordPress prestanda, särskilt om du använder många stora eller högupplösta videoklipp i din 404-design.

Du bör heller aldrig uppladda videoklipp direkt till WordPress, eftersom det kan ha stor inverkan på din sites prestanda.

Istället rekommenderar vi att du uppladdar filen till ett webbhotell för videoklipp och sedan embedar filen på din site.

Detaljerade instruktioner finns vänligen i vår guide om hur du enkelt embedar videoklipp i WordPress.

11. MonsterInsights

MonsterInsights är det bästa WordPress-tillägget för Google Analytics. Det allow you att enkelt installera Google Analytics i WordPress och visar användbara rapporter i WordPress dashpanelen.

MonsterInsights är ett bra exempel på en branded page. Så snart som visitorerna kommer till 404 page kommer de att se en unik grafik baserad på MonsterInsights logga.

Det här är ett roligt sätt att låta besökarna veta att de fortfarande är på MonsterInsights website, även om de har följt en bruten länk.

Den här page förklarar också vad ett 404 error är och föreslår några saker som besökaren kan göra för att fixa felet. Att hjälpa människor att själva lösa 404 error kan förbättra upplevelsen för besökaren, så det är en bra idé att inkludera denna information på din egen 404 page.

Även om du uppmuntrar besökare att poprawka problemet själva är det fortfarande viktigt att lägga till länkar till webbplatsens viktigaste innehåll.

MonsterInsights 404-sida ger människor några alternativ genom att inkludera länkar till supportsidan, MonsterInsights kunskapsbas, prissättningssidan och mer.

12. MAD

MAD har skapat en enkel men mycket interaktiv page genom att använda toggles för att skapa ett 404 error message. You can remove this message by turning all the toggles off, or even create your own message by activating the toggles.

Det är en mycket enkel men trevlig upplevelse som är utformad för att få mycket interaktion från besökarna. Det är också en mycket unik 404 page som visitorerna kommer att minnas och kanske till och med dela med sig av till andra på social media.

Denna slående design bevisar att du kan bygga en minnesvärd och underhållande 404 page från en enkel idé.

13. Sydväst

Southwests 404 page försöker hjälpa besökare att komma tillbaka på track genom att förklara vad en 404 är och varför de kan se error. De föreslår även några möjliga fixar, vilket kan vara till hjälp om din målgrupp inte är särskilt bekant med 404 error.

Där denna design verkligen sticker ut är hur många links den hanterar för att visa på ett snyggt och organiserat sätt.

If you scroll to the bottom of the screen, then you will notice social media links, contact information, a link to join their email list, and many other URLs, all arranged in clear and user-friendly categories.

404-sidan i Southwest är ett bra exempel på hur mycket information du kan packa in på en page utan att överväldiga besökaren.

Här är rätt layout nyckeln, och Southwest gör ett bra jobb med att använda kategorier, listor och olika sektioner för att skapa en 404 page som är informationsfylld men ändå användarvänlig.

Om du vill kopiera Southwests layout är det enkelt att visa WordPress-widgetar i kolumner. Vissa WordPress-teman har till och med flera widgetklara områden i sidfoten som standard.

14. Polo Garcia

Ett annat sätt att göra designen av din 404 page unik är att använda en animerad GIF eller en bakgrund med videoklipp i full vy.

Designern Polo Garcias website är ett bra exempel på det. Den använder en GIF i full vy av en ekorre på vatten. Detta skapar en visuellt engagerande och uppslukande upplevelse, även för en error page.

Denna taktik kan genomföra besökarens uppmärksamhet och göra dem mindre frustrerade över att landa på en icke befintlig page.

15. Dribbling

En av de bästa metoderna för att förbättra din 404 page är att rekommendera resurser eller lägga till ett search-formulär för att hålla användarna kvar på din website. Det är bra alltihop, men det finns utrymme för att tänja på gränserna för en verkligt unik upplevelse.

Ta Dribbble’s 404 page, till exempel. Istället för en statisk lista har de skapat ett interaktivt element där själva 404 error-meddelandet fylls med images som matchar ett specifikt färgschema.

Användarna kan sedan clicka på dessa interaktiva images för att utforska dem vidare. Detta add to ett lager av interaktivitet som ej ej endast håller användarna engagerade utan även förstärker Dribbble’s fokus på visuellt content.

Vanliga frågor om design av 404 Error Page

Nu när vi har gått igenom de bästa exemplen på design av 404-sidor, låt oss titta på några vanliga frågor om den här error-sidan.

Påverkar 404 pages sökmotorsoptimering?

Även om 404 error i sig inte direkt skadar din sökmotorsoptimering kan de indirekt påverka den genom att göra användarna frustrerade och få dem att lämna din site snabbt. En väldesignad 404 page kan faktiskt hjälpa din sökmotorsoptimering genom att erbjuda användbara resurser och hålla besökarna engagerade.

Hur ska en 404 page gilla att se ut?

Nyckeln till en 404 page är att vara clear och hjälpsam. Inkludera ett vänligt message som förklarar att sidan inte kan hittas, tillsammans med förslag för att komma tillbaka på track. Det kan vara links till din homepage, populärt content eller en site search bar.

Hur gör du en cool 404 page?

Du kan använda en page builder som SeedProd för att enkelt skapa en snygg 404-sida. Det har redan massor av 404 page templates som du kan använda så att du inte behöver börja från scratch.

En annan page builder du kan prova är Thrive Theme Builder, som också är lätt att använda för att designa en 404-sida.

Har 404 pages footers?

Footers är ej obligatoriska för 404 pages. Men genom att inkludera en grundläggande footer med viktiga länkar som din kontaktinformation eller Sitemap kan du upprätthålla en känsla av konsekvens och erbjuda ytterligare sätt för användare att navigera på din site.

Vi hoppas att den här artikeln har hjälpt dig att hitta de bästa exemplen på design av 404-felsidor. Du kanske också vill kolla in vår przewodnik om hur du skapar en wiralowy landningssida för väntelistor i WordPress och våra expertval av de bästa mallarna för landningssidor för WordPress.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.