So erstellen Sie eine benutzerdefinierte WordPress 404-Fehlerseite

Die Wahrscheinlichkeit ist hoch, dass Sie auf einer 404-Seite gelandet sind und die Website sofort verlassen haben, weil sie weniger hilfreich war. Eine 404-Seite ist das, was WordPress anzeigt, wenn jemand eine URL eingibt oder darauf klickt, die auf deiner Website nicht existiert. Diese Seite ist ein allgemeiner Fehler, der den Besucher nur darüber informiert, dass die Seite nicht gefunden wurde. In diesem Artikel erfahren Sie, wie Sie eine benutzerdefinierte 404-Seite für WordPress erstellen. Auf dem Weg dorthin werden wir sowohl gute als auch schlechte Designs sehen.

Warum eine benutzerdefinierte 404-Seite für WordPress erstellen?

Es ist verlockend, das Entwerfen der 404-Seite zu überspringen, weil Sie hoffen, dass sie niemand sieht. Es muss jedoch für Ihre Besucher hilfreich sein. Sie kann genauso wichtig sein wie jede andere Seite. Eine allgemeine Meldung ist eine schlechte Benutzererfahrung. Es sieht nicht gut aus und gibt ihnen keinen Grund, auf Ihrer Website zu bleiben.

Schauen wir uns zunächst die generische Seite an, die wir vermeiden möchten.

Generische 404-Seite

Die Standard 404-Seite, die WordPress anzeigt, ist nur eine Fehlermeldung. Es befindet sich im Inhaltsbereich des Textkörpers und zeigt Ihre Kopfzeile, Fußzeile und Seitenleisten an, sofern vorhanden.

Leider ist es nicht hilfreich. Es ist, als würde man einen Ladenangestellten fragen, ob etwas, das man sucht, in dem Gang ist, in dem man sich befindet, und er sagt einfach nein. Sie möchten, dass sie Sie auf den richtigen Gang verweisen. Sie möchten mehr Informationen.

Eine 404-Seite sollte Ihnen mehr Informationen geben. Es sollte hilfreich sein. Es sollte Tools, Links, Ratschläge oder irgendeine Form von Hilfe bereitstellen. Sie möchten nicht allein im Gang stehen und nicht wissen, wohin Sie als nächstes gehen sollen.

Beispiele für benutzerdefinierte 404-Seiten

Es gibt Tausende von erstaunlichen 404-Seiten im Internet. Manche sind lustig, manche ernst. Einige sind hilfreicher als andere. Einige sind schlicht, während andere wunderschön sind. Hier ist ein Blick auf einige 404-Seiten, um eine Vorstellung davon zu bekommen, wie sie gestaltet sind. Einige sind einfach und langweilig, während andere hilfreich sind und gut aussehen.

1. Google

Die 404-Seite von Google (nicht WordPress) ist einfach. Es ist ein kleiner Inhaltsbereich in der Mitte des Bildschirms. Die Nachricht weist Sie nur darauf hin, dass ein Fehler vorliegt, und bietet eine Grafik eines Roboters in Einzelteilen. Es bietet keine anderen Informationen, aber es ist Google, also müssen Sie nur etwas anderes in die Suchleiste eingeben.

2. WordPress.org

Die 404-Seite von WordPress.org zeigt ihre Standard-Kopf- und Fußzeile an. Der Hauptteil enthält einen Titel, der anzeigt, dass die Seite nicht gefunden wurde, eine kurze Erklärung mit einem Hauch von Humor und dann eine Liste mit Links, die Ihnen helfen. Die Links konzentrieren sich darauf, hilfreich zu sein.

3. WordPress.com

Die 404-Seite von WordPress.com entfernt die Kopf- und Fußzeile. Es zeigt eine Grafik, einen Titel, eine Beschreibung mit anklickbaren Links, ein Suchfeld und das WordPress.com-Logo. Die Links sind hilfreich.

4. Elegante Themen

Die 404-Seite von Elegant Themes (weil ich weiß, dass Sie sowieso nachsehen werden) zeigt den ET-Header, einen großen Titel mit einer kleinen Erklärung und einen Button als CTA. Von hier aus haben Sie Zugriff auf fast alles.

5. Einundzwanzig Einundzwanzig

Das Twenty Twenty-One-Theme von WordPress hat eine 404-Seite, die Ihre Haupt- und Fußzeilenmenüs verwendet. Es hat einen großen Titel. Der Körper hat eine kurze Beschreibung und ein Suchfeld. Linien werden für das Styling verwendet. Der Hintergrund entspricht der Site.

6. Zwanzig Zwanzig

Das Twenty Twenty-Theme von WordPress zeigt die Kopf- und Fußzeile an. Der Hauptteil zeigt einen großen Titel in der Mitte, eine Erklärung und ein Suchfeld. Alle verwenden die Farben des Themas.

7. Schlaff

Die 404-Seite von Slack (nicht WordPress) zeigt in der Mitte ein Feld mit Informationen zum Fehler mit einem Link zum Hilfecenter. Alle Menüs sind auch hier. Der interessante Teil ist der Hintergrund. Es ist ein Cartoon-Hintergrund, der nach rechts oder links scrollt, um Ihrer Maus zu folgen. Animierte Tiere bewegen sich über den Bildschirm.

8. Amazonas

Die 404-Seite von Amazon (ebenfalls nicht WordPress) enthält das Amazon-Logo mit einem Suchfeld, eine große Nachricht, eine kleinere Nachricht mit einem Link zur Startseite und ein Foto eines Tieres mit einem Link, um mehr zu erfahren. Es enthält viele verschiedene Fotos, die angezeigt werden können. Sie werden zufällig ausgewählt.

404 Seiteninhalt

Was braucht eine 404-Seite? In den obigen Beispielen sehen wir einige gemeinsame Elemente.

Erstens muss es hilfreich sein. Es sollte dem Besucher nicht nur sagen, dass ein Fehler vorliegt. Es sollte sagen, was der Fehler bedeutet. Stellen Sie sich vor, in Ihrem Auto leuchtet eine Fehlerlampe auf. Ihre erste Frage wäre "Was bedeutet das?" Es ist frustrierend, keine nützlichen Informationen über den Fehler bereitzustellen.

Besucher müssen wissen, ob sie etwas falsch gemacht haben oder ob der Inhalt nicht existiert. Wenn sie es nicht wissen, suchen sie so lange nach dem Inhalt, bis sie die Website wütend verlassen und schwören, nie wieder zurückzukehren. Dies geschieht am besten mit einer einfachen Nachricht und möglicherweise einem Bild, das ins Auge fällt. Etwas, das sich von Ihren normalen Inhalten abhebt und Ihr Publikum anspricht.

Als nächstes muss es eine Richtung geben, was als nächstes zu tun ist. Dies kann eine Liste von Artikeln, ein Suchfeld, eine Liste von Kategorien, die beliebtesten Beiträge, die neuesten Beiträge, eine Kontaktmöglichkeit usw. sein.

So einfach ist das. 404-Seiten brauchen nicht viel Inhalt. Gerade genug, um hilfreich zu sein.

Das obige Beispiel beinhaltet:

• Hintergrundfarben und -muster, die zur Website passen würden/
• Ein Titel mit einer kurzen Nachricht über den Fehler.
• Großer Text, der anzeigt, dass es sich um eine 404-Seite handelt.
• Ein paar Schaltflächen, die dem Besucher eine Wegbeschreibung geben.

Es ist einfach, aber stilvoll und hilfreich. Das ist alles, was Sie brauchen.

Sehen wir uns an, wie Sie mit den gerade besprochenen Inhaltsideen eine benutzerdefinierte 404-Seite für WordPress erstellen.

So erstellen Sie eine benutzerdefinierte 404-Seite in WordPress mit dem Divi Theme Builder

Der Divi Theme Builder macht es einfach, eine 404-Seite zu erstellen und zuzuweisen. Elegant Themes hat mehrere vorgefertigte 404-Seiten, die Sie kostenlos herunterladen können. Sie können sie beliebig anpassen. Sie sind eine großartige Möglichkeit, einen Vorsprung bei einem 404-Seitendesign zu erzielen. Wenn Sie es vorziehen, können Sie eines von Grund auf neu erstellen.

Das obige Beispiel stammt aus dem vierten Theme Builder-Layoutpaket. Es gibt viele 404-Seiten im ET-Blog. Um sie zu finden, suchen Sie nach „Theme Builder Layout Pack“ oder sehen Sie sie sich hier an:

• Laden Sie das erste KOSTENLOSE Theme-Builder-Paket für Divi . herunter
• Laden Sie das zweite KOSTENLOSE Theme-Builder-Paket für Divi . herunter
• Laden Sie das dritte KOSTENLOSE Theme-Builder-Paket für Divi . herunter
• Laden Sie das vierte KOSTENLOSE Theme Builder Pack für Divi . herunter
• Laden Sie das fünfte KOSTENLOSE Theme-Builder-Paket für Divi . herunter
• Laden Sie das sechste KOSTENLOSE Theme Builder Pack für Divi . herunter

Importieren einer benutzerdefinierten 404-Seite in den Divi Theme Builder

Sie finden den Divi Theme Builder im WordPress-Dashboard unter Divi > Theme Builder . Dies öffnet die Seite, auf der Sie Vorlagen erstellen oder importieren und zuweisen können. In der oberen rechten Ecke sehen Sie das Importsymbol. Klicken Sie auf dieses Symbol, um Ihre 404-Seitenvorlage zu importieren.

Hinweis – für Tutorials zur Verwendung des Divi Theme Builder suchen Sie hier im Elegant Themes-Blog nach „Theme Builder“.

Es öffnet sich ein Modal, in das Sie Ihre Vorlage importieren können. Wählen Sie Importieren und navigieren Sie unter Datei auswählen zu Ihrer Datei. Die Optionen zum Überschreiben der Standardeinstellungen und Zuweisungen sind standardmäßig ausgewählt. Ich empfehle, sie ausgewählt zu lassen. Klicken Sie unten im Modal, um die Vorlage zu importieren. Ich importiere die 404-Seite für das Crowdfunding-Layout-Paket.

Beim Importieren einer 404-Seite wird diese automatisch zugewiesen. Klicken Sie anschließend auf das Bearbeitungssymbol, um den Builder zu öffnen.

Nehmen Sie nun Ihre Änderungen in jedem Modul vor, indem Sie Ihre Links, Bilder, Farben, Texte usw. hinzufügen. Speichern Sie das Layout und klicken Sie auf das x in der oberen rechten Ecke, um den Builder zu schließen.

Speichern Sie abschließend die Änderungen, um die Vorlage anzuwenden. Sie haben jetzt eine benutzerdefinierte 404-Seite.

Erstellen einer benutzerdefinierten 404-Seite mit dem Divi Theme Builder

Wählen Sie im Theme Builder aus, um eine neue Vorlage hinzuzufügen.

Dies öffnet die Vorlageneinstellungen. Scrollen Sie nach unten und wählen Sie 404-Seite unter Andere aus . Klicken Sie anschließend auf Vorlage erstellen . Die Vorlageneinstellungen werden geschlossen.

Jetzt können Sie die 404-Seite erstellen. Die meisten verwenden keine Kopf- oder Fußzeile. Wählen Sie Benutzerdefinierten Text hinzufügen aus .

Dies zeigt zwei Auswahlmöglichkeiten, mit denen Sie einen benutzerdefinierten Körper erstellen oder aus der Bibliothek hinzufügen können. Wählen Sie Benutzerdefinierten Körper erstellen aus .

Erstellen Sie die 404-Seite wie gewohnt mit dem Divi Builder. Speichern und schließen.

Speichern Sie abschließend Ihre Änderungen. Sie sind fertig.

Schlussgedanken zum Erstellen einer benutzerdefinierten 404-Seite für WordPress

Das ist unser Blick darauf, wie man eine benutzerdefinierte 404-Seite für WordPress erstellt. 404 Seiten müssen hilfreich sein. Leider ist die generische WordPress 404-Seite nicht hilfreich und bietet eine schlechte Benutzererfahrung. Glücklicherweise können Sie mit dem Divi Theme Builder Ihre eigene 404-Seite erstellen.

Mit den hier bereitgestellten Informationen sind Sie auf dem besten Weg, eine schöne 404-Seite zu erstellen, die den Benutzern eine großartige Erfahrung bietet und dabei fantastisch aussieht.

Wir wollen von dir hören. Haben Sie eine benutzerdefinierte 404-Seite für Ihre WordPress-Website erstellt? Teilen Sie uns unsere Erfahrungen in den Kommentaren mit.

Ausgewähltes Bild über Letters-Shmetters / shutterstock.com