Elementors eigenes Such-Widget benötigt Elementor Pro, sodass die meisten Websites am Ende bei dem Suchfeld bleiben, das das Theme bereitstellt. Das kostenlose Widget suchen In Master-Addons für Elementor Füllt diese Lücke Sie lassen es irgendwo auf einer Seite oder in einem Header fallen und wählen Sie dann ein klassisches Suchformular oder ein Symbol-Popup aus, das sich auf Klick erweitert. Die Eingabe und der Knopf werden aus dem Elementor-Panel gestylt, kein CSS ist beteiligt.
So werden beide Layouts der Elementor-Such-Widget Arbeit, Einstellung durch Einstellung, plus das, was die Besucher auf der Live-Seite tatsächlich sehen.
Was das Such-Widget tut #
Das Widget gibt ein WordPress-Suchformular als Elementorelement aus Besucher geben eine Abfrage ein, drücken die Eingabetaste oder klicken Sie auf das Übermittlungssteuerelement und landen auf der Standard-Suchergebnisseite Ihrer Website, sodass die Ergebnisse von WordPress selbst stammen und durch Ihr Theme gerendert werden Sie wählen, wie das Formular aussieht: ein vollständiges Eingabefeld mit einem Symbol oder Text-Button oder ein einzelnes Suchsymbol, das sich zu einem Popup-Suchbildschirm erweitert.
Bevor Sie beginnen #
- WordPress Mit Elementor Installiert und aktiv.
- Master-Addons für Elementor Installiert und aktiv Brauchen Sie Hilfe? Sehen Sie sich die Installationsführung.
- Das im Master Addons-Dashboard aktivierte Suchelement, wenn Sie zuvor Widgets ausgeschaltet haben.
So fügen Sie das Elementor-Such-Widget hinzu #
Öffnen Sie den Elementor-Editor und suchen Sie nach Suchen Im Elements-Panel, oder scrollen Sie in den Abschnitt Master-Addons (suchen Sie nach dem MA-Abzeichen) Ziehen Sie das Widget auf Ihre Seite Es erscheint sofort ein funktionierendes Suchformular mit einem Lupensymbol als Übermittlungssteuerung.
Richten Sie die Registerkarte Inhalt ein #
Die Inhalt Tab hält eine Hauptentscheidung plus ein paar Felder, die daraus folgen Die Typ Dropdown-Schalter zwischen den beiden Layouts: Formular und Symbol Popup.
Typ: Formular #
Form ist das klassische Layout, ein Eingabefeld mit einem Submit-Steuerelement rechts Die Tastentyp senden Dropdown entscheidet, was diese Kontrolle ist:
- Symbol: Symbol-Taste zeigt Wählen Sie das Symbol aus der Bibliothek unten; die Standard-Lupe funktioniert für fast jedes Design.
- Knopf: Zeigt stattdessen einen Text-Button A Schaltflächentext Feld erscheint, in dem Sie die Beschriftung eingeben, z. B. Suchen oder Eingeben drücken.
Typ: Icon Popup #
Icon Popup rendert nur ein Suchsymbol Wenn ein Besucher darauf klickt, öffnet sich ein Suchbildschirm über der Seite mit einem großen Eingabefeld und einer Schließtaste. Dies ist das Layout, das in Kopfzeilen und Navigationsleisten verwendet werden soll, in denen ein vollständiges Suchfeld das Menü durchziehen würde.
Die Auswahl von Icon Popup enthüllt die Popup-einstellungen Abschnitt mit zwei Feldern:
- Eingabetext: Der Platzhalter im Suchfeld des Popups, standardmäßig “Suchen Sie ..”.
- Beschreibung: Eine Helferzeile unter dem Feld, wie “Zum Suchen eingeben oder zum Schließen auf X klicken”
Style das Widget im Tab Stil #
Die Stil Tab hat zwei Abschnitte: Formular Für den Eingabebereich und Knopf für die Kontrolle einreichen.
Formular #
Der Abschnitt Form gestaltet den Wrapper und das Eingabefeld:
- Hintergrund: einer Farbe hinter der Form.
- Breite: Die Breite des Formulars in Pixeln Praktisch, wenn das Widget in einer breiten Spalte sitzt und Sie ein engeres Suchfeld wünschen.
- Formularrand und Formularauffüllung: Abstand außerhalb und innerhalb der Hülle.
- Grenztyp und Grenzradius: Der Rahmen um die Form und wie abgerundet seine Ecken sind.
- Typografie und Farbe: Die Schriftart und Textfarbe der Eingabe.
- Formulareingabefarbe: Die Hintergrundfarbe des Eingabefeldes selbst.
Knopf #
Der Button-Abschnitt stylt den Submit-Steuerelement, egal ob es sich um ein Symbol oder eine Texttaste handelt:
- Hintergrundfarbe: Die Füllung hinter dem Button.
- Farbe: Das Symbol oder die Textfarbe.
- Polsterung und Rand: Der innere und äußere Abstand des Knopfes.
- Typografie: Schriftfamilie, Größe und Gewicht für den Schaltflächentext.
Ein Größenhinweis: Die Knopfhöhe folgt der Form. Wenn der Knopftext also nach einer Änderung der Schriftgröße eng aussieht, fügen Sie auf der Formularseite eine kleine vertikale Polsterung hinzu, anstatt nur gegen die Tastenpolsterung vorzugehen.
Sehen Sie sich das Live-Ergebnis an #
Veröffentlichen Sie die Seite und versuchen Sie das Formular Klicken Sie in das Feld, geben Sie eine Abfrage ein, und drücken Sie die Eingabetaste oder drücken Sie die Schaltfläche Senden.
WordPress übernimmt von dort und zeigt die passenden Beiträge und Seiten auf der Suchergebnisvorlage Ihres Themes an:
Häufige Anwendungsfälle #
- Header-Suche: Verwenden Sie Icon Popup neben dem Navigationsmenü, sodass die Suche einen Klick entfernt ist, ohne Menüplatz zu essen.
- Blog-Seitenleiste oder Archivseiten: Ein Suchfeld vom Formtyp hilft Lesern, ältere Beiträge zu durchsuchen.
- 404 Seiten: Ein Suchformular ist das Nützlichste, was man auf eine Seite setzen kann, auf der “nicht gefunden” steht
- Dokumentation und Wissensdatenbanken: Platzieren Sie ein breites Suchformular vorne und in der Mitte, damit Benutzer suchen, bevor sie scrollen.
Tipps für eine bessere Suchleiste #
- Passen Sie die Knopffarbe an die Akzentfarbe Ihres Themas an. Ein Suchbutton, der wie jeder andere Button auf der Seite aussieht, wird mehr genutzt.
- Halten Sie den Platzhalter kurz. “Suche ...” schlägt einen vollen Satz, der mobil abgeschnitten wird.
- Verwenden Sie Icon Popup in engen Layouts. Ein vollständiges Suchformular, das in eine Header-Spalte gepresst wird, wickelt sich bei Tablet-Breiten tendenziell umständlich.
- Testen Sie die Ergebnisseite. Das Widget übergibt die Abfrage an WordPress. Überprüfen Sie daher, ob die Suchergebnisvorlage Ihres Themes vorzeigbar aussieht, bevor Sie das Suchfeld bewerben.
Video-Tutorial #
Wenn Sie das Such-Widget in Aktion sehen möchten, durchläuft dieses Video das vollständige Setup, vom ersten Drag bis zu den Suchergebnissen auf der Live-Seite:
Häufig gestellte Fragen #
Wie füge ich eine Suchleiste in Elementor hinzu?
Installieren Sie Master Addons für Elementor, ziehen Sie dann das Such-Widget aus dem Elements-Panel auf Ihre Seite Es rendert sofort ein funktionierendes WordPress-Suchformular, und Sie können zwischen einem vollständigen Formular und einem Symbol-Popup aus dem Dropdown Typ in der Registerkarte Inhalt wechseln.
Kann ich die Suche in einem Popup öffnen?
Ja. Setzen Sie Typ auf Symbol Popup in der Registerkarte Inhalt Das Widget zeigt dann nur ein Suchsymbol an, und wenn Sie darauf klicken, öffnet sich ein Suchbildschirm mit einem großen Eingabefeld, einem benutzerdefinierten Platzhalter und einer Beschreibungszeile, die Sie über Popup-Einstellungen steuern.
Kann ich den Text der Suchschaltfläche ändern?
Ja. Wenn der Typ auf Formular gesetzt ist, ändern Sie den Schaltkreistyp auf Schaltfläche senden und geben Sie Ihr Etikett in das Feld Schaltflächentext ein. Sie können stattdessen auch ein Symbol beibehalten, indem Sie den Schaltkreistyp auf Symbol senden und ein beliebiges Symbol aus der Bibliothek auswählen.
Woher kommen die Suchergebnisse?
Das Widget übermittelt sich der Standard-WordPress-Suche, sodass die Ergebnisse Ihre Beiträge und Seiten umfassen und in der Suchergebnisvorlage Ihres Themes angezeigt werden. Es ist keine separate Einrichtung der Ergebnisseite erforderlich.
Ist das Master Addons Search Widget kostenlos?
Ja. Das Such-Widget ist in der kostenlosen Version von Master Addons enthalten und funktioniert mit kostenlosem Elementor. Es zeigt keine Live-Ergebnisse während der Eingabe an; es verwendet die Standard-WordPress-Suche.
Einwickelnd #
Die Master Addons Suchen Widget gibt Elementor die Suchleiste, die ihm fehlt: ein Formular - oder Symbol-Popup, das Sie überall platzieren können, und Stil, um das Design zu treffen, mit Ergebnissen, die von WordPress selbst bereitgestellt werden Es passt gut zu den Off-Canvas-Inhalt Widget, wenn Sie einen benutzerdefinierten Header erstellen Durchsuchen Sie die vollständige Sammlung von Master Addons Widgets und Erweiterungen, oder sehen Sie sich die an Widget-Seite durchsuchen Für Demos und einen Vergleich mit dem Elementor Pro Search Widget.
