So erstellst du deine eigene 404-Fehlerseite mit Elementor

19. Februar 2021
Lesedauer: 5 Minuten
Update 12. Juni 2024

Inhalt

Die 404 Fehlerseite ist eine häufige Erscheinung im World Wide Web und stellt für viele Internetnutzer*innen eine frustrierende Erfahrung dar.
Wenn eine Webseite oder Unterseite nicht gefunden werden kann, sei es aufgrund eines Tippfehlers in der URL oder weil die Seite gelöscht wurde, erscheint die 404 Fehlerseite. Diese informiert den Nutzer darüber, dass die gesuchte Seite nicht verfügbar ist und bietet möglicherweise alternative Links oder eine Suchfunktion an.
Die Gestaltung der 404 Fehlerseite kann dabei entscheidend sein, um den Nutzer nicht nur zu informieren, sondern auch zu unterhalten oder ihm bei der Navigation auf der Webseite zu helfen. Ein kreatives Design und eine klare, benutzerfreundliche Struktur können dazu beitragen, dass die 404 Fehlerseite nicht als frustrierend, sondern als hilfreich wahrgenommen wird. 

In diesem Beitrag erfährst du alle Infos zur 404-Fehlerseite, Designbeispiele & wie eine Anleitung, wie du die 404-Fehlerseite mit WordPress und Elementor anlegst. 

"Ein einfacher Fehler kann mir sagen, was Sie nicht sind, oder er kann mich daran erinnern, warum ich Sie lieben sollte"

1. Was ist eine 404-Fehlerseite?

Eine Fehlerseite taucht immer dann auf, wenn eine angeforderte Seite nicht mehr oder noch nie existiert hat. Es gibt eine Standardeinsicht die Auftaucht, wenn eine URL nicht korrekt ist: 

Fehler 404 – Seite nicht gefunden | Page not found 

Und wenn du bei Elementor Websites keine 404-Seite anlegst, dann siehst du folgendes: 

404-Fehlerseite

Doch das sieht 1. unprofessionell aus und ist 2. verschenkter Platz, den du ganz easy nutzen kannst.

Vergiss also bei der Erstellung der Website nicht, die 404-Seiten mitzugestalten.

Sollte sich ein Link ändern, dann kannst du auch mit einer 301-Redirect die Seite auf eine andere Seite umleiten. Es gibt Plugins wie z.B. Rankmath mit dem du eine Weiterleitung einrichten kannst. Hier findest du eine Anleitung dazu.

Aber zurück zu der Fehlerseite. 

2. Drei Tipps für deine Fehlerseite:

2.1. Passe die 404 - Seite in deinem Design an 

Verwende gerne eine Prise Humor um deine Landingpage zu gestalten. Ein gutes Beispiel ist  z.B. leadpages.net die anstelle von „Seite nicht gefunden“ mit der Überschrift „Wir sind auch verblüfft!“.  Achtung! Es sollte zur Tonalität deiner kompletten Website passen.

2.2. Biete neue Wege an

Niemand landet gerne auf einer Fehlerseite. Und deshalb sollte die 404-Fehlerseite unter keinen Umständen eine Sackgasse sein. Biete den gestrandeten Personen neue Wege an damit die Kundenreise weiter geht. 

Mögliche Beispiele sind: 

  • Verlinkung zur Startseite
  • Beliebteste Blogbeiträge
  • Suchfunktion
  • Hauptmenü
  • Freebie, Kostenloses Produkt
Beispiel-404-Fehlerseite

Erklär, wieso die Person auf dieser 404-Seite gelandet ist

Oftmals landen Menschen über alte Beiträge in der Suchmaschine auf einer Fehlerseite oder alte Links, die in den Tiefen des World Wide Web verlinkt sind. Deshalb solltest du die Person mit warmen Worten auffangen. Erkläre, dass die Seite nicht mehr verfügbar ist, es aber unzählige weitere Möglichkeiten für die Person gibt. 

3. So kannst du deine 404-Fehlerseite mit Elementor erstellen

Sie sehen gerade einen Platzhalterinhalt von YouTube. Um auf den eigentlichen Inhalt zuzugreifen, klicken Sie auf die Schaltfläche unten. Bitte beachten Sie, dass dabei Daten an Drittanbieter weitergegeben werden.

Mehr Informationen

So kannst du ganz einfach deine individuelle Seite erstellen. 

Du möchtest einen tollen Gold-Effekt für deine Schriften haben? Wie es mit Elementor funktioniert, siehst du in meinem kurzen Tutorial:  So kannst du Überschriften mit Gold-Effekt erstellen in Elementor

Pack es gleich an und erstelle deine eigene 404-Fehlerseite!  

Jetzt bist du dran! 
Ich bin natürlich auf dein Ergebnis gespannt und würde mich freuen, wenn du deine Fehlerseite mit mir über Instagram teilst 😍

Nutzt du den Divi-Builder für deine Website?

Dann schau doch gerne mal bei der lieben Sabine Richter vorbei. Sie hat einen Blog-Beitrag geschrieben, wie du deine 404-Fehlerseite mit Divi erstellst. 

Video Transkription

Hi, ich bin Steffi und im heutigen Video möchte ich dir zeigen, wie du dir deine individuelle 404-Fehler-Seite mit WordPress und dem Elementor Page Builder erstellst. Dann würde ich sagen, starten wir direkt los.

Warum es sinnvoll ist, eine eigene 404-Fehler-Seite anzulegen?

Immer wenn ein Link nicht mehr auf deiner Webseite verfügbar ist, dann wird eine Fehlermeldung angezeigt. Wenn du mit Elementor nun deine eigene Fehlerseite anlegst, dann kannst du die Menschen, die auf diese Seite kommen, weiterleiten und sie kommen nicht in eine Sackgasse.

Das heißt, wenn du zum Beispiel irgendwo in einem alten Beitrag einen Link verlinkt war, der nicht mehr gültig ist, dann taucht automatisch diese Fehlermeldung auf. Und das zu verhindern und vielleicht eine neue Option anzubieten, gibt es die Funktion eine 404 Fehlerseite selbst einzurichten. Und mit Elementor geht das mittlerweile super einfach und es gibt auch schon eine Menge Vorlagen, die du verwenden kannst. Deswegen machen wir das jetzt zusammen.

Erklärung

Ich befinde mich im Backend meiner Webseite und klicke zuallererst mal auf Templates und Theme Builder. Beim Theme Builder kann ich verschiedene Seiten anlegen und hier hast du auch die Möglichkeit eine individuelle Error-Seite anzulegen. Dazu gehen wir einmal auf das Plus und fügen eine neue Seite hinzu. Zuallererst findest du hier eine gute Übersicht mit Vorlagen und du kannst überlegen, du musst überhaupt nicht vom Null auf die Seite aufbauen, sondern kannst auch auf schöne Vorlagen zugreifen, die du anpassen könntest.

Zwei Sachen, die du dir im Vorfeld überlegen solltest, sind,

  1. wie möchtest du die Person ansprechen, die auf deine Fehlerseite stößt?
  2. Und das zweite ist, was möchtest du ihr für Optionen bieten?

Vielleicht hast du auch schon mal lustige Fehlerseiten gesehen, falls eine Webseite nicht mehr aufrufbar war. Und das kann auch schon erheitern und kann auch dazu beitragen, dass ich den ersten Frust, nachdem ich die Webseite aufrufen wollte und es funktioniert nicht, mit einem Schmunzeln deine Webseite verlasse oder weitergehe. Das heißt, du kannst dir überlegen, ob du die Ansprache witzig gestaltest. Das würde ich allerdings nur tun, wenn das zu deinem Unternehmenston passt.

Wenn du nämlich eher seriös bist und eigentlich gar nicht so viel Humor in deine Texte einfließen lässt, dann passt es nicht eine witzige 404 Fehlerseite zu erstellen. Das heißt als erstes überleg dir die Ansprache. Das zweite ist, was möchtest du als nächstes der Person bieten. Möchtest du sie weiterleiten auf deinen Blog? Möchtest du sie weiterleiten auf ein Produkt, such ein Ziel aus und biete es dann offensiv auf der Fehlerseite an. Wir suchen jetzt mal hier eine Fehlerseite aus, die wir anpassen wollen, die vielleicht auch zu unserem Stil passt. Dann gehe ich einfach auf einfügen und schon hat er hier die Fehlerseite übernommen. Jetzt können wir die Fehlerseite ganz individuell anpassen, wie deine Webseite auch. Das heißt, du kannst auch erst mal die Bilder tauschen, du kannst hier auch das Logo Tauschen in dein Logo und kannst hier auch die Texte nach deinen Texten anpassen.

Und wenn du das gemacht hast und fertig bist und deine 404 Fehlerseite individuell angepasst hast, dann klickst du hier auf veröffentlichen und hier wird schon gefragt wo die Fehlerseite erscheinen soll. Falls das nicht bei dir da ist, dann kannst du einfach auf Bedingungen hinzufügen klicken und dann kannst du hier eingeben 404 Seite. Wenn du jetzt auf Save and Close gibst, dann hast du quasi die Seite angelegt und immer wenn jetzt jemand einen falschen Link eingibt, dann wird er automatisch auf diese 404 Fehler Seite weitergeleitet. Das war auch schon der Zauber. Es ist also ganz einfach, du musst nur die richtige Einstellung wählen, dass du die als Template hinterlegst. Du kannst natürlich die Seite auch komplett selbst aufbauen und in deinem eigenen Design gestalten oder du suchst dir ein Template aus, das du anpasst mit deinen Texten und dann deine Seite veröffentlicht und so sparst du dir Sackgassen und kannst dann eine Option oder eine Lösung an deine Website Besucher bieten. Ich hoffe das Tutorial konnte dir weiterhelfen. Schau dich gerne auf meinem Kanal da gibt es noch weitere tolle Tipps zu WordPress und Elementor.

Und dann sehen wir uns beim nächsten Video.

ce1143ab75df4301a983d8ccb05497c4

Deine Steffi

Hier Weiterlesen

Du möchtest keinen Blog Beitrag mehr verpassen?

In meinem Newsletter viel:mehr insights bekommst du einen Blick hinter die Kulissen und bekommst die neuesten Blog-Beiträge direkt in dein Postfach.

Aktueller Beitrag

404 fehlerseite
Webdesignerin-stefanie-friedel

Hi, ich bin Steffi

Ich arbeite seit 2009 als Designerin und gebe auf meinem Blog Strategie, Business und Design-Tipps für dich.

Blume

Inhalt

Blume

Werbehinweis(*)

Hierbei handelt es sich um einen Affiliate-Link, das heißt, wenn du auf der verlinkten Website etwas kaufst, erhalte ich eine kleine Provision. Ich verwende solche Links ausschließlich, wenn ich selbst mit dem Tool arbeite, absolut überzeugt davon bin und von Herzen empfehlen möchte.  Für dich entstehen dadurch natürlich keine zusätzlichen Kosten! Du hilfst unterstützt mich dabei bei meiner Arbeit.  Danke ❤

Webdesignerin-stefanie-friedel

Hi, ich bin Steffi

Ich arbeite seit 2009 als Designerin und gebe auf meinem Blog Strategie, Business und Design-Tipps für dich.

Blume

Du brauchst unterstützung bei Brand- und Webdesign?

Werbehinweis(*)

Hierbei handelt es sich um einen Affiliate-Link, das heißt, wenn du auf der verlinkten Website etwas kaufst, erhalte ich eine kleine Provision. Ich verwende solche Links ausschließlich, wenn ich selbst mit dem Tool arbeite, absolut überzeugt davon bin und von Herzen empfehlen möchte.  Für dich entstehen dadurch natürlich keine zusätzlichen Kosten! Du hilfst unterstützt mich dabei bei meiner Arbeit.  Danke ❤

Keyword-Stuffing

Keyword-Stuffing bezeichnet eine übermäßige und unnatürliche Verwendung von Keywords in einem Text oder auf einer Webseite, um das Ranking in Suchmaschinen künstlich zu verbessern.

>>> Mehr erfahren

Lass uns kennenlernen und dein Projekt besprechen

Vorname *
E-Mail Adresse *
Wie lange gibt es dein Business schon? *
Nachname *
Business Name (Optional)
Website (optional)
FÜR WELCHE PROJEKTART INTERESSIERST DU DICH? *
Beschreibe hier deinen bedarf: *
Wann soll dein Projekt abgeschlossen sein? *
Du hast sonstiges gewählt, was möchtest du mit mir besprechen? *
Wie bist du auf viel:mehr design aufmerksam geworden? *
Wieso möchtest du mit Viel:Mehr Design zusammenarbeiten?
Gibt es noch etwas das du mitteilen möchtest?

Der Website Masterplan inkl. Launch-Rabatt bis 28.02.25.