Suchen und Finden mit Elementor

Eine Suche in WordPress ist (wie in dem Beitrag hier ausführlich beschrieben) eine Anwendung einer Archivseite mit dem Filter eines Suchbegriffes. Typisch für Elementor ist die Umsetzung mittels Templates, Widgets und Bedingungen.

Das Suchformular wird wohl in den meisten Fällen im Header einer Seite eingebaut, manchmal zusätzlich auch im Footer. Natürlich lässt es sich auch auf der Ergebnisseite einbinden, um dem Nutzer eine Suche nach einem anderen Begriff in der Nähe zur Ergebnisliste anzubieten.

Wir wählen also über das Dashboard Templates > Theme Builder aus und dort dann Kopfzeile, um den Header meiner Seite zu bearbeiten. Das Suchformular ist eines von den 6 Widgets, die unter Webseite zusammengefasst sind. Dieses wird per Drag&Drop an die gewünschte Stelle gebracht.

Nun muss man zwischen 3 verschiedenen Skins wählen: Klassisch, Minimal und Bildschirmfüllend.

Klassisch: eine Suchbox links und rechts dazu ein Button der entweder Icon oder Text beinhalten kann. Im Textfeld kann man einen Platzhalter wie zb: Suche … einfügen.

Minimal bedeutet, dass kein Button angeboten wird sondern nur ein Suchfeld mit einem Icon links im Hintergrund.

Bildschirmfüllend wiederum heisst, dass nur ein Icon angezeigt wird das zu einem Modal-Overlay führt wo dann der Suchtext eingegeben wird.

Je nach gewählter Option stehen die bei Elementor gewohnten Gestaltungselemente für Typographie, Rahmen, Hintergrund, Icongröße etc. im Stil-Menü zur Verfügung.

Per Drag&Drop wird das Suchformular im Header platziert.

Wer mit den 3 angebotenen Skins nicht zufrieden ist kann auch ein Popup einblenden und dort die Sucheingabe platzieren. Dazu legt man als erstes ein entsprechendes Popup an (Elementor Pro Lizenz nötig):

Man kann eines der angebotenen Templates umbauen oder (besser) mit einem leeren Popup beginnen.

Folgende Schritte wurden durchgeführt:

Nun wechselt man in den Teil des Templates (vermutlich die Kopfzeile) wo die Suche aufgerufen werden soll. Hier wird nun das Widget Icon eingesetzt und gestaltet, zB. mit einer klassischen Lupe. Nun wird der Link in diesem Widget gesetzt: zuerst wählt man das Icon für dynamischen Link und danach Action > Popup.

Im nächsten Schritt muss man auf das kleine Icon links klicken und dann das gespeicherte Popup-Template auswählen.

Das war es auch schon. Nun öffnet sich nach dem Klick auf das Icon eine selber gestaltete Suchmaske im Popup. Nach Eingabe eines Suchbegriffes schließt dieses automatisch.

Um die Ergebnisseite zu gestalten gehen wir:

Als Template Typ wählen wir Archiv und geben dem Ganzen einen sinnvollen Namen. Wer den neuen Themebuilder verwendet findet links den Templatetyp Suchergebnisse und wählt diesen aus.

Nun können wir wie immer aus den reichlich vorhandenen Bibliotheksvorlagen wählen oder auch von Grund auf eine Seite gestalten. Es stehen 3 Widgets (Archiv Titel, Beiträge archivieren und Autor Box) bereit. Übrigens: der verwendete Suchbegriff wird hierbei im Suchformular automatisch angezeigt. Die Anzeige der Trefferanzahl fehlt hingegen.

Die Gestaltungsmöglichkeiten für die Archivanzeige sind sehr umfangreich, je nachdem welchen Grundtyp des Widgets Beiträge Archivieren man wählt (Klassisch, Karten oder Full Content) ergeben sich mannigfaltige Optionen. Dazu kommt die Möglichkeit der Paginierung.

Um zu überprüfen wie das ganze dann aussieht kann man in der Vorschau-Option einen Suchbegriff eingeben und bekommt live im Elementor das Suchergebnis während des Gestaltens angezeigt. Sehr praktisch.

Wenn wir dann mit unserer Archivseite zufrieden sind und speichern fragt uns Elementor nach den Bedingungen, zu denen dieses Template verwendet werden soll. Hier muss man nun Suchergebnisse wählen, damit es auch angewandt wird. Elementor arbeitet hier übrigens auch gut mit verschiedenen Plugins zusammen, die diese interne Suche erweitern können.

Um den Suchbegriff einzublenden gibt es einen dynamischen Inhalt den man auswählen kann. Wenn man Archiv-Titel wählt wird der Suchbegriff eingeblendet, in der Form:

Mehr über dynamische Inhalte hier.

Elementor bietet uns über das Widget Beiträge Archivieren mit den Anzeigenformen Karten und Klassisch nur 2 Varianten, wie man ein Postgrid gestalten kann. Es gibt Plugins, um die Fähigkeiten von Elementor hier zu erweitern. Wir schauen uns Elementor Custom Skin an. Die Basisversion ist kostenlos, benötigt aber die Pro-Version von Elementor.

Nach der Aktivierung stehen dann unter:

zwei neue Templates zur Verfügung: Loop und Custom Grid. Wenn wir nun ein neues Loop-Template erstellen bauen wir jenes Element, womit wir den einzelnen Suchtreffer in der Trefferliste anzeigen.

In dem Beispiel wurde eine Section mit einem Inneren Abschnitt mit 3 Spalten erstellt mit einem Rahmen mit abgerundeten Ecken. In der ersten Spalte das Beitragsbild, in der 2. Beitrags-Titel und Post-Ausschnitt und in der 3. Spalte vertikal unten ausgerichtet ein Button mit dynamischer Post URL. Das Template dann ohne Anzeigebedingung speichern.

Ganz ähnlich wie die Suchergebnis Seite ist auch die 404-Seite anzulegen. Also jene Seite die gezeigt wird, wenn der User versucht etwas aufzurufen das nicht existiert.

Im WordPress Dashboard geht man auf Templates > Neues anlegen. Hier gilt es nun den richtigen Typ des Templates zu wählen: Single. Danach erscheint die Möglichkeit den PostType zu wählen, wo man 404 Page auswählt.

Die Gestaltung der Seite kann wie immer from scratch erfolgen oder man bedient sich als Ausgangspunkt eines mit dem Elementor Pro Plugin mitgelieferten Templates. Beim Speichern kann man als Bedingung 404-Seite auswählen. Das war's auch schon.

Bedenke: niemand will diese Seite sehen, sie taucht nur auf, wenn jemand einen Fehler gemacht hat. Wenn es also gelingt diesen Fehler entweder durch Humor oder durch Service (sinnvolle Links) abzufangen endet das Ganze vielleicht doch noch positiv.