tl;dr: Elementor geht den Weg der Integration weiterer Funktionen weiter – manches als zusätzliche Produkte (AI, Bildoptimierung), anderes taucht direkt im Elementor selber auf.
Mit Version 3.23 tauscht Elementor das Search-Widget aus und erlaubt damit eine verbesserte Benutzererfahrung für die interne Suche umzusetzen.
Da für die Anwendung Theme-Builder-Templates zum Einsatz kommen benötigt man die Pro-Version des Plugins oder ein Elementor-Hosting-Paket.
Wie die WordPress interne Suche funktioniert und wie man diese mit Plugins erweitert steht im Beitrag WordPress interne Suche. Eine beliebte Sucherweiterung ist eine AJAX-Suche – damit wird schon während der User einen Suchbegriff eingibt im Hintergrund die Suche gestartet und bereits Ergebnisse angezeigt. Elementor ersetzt nun die klassische Elementor-Suche durch ein komplett neues Widget.
Die Voraussetzungen zur Nutzung dieser neuen Suche sind:
Dieses ist wie immer im Dashboard zu erledigen:
Dashboard > Elementor > Eigenschaften | Laufende Experimente | Suche
Im Augenblick (August 2024) ist der Status auf beta, das kann eine Zeit lang noch so bleiben. Da es sich aber um eine wenig kritische Komponente einer Website handelt kann man den Einsatz wohl riskieren.
Für die Darstellung der Suchergebnisse benötigt man mehrere Templates: jene für das einzelne Suchergebnis jeweils direkt unter der Suchmaske oder auf der Suchergebnisseite und eben das Archivtemplate für das Suchergebnis.
Das Template dient zur Gestaltung der einzelnen Treffer, die während des Tippens in der Suchmaske live angezeigt werden sollen. Daher wird es sinnvoll sein nur wenig Inhalt relativ klein anzuzeigen.
Ein Loop-Template erstellt man im Elementor Theme Builder:
Dashboard > Templates > Theme Builder | Loop Item +
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 (!)
Um den Link zum Suchergbenis zu setzen wird statt dessen der Container selbst verlinkt. Dazu muß der Container selbst aktiviert sein, dann kann man unter
Layout > Zusätzliche Optionen
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.
Die häufigste Einbindung einer Internen Suche erfolgt wohl im Header einer Seite. Um die Suche dort unterzubringen muß man also das Header Template bearbeiten.
Vermutlich existiert bereits ein Header in den Theme-Builder-Templates. In diesen wird das Widget Suche eingesetzt. Damit das funktioniert muss nun dieses neue Widget richtig konfiguriert werden.
Mit der neuen Live-Suche wurden auch einige weitere Verbesserungen im Suchwidget umgesetzt, es lohnt sich hier ein näherer Blick. Doch zuerst sollte man die grundsätzliche Funktion überprüfen.
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.
Das schon in die Jahre gekommen alte Suchfeld wurde nun komplett überarbeitet. Bei der Eingabe steht neben dem Platzhalter auch ein weiteres Icon zur Verfügung.
Wie sich der Schalter Autocomplete auswirkt konnte ich nicht herausfinden. Hinweise erwünscht (Kommentar hinterlassen!)
Die Clear-Funktion zeigt ein Icon im Texteingabebereich das eben eine Textlöschung auf Click auslöst. Ob das wirklich so nowendig ist sei mal in den Raum gestellt.
Beim Submit kann man nun einstellen (Trigger) , ob das Form mit Klick oder mit Tastatureingabe oder beides ausgelöst werden soll. Natürlich kann man den Text des Buttons ändern (oder löschen) und auch wieder ein Icon setzen.
Der schon aus dem Loop-Grid bekannte Abfrage-Bereich taucht nun sinnvoller Weise auch bei der Suche auf: Damit erlaubt Elementor die Einschränkung der Suche auf bestimmte Inhaltstypen, Kategorien etc. Es lässt sich also mit diesem Widget zB. eine Volltextsuche nur über einen Produktbereich realisieren der umgehend eine Produktergebnis liefert.
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.
Jede Ajax-Suche verkürzt den Weg von der Suche zum Ergebnis, indem man direkt von der Sucheingabe (übrigens auch über eine Tastatureingabe) zum Ergebnis gelangen kann. Aber wenn der User das Angebot nicht annimmt und auf das Icon klickt oder auf der Tastatur die Eingabetaste trifft? Dann findet nochmals eine ganz klassische Suche statt (siehe auch hier).
Wer mit Elementor arbeitet benötigt also nochmals 2 Dinge: Ein Looptemplate für das einzelne Suchergebnis und ein Template für das Archiv des Suchergebnisses. (Das entspricht also der klassischen Elementor-Suche mit Loop Grid) .
Es kann auch Inhaltlich sehr schlau sein, unterschiedliche Loop-Templates für die Anzeigen in der Live-Suche und der Ergebnisliste zu verwenden: in der Liste habe ich mehr Platz und kann mehr Details über den Treffer darstellen als in einer kleinen Liste.
Analog zum ersten Template legt man also ein weiteres Loop-Template an:
Dashboard > Templates > Theme-Builder | Loop Item +
Wieder ist es sehr zu empfehlen, dem Template einen eindeutigen Namen zu geben, um es auch einfach im 4. Template auswählen zu können.
Dashboard > Templates > Theme-Builder | Suchergebnisse +
Für dieses Template benötigt man (ausser dem obligaten Container) nur das Widget Loop-Grid. Hier wählt man das zuvor erstellte Search Archive Loope Item unter Choose a Template aus, weiters werden die Spalten und Items Per Page definiert.
Im Tab Abfrage ist unter Quelle die Auswahl Aktuelle Suchanfrage zu treffen. Nur so kann das Loop Grid eben jene Inhalte auflisten, die unter dem Suchbegriff selektiert wurden.
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.
Das neue Elementor Such-Widget ist auf jeden Fall eine starke Verbesserung – auch ohne Live-Results. Die Gestaltungsmöglichkeiten bisher waren eher bescheiden, jetzt hat der Webdesigner all den Raum, den er benötigt um wirklich genaue seine Vorstellungen umzusetzen. Von der Suchmaske bis hin zum Ergebnis, alles besser als Vorher. Also: spätestens, wenn es aus dem Beta-Stadium entwachsen ist verwenden!
Veröffentlicht am: 1. August 2024
Letztes Update: 2. August 2024