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

Letar du efter de bästa exemplen på design av 404 error page?

Rätt 404 page kommer att hålla besökarna kvar på din site längre och uppmuntra dem att konvertera. Genom att skapa en engagerande, hjälpsam och underhållande 404 page kan du ge besökarna en bra upplevelse, även när de ser ett error.

I den här artikeln delar vi några av de bästa designerna för 404 error page.

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

Ett 404 error inträffar när servern inte kan nå den page som någon försöker besöka. Istället för att visa en tom vy, visar servern en 404 page 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.

Helst vill du minska antalet 404 error på din website genom att redirecta användarna till liknande content.

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 websites 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 add to en nedräkningstimer till sin 404 page.

Denna timer räknar ner sekunderna tills besökaren automatiskt redirectas till den customize home page. Genom att skapa en limit gör DFY omedelbart sin 404 page mer engagerande och pressar besökarna att fatta ett beslut innan tiden rinner 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.

För mer information om hur du använder tidsgränser på din site, vänligen se vår guide om hur du lägger till ett widget för nedräkningstimer i WordPress.

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.

Om du klickar på knappen ”Download Now” öppnas en popup där personen kan skriva in sin email address och få sin gratis download.

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 page för leadgenerering, kan du samla email addresses med SeedProds Giveaway, Contact Form eller Optin Form block.

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 page ä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.

Varumärkesbyggande är en av de största fördelarna med att ersätta WordPress 404-sida med en custom design, och TripAdvisors page visar att varumärkesbyggande inte bara är customizers logotyper och images. Orden på din 404 page ä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 page visar en lista med posts som innehåller keywords relaterade till den länk som besökaren försökte komma åt när de fick 404 error.

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.

Om du vill veta mer om riktat content, vänligen se vår guide om hur du visar anpassat innehåll för olika användare i WordPress.

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 deras homepage.

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 add to en hero image till din design, så har SeedProd massor av färdiga hero sections. Dessa är samlingar av images, calls-to-action och till och med enkla formulär för insamling av leads som du kan add to din 404 design med ett click 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 visitorerna att fixa problemet själva är det fortfarande viktigt att add links till det viktigaste innehållet på din site.

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 displayed WordPress widgets i columns. Vissa WordPress-teman kommer till och med med flera widget-klara areas i footern 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 error page. Du kanske också vill kontrollera vår guide om hur man spårar besökare på webbplatsen, eller se vår jämförelse av de bästa tjänsterna för e-postmarknadsföring för att göra potentiella leads till betalande customers.

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.