So fügen Sie Ihrer Divi-Website eine Echtzeit-Ajax-Suche hinzu

Ajax ist eine großartige Möglichkeit, Divi um die Live-Suche hinzuzufügen. Mit Ajax muss die Seite nicht neu geladen werden, um den Benutzern die Suchergebnisse anzuzeigen. Dadurch können Ihre Besucher die Ergebnisse viel schneller sehen, was dazu beiträgt, dass sie länger auf Ihren Seiten bleiben. Das Ergebnis ist eine Website, die sauberer aussieht und reibungsloser funktioniert.

Die Ajax-Suche ist nicht in Divi integriert, kann aber leicht mit einem Drittanbieter-Plugin hinzugefügt werden. In diesem Tutorial erfahren Sie, wie Sie die Ajax-Suche zu Divi hinzufügen und die Suche so gestalten, dass sie zum Design Ihrer Website passt.

Weiter zum Tutorial.

Vorgeschmack

Bevor wir beginnen, sehen Sie sich hier an, wie unsere Ajax-Suche aussehen wird, wenn wir fertig sind. Dies ist die Desktop-Ansicht. Ich füge einem WooCommerce-Shop eine Ajax-Suche hinzu. Ich verwende die Show-Seite aus dem Online-Shop-Layoutpaket. Wir werden auch die Suche so gestalten, dass sie dem Layout entspricht. Da dies eine Testseite ist, betrüge ich natürlich und verwende die WooCommerce-Testprodukte. Die Ergebnisse funktionieren bei allen Produkten gleich.

So sieht das gleiche Design auf einem Telefon aus.

So fügen Sie Ihrer Divi-Website eine Echtzeit-Ajax-Suche hinzu

Abonnieren Sie unseren Youtube-Kanal

1. Installieren von Divi Ajax Search

Kaufen Sie zunächst Divi Ajax Search vom Divi Marketplace. Es kostet normalerweise 29 US-Dollar und beinhaltet unbegrenzte Nutzung sowie ein Jahr Support und Updates. Mit Divi Ajax Search können Sie Seiten, Beiträge, Projekte und WooCommerce-Produkte durchsuchen. Es funktioniert bei jedem dieser Beitragstypen gleich. Es kann den Titel, den Auszug und das vorgestellte Bild durchsuchen und gemäß Ihren Einstellungen anzeigen.

Um das Plugin zu installieren, gehen Sie zu Plugins > Neu hinzufügen und wählen Sie Plugin hochladen .

Wählen Sie Datei auswählen aus, navigieren Sie zum Speicherort der Datei auf Ihrem Computer und wählen Sie sie aus. Klicken Sie auf Jetzt installieren .

Wählen Sie nach der Installation des Plugins Plugin aktivieren aus .

2. Ajax-Suche zu Ihrer Divi-Website hinzufügen

Hier sehen Sie das Original-Layout. Es enthält den Header, Kategorien, die das Header-Bild überlappen, und das WooCommerce-Modul zur Anzeige der Produkte. Ich werde die Ajax-Suchfunktion über dem Shop-Modul hinzufügen. Ich werde es auch so gestalten, dass es den Elementen des Layouts entspricht.

Divi Ajax Search zum Layout hinzufügen

Klicken Sie auf das Symbol unter dem Shop-Modul, um das Modul-Modal zu öffnen. Scrollen Sie zu oder suchen Sie nach Divi Ajax Search und fügen Sie es dem Layout hinzu. Ich zeige die Drahtmodellansicht, aber alle Ansichten funktionieren gleich.

Ziehen Sie das Modul per Drag & Drop über das Shop-Modul.

Konfigurieren des Suchfelds

Klicken Sie auf das Zahnrad, um die Optionen zu öffnen. Ich habe zur Desktopansicht gewechselt, damit ich meine Änderungen live sehen kann.

Zuerst passen wir den Platzhaltertext an. Der Standard-Platzhaltertext verwendet das Wort Suchen. Dies ist in Ordnung, aber ich ändere es in Unsere Produkte durchsuchen , damit der Benutzer weiß, dass er im Shop und nicht nach Blog-Posts oder anderen Inhalten durchsucht. Ich werde den Auftrag durch, Ordnung verlassen und keine Ergebnisse Text auf die Standardwerte.

• Platzhaltertext – Durchsuchen Sie unsere Produkte
• Suchergebnis – 10
• Bestellen bis – Datum
• Bestellung – desc
• Kein Ergebnistext – Keine Ergebnisse gefunden

Entscheiden Sie, was in den Suchergebnissen angezeigt werden soll

Wählen Sie im Abschnitt namens Suchbereich aus, wonach Sie suchen möchten. Ich belasse die Standardeinstellungen, einschließlich Titel, Inhalt und Auszug.

Wählen Sie als Nächstes die Beitragstypen aus. Sie können damit Posts, Seiten, Projekte, Produkte oder alle oben genannten durchsuchen. Ich wähle Produkte aus.

Suchen in:

• Titel
• Inhalt
• Auszug

Beitragstypen:

• Produkte

Wählen Sie aus, was angezeigt werden soll

Scrollen Sie nach unten zum Anzeigebereich, um auszuwählen, wie die Ergebnisse angezeigt werden. Ich behalte die Standardeinstellungen für das Suchsymbol, den Titel, den Auszug und das vorgestellte Bild bei. Ich habe auch den Produktpreis aktiviert, die Anzahl der Spalten auf 4 geändert und die Verwendung von Mauerwerk ausgewählt. Dadurch bekomme ich das gewünschte Layout.

Suchsymbol anzeigen:

• Jawohl

Anzeigefelder:

• Titel
• Auszug
• Ausgewähltes Bild
• Produktpreis

Anzahl der Spalten:

• 4

Mauerwerk verwenden:

• Jawohl

Zeigen Sie die Bildlaufleiste an

Gehen Sie zu den Einstellungen für die Bildlaufleiste und entscheiden Sie sich, die Bildlaufleiste anzuzeigen oder auszublenden. Ich füge die Bildlaufleiste hinzu, damit der Benutzer besser weiß, dass er scrollen kann.

Scrollleiste:

• Zeigen

Divi Ajax-Suchergebnis

Wenn Sie einen Suchbegriff eingeben, werden die Ergebnisse unter dem Suchfeld angezeigt. Das sieht toll aus, hebt sich aber nicht vom Inhalt der Website ab. Wir gestalten es so, dass es zum Design der Website passt und nicht mit den Produktbildern verschmilzt.

3. Gestalten Sie das Modul so, dass es zu Ihrer Website passt

Um das Suchfeld zu gestalten, verwende ich Designelemente aus dem Layout, das ich verwende. Unten auf der Shop-Seite des Online-Shop-Layouts befinden sich einige Designelemente. Eines ist ein interessantes E-Mail-Optin-Modul. Ich werde dies als meine Inspiration für den Hintergrund und das Feld verwenden. Ich verwende auch die Hintergrundfarbe des Shop Now CTAs für die Suchergebnisse. Dabei achte ich besonders auf drei Gestaltungselemente:

• Newsletter-Hintergrundfarbe – #757d79
• Shop-CTA-Hintergrundfarbe – #dcae83
• Polsterung für beide – 50px (oben, unten), 60px (rechts, links)

Das Suchfeld gestalten

Öffnen Sie die Hintergrundeinstellungen auf der Registerkarte Inhalt. Dieser Abschnitt hat drei verschiedene Hintergrundbereiche. Gehen Sie zum letzten. Es heißt nur Hintergrund. Geben Sie hier die Farbe ein.

• Hintergrundfarbe – #757d79

Gehen Sie auf der Registerkarte Design zu den Abstandseinstellungen und geben Sie den Abstand ein. Auf diese Weise können wir den Bereich um das Feld herum sehen, damit wir die Ergebnisse besser sehen können. Dadurch erhält das Suchfeld auch viel Farbe, die den Elementen im Layout entspricht.

• Padding 50px (oben, unten), 60px (rechts, links)

Fügen Sie in den Suchfeldeinstellungen die Feldhintergrundfarbe und die Feldtextfarbe hinzu. Ich habe das Feld dem Hintergrund des Moduls angepasst und nur Weiß für den Text ausgewählt.

• Feldhintergrundfarbe – #757d79
• Feldtextfarbe – #ffffff

Scrollen Sie in den gleichen Einstellungen nach unten zu Feldrandfarbe und wählen Sie Weiß. Wir könnten auch die Dicke und den Radius der Umrandung anpassen. Ich lasse es quadratisch, damit es dem Textfeld des optin-Moduls entspricht.

• Feldrandfarbe – #ffffff

Öffnen Sie die Einstellungen für das Suchsymbol und wählen Sie Weiß.

• Farbe des Suchsymbols – #ffffff

Öffnen Sie die Einstellungen für den Loader und wählen Sie Weiß für die Loader-Farbe . Der Lader wird nur kurz angezeigt, aber er sieht besser aus, wenn er zu den restlichen Elementen passt.

• Lader-Farbe – #ffffff

Ergebnisfeld gestalten

Öffnen Sie die Hintergrundeinstellungen auf der Registerkarte Inhalt und fügen Sie die Farbe zum Hintergrund für das Suchergebnisfeld und das Suchergebniselement hinzu . Dies ist während der Gestaltung des Moduls nicht sichtbar, da es nur angezeigt wird, wenn Suchergebnisse angezeigt werden.

• Hintergrundfarbe – #dcae83

Öffnen Sie auf der Registerkarte Design die Einstellungen für den Suchergebniselementtext . Wählen Sie auf der Registerkarte Titel den Schriftstil in Großbuchstaben und Weiß als Textfarbe aus. Ich belasse alle anderen Titeleinstellungen auf Standard.

• Titelschriftart – TT
• Titeltextfarbe – #ffffff

Öffnen Sie die Registerkarte Auszug und wählen Sie Weiß für die Textfarbe des Auszugs .

• Auszug Textfarbe – #ffffff

Öffnen Sie die Registerkarte Preis. Wählen Sie Halbfett für das Preisgewicht und Weiß für die Textfarbe.

• Preis Schriftgewicht – Halbfett
• Auszug Textfarbe – #ffffff

Ergebnisse

So sieht die Ajax-Suche auf dem Desktop mit meinem Styling aus. Die Suchergebnisse werden fast sofort angezeigt. Es sieht elegant und glatt aus.

So sieht es auf dem Telefon aus. Die Ergebnisse werden gestapelt und an den Bildschirm angepasst.

Gedanken beenden

Das Hinzufügen einer Ajax-Suche zu Ihrer Divi-Website ist mit dem Divi Ajax Search-Plugin schnell und einfach. Es ist einfach zu bedienen, einfach zu stylen, um es an Ihre Website anzupassen, und die Ergebnisse sind schnell und sehen fantastisch aus. Sie haben viele Optionen für die Posttypen, die gesucht werden können, und für die Inhaltstypen, die in den Ergebnissen angezeigt werden.

Jetzt kann Ihre Divi-Website eine professionell gestaltete Ajax-Suchfunktion haben, die Ihre Besucher zu schätzen wissen!

Wir wollen von dir hören. Haben Sie Ihrer Divi-Website eine Echtzeit-Ajax-Suche hinzugefügt? Teilen Sie uns Ihre Erfahrungen in den Kommentaren mit.

Ausgewähltes Bild über Kroster / shutterstock.com