Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
WPB Cup
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

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.

Best WordPress 404 error page design examples

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.

The default WordPress 404 page

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.

An example of a 404 page, designed in SeedProd

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.

An example of a 404 page design

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.

The OptinMonster 404 page design

Ä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.

An example of a lead generation 404 page

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.

Collecting leads using SeedProd's 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.

A gamified 404 page design

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.

An example of a gamified 404 page

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.

The TripAdvisor 404 error page

Ä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.

Adding a navigation menu using the SeedProd page builder

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.

A 404 page with dynamic text

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.

An example of a custom 404 error 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.

The Constant Contact email provider

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.

An example of the best 404 page designs

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.

SeedProd's CSS animations

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.

An example of the best 404 page designs

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.

Showing a random quote on your website

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.

A best selling products section

Ä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.

Adding WooCommerce products to a page using SeedProd

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.

A custom website footer

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.

A custom website header

9. Lägenhetsterapi

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

A 404 page with a large hero section

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.

Adding a hero section to a custom page in WordPress

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.

The Screaming Frog 404 design

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.

The MonsterInsights custom 404 error design

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.

A gamified error page

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.

The Southwest error page

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.

The Southwest footer

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.

Multiple WordPress widgets, arranged in a theme's footer

14. Polo Garcia

Polo Garcia's 404 page

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

Dribbble's 404 page

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.

Avslöjande: Vårt innehåll stöds av våra läsare. Det innebär att om du klickar på några av våra länkar, kan vi tjäna en provision. Se hur WPBeginner finansieras, varför det är viktigt, och hur du kan stödja oss. Här är vår editoriala process.

Avatar

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

Den ultimata WordPress-verktygslådan

Få GRATIS tillgång till vår verktygslåda - en samling WordPress-relaterade produkter och resurser som varje professionell användare bör ha!

Reader Interactions

72 kommentarerLämna ett svar

  1. Syed Balkhi

    Hey WPBeginner readers,
    Did you know you can win exciting prizes by commenting on WPBeginner?
    Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
    You can get more details about the contest from here.
    Start sharing your thoughts below to stand a chance to win!

  2. Moinuddin Waheed

    404 error is a very common error and having an optimized and beautiful 404 is a must for keeping the visitors interest continued.
    Seeing some the most interesting 404 error page, it feels like having those creativity and out of the box approach at my own 404 page.
    utilising seedprod to make awesome 404 error page for my websites.

  3. Jiří Vaněk

    People’s creativity is amazing. I was particularly captivated by Pixar’s 404 page, and I let myself be a bit inspired by it for my website too. I believe it’s very important to make the 404 page somewhat humorous to lighten the frustration for a user who encounters content they weren’t looking for. It brings a smile, eases emotions, and might even draw them towards exploring more content on the website.

  4. Damian

    Instead of configuring a 404 error page, I prefered set up a full sitemap page, better for our visitors.

  5. Nure

    Just awesome i like it
    thanks to share

  6. Bruce

    Thanks for this informative information. I like:

    9. Catswhocode
    17. Retard Zone

  7. Dennis

    Nice one!
    My favourite is #6 CSS ;)
    Thanks for sharing.

  8. Viidar

    How about this one? (in Norwegian, but you´ll get the picture):
    http://www.powertech.no/404

    Text: ”Ups, Mari, has been down in the server-room again…” (mari works in the finance-department ;) )

  9. Dave

    This page also pretty good, and very funny…
    [Link Removed because the site did not use WordPress]

  10. Niche Website Builder

    Very creative indeed! Of course, my favorite has to be the 404 error pages featuring Homer Simpson and his infamous ”D’Oh!”

  11. Phaoloo

    Nice examples, they inspire me for the next project.

  12. abrcity

    very nice article,very helpful

  13. Arif

    really nice designs, thanks for sharing

  14. Klim

    Some pages are really cool! Thanks for collecting them!

  15. Jeffro

    I like the catswhocode one. Works well with the site name! hah

  16. Hans

    I really like the illustration on Catalyst Studios’. That on Carsonified is also very nice (all of them are) :D

    I like this one to
    http://jayj.dk/404

  17. Asif Iqbal

    Very neat and clean options.. I am going to choone one of the best for my website.

    • Editorial Staff

      Love your weare page. The second one can still use some work.

      Administratör

  18. Tobbi

    Great collection. My favorites a #2 and #6

  19. GailGrannum

    Wow, you have really expanded my concept of the 404 page alternatives. Thank you for sharing very creative examples that will assist me in reducing my bounce rate. BTW – I have tweeted this article to my peeps.
    Gail

    • Editorial Staff

      We appreciate all the support on twitter :) If you ever have any questions or need help with WordPress feel free to ask us either via twitter or email.

      Administratör

  20. Teddy

    Thanks for the showcase! I always find a lot of inspiration in 404 pages – basically, a good 404 page will have to appease the possibly frustrated user as well as make a good impression so that the visitor will continue probing the site instead of navigating away almost immediately.

    Oh, and thanks for the tutorial too! I find it very useful and detailed for those who are still new to WordPress and PHP :) awesome job!

    p/s: Some shameless self-promotion here: http://www.teddy-o-ted.com/wp-admins (to trigger a 404 page) and http://www.teddy-o-ted.com/demo/ (not strictly a 404 page but I’m thinking).

    • Editorial Staff

      Love your Hot Dog idea. Also Oh God Dammit is pretty good too. Tough choice eh.

      Administratör

      • Teddy

        Kind of a tough choice. I think I’ll most probably be porting the hot dog idea over to my main site’s 404 template, heh.

        Speaking of which, what inspired you to make the 202 + 202 = 404 title? That’s an interesting one :)

        • Editorial Staff

          The idea of WPBeginner <<< Beginner and the whole number idea because I like numbers. Simple addition.

  21. werthers

    B3ta once ran a competition a long time ago for 404 images and they blew all these out of the water. One featured a map of the internet and an arrow and you are here to 404, it also had porn and the rantings of nerds among other areas.
    It’s going a long time back so I don’t know if many of the images are still hosted

  22. subcorpus

    awesome …
    need to think of kewl way to do that on my blog … hehe …

    • Editorial Staff

      That is surely a memorable one. Had we known about it before, we would’ve added it. Will consider for our next showcase :)

      Administratör

      • Oleg

        Thank You! I’m glad to hear your words :)

  23. Mike

    techkultura from Polish:

    404 The Way of the Samurai Codex

    ”If the searched page doesn’t exist,
    Immediately fulfill Seppuku.”

    • Editorial Staff

      Your page is funny and good looking. Keep up the great work, and we love Chuck Norris as well.

      Administratör

    • Thomas

      I’m pretty sure putting Adsense on a 404 error page is against Google’s terms of service, don’t you think?

      • Michel

        My WordPress theme uses standard templates, so the 404 page simply has a small adsense block at the top, as most of the pages of my blog have it, too. I wouldn’t worry about it, nor do I care much if this page shows (or not) adsense at all. I was showing the design of the page, not the adsense block — looks like you were looking elsewhere;-)

      • Michel

        Plus, if there’s content on the 404 page, Google allows to show ads on it — this is not against their TOS (this info could be useful to others, too) :)

Lämna ett svar

Tack för att du väljer att lämna en kommentar. Tänk på att alla kommentarer modereras enligt våra policy för kommentarer, och din e-postadress kommer INTE att publiceras. Vänligen använd INTE nyckelord i namnfältet. Låt oss ha en personlig och meningsfull konversation.