Elementor Live Search

Es empfiehlt sich gleich einen Beitrag für die Vorschau im Editor auszuwählen, der alle Merkmale (zB Beitragsbild und Textauszug) enthält. Man arbeitet leichter wenn man sieht was man tut.

Die Vorschau (Über die Seiteneinstellungen zu erreichen) bieten eine Breitenangabe sowie die Möglichkeit, einen bestimmten Beitrag (oder auch anderen Posttyp) auszuwählen. Damit fällt die Gestaltung leichter, egal ob man das Template from scratch aufbaut oder eines aus der Bibliothek wählt.

In diesem Beispiel wurde ein einfacher Container mit grauem Hintergrund gewählt, in dem 3 Widgets untergebracht wurden: Beitrag Titel, Beitrag Bild und Post Ausschnitt. 

Abstände, Anordnung, Farben etc. Wir haben völlig freie Gestaltungsmöglichkeiten (siehe auch hier:  Elementor Container). 

Wichtig: Will man den ganzen Container als Linkbereich und nicht nur zB. den Beitragstitel dürfen im ganzen Container keine Links gesetzt werden (!) 

den HTML-Tag auf a (link) setzen, als Ziel des Links wählt man über die dynamischen Optionen Post-URL.

Wie immer ist es eine gute Idee dem nun erstellen Template einen eindeutigen Namen zu geben (in den Seiten-Einstellungen, in dem Fall eben in den Loop-Item-Einstellungen), damit wir später auch das richtige Template auswählen können.

Im zweiten vertikalen Tab gibt es nun einen Bereich für die Suchergbnisse (Results, die Übersetzungen hängen wie so oft ein wenig nach). Hier ist die Option Live Results zu aktivieren, worauf man im Bereich Choose a template das zuvor erstellte Single Loop Template auswählt. 

Unter Minimum search characters legt man fest, wie viele Zeichen der User eingeben muß damit die Suche im Hintergrund startet.

Spalten erlaubt die Anzeige von Treffern nebeneinander und Elemente limitiert die AngezeigtenTreffer auf die hier angegebene Zahl. 

Equal Height erlaubt es, die Treffer in gleich hohen Boxen anzuzeigen, es erfolgt also eine Streckung auf die Höhe des Treffers mit dem größten Platzbedarf.

Eine Nichts gefunden Meldung erlaubt eine individuelle Texteingabe für Suchen ohne Treffer.

Wenn man sich das nun im Frontend anschaut funktioniert das auch. Nicht unbedingt ein Augenschmauss, aber immerhin. Es klappt.

Nach der Eingabe der ersten Zeichen erscheint der erste Treffer in dem zuvor angelegten Loop-Template. Ein Klick irgendwo in den Treffercontainern führt auch zum Beitrag, 

Natürlich hängt es von den Inhalten und dem Design der ganzen Website ab, welche Werte man hier in Results-Dialog setzt. 

Nicht vergessen: im Augenblick ist es noch im beta-Stadium, also gründlich Testen und ggf. nach jedem Update prüfen, ob es noch wie gewünscht funktioniert.

Die Gestaltungsmöglichkeiten des Such-Widgets sind vielfältig und erwartbar umgesetzt, so daß an dieser Stelle nur auf die wesentlichsten Punkte eingegangen werden soll.

Search Field. Abstände, Farben, Größen, Schatten. Alles da, alles wie sonst auch.

Clear. Hier die Größen- und Farbeinstellung für das Clearicon im Texteingabebereich.

Absenden Schaltfläche. Wie beim Formular auch sind hier alle notwendigen Optionen zu finden, um den Button klickwürdig zu machen.

Results.  Hier geht es um den Bereich, in dem (über dem eigentlichen Seiteninhalt) das Suchergebnisloop angezeigt wird. Daher findet man hier Optionen zum Hintergrund (Background Type, einfarbig oder Verlauf), zu einem möglichen Rahmen (Border) und zu einem möglichen Schatteneffekt (Box Shadow).

Wenn es einen Rahmen geben kann benötigen wir auch eine Abrundung (Border Radius) und einen Innenabstand. 

Neben diesen notwendigen und logischen Optionen finden wir hier weitere, sehr wichtige Einstellungsmöglichkeiten:

Distance from search field (responsive): damit kann die Oberkante des Bereiches mit den Live-Ergebnissen von der Unterkante des Texteingabebereichs nach unten verschoben werden. Ein Wert 0 sorgt für eine nahtlose Darstellung. Negative Werte sind möglich. 

Custom Width: ohne Wert ist der Loopbereich so Breit wie das Textfeld, in dem die Sucheingabe geschieht. Mit einer Angabe hier kann der Bereich in seiner Breite definiert werden. 

Max height: erlaubt eine Limitierung der Höhe, was besonders (es gibt hier responsive Eingabemöglichkeiten) auf manchen Gerätetypen durchaus notwendig sein kann. 

Gap between columns / rows sind notwendige Optionen, da man ja eine mehrspaltige Anzeigemöglichkeit hat bzw. die Suchergebnis u.U. vertikal voneinander trennen will. 

Nichts gefunden Meldung: Ob diese Option bei eine Ajax-Suche Sinn ergibt sei dahin gestellt (weil wenn nichts da ist wird einfach auch nichts angezeigt) aber sei's drum: wenn man sie aktiviert muß sie auch gestaltbar sein.  

Unter Weitere Optionen ist die Option Nichts gefunden Meldung zu aktivieren und entsprechdend zu gestalten. Schliesslich kann es hier leicht vorkommen, dass der User keine Treffer bekommt. 

Über die hier mögliche Option in den Dynamischen Inhalten kann man auch einen Shortcode einbinden und damit eine umfangreichere Gestaltung dieses Bereiches ausführen.