Mit dem Suchformular-Block können Sie jeder SeedProd-Seite ein voll funktionsfähiges Suchfeld hinzufügen, mit dem Besucher sofort die gesuchten Inhalte finden können. Ganz gleich, ob Sie einen Blog, eine Landing Page oder eine komplette Website erstellen – durch Hinzufügen eines Suchformulars reduzieren Sie Reibungsverluste und halten die Nutzer bei Laune, indem Sie relevante Inhalte schnell anzeigen.
Der Block bietet flexible Konfigurationsmöglichkeiten – wählen Sie zwischen einer Symbolschaltfläche und einer Textschaltfläche, legen Sie einen benutzerdefinierten Platzhalter fest, steuern Sie die Höhe und Breite des Formulars und passen Sie die Farben für die Sucheingabe und die Schaltfläche genau an. Sie können das Formular an einer beliebigen Position ausrichten und den Abstand anpassen, um ein übersichtliches, einheitliches Layout für alle Bildschirmgrößen zu erzielen.
Hinzufügen des Suchformular-Blocks zu Ihren Seiten
Befolgen Sie diese Schritte, um einen Suchformular-Block zu Ihrer SeedProd-Seite hinzuzufügen:
Schritt 1: Block hinzufügen
Ziehen Sie unter „Design“ > „Blöcke“ den Block „Suchformular“ per Drag & Drop in den gewünschten Bereich Ihrer Seite.
Schritt 2: Inhaltseinstellungen konfigurieren
Klicken Sie nach dem Hinzufügen auf den Block „Suchformular“, um dessen Einstellungen zu öffnen. Auf der Registerkarte „Inhalt“ können Sie im Abschnitt „Suchformulareinstellungen“ den Platzhaltertext, den Stil der Schaltfläche, die Größe des Formulars und die Ausrichtung konfigurieren.
- Platzhalter: Geben Sie den Hinweistext ein, der im Suchfeld angezeigt wird, bevor ein Besucher mit der Eingabe beginnt (z. B. „Suchen ...“ oder „Was suchen Sie?“). Dies gibt den Benutzern eine Orientierung, wonach sie suchen können.
- Schaltflächentyp: Wählen Sie aus, wie die Schaltfläche zum Absenden der Suche angezeigt werden soll – „Symbol“ zeigt eine kompakte Symbolschaltfläche an (wählen Sie zwischen einer Lupe oder einem Pfeil), während „Text“ eine Schaltfläche mit vollständiger Textbeschriftung anzeigt. Wenn „Text“ ausgewählt ist, wird ein Textfeld angezeigt, in dem Sie die Beschriftung der Schaltfläche festlegen können (z. B. „Suchen“ oder „Los“).
- Symbol: (Sichtbar, wenn „Schaltflächentyp“ auf „Symbol“ eingestellt ist.) Wählen Sie den Symbolstil für die Suchschaltfläche aus – ein rundes Lupensymbol oder ein Pfeilsymbol.
- Größe: Stellen Sie die Gesamthöhe des Suchformulars mit dem Schieberegler ein (30–80 px). Damit legen Sie fest, wie hoch das Eingabefeld und die Schaltfläche auf der Seite angezeigt werden.
- Ausrichtung: Legen Sie die horizontale Ausrichtung des Suchformulars fest – links, mittig oder rechts.
Schritt 3: Design anpassen
Auf der Registerkarte „Erweitert“ können Sie die Farben und Abmessungen des Suchformulars feinabstimmen und anschließend den Abstand und die Sichtbarkeit auf verschiedenen Geräten steuern.
Farben & Breite:
- Suchhintergrund: Legen Sie die Hintergrundfarbe des Suchfeldes fest.
- Farbe des Suchtextes: Legen Sie die Farbe des in das Suchfeld eingegebenen Textes sowie die Farbe des Platzhaltertextes fest.
- Hintergrund der Schaltfläche: Legen Sie die Hintergrundfarbe der Schaltfläche zum Absenden der Suche fest.
- Schaltflächenfarbe: Legen Sie die Symbol- oder Textfarbe der Schaltfläche zum Absenden der Suche fest.
- Breite: Legen Sie die Gesamtbreite des Suchformulars als Prozentsatz seines Containers fest (10–100 %). Verwenden Sie einen niedrigeren Wert, um das Formular schmaler zu machen, oder legen Sie 100 % fest, um eine Suchleiste in voller Breite zu erhalten.
Abstand:
- Rand: Steuert den äußeren Abstand um Ihren Suchformularblock herum (oben, rechts, unten, links). Damit legen Sie fest, wie viel Platz zwischen dem Formular und den umgebenden Elementen auf der Seite angezeigt wird.
- Abstand: Passen Sie den inneren Abstand innerhalb Ihres Suchformularblocks an (oben, rechts, unten, links). Dadurch entsteht ein Abstand zwischen dem Suchformular und den Blockrändern.
Attribute:
- CSS-ID: Zeigt die automatisch generierte eindeutige Kennung für Ihren Suchformular-Block an. Diese ID wird automatisch von SeedProd für benutzerdefiniertes Styling oder JavaScript-Targeting erstellt.
- Benutzerdefinierte Klasse: Fügen Sie benutzerdefinierte CSS-Klassen hinzu, um bestimmte Stile aus Ihrem Theme oder benutzerdefiniertem CSS anzuwenden.
- Benutzerdefinierte Attribute: Fügen Sie beliebige HTML-Attribute zum Block-Wrapper-Element hinzu. Geben Sie jedes Attribut in einer neuen Zeile im folgenden Format ein: Attributname|Wert (z. B. data-search|enabled).
Geräte-Sichtbarkeit:
- Auf dem Desktop ausblenden: Blendet den Suchformular-Block auf Desktop-Bildschirmen aus.
- Auf Tablet ausblenden: Blendet den Suchformular-Block auf Tablet-Geräten aus.
- Auf Mobilgeräten ausblenden: Blendet den Suchformular-Block auf Mobilgeräten aus.
Animationseffekte:
- Eingangsanimation: Wählen Sie aus verschiedenen Animationseffekten, die abgespielt werden, wenn der Suchformularblock in den Blickbereich scrollt. Zu den Optionen gehören „Hüpfen“, „Einblenden“, „Vergrößern“, „Eindrehen“ und viele mehr.
Schritt 4: Speichern Sie Ihre Änderungen
Wenn Sie die Konfiguration des Suchformular-Blocks und die Anpassung seines Erscheinungsbilds abgeschlossen haben, speichern Sie Ihre Arbeit.
Sie haben erfolgreich einen Suchformular-Block zu Ihrer Seite hinzugefügt! Ein gut platziertes Suchformular verbessert die Navigation und hält Besucher auf Ihrer Seite, indem es ihnen hilft, genau das zu finden, was sie suchen, ohne Ihre Website verlassen zu müssen. Experimentieren Sie mit Schaltflächenstilen, Eingabefarben und Breiteneinstellungen, um ein Sucherlebnis zu schaffen, das sich nahtlos in Ihr Seitendesign einfügt.