So erstellen Sie mit Elementor eine benutzerdefinierte 404-Seite für Ihre WordPress-Site

Veröffentlicht: 2021-12-24

Sie gehen auf eine Website, geben die URL ein und bam! Nichts passiert!

Sie sehen eine Seite mit der Meldung „Seite nicht gefunden“ oder so ähnlich. Diese Art von 404-Fehler ist frustrierend für Besucher und kann zu einer hohen Absprungrate führen. Hier kommt die 404-Seite ins Spiel. Ein einfacher, aber wichtiger Teil jeder Website, auf dem Sie eine entschuldigende Nachricht anzeigen und den Benutzer in die richtige Richtung weisen können.

Mit Elementor können Sie eine benutzerdefinierte 404-Seite auf Ihrer WordPress-Website erstellen, die Ihren Besuchern hilft, den Weg zurück in die beabsichtigte Richtung zu finden.

In diesem Artikel erklären wir, warum die Verwendung einer 404-Seite vorteilhaft ist, wie man eine 404-Seite in Elementor erstellt und die bevorzugten einzuschließenden Elemente teilt. Am Ende haben wir auch einen Bonus für Sie mit einigen wunderschönen 404-Seiten, von denen Sie sich inspirieren lassen können, während Sie Ihre eigene erstellen.

Wann tritt der 404-Fehler in WordPress auf

How To Create Custom Elementor 404 Page

Eine 404-Fehlermeldung bedeutet, dass der Webbrowser eine Seite oder Datei anfordert, die nicht existiert. Diese Fehlermeldung wird vom ursprünglichen Webserver als Antwort auf eine ungültige Anforderung vom Webbrowser eines Benutzers generiert.

Wenn das Problem von der URL herrührt, dann kann das mehrere Gründe haben:

  • Die URL ist falsch geschrieben oder falsch geschrieben.
  • Die Webseite, auf die der Besucher zuzugreifen versucht, wurde seit dem letzten Besuch umbenannt.
  • Die Seite ist aufgrund eines Serverausfalls, einer Wartung durch Site-Administratoren oder einer absichtlichen Löschung von Inhalten durch den Administrator/anderen Benutzer nicht mehr verfügbar.

Aber wie genau kann eine benutzerdefinierte 404-Seite Ihnen als Benutzer helfen? Lass es uns herausfinden.

Wie eine benutzerdefinierte WordPress-404-Seite helfen kann

Die standardmäßige 404-Seite, die normalerweise von der Website angezeigt wird (von der Serverseite, um genau zu sein), sieht nicht gut aus. Sie können ihm jedoch mit Elementor ein personalisiertes, benutzerdefiniertes Gefühl geben.

Personalisierte 404-Seiten sind eine großartige Möglichkeit, einem Besucher, der auf einen fehlerhaften Link auf einer Website gestoßen ist, eine schnelle und freundliche Antwort zu geben.

Am besten können Sie dies tun, indem Sie dem Benutzer Hilfe anbieten oder ihn auf eine andere Seite verweisen. Wenn beispielsweise jemand eine nicht vorhandene Seite auf Ihrer Website besucht, würde eine großartige 404-Seite dies in etwa wie die folgende erzählen:

„Es tut uns leid, dass die von Ihnen gesuchte Seite nicht gefunden werden konnte. Bitte verwenden Sie das Navigationsmenü oben, um die Seite zu finden.“

Das Schöne daran ist, dass sich der Benutzer umsorgt fühlt, obwohl er die Seite, die er besuchen wollte, nicht findet. Und für Sie als Website-Eigentümer gibt es Ihnen die Möglichkeit, Ihren Besuch etwas länger zu halten und möglicherweise auch zu einer Website-Konvertierung zu führen.

So erstellen Sie eine 404-Seite auf einer von Elementor betriebenen Website

Create a 404 Page With Elementor

Die Natur von Elementor ist, dass es das Erstellen einer Webseite super einfach macht. Mit der visuellen Bearbeitungsoberfläche von Elementor und vielen vorgefertigten benutzerdefinierten Vorlagen können Sie mühelos eine 404-Seite erstellen.

Um eine 404-Seite mit Elementor zu erstellen, benötigen wir Folgendes:

  • Elementor (Kostenlos & Pro)

Wir haben beide Plugins bereits installiert und können nun mit der Erstellung unserer 404-Seite mit Elementor fortfahren.

Methode 1. Wählen Sie eine 404-Seite aus der Elementor-Vorlagenbibliothek

Wir werden zuerst eine 404-Seite mit dem Elementor-Theme-Builder hinzufügen. Bitte beachte, dass für den Elementor Theme Builder die Pro-Version des Plugins installiert sein muss.

Navigieren Sie zunächst zu WordPress Admin Dashboard > Templates > Theme Builder .

Elementor Theme Builder

Von hier aus finden Sie die Error 404- Optionen unter den Site-Teilen. Klicken Sie auf Fehler 404 , um mit der Anpassung zu beginnen.

Accessing Elementor 404 Blocks

Sie sehen dann ziemlich viele fertige 404-Seiten-Vorlagen in einem Popup-Fenster, wie im Bild unten. Sie können entweder eine der Vorlagen auf dieser Seite auswählen und darüber mit der Anpassung beginnen. Um eine Vorlage zu verwenden, können Sie einfach mit der Maus darüber fahren und auf Einfügen klicken.

Elementor 404 Blocks

Im folgenden Abschnitt zeigen wir Ihnen, wie Sie mit dem Elementor-Editor und Widgets eine 404-Seite von Grund auf neu erstellen. Wenn Sie keine vorgefertigte Vorlage verwenden möchten, zeigen wir Ihnen jetzt den personalisierten Weg. Schließen Sie dazu zunächst das Popup, ohne Vorlagen auszuwählen.

Methode 2. Erstellen Sie eine 404-Seite von Grund auf neu

Sobald Sie das Popup-Fenster der Vorlagenbibliothek schließen, werden Sie zu einer leeren Elementor-Editor-Oberfläche umgeleitet.

Elementor Editor Interface
Von hier aus werden wir zwei Spalten hinzufügen. So können Sie es tun –
Create columns using Elementor

Fügen Sie danach einen Bildblock hinzu, um ein witziges 404-Fehlerbild nach dem folgenden Bild zu verwenden.

Add image using Elementor

Fügen Sie nun einen Header-Abschnitt auf der Seite hinzu.

Add header using Elementor

Fügen Sie auch etwas Text hinzu, wenn Sie möchten. Wir haben auch einige beschreibende Texte hinzugefügt.

Add texts using Elementor

Schließlich richten wir die Spalte mittig aus, damit sie besser aussieht. Klicken Sie danach auf Aktualisieren .

Middle Align the Column on Elementor

Wir haben einfach und erfolgreich eine 404-Seite mit Elementor entworfen. So sieht es aus.

Elementor 404 Page

Verwenden Sie HappyAddons, um schöne 404-Vorlagen zu erhalten

Wenn Sie Elementor bereits durchstöbert und kein passendes Template zur Auswahl gefunden haben, können Sie auch eines von HappyAddons verwenden.

HappyAddons haben derzeit mehr als 70 fertige Seitenvorlagen und mehr als 400 fertige Blöcke. Wir haben auch einige großartige 404-Vorlagen, aus denen Sie auswählen können, und wir entwickeln auch ständig neue Designs.

Um auf die HappyAddons 404-Vorlagen zuzugreifen, beginnen Sie dort, wo wir den Elementor-Theme-Builder verlassen haben. Beginnen wir der Einfachheit halber noch einmal von vorne.

Navigieren Sie zunächst zu WordPress Admin Dashboard > Templates > Theme Builder und klicken Sie auf die Option Error 404 . Danach finden Sie die Elementor 404-Vorlagen in einem Popup-Fenster. Schließen Sie das Fenster und Sie befinden sich im Elementor-Editor.

Klicken Sie von hier aus auf das HappyAddons-Symbol.

HappyAddons Icon on Elementor Page Editor

Geben Sie 404 ein und Sie werden einige gut aussehende 404-Seitenvorlagen finden.

Bewegen Sie den Mauszeiger über die gewünschte Vorlage und klicken Sie auf Einfügen .

HappyAddons Block

Jetzt sollten Sie feststellen, dass Ihre Seite mit einem wunderschönen Design ausgestattet ist, das Ihre Kunden nicht verärgern wird.

404 Block by HappyAddons

Sie können die Seite weiter anpassen, indem Sie den Text, die Überschrift oder sogar das Bild ändern.

Klicken Sie dazu auf das Element, das Sie anpassen möchten. Angenommen, Sie möchten den Absatztext ändern. Doppelklicken Sie dazu einfach auf den Text und Sie finden einen Texteditor in der Seitenleiste.

Elementor Text Editor

Sie können auch Textfarbe, Schriftart, Schriftgröße und mehr ändern.

Klicken Sie dazu auf die Registerkarte Stil in der Seitenleiste. Und es sollte die Textstiloption öffnen. Sie finden Optionen wie Textausrichtung , Textfarbe , Typografie (Schriftart, Größe usw.) und Textschatten . Sie können alle nach Ihren Bedürfnissen anpassen.

Elementor Text Style

Es gibt auch eine erweiterte Registerkarte daneben, die weitere Gestaltung, Positionierung und Animationen ermöglicht.

Sie finden solche Optionen für alle Elemente der Seite wie Überschrift, Schaltfläche oder Bild , um das Design ganz nach Ihren Wünschen anzupassen. Wenn Sie fertig sind, klicken Sie auf Veröffentlichen , um die Seite zu veröffentlichen, oder auf Aktualisieren , wenn Sie die Seite bereits veröffentlicht haben.

Publish or Update Elementor Page

Tolle! Sie haben gerade eine fantastisch aussehende Elementor 404-Seite für Ihre WordPress-Site erstellt.

Holen Sie sich HappyAddons zum Erstellen schöner 404-Seiten

Einige großartige Beispiele für 404-Seiten, von denen Sie sich inspirieren lassen können

Lassen Sie uns Ihnen nun einige großartige 404-Seiten zeigen, damit Sie sich inspirieren lassen können, wenn Sie selbst eine WordPress 404-Seite erstellen.

1. Schreiender Frosch

404 page screaming frog

ScreamingFrog, die Heimat des sehr beliebten Webcrawler-Tools, hat eine gut gestaltete 404-Seite mit witzigem Humor im Text. Aber die Seite hat auch eine Richtung für den Besucher, der auf der Seite gelandet ist. Tolles Design, check. Witz, check. Benutzer helfen, überprüfen.

2. Schlaff

404 page slack

Slack, das Tool der Wahl für die Kommunikation, zeichnet sich auch durch die Gestaltung großartiger Benutzeroberflächen sowohl für ihre Software als auch für die Website aus. Ihre 404-Seite enthält eine natürliche Landschaft, um Ihre Irritationen gering zu halten und Ihnen eine ruhige Atmosphäre zu verleihen. Damit ermutigten sie den Benutzer auch, das Hilfezentrum zu besuchen, um die Informationen zu finden, nach denen der Benutzer sucht.

3. Zauberwelt

404 page Wizarding World
Wer liebt Harry Potter nicht? Und als Website, die dem Harry-Potter-Fandom gewidmet ist, hat die Wizarding World-Website eine ikonische Harry-Potter-Szene auf ihrer 404-Seite. Sie können auch eine 404-Seite erstellen, die die Emotionen Ihres Publikums verbindet.

4. Destilliert

404 page distilled

Destilliert hat, was wir eine perfekte ansprechende 404-Seite nennen. Jetzt denken Sie vielleicht, warum muss eine 404-Seite ansprechend sein, geschweige denn der Markenkonsistenz folgen? Nun, selbst die unbedeutendsten Seiten Ihrer Website sind wichtig, wenn es darum geht, wie Ihr Publikum Sie wahrnimmt. Destilled ist es sicherlich gelungen, durch seine 404-Seite positiv zu wirken, während es gleichzeitig dem Benutzer hilft, zu der beabsichtigten Seite zu navigieren.

5. Ervin & Smith

404 page evin & smith

Ervin & Smith hat etwas Großartiges zu bieten. Sie haben eine clevere 404-Seite, die tatsächlich zu einem CTA führt. Und wir wissen nicht, wie es Ihnen geht, aber wir würden definitiv auf diesen CTA klicken, um die Antwort zu erkunden.

Denn warum nicht?

Das waren also einige 404 Seiten, die uns aufgefallen sind, als wir nach der riesigen Leere gesucht haben (Emptiness? 404? Got it? ). Es gibt sicherlich noch viele weitere großartige 404-Seiten, und eine davon könnte diejenige sein, die Sie erstellen möchten. Also vielleicht heute anfangen?

Beginnen Sie noch heute mit dem Erstellen Ihrer Elementor 404-Seite

Inzwischen sollten Sie ein gutes Verständnis dafür haben, warum es wichtig ist, bei Ihren Besuchern einen guten ersten Eindruck zu hinterlassen. Sie sollten auch verstehen, dass eine 404-Seite das erste ist, was Ihre Besucher sehen, wenn auf Ihrer Website etwas schief geht – was bedeutet, dass sie auch einer der wichtigsten Orte für Sie ist, um ein effektives Erlebnis zu bieten. Aus diesem Grund sollten Sie so viel Zeit und Mühe wie möglich in die Erstellung einer 404-Seite investieren, die Ihre Marke wirklich zum Leben erweckt.

Schaffen Sie eine Erfahrung, die dem Benutzer nicht das Gefühl gibt, dass Sie ihn verlassen hätten, sondern mit einem Gefühl der Erleichterung, wenn er merkt, dass sein 404-Fehler nicht das wahre Ende Ihrer Website ist.

In diesem Artikel haben wir Ihnen gezeigt, wie Sie eine 404-Seite in Elementor erstellen, und es war sehr einfach, nicht wahr? Wir hoffen, dass dieser Leitfaden hilfreich war, um Ihnen beizubringen, wie Sie mit Elementor 404-Seiten von Grund auf neu erstellen. Wenn Sie immer noch verwirrt sind oder Probleme haben, teilen Sie uns dies im Kommentarfeld unten mit. Vergessen Sie auch nicht, HappyAddons für weitere Tutorials wie dieses zu abonnieren, die direkt in Ihre Mailbox geliefert werden.