Haben Sie jemals das Gefühl gehabt, dass die Suchleiste auf Ihrer Website viel Platz einnimmt und Ihre Navigation unübersichtlich wirkt? Aber was wäre, wenn sie ein wenig ansprechender, ein wenig moderner sein könnte?
Im Laufe der Jahre haben wir das Design unserer Website mehrmals geändert und mit der attraktiveren Gestaltung des Suchformulars experimentiert. Und basierend auf unserer Erfahrung kann die Verwendung eines modalen Suchformulars das Sucherlebnis auf Ihrer Website verändern.
Diese raffinierten kleinen Pop-up-Suchfelder können die Benutzererfahrung Ihrer Website erheblich verbessern, und sie sind nicht so kompliziert einzurichten, wie Sie vielleicht denken.
In diesem Artikel zeigen wir Ihnen, wie Sie ein modales Suchformular in WordPress hinzufügen, ohne Code bearbeiten zu müssen.
Was ist ein modales Suchformular & Warum sollte man es verwenden?
Ein modales Suchformular ist ein Popup-Fenster, das sich über Ihre aktuelle Seite legt. Wenn ein Benutzer auf ein Suchsymbol auf seiner WordPress-Website klickt, öffnet sich direkt über der Seite ein Fenster, das nur das Suchfeld und den Senden-Button enthält. Stellen Sie es sich wie einen Scheinwerfer vor, der den Fokus auf diesen bestimmten Inhalt lenkt.
Es unterscheidet sich von einer herkömmlichen Suchleiste, die sich möglicherweise in Ihrer Kopfzeile oder Seitenleiste befindet und immer sichtbar ist. Modale Suchformulare sind standardmäßig ausgeblendet und erscheinen nur, wenn ein Benutzer aktiv suchen möchte.
Zum Beispiel verwenden wir bei SearchWP ein modales Suchformular, um unseren Benutzern eine ablenkungsfreie Sucherfahrung zu bieten. So sieht es auf unserer Website aus:
Ein modales Suchformular hält Ihr Seitenlayout sauber und übersichtlich. Keine sperrigen Suchleisten mehr, die wertvollen Platz beanspruchen. Außerdem wird die Aufmerksamkeit des Benutzers sofort auf die Suchfunktion gelenkt, wenn sie erscheint. Sie ist schwer zu übersehen, was die Interaktion verbessert.
Darüber hinaus bietet ein modales Suchformular Designflexibilität. Egal, ob Ihre Website ein minimalistisches Design oder ein komplexes Layout hat, es kann sich nahtlos einfügen.
Nun wollen wir uns ansehen, wie Sie ein modales Suchformular zu Ihrer WordPress-Website hinzufügen.
Hinzufügen eines modalen Suchformulars in WordPress
Der einfachste Weg, ein modales Suchformular anzuzeigen, ist die Verwendung des Plugins SearchWP Modal Search Form.
Das Beste daran ist, dass das WordPress-Suchplugin kostenlos genutzt werden kann und auf dem Stil Ihres aktiven WordPress-Themes aufbaut. Sie müssen keine einzige Codezeile anfassen, um sein Aussehen oder seinen Stil zu bearbeiten.
Um loszulegen, müssen Sie das Plugin SearchWP Modal Search Form installieren und aktivieren. Wenn Sie Hilfe benötigen, sehen Sie sich bitte diese Anleitung an, wie man ein WordPress-Plugin installiert.
Nach der Aktivierung können Sie im WordPress-Dashboard zur Seite SearchWP » Modal Form gehen. Von hier aus sehen Sie, dass die Option „Modal Form aktivieren“ aktiv ist.
Als Nächstes können Sie nach unten scrollen und auswählen, welche CSS-Datei für Ihre Website geladen werden soll. Zum Beispiel lässt SearchWP Modal Search Form Sie zwischen Positionierung und visueller Gestaltung, Positionierungsgestaltung oder keiner Gestaltung wählen.
Wir empfehlen die Verwendung der Standardeinstellung „Positionierung und visuelles Styling“. Auf diese Weise erhalten Sie mehr Kontrolle darüber, wo das Suchformular angezeigt wird und wie es aussieht.
Darüber hinaus gibt es Optionen, den Vollbildmodus zu aktivieren und das Scrollen zu deaktivieren.
Der Vollbildmodus bedeckt den gesamten Bildschirm, wenn ein Benutzer das Formular öffnet, und sorgt für eine ablenkungsfreie Erfahrung.
Sie können auch die Option Scrollen deaktivieren aktivieren. Dies verbessert die Sucherfahrung weiter, indem die Hintergrundbewegung reduziert wird, wenn ein Benutzer versehentlich scrollt.
Wenn Sie fertig sind, klicken Sie einfach auf die Schaltfläche „Einstellungen speichern“.
Anzeigen des modalen Suchformulars auf Ihrer Website
Als Nächstes müssen Sie das modale Suchformular irgendwo auf Ihrer Website anzeigen. SearchWP ermöglicht es Ihnen, das Formular zum Menü Ihrer Website hinzuzufügen, einen Gutenberg-Block oder einen Shortcode zu verwenden.
Betrachten wir jede Methode zur Anzeige des modalen Suchformulars in WordPress.
1. Hinzufügen eines modalen Suchformulars zum WordPress-Menü
Abhängig von Ihrem WordPress-Theme können Sie das modale Suchformular zu jedem Menü auf Ihrer Website hinzufügen.
Gehen Sie einfach im WordPress-Dashboard zu Design » Menüs. SearchWP fügt nun eine neue Gruppe namens „SearchWP Modal Search Forms“ unter den Menüpunkten hinzu.
Wählen Sie das modale Formular aus und klicken Sie auf die Schaltfläche „Zum Menü hinzufügen“.
Wenn Sie fertig sind, vergessen Sie nicht, auf die Schaltfläche „Menü speichern“ zu klicken.
Danach können Sie Ihre Website besuchen, um es in Aktion zu sehen.
2. Modales Suchformular in Blogbeiträgen und Seiten anzeigen
Sie können das modale Suchformular auch mit dem Gutenberg-Block oder einem Shortcode zu jedem Blogbeitrag oder jeder Landingpage hinzufügen. Dies ist perfekt, wenn Sie eine Suchoption innerhalb des Inhalts Ihrer Website anzeigen möchten.
Zuerst müssen Sie die Seite oder den Beitrag besuchen, auf der/dem Sie das Suchformular anzeigen möchten. Sobald Sie sich im Inhaltseditor befinden, klicken Sie einfach auf die Schaltfläche „+“ und fügen Sie den Block „Modales Formular“ hinzu.
Danach können Sie die Einstellungen des modalen Formularblocks im rechten Bereich ändern.
Es gibt beispielsweise Optionen, um den Text zu ändern, eine Vorlage auszuwählen und festzulegen, ob das Formular ein Link oder eine Schaltfläche sein soll.
Wenn Sie fertig sind, klicken Sie einfach auf die Schaltfläche „Speichern“ oder „Veröffentlichen“.
Von hier aus können Sie die Seite oder den Beitrag besuchen, um das modale Formular in Ihrem Inhalt anzuzeigen.
Wenn Sie lieber Shortcodes verwenden möchten, können Sie den folgenden Shortcode eingeben, um das modale Formular überall auf Ihrer Website anzuzeigen.
[searchwp_modal_search_form]
Sie können auch Anpassungen vornehmen, die verschiedene Attribute des Modals selbst steuern. Zum Beispiel zeigt der folgende Shortcode eine Schaltfläche mit dem Text „Suche öffnen“ an:
[searchwp_modal_search_form engine="my_searchwp_engine" template="My Custom Template" text="Open Search" type="button"]
Sie können jedes Attribut im Shortcode bearbeiten, um das modale Suchformular anzupassen. Ersetzen Sie beispielsweise einfach den Typ durch „link“, wenn Sie keine Schaltfläche anzeigen möchten, und bearbeiten Sie den Text.
3. Modales Suchformular im Widget-Bereich anzeigen
Sie können auch ein modales Suchformular zum Widget-Bereich Ihres WordPress-Themes hinzufügen, z. B. zur Seitenleiste oder zum Footer.
Klicken Sie zunächst im WordPress-Admin-Panel auf Design » Widgets. Danach können Sie auf die Schaltfläche „+“ klicken und den Widget-Block „Modales Formular“ hinzufügen.
Als Nächstes sehen Sie verschiedene Optionen, um die Einstellungen des Modalformulars im rechten Bereich zu bearbeiten.
Es gibt Optionen, um den Text zu ändern, eine Vorlage auszuwählen und ihn von einem Link in eine Schaltfläche zu ändern.
Wenn Sie fertig sind, klicken Sie auf die Schaltfläche „Aktualisieren“.
Von hier aus können Sie Ihre Website besuchen und das Modalformular im Widgets-Bereich sehen. Zum Beispiel haben wir es zur Seitenleiste unserer Demo-Website hinzugefügt.
Was kommt als Nächstes…
Jetzt, da Sie wissen, wie Sie ganz einfach ein modales Suchformular zu Ihrer Website hinzufügen, können Sie einen Schritt weiter gehen und das gesamte Sucherlebnis für Ihre Besucher verbessern.
Die Standard-WordPress-Suche hat viele Einschränkungen und berücksichtigt keine Informationen wie Kategorien, Tags, benutzerdefinierte Felder, Produktdetails und mehr im Suchprozess. Sie können dies jedoch ändern, indem Sie SearchWP verwenden und die Standard-Sucheinstellungen ersetzen.
Das Plugin hilft Ihnen, unbegrenzte benutzerdefinierte Suchmaschinen für Ihre Website zu erstellen, benutzerdefinierte Suchformulare einzurichten und Taxonomien, benutzerdefinierte Felder, Mediendateien und andere wichtige Informationen bei der Suche nach Inhalten auf Ihrer Website einzuschließen.
Das Beste daran ist, dass Sie das SearchWP Modal Search Form-Plugin mit SearchWP verwenden und das volle Potenzial Ihrer Website-Suche nutzen können.
Wir hoffen, dieser Artikel hat Ihnen geholfen zu lernen, wie Sie ein modales Suchformular in WordPress hinzufügen. Möglicherweise möchten Sie auch unseren Leitfaden lesen, wie Sie eine Divi-Suchergebnisvorlage erstellen und wie Sie die WordPress-Sucheinstellungen für beste Ergebnisse konfigurieren.
Bereit, ein besseres und persönlicheres WordPress-Sucherlebnis zu schaffen? Starten Sie noch heute mit SearchWP!
