So fügen Sie dem Divi-Sekundärmenü ein Suchfeld hinzu

Ohne ein Suchfeld wird Ihre Site-Navigation darunter leiden. Sie haben vielleicht das stabilste Surferlebnis im Internet, aber wenn Ihre Benutzer nicht genau nach dem suchen können, wonach sie suchen, riskieren (und wahrscheinlich) Sie Geschäfte zu verlieren. Dieses Tutorial führt Sie durch das Hinzufügen eines Suchfelds zum Divi-Sekundärmenü, damit Ihre Benutzer in jedem Fall immer nur ein paar Klicks von allem entfernt sind, was sie brauchen.

Übersicht über das Divi-Suchfeld

Büro

Mobil

Laden Sie den globalen Header herunter und / oder ändern Sie ihn

Für diesen Artikel verwenden wir die kostenlose Kopf-/Fußzeile, die mit unserem Layoutpaket für die Lebensmittellieferung geliefert wird. Sie können die einfach herunterladen .Zip *: Französisch archivieren und entpacken Sie die notwendigen .json Datei auf Ihrem Computer.

Gehen Sie danach zu Ihrem WordPress-Dashboard und navigieren Sie zu Divi - Themengenerator. Von dort aus müssen Sie auf die klicken Pfeilsymbol nach oben und unten um die Portabilitätsoptionen zu öffnen.

Klicken Sie im neuen Modal auf das Import Registerkarte und finden Sie die .json heruntergeladene Datei. Wenn Sie fertig sind, wählen Sie Importieren Sie Generatormodelle aus Divi-Thema um den Download zu starten.

An diesem Punkt sind Sie bereit, die Globaler Header Teil von dem Website-Vorlage standardmäßig. Importieren von .json Datei sollte das Freebie automatisch als Header der gesamten Site angewendet haben.

Fügen Sie der sekundären Menüleiste ein Suchfeld hinzu

Wenn Sie Divi Visual Builder verwenden, sollten Sie etwas Ähnliches wie den Global Header sehen.

Als erstes wollen wir Platz für das Suchfeld schaffen. Wir möchten sicherstellen, dass das Suchfeld für alle leicht zugänglich ist. Besucher, also fügen wir es dem sekundären Menü hinzu (über der Startseite / Kontakt Leitung).

Zunächst fügen wir das Suchfeld mit dem Divi-Suchmodul in der dritten Spalte der ersten Zeile.

Platzhaltertext ist für Suchfelder wichtig. Wenn Ihr Modul vorhanden ist, gehen Sie also zu Parameter und setze deine Reservierter Bereich Text zu etwas, das den Benutzer daran erinnert, wonach er suchen muss. wir stellen Artikel finden! als Platzhalter, damit der Benutzer weiß, wonach er suchen kann, da wir das Layoutpaket für die Lebensmittellieferung verwenden.

Das Suchfeld in der dritten Spalte ist nicht gut. Also wollen wir in die Suchmodul Einstellungen und gehen Sie zum Design Zunge. Finde es Transformator Optionen, dann gehe zu übersetzen Registerkarte (die zweite). Sie können dann das Suchmodul an seinen Platz ziehen und Divi übernimmt das gesamte CSS und den Abstand dafür.

Wir verwenden auch % für diesen Wert, damit er unabhängig vom Darstellungsbereich auf dem Desktop relativ bleibt. Verwenden von Pixel kann einige unterschiedliche Auflösungen verzerren.

Divi Transformator Übersetzen die Optionen müssen auch für das Handy angepasst werden. Wenn nicht, ist es dasselbe. Also unbedingt zum gehen Reaktivität Einstellungen und legen Sie den Speicherort des Suchmoduls in den sekundären Menüoptionen fest. Wir haben gerade die vertikale Platzierung des Mobiles angepasst, da es in der dritten Spalte der Zeile automatisch am unteren Rand der Zeilenelemente angezeigt wird.

Das Divi-Suchmodul gestalten

Sie haben zwar nicht viele Gestaltungsoptionen für ein Suchfeld, aber einige. Das heißt, die Farbe des Textes und des Feldes selbst, sowohl wenn es inaktiv ist als auch wenn ein Benutzer darauf geklickt hat. (Und natürlich Abstände und Größen und andere Standard-Divi-Designoptionen.)

Um die Farboptionen zu finden, gehen Sie zu Kauen Menü im Design Zunge. Nach dem Aufklappen haben Sie die Möglichkeit, die Textfarbe des Platzhalters, die Hintergrundfarbe des Felds und die Farbe des Feldtextes (vom Benutzer eingegebener Text, d. h. zu sagen) zu ändern. Zusätzlich zu konzentrieren Variationen liegen vor, wenn der Benutzer gezielt mit dem Suchfeld interagiert.

Wenn dies nach Ihren Wünschen gestaltet ist, klicken Sie auf die Schaltfläche Speichern.

Sichtbarkeitseinstellungen prüfen

Einige unserer kostenlosen Layout- und Header-Pakete bieten verschiedene Anzeigeoptionen für Desktop- und Mobilgeräte. Wenn Sie im Visual Builder abgeblendete / ausgegraute Mods sehen, bedeutet dies, dass die Mod auf einigen Geräten deaktiviert ist.

Für die Kopfzeile der Lebensmittellieferung sind die letzten beiden Spalten auf Mobilgeräten deaktiviert. Wir wollen in die Leitungseinstellungen und klicken Sie auf die Einstellungen der Spalten, die Sie auf dem Handy anzeigen möchten. In diesem Fall ist es der dritte.

Dann geh zum Fortschritte Zunge und navigiere zu Sichtbarkeit Möglichkeit. Stellen Sie hier sicher, dass alle Optionen unter deaktivieren über ungeprüft für die Spalte, die Ihr Suchfeld enthält. Klicken Sie auf die Schaltfläche Speichern (grünes Häkchen) und die Module sollten farbig erscheinen und nicht mehr verfärbt sein.

Sobald Sie sichergestellt haben, dass alles sichtbar ist, können Sie dieses Ding online stellen!

Sichere deine Arbeit

Klicken Sie unbedingt auf das grüne Speichertaste unten rechts auf dem Bildschirm.

Sie können nun den visuellen Generator mit dem X in der oberen rechten Ecke schließen. Auf dem nächsten Bildschirm sollten Sie sicherstellen, dass der Divi Theme Builder alle Ihre Optionen gespeichert hat. Wenn er sagt Änderungen speichern, Klicken Sie auf die Schaltfläche. Wenn er sagt Alle Änderungen gespeichert, dann ist Ihr Suchfeld bereits in Ihrem Divi-Sekundärmenü aktiv.

Endergebnisse

Sie müssen nur noch Ihre Arbeit auf Ihrer Website bewundern!

Büro

Mobil

Fazit mit dem Divi-Suchfeld

Suchfelder sind ein grundlegender Bestandteil einer guten Benutzererfahrung für Ihre Website. Wenn Sie Ihren Kunden den bestmöglichen Service bieten möchten Besucher, sollte es eine Ihrer obersten Prioritäten sein, sicherzustellen, dass Ihre Inhalte durchsuchbar sind. Ich hoffe, Sie können diese schnelle und einfache Methode verwenden und sie bald auf Ihrer Divi-Site anwenden!