In meinem letzten Artikel ging es darum, 404 Fehler zu finden und zu beheben. Heute möchte ich dir verraten, wie du kinderleicht mit WordPress und Divi deine eigene 404 Fehler Seite erstellen kannst.
404 Fehler Seite mit Divi erstellen – Schritt #1: Rufe den Divi Theme Builder auf
Auch wenn es vielleicht nahe liegt – du musst keine eigene 404 Fehler Seite erstellen. Stattdessen kreierst du ein Layout dafür und Divi regelt den Rest. 🥳
Also: auf zum Divi Theme Builder. Den findest du links im Admin-Bereich unter dem Menüpunkt Divi → Theme Builder.
404 Fehler Seite mit Divi erstellen – Schritt #2: Füge eine neue Vorlage hinzu
Dort angekommen klickst du auf neue Vorlage hinzufügen. Daraufhin öffnet sich ein kleines Pop-up und du kannst auf Vorlage erstellen klicken.
💡 Tipp: Wenn du dich damit schon auskennst, weise die Vorlage direkt der 404 Seite zu. Ansonsten gehe direkt weiter zu Schritt 3. 😊
404 Fehler Seite mit Divi erstellen – Schritt #3: Weise die Vorlage deiner 404 Seite zu
Nun weist du die Vorlage deiner 404 Seite zu, indem du über der Box auf das Zahnrad ⚙️ klickst.
Daraufhin öffnet sich das Pop-up aus Schritt 2. Du scrollst ganz nach unten und setzt ein Häkchen bei 404-Seite.
Warum ich diesen Schritt extra aufliste? Zugegeben, diesen Extra-Schritt muss man nicht machen, sondern kann die Zuweisung direkt während des Erstellens der Vorlage vornehmen. Aber da ich beim Schreiben meiner Artikel immer davon ausgehe, dass jemand das alles zum ersten Mal macht, war es mir wichtig das zu separieren. Das Erstellen und Zuweisen von Vorlagen wird noch öfter für dich ein Thema sein, wenn du deine Webseite mit Divi erstellst. 🙂
404 Fehler Seite mit Divi erstellen – Schritt #4: die Vorlage bearbeiten
Nun geht’s ans Eingemachte. 😃 Jede Divi-Vorlage besteht aus drei Teilen:
- einem benutzerdefinierten Header
- einem benutzerdefinierten Körper
- einer benutzerdefinierten Fußzeile
Um deine 404-Seite zu erstellen, klickst du nun auf die mittlere Zeile. In dem kleinen Pop-up das erscheint, klickst du direkt ganz oben auf Benutzerdefinierten Körper erstellen.
Nun lädt die Seite neu und du kannst entscheiden, ob du die 404 Fehler Seite komplett neu erstellst, eine Vorlage auswählst oder eine bestehende Seite klonst, um die dann weiter zu bearbeiten.
Ich habe mich für Variante 3 entschieden, da ich gerne auf allen Seiten ein einheitliches Design haben möchte. Deshalb habe ich meine Startseite geklont und die Inhalte dann angepasst.
Nun kannst du wie gewohnt alles mit dem Divi-Builder einstellen.
404 Fehler Seite mit Divi erstellen – Schritt #4: Speichern nicht vergessen!
Wenn du fertig bist, musst du zweimal speichern:
- Im Divi-Builder selbst klickst du unten rechts auf Seichern
- Wenn du auf das X oben rechts klickst, um den Divi-Builder zu schließen, kommst du zurück in deine Übersicht mit allen Vorlagen. Nun musst noch mal oben links auf Änderungen speichern (siehe rechts) klicken, damit auch die Änderungen an den Vorlagen gespeichert werden.
Voilà! Du hast es geschafft: Du hast deine eigene 404 Fehler Seite mit Divi erstellt. 🥳
PS: Falls irgendetwas nicht funktioniert, schreib mir gern – ich versuch dir gern zu helfen. 🙂
💡 Tipp: Falls dir nichts einfallen mag, findest du auf der Seite von Elegant Themes ® kostenlos eine 404 Fehler Seite Vorlage.
Liebe Grüße
Hey Katja,
danke für die ausführliche Erklärung. Ich hab genau das gleiche Problem und hatte keine Idee, wo ich anfangen soll.
Weiter so!
Thomas
Huhu Thomas,
awwww, danke für deinen lieben Kommentar. 🥰 Freut mich, dass dir der Artikel geholfen hat. Wenn du noch Fragen oder Themenvorschläge hast, schreib mir gern!
Sonnige Grüße aus Magdeburg
Katja
toll erklärt vielen Dank und einen schönen Tag dir.
ps: bei mir leitet es immer automatisch auf die startseite um anstatt die 404 page zu zeigen. hast du eine idee?
Huhu noch mal,
mhm das kann mehrere Ursachen haben. Hast du eventuell ein SEO-Plugin installiert, dass das automatisch übernommen hat? Oder ein Weiterleitungs-Plug-in?
Ich habe deine Webseite gerade mal bei https://whatwpthemeisthat.com/ durchlaufen lassen, aber da kein Plug-in entdeckt, dass das verursachen könnte. Wenn du magst, schreib mir gern über https://katja-schoenefeld.de/kontakt/, welche Plug-ins du nutzt, dann kann ich mir das genauer anschauen. 🙂
Liebe Grüße
Katja
Huhu Georg,
vielen vielen lieben Dank für deinen Kommentar! Du kannst dir nicht vorstellen, wie sehr ich mich gerade darüber gefreut habe. 🥰
Ich wünsche dir einen tollen Start in die neue Woche! ✨
Liebe Grüße
Katja
Jetzt hab ich endlich auch eine 404 🙂 Dankeschön.
Huhu Sonia,
oh, vielen lieben Dank für deine Nachricht – damit hast du mir den Tag versüßt. 🙏
Falls du mal noch Fragen hast, melde dich gern. 💙
Liebe Grüße
Katja
Hallo Katja
Herzlichen Dank für die tolle und einfache Anleitung. Eine Frage hätte ich noch: Weisst du wo man die Tab-Beschreibung “Page not found” ändern kann? Danke dir!
Hallo Sibylle!
Schön, dass dir die Anleitung gefällt! Leider handelt es sich bei der Divi-Lösung um ein simples CSS-Overlay, also keine “echte” WordPress-Seite.
Allerdings kannst die Tab-Beschreibung speziell für die 404-Seite immer mit JavaScript so ändern:
<?php if ( is_404() ) { echo "<script> new404PageTitle = 'Neuer Tab-Titel!'; document.querySelector('title').textContent = new404PageTitle;</script>"; } ?>Bitte beachte aber folgendes: Mit jedem Update wird dieser Code in den meisten Fällen wieder gelöscht, also solltest du ihn lieber als eigenes Plugin hinzufügen.
Vielleicht schreibe ich dazu noch einen kurzen Artikel, wenn Bedarf besteht. 🙂
Ich hoffe allerdings, dass diese Lösung zunächst hilft 🙏💙
Liebe Grüße
Katja
Hi Katja, die Änderungen an der Header funktionieren super, Danke. Das Problem mit den Updates, lässt sich ganz leicht lösen.- Nutze für Änderungen an Dateien lieber ein Child-Theme, da wird bei Updates nichts gelöscht.
Gruß Gregor
Das Child-Theme als Lösung ist immer eine gute Idee… danke! 🙂
Dankedankedanke!
Hi Christina,
super, dass ich dir helfen konnte! 🙏💙
Liebe Grüße
Katja
Das hat schon mal funktioniert, lieben Dank für die Anleitung.
Aber wie kann ich eine mehrsprachige Version umsetzen (nutze WPML)?
Hallo Uwe! Bitte entschuldige die späte Antwort. 🙂
WPML zieht sich den Inhalt und übersetzt diesen, da das Beispiel oben reiner Text ist, sollte das problemlos funktionieren.
Grüße Katja