So erstellst du deine eigene 404-Fehlerseite mit Elementor

19. Februar 2021
Lesedauer: 5 Minuten
Update 08. Januar 2024

"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

YouTube

Mit dem Laden des Videos akzeptieren Sie die Datenschutzerklärung von YouTube.
Mehr erfahren

Video laden

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.

Deine Steffi

Hier Weiterlesen

Herzlich Willkommen in
meinem Inner Circle

Hier wirfst du einen Blick hinter die Kulissen und erhältst wertvolle Tipps rund um Design & Business und bekommst alle Infos zu neuen Angeboten & freien Kapazitäten. 
Wenn du einmal monatlich vielmehr insights erhalten möchtest, trage dich hier ein:

Aktueller Beitrag

Stefanie Friedel1

Hi, ich bin Steffi

Ich bin Brand & Webdesign Mentorin und teile in meinem Blog Strategien und Design-Tipps für dein Business. 

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 ❤

Glossar
Webdesignerin

Hi, ich bin Steffi

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

Inhalt

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 ❤

Glossar

Child Theme

Ein “Child Theme” ist eine Art von WordPress-Theme, das die Funktionalität und das Design eines anderen Themes, des sogenannten “Parent Themes”, erbt und erweitert. Es ermöglicht dir, Anpassungen am Design oder an der Funktionalität deiner Website vorzunehmen, ohne das ursprüngliche Parent Theme zu verändern. So bleiben deine Änderungen auch nach einem Update des Parent Themes erhalten. Child Themes sind besonders nützlich, wenn du Anpassungen am Code vornehmen möchtest, ohne das Risiko einzugehen, dass deine Änderungen bei einem Update des Hauptthemes verloren gehen.

Website-Checkliste

Hole dir die
Website-Checkliste

Trage dich jetzt in meinen Newsletter ein