So erstellen Sie eine Suchergebnisseite-Vorlage in Divi

Wir alle haben uns daran gewöhnt, Suchformulare zu verwenden, um auf einer Website zu finden, was wir brauchen. Beim Erstellen einer Website in Divi müssen wir also unbedingt das Design der Seitenergebnisvorlage berücksichtigen, die das Erscheinungsbild dieser Suchergebnisse bestimmt.

In diesem Tutorial erfahren Sie, wie Sie mit dem Divi Theme Builder eine einfache und elegante Vorlage für Suchergebnisseiten erstellen. Wir zeigen Ihnen, wie Sie die entscheidenden Elemente einer Suchergebnisseite-Vorlage einbeziehen, einschließlich eines dynamischen Seitenergebnistitels und der relevanten Suchinhalte, die von einem Blog-Modul generiert werden.

Lass uns anfangen.

Vorgeschmack

Hier ist ein kurzer Blick auf die Suchergebnisseitenvorlage, die wir erstellen werden.

Laden Sie die Vorlage(n) KOSTENLOS herunter

Um die Suchergebnisseite aus diesem Tutorial in die Hände zu bekommen, müssen Sie sie zuerst über die Schaltfläche unten herunterladen. Um Zugang zum Download zu erhalten, müssen Sie unsere Divi Daily-E-Mail-Liste abonnieren, indem Sie das untenstehende Formular verwenden. Als neuer Abonnent erhalten Sie jeden Montag noch mehr Divi-Güte und ein kostenloses Divi-Layout-Paket! Wenn Sie bereits in der Liste sind, geben Sie einfach unten Ihre E-Mail-Adresse ein und klicken Sie auf Download. Sie werden nicht „erneut abonniert“ oder erhalten zusätzliche E-Mails.

Laden Sie die Dateien herunter

Kostenlos herunterladen

Melden Sie sich beim Divi-Newsletter an und wir senden Ihnen eine Kopie des ultimativen Divi-Landing-Page-Layout-Pakets sowie jede Menge anderer fantastischer und kostenloser Divi-Ressourcen, Tipps und Tricks per E-Mail zu. Folgen Sie mit und Sie werden in kürzester Zeit ein Divi-Meister. Wenn Sie bereits abonniert sind, geben Sie einfach unten Ihre E-Mail-Adresse ein und klicken Sie auf Download, um auf das Layout-Paket zuzugreifen.

HERUNTERLADEN

Sie haben sich erfolgreich abonniert. Bitte überprüfen Sie Ihre E-Mail-Adresse, um Ihr Abonnement zu bestätigen und Zugang zu kostenlosen wöchentlichen Divi-Layout-Paketen zu erhalten!

Um das Layout in Ihre Seite zu importieren, extrahieren Sie einfach die ZIP-Datei und fügen Sie eine der JSON-Dateien mit der Option „Theme Builder Portability“ zum Divi Theme Builder hinzu.

Kommen wir zum Tutorial, sollen wir?

Was Sie brauchen, um loszulegen

Um zu beginnen, müssen Sie das Divi-Theme installieren und aktivieren. Stellen Sie sicher, dass Sie die neueste Version von Divi haben.

Sie benötigen auch einige Beiträge/Seiten, die zu Testzwecken erstellt wurden, damit die Suchergebnisseite tatsächlich Ergebnisse anzeigt.

Danach sind Sie bereit zu gehen.

Über die Suchergebnisseite

In Divi ist die Suchergebnisseite die Seite, auf die ein Benutzer umgeleitet wird, sobald er eine Suchanfrage in eines der Suchformulare von Divi eingibt. Zu den möglichen Suchanfragen, die zur Suchergebnisseite führen, gehören das Suchformular im Standard-Divi-Header, die Suche aus dem Suchmodul im Divi Builder und das in WordPress integrierte Such-Widget.

Standardmäßig zeigt die Suchergebnisseite einfach die Seiten oder Beiträge an, nach denen in einem Feed gesucht wurde, ähnlich wie bei einer typischen Blogseite. Aber mit Divi können Sie die Vorlage mit dem Divi Theme Builder nach Belieben gestalten.

So erstellen Sie eine Suchergebnisseite-Vorlage in Divi

Neue Vorlage erstellen

Um zu beginnen, gehen Sie zum WordPress-Dashboard und navigieren Sie zu Divi > Theme Builder. Klicken Sie dann auf den Bereich „Neue Vorlage hinzufügen“.

Weisen Sie unter Vorlageneinstellungen die Vorlage Suchergebnisse zu.

Klicken Sie dann in der neuen Vorlage auf den Bereich Benutzerdefinierten Körper hinzufügen und wählen Sie "Benutzerdefinierten Körper erstellen".

Wählen Sie , um das Layout von Grund auf neu zu erstellen.

Entwerfen der Suchergebnisseite-Vorlage mit dem Vorlagen-Layout-Editor

Der Überschriftenabschnitt für die Seitenergebnisvorlage

Starten Sie im Vorlagenlayout-Editor das Design der Vorlage, indem Sie dem Standardabschnitt eine einspaltige Zeile hinzufügen. Hier werden wir unsere Seitenüberschrift für die Vorlage erstellen.

Design-Akzent des Trennmoduls

Setzen Sie dann ein Teilermodul ein. Dies dient als Designakzent für unsere Seitenüberschrift.

Aktualisieren Sie den Trennlinienstil wie folgt:

• Linienfarbe: #3a405a
• Linienposition: Unten
• Teilergewicht: 5px
• Z-Index: -1

Textbaustein mit Überschrift

Fügen Sie unter dem Trennmodul ein neues Textmodul mit folgendem Inhalt hinzu:

<h1>Search Results</h1>

Aktualisieren Sie das Textdesign wie folgt:

• Hintergrundfarbe: #ffffff
• Textausrichtung: Mitte
• Überschrift Schriftart: Muli
• Schriftstärke der Überschrift: Schwer
• Textfarbe der Überschrift: #3a405a
• Überschriftstextgröße: 70px (Desktop), 40px (Tablet), 22px (Telefon)
• Höhe der Überschriftslinie: 80px
• Maximale Breite: 60%
• Modulausrichtung: Mitte
• Mindesthöhe: 80px

Jetzt können wir das Textmodul nach oben verschieben, um die Trennlinie zu überlappen, indem wir einen benutzerdefinierten Rand hinzufügen.

• Rand: -75px

Suchmodul

Fügen Sie unter dem Textmodul mit der Überschrift ein Suchmodul hinzu. Dies ist hilfreich für Benutzer, die Ihren Blog/Ihre Website weiter durchsuchen möchten, sobald sie auf der Suchergebnisseite gelandet sind.

Fügen Sie Eingabeplatzhaltertext für das Formular hinzu.

Sie haben auch die Möglichkeit, bestimmte Seiten, Beiträge und/oder Kategorien von den Suchergebnissen auszuschließen, indem Sie Optionen unter der Optionsgruppe Ausnahmen auswählen. Wenn Sie beispielsweise ein Suchformular hauptsächlich für Ihr Blog erstellen, möchten Sie möglicherweise Seiten aus den Suchergebnissen ausschließen, damit nur Blogbeiträge angezeigt werden.

Aktualisieren Sie dann die Sucheinstellungen wie folgt:

• Platzhalterfarbe: #3a405a
• Feldhintergrundfarbe: #ffffff
• Feldschriftart: Montserrat
• Feldtextgröße: 20px
• Knopf- und Rahmenfarbe: #3a405a
• Schaltflächenschrift: Muli
• Schriftstärke der Schaltfläche: Fett
• Schaltflächentextfarbe: #ffffff
• Schaltflächentextgröße: 18px
• Breite: 100%
• Maximale Breite: 300px
• Modulausrichtung: Mitte
• Abgerundete Ecken: 8px

Das kümmert sich zum größten Teil um unseren Überschriftenbereich.

Zeilenpolsterung

Bevor wir mit dem nächsten Abschnitt beginnen, nehmen wir die untere Auffüllung der Zeile heraus.

• Polsterung: 0px unten

Erstellen des Body-Abschnitts der Suchergebnisse-Vorlage

Jetzt können wir unseren zweiten Abschnitt der Vorlage hinzufügen, der den Titel des Suchergebnisses und den Inhalt der Suchergebnisse enthält.

Erstellen des neuen Abschnitts und der neuen Zeile

Fügen Sie dem Layout unter dem oberen Abschnitt einen neuen regulären Abschnitt hinzu.

Fügen Sie dann dem Abschnitt eine einspaltige Zeile hinzu.

Hinzufügen des Beitrags-/Archivtitels als dynamischen Inhalt

Die Suchergebnisseite profitiert von einem Titel, der die vom Benutzer eingegebene Suchanfrage anzeigt. Wir können dies der Seite hinzufügen, indem wir ein Textmodul verwenden und das dynamische Inhaltselement Post/Archivtitel einfügen.

Fügen Sie zunächst ein Textmodul hinzu.

Löschen Sie den Dummy-Text im Textkörperinhaltsfeld und wählen Sie das Symbol für dynamische Inhalte aus, das angezeigt wird, wenn Sie mit der Maus über das Textkörperinhaltsfeld fahren. Wählen Sie dann den Beitrags-/Archivtitel aus der Liste aus.

Das Element Post/Archivtitel beginnt mit dem Ausdruck „Ergebnisse für“, gefolgt vom Suchinhalt/der Suchanfrage in Klammern. Unten finden Sie ein Beispiel dafür, was angezeigt wird, wenn ein Nutzer nach dem Begriff "Unternehmen" sucht.

Aktualisieren Sie als Nächstes die Designeinstellungen für das Textmodul wie folgt:

• Textschriftart: Muli
• Schriftstärke des Textes: Schwer
• Text Textfarbe: #d30c7b
• Text Textgröße: 22px
• Textausrichtung: Mitte
• Animationsstil: Folie
• Animationsrichtung: unten
• Animationsintensität: 250%

Die hinzugefügte Animation zeigt den Titel des Suchergebnisses unter dem Trennerstil „Wolke“ (wir werden dies etwas später hinzufügen). Jedes Mal, wenn ein Benutzer eine neue Suchanfrage eingibt, wird der Titel für einen coolen Effekt heruntergeklappt.

Neue Zeile hinzufügen

Erstellen Sie unter dem Textmodul, das das Element post/archive title enthält, eine neue einspaltige Zeile.

Fügen Sie der Zeile ein Blog-Modul hinzu. Dadurch werden die tatsächlichen Beiträge/Inhalte der Suchergebnisseite angezeigt.

Aktualisieren Sie die Inhaltseinstellungen für das Blogmodul wie folgt:

• Beiträge für aktuelle Seite: JA
• Beitragsanzahl: 9
• Auszug Länge: 120
• Autor anzeigen: NO

Die wichtigste Option hier sind die Beiträge für die aktuelle Seite. Diese muss aktiv sein, damit die Suchergebnisseite den dynamischen Inhalt der Suche anzeigen kann.

Aktualisieren Sie dann das Design des Blog-Moduls wie folgt:

• Layout: Gitter
• Titelschriftart: Muli
• Schriftstärke des Titels: Ultra Bold
• Titeltextfarbe: #3a405a
• Titeltextgröße: 24px
• Höhe der Titelzeile: 1,3 em
• Körperschriftart: Montserrat
• Textkörperfarbe: #3a405a
• Rasterlayout Abgerundete Ecken: 10px
• Rahmenbreite des Rasterlayouts: 0px
• Box Shadow: Screenshot anzeigen
• Vertikale Position des Boxschattens: 0px
• Box-Schattenunschärfe-Stärke 15px
• Stärke der Box-Schattenausbreitung: -5px

Aktualisieren Sie als Nächstes den Paginierungsstil wie folgt:

Abschnittshintergrund und Teiler

Als letzten Schliff für das Design aktualisieren Sie die Abschnittseinstellungen wie folgt:

• Hintergrundfarbe: #eeeeee
• Top Divider Style: siehe Screenshot
• Teilerfarbe: #ffffff
• Teiler Flip: vertikal
• Teileranordnung: Über dem Abschnittsinhalt
• Polsterung: 100px oben

Endergebnis

Hier ist das Endergebnis der Seitenvorlage bei der Suche nach dem Begriff „Unternehmen“ auf der Live-Site.

Hier ist das Design auf Tablet und Telefon.

Und hier ist ein Beispiel für die Animation des Suchergebnistitels bei Verwendung des Suchformulars für zusätzliche Abfragen auf der Suchergebnisseite.

Abschließende Gedanken

Eine Suchergebnisseite kann ein nützliches Tool für Benutzer sein, daher ist es eine gute Idee, ihr die Aufmerksamkeit zu schenken, die sie verdient. Mit Divi können Sie bei der Gestaltung der Vorlage mithilfe des Divi Visual Builder eine Suchergebnisvorlage mit allen erforderlichen dynamischen Elementen erstellen. Keine Codekenntnisse erforderlich. Ich hoffe, dies gibt Ihnen ein wenig Inspiration, um eine benutzerdefinierte Suchergebnisseite für Ihr eigenes Blog oder Ihre eigene Website zu erstellen.

Ich freue mich von Ihnen in den Kommentaren zu hören.

Danke schön!