Suchen und Finden mit Elementor

Suchen mit Elementor

tl;dr: Mit Elementor eine Suche für eine WordPress-Seite zu gestalten ist recht einfach. Wie das geht erfährst Du in diesem Artikel, auch wie man eine 404 Seite mit Elementor Pro erstellt.

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 Suchfeld einbauen

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 ich auch auf der Ergebnisseite einbinden, um den 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 (einen?) 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. (Hier gibt es übrigens eine Kurzanleitung, wie man mit Elementor in 6 Schritten eine Webseite erstellt).

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 … oder ähnliches einfügen.

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

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

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

Per Drag&Drop wird das Suchformular im Header platziert.

Je nach Skin stehen unterschiedliche Optionen bereit, um die Suchmaske den persönlichen Wünschen anzupassen.

Die Ergebnisseite gestalten

Um die Ergebnisseite zu gestalten wählen wir im Dashboard Templates > Theme Builder  und dann  > Neu hinzufügen. Als Template Typ wählen wir Archiv und geben dem Ganzen einen sinnvollen Namen.

Nun können wir wir immer aus den reichlich vorhandenen Vorlagentypen wählen oder auch von Grund auf eine Seite gestalten. Es stehen 3 Widgets (Archiv Titel, Beiträge archivieren (sic!) und Autor Box bereit. Natürlich kann man auch andere Widgets wie zB. das Suchformular einbauen.
Übrigens: der verwendete Suchbegriff wird hierbei im Suchformular automatisch angezeigt. Die Anzeige der Trefferanzahl fehlt hingegen (hier gibt es eine Drittanbieterlösung). 

Die Gestaltungsmöglichkeiten für die Archivanzeige sind sehr umfangreich, je nachdem welchen Grundtyp man wählt (Klassisch, Karten oder Full Content) ergeben sich mannigfaltige Optionen. Dazu kommt die Möglichkeit der Paginierung.  Unter Erweitert findet man die Option Text für jenen Fall vorzusehen wenn WordPress bei der Volltextsuche nichts findet. 

Um zu Überprüfen wie das ganze dann Aussieht kann man in der Vorschau-Option (Das Augen-Icon unten neben dem Speicherknopf) einen Suchbegriff eingeben und bekommt live im Elementor das Suchergebnis während des Gestaltens angezeigt. Sehr praktisch.

Ein neues Template Typ Archiv anlegen
Die Vorschau ist live veränderbar
Archivoptionen Elementor
Zahlreiche Optionen bei der Archivausgabe

Wenn wir dann mit unserer Archivseite zufrieden sind und speichern (also das Template veröffentlichen) 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. Das wars auch schon, damit kann man recht schnell eine ansprechende interne Suche umsetzen. Elementor arebeitet hier übrigens auch gut mit verschiedenen Plugins zusammen, die diese intere Suche erweitern können.

AnzeigeBedingung Suchseite
Das Template soll für Suchergebnisse verwendet werden

Nicht gefunden - die 404 Seite

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 (sei es das ein Blogbeitrag gelöscht wurde oder einfach eine fehlerhafte URL angegeben wurde.)

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. Dem Template einen sinnvollen Namen zu geben hat noch nie geschadet, dann das Template anlegen.

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 des nun neu angelegten Seitentemplates kann man nun als Bedingung 404Seite auswählen. Das war’s auch schon.

Bedenke: niemand will diese Seite sehen, sie taucht nur auf, wenn jemand einen Fehler gemacht hat: also entweder der Webmaster indem er ev. eine Seite ohne redirect gelöscht hat oder zB. indem der User eine vermeintliche Seite aufgerufen hat, sich  aber bei der Adresseingabe vertippte. Wenn es also gelingt diesen Fehler entweder durch Humor (vielleicht eine witzige Illustration oder einen Text?) oder aber durch Service (sinnvolle Links die vermutlich dem Benutzer weiterhelfen) abzufangen endet das Ganze vielleicht doch noch positiv.

 

404 Template Anlegen
Ein neues Template für ”Single" anlegen und dort ”404" wählen
404 Screen 2
Beim Speichern muss angegeben werden unter welchen Umständen das Template verwendet werden soll - in unserem Fall eben dann, wenn der gewünschte Inhalt nicht gefunden wurde un der Server einen Status 404 zurück schickt.

Keine Kommentare bisher, schreib Deinen Kommentar!


Kommentar hinzufügen

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Diese Website verwendet Akismet, um Spam zu reduzieren. Erfahre mehr darüber, wie deine Kommentardaten verarbeitet werden.