Deine Besucher landen auf einer 404-Seite – und sehen nur eine triste Standard-Seite mit Sidebar und langweiligem Text? Muss nicht sein. 😉
In diesem Guide zeige ich dir Schritt für Schritt, wie du in Divi eine eigene 404-Seite erstellst, die gut aussieht, zu deiner Marke passt und Besucher zurück ins richtige Fahrwasser bringt.

Kurzfassung: Divi 404-Seite in 7 Schritten

1. Divi Theme Builder öffnen
2. Neues Template für „404 Page“ anlegen
3. Header & Footer nach Wunsch ausblenden
4. Section + Row + Text, Button & Suche einfügen
5. Section auf volle Höhe setzen (min-height: 100vh)
6. Inhalt per Flexbox vertikal zentrieren
7. Schriften, Farben & Mobile-Ansicht an dein Branding anpassen

Im Rest des Artikels gehen wir das Ganze detailliert durch – genau wie im Video, nur als ausführlichen Blogartikel.

Warum deine 404-Seite in Divi wichtig ist

Eine 404-Seite wird immer dann angezeigt, wenn eine URL nicht gefunden wird – zum Beispiel, weil:

• ein alter Link noch irgendwo herumfliegt,
• sich eine URL geändert hat,
• oder sich jemand vertippt.

Statt deine Besucher ins Leere laufen zu lassen, kannst du die 404-Seite nutzen, um:

• klar zu sagen, was los ist („Seite nicht gefunden“),
• ihnen Auswege zu geben (Startseite, wichtige Seiten, Suche),
• und trotzdem professionell aufzutreten – auch wenn mal etwas schiefgeht.

Die Standard-404-Seite von WordPress / Divi ist dafür… sagen wir: nicht ideal.

Problem: Die Standard-404-Seite in Divi

Wenn du in deiner Divi-Seite einfach eine nicht existierende URL aufrufst, bekommst du meist:

• eine einfache „Seite nicht gefunden“-Meldung,
• oft noch mit einer Sidebar, die da überhaupt nicht hingehört,
• und ein Design, das nicht zu deinem Branding passt.

Das wirkt schnell unprofessionell – vor allem, wenn du ansonsten viel Liebe ins Design steckst.

Lösung: Wir bauen eine eigene 404-Seite im Divi Theme Builder, die:

• full-screen ist,
• sauber zentriert ist,
• deine Farben, Schriften & Buttons nutzt,
• und optional eine Suche integriert.

---

Voraussetzungen

Um dieses Tutorial nachzubauen, brauchst du:

• WordPress,
• das Divi Theme mit aktiviertem Divi Theme Builder,
• grundlegende Divi-Kenntnisse (Sections, Rows, Module).

Im Prinzip kannst du alles direkt im Backend nachklicken, ohne Code-Kenntnisse – nur ein paar kleine CSS-Snippets für die Vertikal-Zentrierung sind hilfreich.

---

Schritt-für-Schritt: Eigene 404-Seite mit Divi erstellen

1. Divi Theme Builder öffnen & 404-Template erstellen

1. Geh im WordPress-Backend zu Divi → Theme Builder.
2. Klicke auf „Add New Template“.
3. Wähle unter „Other“ die Option „404 Page“ aus.
4. Bestätige mit „Create Template“.
5. Oben rechts speichern nicht vergessen.

Damit sagst du Divi: „Für alle 404-Fehler benutze dieses Template“.

2. Header & Footer auf der 404-Seite ausblenden (optional)

In vielen Fällen macht es Sinn, auf der 404-Seite:

• kein Menü und
• keinen Footer

anzuzeigen, damit der Fokus komplett auf der Botschaft und dem Call-to-Action liegt.

Im Theme Builder Template:

• klicke auf das neue 404-Template,
• entferne (oder deaktiviere) den globalen Header & Footer für dieses Template,
• lass nur den Body aktiv, den wir gleich gestalten.

Du kannst den Header auch drin lassen – Geschmackssache. In meinem Beispiel blende ich ihn aus.

3. Body-Layout anlegen: Section, Row & Module

Klicke im 404-Template auf „Add Custom Body → Build Custom Body“.

Divi legt automatisch eine Section an. Darin:

1. Füge eine einspaltige Row hinzu.
2. In diese Spalte packen wir zunächst die Module:
   • Text-Modul (für die Überschrift „404 – Seite nicht gefunden“),
   • Text-Modul (für die Beschreibung / Erklärung),
   • Button-Modul (z.B. „Zur Startseite“),
   • optional: Search-Modul (WordPress-Suche).

So hast du die Basis deines Layouts.

4. Section auf volle Bildschirmhöhe setzen (100vh)

Damit deine 404-Seite immer schön mittig im Bildschirm sitzt – egal ob Desktop oder Smartphone – stellst du die Section auf volle Höhe.

1. Öffne die Section Settings (Zahnrad).
2. Gehe auf Design → Sizing.
3. Bei „Min Height“ gibst du ein: 100vh.

Was bedeutet 100vh?
vh steht für „Viewport Height“, also die sichtbare Höhe des Bildschirms. 100vh bedeutet: die Section nimmt immer 100 % dieser Höhe ein.

Damit nimmt die Section immer die komplette Bildschirmhöhe ein – perfekt für full-screen 404-Seiten.

5. Inhalt vertikal zentrieren mit Flexbox

Jetzt soll der Inhalt schön mittig auf der Seite sitzen – nicht oben kleben.

Dafür nutzen wir ein bisschen Flexbox über das Custom CSS der Section:

1. Öffne wieder die Section Settings.
2. Gehe zu Advanced → Custom CSS.
3. Beim Feld „Main Element“ fügst du z.B. ein:

display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;

Ergebnis: Deine Texte, Buttons & die Suche sitzen mittig und wirken deutlich professioneller.

6. Hintergrund & Grund-Design festlegen

Als Nächstes gibst du deiner 404-Seite ein Grunddesign.

In der Section:

• unter Content → Background,
• wähle eine Hintergrundfarbe (z.B. deinen Marken-Farbton),
• alternativ kannst du auch einen Gradienten oder ein Bild verwenden – fürs Tutorial reicht eine Farbe.

Damit wirkt die Seite sofort weniger nach „Standard-Template“ und mehr nach „Brand“.

7. Überschrift & Text stylen

H1: 404 Headline

Im ersten Text-Modul:

1. Setze deine Hauptheadline auf H1 (z.B. über den Text-Editor).
2. Beispieltexte:
   • „404 – Seite nicht gefunden“
   • „Ups, diese Seite existiert nicht (mehr)“
3. Unter Design → Heading Text (H1):
   • Textfarbe: passend zu deinem Design (z.B. weiß auf farbigem Hintergrund),
   • Font Size Desktop: z.B. 80px,
   • Line Height: leicht erhöhen, damit es luftig wirkt,
   • Text Alignment: zentriert.

Beschreibungstext

Im zweiten Text-Modul:

Erkläre kurz & freundlich, was los ist, zum Beispiel:

„Die Seite, die du suchst, wurde verschoben oder existiert nicht mehr. Kein Problem – hier sind deine nächsten Schritte.“

Unter Design → Text:

• Schriftgröße Desktop: z.B. 30px,
• Farbe ans Design anpassen,
• ebenfalls zentriert.

8. Button einfügen & verlinken (z.B. zur Startseite)

Im Button-Modul:

• Button-Text, z.B.:
  • „Zur Startseite“
  • „Zurück zur Homepage“
• Link:
  • am einfachsten: Startseite auswählen (oder URL manuell eintragen),
  • alternativ kannst du zur Kontaktseite oder einer Übersichtsseite verlinken.

Unter Design → Button:

• Button Styling aktivieren,
• Hintergrundfarbe: Marke / Akzentfarbe,
• Textfarbe: kontrastreich (z.B. weiß),
• Rahmenradius: leicht abgerundet für modernen Look,
• Hover-Effekt: andere Farbe oder leicht dunkler Ton für Feedback.

Alignment auf zentriert stellen, damit alles schön in einer Achse bleibt.

9. Optionale Suchleiste (Search-Modul) einbauen

Eine Suchfunktion auf der 404-Seite ist extrem hilfreich, wenn Besucher etwas Bestimmtes gesucht haben.

Im Search-Modul:

• passe das Design an dein Layout an:
  • Input-Feld Hintergrundfarbe,
  • Textfarbe,
  • Border-Radius,
  • Button-Farbe & Textfarbe.

Du kannst die Breite der Suche (oder der Row) z.B. auf 70 % setzen, damit sie nicht zu breit wirkt. Unter Design → Sizing → Width / Max-Width.

Auf Mobile stellst du die Breite wieder auf 100 %, damit alles sauber untereinander sitzt.

10. Responsive Design: Tablet & Mobile anpassen

Als Nächstes lohnt sich ein Blick in die Tablet- und Mobile-Ansicht, damit nichts zu groß wirkt.

Typische Anpassungen:

• H1-Headline:
  • Desktop: ca. 80px,
  • Tablet: ca. 64px,
  • Mobile: ca. 40px.
• Fließtext:
  • Tablet: ca. 24–26px,
  • Mobile: ca. 20–22px.
• Button-Text:
  • Mobile: ca. 16–18px.
• Abstände (Spacing):
  • mehr Padding oben/unten, damit der Inhalt atmen kann,
  • z.B. padding-top: 48px; padding-bottom: 48px; oder über die Divi-GUI einstellen.
• Search-Modul (oder Row):
  • Desktop: Max-Width ~70 %,
  • Mobile: Max-Width 100 %.

Zum Schluss: Nicht vergessen, oben rechts im Theme Builder alles zu speichern.

11. 404-Seite testen

Um deine neue 404-Seite zu testen:

1. Geh auf deine Domain und gib irgendeinen Fantasiepfad ein, z.B.:
   deinedomain.de/irgendwaswasesnichtgibt
2. Wenn alles korrekt ist, solltest du jetzt deine eigene 404-Seite sehen:
   • mit deinem Design,
   • ohne nervige Sidebar,
   • mit Button zur Startseite & optionaler Suche.

Ab jetzt kommt jeder Besucher, der eine nicht existierende Seite aufruft, auf deine neue, gebrandete Fehlerseite.

---

Tipps für eine gute 404-Seite in Divi

Ein paar Ideen, wie du deine 404-Seite noch besser machen kannst:

• Humorvolle, aber klare Texte: Zeig Persönlichkeit, aber sag auch klar, was los ist und was der nächste Schritt ist.
• Relevante Links einbauen: z.B. zu:
  • Startseite,
  • Blog-Übersicht,
  • Kontaktseite,
  • beliebten Ressourcen.
• Branding konsistent halten: Nutze die gleichen Farben, Schriften und Stile wie auf dem Rest deiner Seite.
• Keine Überfrachtung: 404-Seite ≠ Sitemap. Lieber wenige, klare Optionen als 20 Links.

---

FAQ: Divi 404-Seite erstellen

Wie erstelle ich eine 404-Seite im Divi Theme Builder?

Kurz zusammengefasst:

1. Divi → Theme Builder öffnen,
2. neues Template für „404 Page“ anlegen,
3. Header/Footer optional ausblenden,
4. Custom Body erstellen mit Section, Row, Text, Button & Suche,
5. Section min-height: 100vh geben,
6. Inhalt per Flexbox zentrieren,
7. Farben, Schriften & Mobile-Ansicht anpassen und speichern.

Beeinflusst meine 404-Seite das SEO?

Ja, indirekt.
Eine gute 404-Seite:

• reduziert Absprünge (weniger „Back to Search“),
• führt Nutzer zurück zu wichtigen Inhalten,
• wirkt professionell und vertrauenswürdig.

Google weiß, dass 404-Fehler passieren – wichtig ist, dass du damit sauber umgehst.

Brauche ich unbedingt eine Suche auf der 404-Seite?

Pflicht ist es nicht, aber ich empfehle es dir:

• gerade bei Blogs oder größeren Seiten hilft die Suche enorm,
• Besucher können direkt nach dem suchen, was sie ursprünglich wollten.

Wenn du eine sehr schlanke Seite hast, reichen auch ein Button und zwei, drei wichtige Links.

---

Dein nächster Schritt

Wenn du das hier liest und deine 404-Seite noch nach „Standard-Template“ aussieht, ist das der perfekte kleine Quick-Win:

• 30–60 Minuten investieren,
• Divi 404-Seite sauber aufsetzen,
• und deine Website wirkt sofort runder & professioneller.

Wenn du die Umsetzung lieber visuell sehen möchtest: Im passenden YouTube-Video führe ich dich genau durch diese Schritte – in Echtzeit, direkt in Divi.

Viel Spaß beim Umsetzen – und wenn du Fragen hast, schreib sie mir einfach in die Kommentare unter dem Video oder per Mail. 💪