Der Suchformular-Block ermöglicht es Ihnen, eine voll funktionsfähige Suchleiste zu jeder SeedProd-Seite hinzuzufügen. So können Besucher sofort nach Inhalten suchen, die sie interessieren. Egal, ob Sie einen Blog, eine Landingpage oder eine vollständige Website erstellen, ein Suchformular hilft, Reibungsverluste zu reduzieren und Benutzer durch schnelles Auffinden relevanter Inhalte zu binden.
Der Block bietet flexible Konfigurationsmöglichkeiten – wählen Sie zwischen einer Icon-Schaltfläche oder einer Text-Schaltfläche, legen Sie einen benutzerdefinierten Platzhalter fest, steuern Sie Höhe und Breite des Formulars und passen Sie die Farben für die Sucheingabe und die Schaltfläche fein an. Sie können das Formular beliebig ausrichten und den Abstand für ein sauberes, konsistentes Layout auf allen Bildschirmgrößen anpassen.
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
Unter Design > Blöcke ziehen Sie den Suchformular-Block in den gewünschten Bereich Ihrer Seite.
Schritt 2: Inhaltseinstellungen konfigurieren
Nach dem Hinzufügen klicken Sie auf den Suchformular-Block, um seine Einstellungen zu öffnen. Im Tab Inhalt können Sie im Abschnitt Suchformular-Einstellungen den Platzhaltertext, den Button-Stil, die Formulargröße und die Ausrichtung konfigurieren.
- Platzhalter: Geben Sie den Hinweistext ein, der im Suchfeld angezeigt wird, bevor ein Besucher zu tippen beginnt (z. B. „Suchen…“ oder „Was suchen Sie?“). Dies leitet die Benutzer an, wonach sie suchen können.
- Button-Typ: Wählen Sie, wie die Schaltfläche zum Absenden der Suche angezeigt wird – Icon zeigt eine kompakte Icon-Schaltfläche (wählen Sie zwischen einer Lupe oder einem Pfeil), während Text eine vollständige Textbeschriftungsschaltfläche anzeigt. Wenn Text ausgewählt ist, erscheint ein Text-Feld, in dem Sie die Beschriftung der Schaltfläche festlegen können (z. B. „Suchen“ oder „Los“).
- Icon: (Sichtbar, wenn Button-Typ auf Icon eingestellt ist.) Wählen Sie, welcher Icon-Stil für die Suchschaltfläche verwendet werden soll – ein kreisförmiges Lupen-Icon oder ein Pfeil-Icon.
- Größe: Legen Sie die Gesamthöhe des Suchformulars mit dem Schieberegler (30–80px) fest. Dies steuert, wie hoch das Eingabefeld und die Schaltfläche auf der Seite erscheinen.
- Ausrichtung: Legen Sie die horizontale Ausrichtung des Suchformulars fest – Links, Mitte oder Rechts.
Schritt 3: Design anpassen
Im Tab Erweitert können Sie die Farben und Abmessungen des Suchformulars feinabstimmen und dann Abstände und Sichtbarkeit auf verschiedenen Geräten steuern.
Farben & Breite:
- Hintergrund Suche: Legen Sie die Hintergrundfarbe des Such-Eingabefeldes fest.
- Textfarbe Suche: Legen Sie die Farbe des Textes fest, der in das Such-Eingabefeld eingegeben wird, sowie die Farbe des Platzhaltertextes.
- Hintergrund Button: Legen Sie die Hintergrundfarbe der Such-Abschaltfläche fest.
- Farbe Button: Legen Sie die Icon- oder Textfarbe der Such-Abschaltfläche 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 setzen Sie es auf 100 % für eine suchleiste über die gesamte Breite.
Abstand:
- Abstand: Steuern Sie den äußeren Abstand um Ihren Suchformular-Block (oben, rechts, unten, links). Dies bestimmt, wie viel Platz zwischen dem Formular und den umgebenden Elementen auf der Seite vorhanden ist.
- Innenabstand: Passen Sie den inneren Abstand innerhalb Ihres Suchformular-Blocks an (oben, rechts, unten, links). Dies schafft Freiraum 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 benutzerdefinierte Stile oder JavaScript-Ziele erstellt.
- Benutzerdefinierte Klasse: Fügen Sie benutzerdefinierte CSS-Klassen hinzu, um spezifische Stile aus Ihrem Theme oder benutzerdefinierten CSS anzuwenden.
- Benutzerdefinierte Attribute: Fügen Sie dem Wrapper-Element des Blocks HTML-Attribute hinzu. Geben Sie jedes Attribut in einer neuen Zeile im Format ein: attribut-name|wert (z. B. data-search|enabled).
Gerätesichtbarkeit:
- Auf Desktop ausblenden: Blenden Sie den Suchformular-Block auf Desktop-Bildschirmen aus.
- Auf Tablet ausblenden: Blenden Sie den Suchformular-Block auf Tablet-Geräten aus.
- Auf Mobilgeräten ausblenden: Blenden Sie den Suchformular-Block auf Mobilgeräten aus.
Animationseffekte:
- Eingabeanimation: Wählen Sie aus verschiedenen Animationseffekten, die abgespielt werden, wenn der Suchformular-Block ins Sichtfeld scrollt. Optionen sind Bounce, Fade In, Zoom In, Rotate In und viele mehr.
Schritt 4: Speichern Sie Ihre Änderungen
Wenn Sie die Konfiguration des Suchformular-Blocks abgeschlossen und sein Aussehen angepasst haben, stellen Sie sicher, dass Sie Ihre Arbeit speichern.
Sie haben erfolgreich einen Suchformular-Block zu Ihrer Seite hinzugefügt! Ein gut platzierter Suchformular verbessert die Navigation und hält Besucher bei Laune, indem er ihnen hilft, genau das zu finden, was sie brauchen, ohne Ihre Website zu verlassen. Experimentieren Sie mit Button-Stilen, Eingabefarben und Breiten-Einstellungen, um ein Sucherlebnis zu schaffen, das sich nahtlos in das Design Ihrer Seite einfügt.