Eine ansprechende und benutzerfreundliche Suchergebnisseite ist von großer Bedeutung für eine erfolgreiche Website. Dennoch macht die in Divi standardmäßig mitgelieferte Suchergebnisseite optisch nur sehr wenig her. Dabei kannst du auf dieser Seite ungeheuren Mehrwert bieten und sie dafür nutzen, dass Menschen, die sich für dich und dein Business interessieren, noch mehr Zeit auf deiner Website verbringen.

In diesem Tutorial erstellen wir gemeinsam Schritt für Schritt eine individuelle Suchergebnisseite mit Divi. Dabei fokussieren wir uns auf die Verwendung des Divi Theme Builder und du lernst, wie du in 3 einfachen Schritten eine professionelle und individuelle Suchergebnisseite mit Divi erstellst.

Warum überhaupt eine individuelle Suchergebnisseite mit Divi erstellen?

Eine individuelle Suchergebnisseite ist echt der Knaller! Nicht nur, dass sie es deinen Besuchern super einfach macht, die gewünschten Ergebnisse zu finden, sondern sie kann deine Website auch in den Augen der Suchmaschinen noch attraktiver machen.

Stell dir vor, deine Besucher landen auf deiner Website und suchen nach bestimmten Inhalten. Mit einer individuellen Suchergebnisseite kannst du dafür sorgen, dass sie die Ergebnisse auf eine coole Art und Weise angezeigt bekommen. So finden sie schneller das, was sie suchen und verbringen schlussendlich mehr Zeit auf deiner Website – und das ist genau das, was Suchmaschinen lieben!

Doch dies ist noch nicht alles, denn eine benutzerfreundliche Suchergebnisseite kann auch dazu beitragen, dass deine Website in den Ergebnissen der Suchmaschinen besser indexiert wird. Was bedeutet, dass sie höher in den Suchergebnissen erscheint und so noch mehr Traffic bekommt. Klingt doch nach einer Win-Win Situation oder?

Mit dem Divi Theme Builder und dem Drag & Drop Editor kannst du ganz einfach eine individuelle Suchergebnisseite erstellen und so deine Website für Besucher & Suchmaschine noch besser machen. Also, lass uns loslegen und deine Website auf’s nächste Level bringen.

Schritt 1: Anlegen eines neuen Templates für die Suchergebnisseite mit Divi

Als erstes navigierst du in deinem WordPress Backend zu dem Menüpunkt

1. Divi
2. Theme Builder

Im Theme Builder von Divi hast du die Möglichkeit für verschiedene Seiten individuelle Templates anzulegen. In dem Screenshot von meinem WordPress Backend siehst du bereits, dass ich einige Templates angelegt habe. Wenn du das erste Mal im Theme Builder von Divi bist, ist die Seite noch komplett leer.

Jetzt gehst du als nächstes wie folgt vor:

1. Klicke auf „Neue Vorlage hinzufügen“ und wähle den Punkt „Neue Vorlage erstellen“
2. In dem Fenster mit den Vorlageneinstellungen navigierst du ganz nach unten und setzt ein Häkchen bei „Suchergebnisse“, anschließend bestätigst du mit „Vorlage erstellen“

Jetzt hast du eine leere Vorlage für deine individuelle Suchergebnisseite mit Divi. Falls du bereits individuelle Templates für den Header und/oder Footer deiner Website erstellt hast, werden diese automatisch auf neu erstellte Templates übertragen.

Im nächsten Schritt erstellen wir mit den Drag&Drop Builder von Divi deine individuelle Suchergebnisseite.

3. Also klicke jetzt bitte auf „Benutzerdefinierten Körper hinzufügen“ und anschließend auf „Benutzerdefinierten Körper erstellen“.

Schritt 2: Benutzerdefinierten Body bearbeiten

Damit deine individuelle Suchergebnisseite mit Divi optisch etwas hermacht und deine Websitebesucher auch die Ergebnisse ihrer Suche angezeigt bekommen, musst du hier mit einem kleinen Trick arbeiten.

Zunächst erstellen wir jedoch einen schicken Seitenheader inkl. Suchfeld.

Anlegen des Kopfbereiches der Suchergebnisseite mit Divi

Im Template Builder fügst du eine neue Reihe ein.

In dieser fügst du einen Teiler ein und veränderst den Stil von diesem wie folgt:

• Kennzeichnungsfarbe / Linienfarbe: #f9e26d
• Zeilenposition: unten
• Trennliniendicke: 5px
• Stapelreihenfolge (Z-Index): -1

Füge unter dem Teiler ein Textmodul ein und verwende „Überschrift 1“ für den Text.

Anschließend bearbeite den Text wie folgt:

• Hintergrundfarbe: #151515 (bzw. die Farbe entsprechend deines Hintergrundes)
• Textausrichtung: zentriert
• Überschrift H1 Schriftfarbe: #f9e26d (passend zur Farbe deines Teilers)
• Überschrift H1 Textgröße: 70px (Desktop), 40px (Tablet), 30px (Smartphone)
• Überschrift H1 Zeilenhöhe: 80px
• Max. Breite: 70%
• Textausrichtung: zentriert
• Mind. Höhe: 80px

Jetzt können wir das Textmodul mit der Überschrift über den Teiler ziehen.

• Margin: -75px

Suchleiste hinzufügen

Füge unter das Textmodul mit der Überschrift ein Such-Modul hinzu und gebe einen Platzhaltertext ein.

Im Abschnitt „Ausnahmen“ hast du die Möglichkeit Seiten, Beiträge oder einzelne Kategorien aus dem Suchergebnissen auszuschließen. Dies ist besonders hilfreich, wenn du deine Suchergebnisseite mit Divi für einen Blog erstellst und z. B. Seiten komplett ausschließen willst. Wie du einzelne Seiten (wie z. B. Impressum, Datenschutz, Dankesseiten, etc.) ausschließt, erfährst du weiter unten.

Jetzt passe die Suchleiste wie folgt an:

• Platzhalterfarbe: #f9e26d
• Feld-Hintergrundfarbe: #151515
• Feld-Textgröße: 20px
• Button- und Randfarbe: #f9e26d
• Button Textfarbe: #f9e26d
• Button Schriftgröße: 18px
• Breite: 100%
• Maximale Breite: 300px
• Textausrichtung: zentriert
• Abgerundete Ecken: 8px
• Umrandungsfarbe: #f9e26d

Schritt 3: Suchergebnisse anzeigen lassen

Bis jetzt haben wir den Seitenheader für deine individuelle Suchergebnisseite mit Divi erstellt. In diesem letzten Schritt lassen wir nun die Ergebnisse in hübscher Form darstellen. Denn wenn du die Standardversion von Divi beibehältst, erhält dein Website Besucher einfach nur eine langweilige und nicht gerade überzeugende Übersicht der Ergebnisse.

Erstelle im ersten Step einen neuen Abschnitt, füge dort eine neue Zeile ein und in diese ein Textmodul. Das sollte am Ende wie folgt ausschauen:

Im Textmodul löscht du den Blindtext komplett heraus, anschließend fügst du einen dynamischen Titel hinzu, in dem du auf das Stapelsymbol rechts im Textfeld klickst (erscheint sobald du mit der Maus über das Textfeld fährst).

Dort wählst du den Punkt „Post/Archivtitel“, klickst anschließend neben dem Element auf das Einstellungsrädchen und gibst bei im Feld „vorher“ ein: Suchergebnisse für – achte hierbei drauf, dass du nach dem „für“ noch ein Leerzeichen setzt!

Zum Schluss wechselst du noch in den Reiter „Design“, gehst in den Abschnitt „Text“ und setzt die Textausrichtung auf „zentriert“. Das Ergebnis sollte wie folgt ausschauen:

Unter dem Textmodul legen wir jetzt die Suchergebnisse ein. Lege hierzu eine neue Reihe an und füge in diese das Modul „Blog“ ein.

Das Blogmodul veränderst du wie folgt:

• Beiträge für aktuelle Seite: JA
• Beitragszähler: 9
• Auszugslänge: 120
• Autor anzeigen: NEIN

Die wichtigste Einstellung ist hier, dass du wirklich den Haken bei „Beiträge für aktuelle Seite anzeigen“ aktivierst. Denn nur über diesen Weg werden die dynamischen Suchergebnisse auch angezeigt.

Anschließend nimmst du im Blogmodul unter „Design“ folgende Einstellungen vor:

• Layout: Gitter
• Titelschriftstärke: Fett
• Titelschriftfarbe: #151515
• Titelschriftgröße: 24px
• Titelzeilenhöhe: 1.3em
• Bodytextfarbe: #151515
• Lesen Sie mehr Text Farbe: #f9e26d
• Gitterstruktur abgerundete Ecken: 10px
• Gitterstruktur Umrandungsbreite: 0px
• Box Schatten: siehe Screenshot
• Box Schatten vertikale Position: 0px
• Unschärfe des Schattens: 15px
• Schattengröße: -5px
• Schattenfarbe: #f9e26d

Diese Seite kannst du jetzt noch nach belieben an deine Vorstellungen bzw. an dein Branding anpassen.

Ergebnisse deiner individuellen Suchergebnisseite mit Divi:

Jetzt sollte deine Suchergebnisseite mit Divi wie folgt ausschauen.

Auf dem Desktop:

Auf dem Tablet und Smartphone:

Bonus: Einzelne Seiten/Posts aus den Ergebnissen ausschließen

Wenn du jetzt irgendwo auf deiner Website die Suchleiste verwendest, dann gelangst du auf deine mit Divi erstellte Suchergebnisseite. Je nach Suchwort oder Suchphrase kann es jedoch sein, dass auf der individuellen Suchergebnisseite mit Divi Seiten erscheinen, die du in den Ergebnissen überhaupt nicht haben willst.

Doch auch hier gibt es eine Lösung dafür. Eigentlich sogar zwei. Zum einen kannst du einzelne Posts und Seiten über die functions.php Datei deiner WordPress Installation anpassen.

Der deutlich einfachere und schnellere Weg führt über das Plugin „Search Exclude“. Wenn du dieses installiert hast, gehst du wie folgt vor: Klicke im Backend unter Seiten auf die entsprechende Seite, die du aus den Suchergebnissen deiner WordPress Website ausschließen willst. In den Einstellungen auf der rechten Seite findest du den Punkt „Search Exclude“. Hier setzt du ganz einfach ein Häkchen und schon ist die entsprechende Seite von den Suchergebnissen ausgeschlossen.

Fazit: Individuelle Suchergebnisseite mit Divi erstellen

Eine individuelle Suchergebnisseite mit Divi zu erstellen ist gar nicht so kompliziert, wie du es denkst. Besonders wenn du dich bereits mit dem Pagebuilder von Divi ausgekennst, ist diese Seite im Handumdrehen erstellt.

Selbstverständlich kannst du die Farben und Fonts aus dem obigen Tutorial einfach an deinen eigenen Stil anpassen. Falls du mein Tutorial verwendet hast, um dir eine individuelle Suchergebnisseite mit Divi zu erstellen, dann sende mir den Link zu dieser doch gerne via Instagram zu. Ich bin gespannt, was du aus deiner Suchergebnisseite mit Divi gemacht hast.

Du kannst die Suchergebnisseite mit Divi übrigens noch erweitern und für dein Marketing nutzen, in dem du z. B. unter den Suchergebnissen deinen Podcast oder dein Freebie anbietest.

FAQ: Individuelle Suchergebnisseite mit Divi erstellen