So fügen Sie dem sekundären Menü von Divi ein Suchfeld hinzu

Im heutigen Divi-Tutorial zeigen wir Ihnen, wie Sie Ihrem sekundären Menü ein Suchfeld hinzufügen. Das sekundäre Menü wird auch als Kopfzeile Ihrer Seite bezeichnet und ist der Ort, an dem Sie versuchen, einige praktische Informationen über Ihre Website oder Ihr Unternehmen einzugeben. Das Hinzufügen eines Suchfelds kann eine Anfrage eines Kunden sein oder eine Notwendigkeit für Ihre eigene Website. In jedem Fall zeigen wir Ihnen, wie Sie dieses Suchfeld einfach in Ihre Sekundärnavigation integrieren können, wenn Sie das Divi-Theme verwenden.

Ergebnis

Bevor wir in die verschiedenen Schritte eintauchen, die Sie unternehmen müssen, um dorthin zu gelangen; Es könnte interessant sein, Ihnen das Ergebnis vorab zu zeigen. Wenn Sie die Schritte im Beitrag befolgen und Änderungen an der CSS-Darstellung hinzufügen, erhalten Sie das folgende Ergebnis in einem standardmäßigen sekundären Menü:

Warum ein Suchfeld zu Ihrem sekundären Menü hinzufügen?

Das Hinzufügen einer Suchmöglichkeit zu Ihrem sekundären Menü ist eines der Dinge, die Sie möglicherweise versucht haben. Aber im Gegensatz zum Hauptmenü hat der Header keine separate Seite in WordPress, die Ihnen hilft, Dinge manuell hinzuzufügen, ohne PHP-Codezeilen zur Datei header.php Ihrer Website hinzufügen zu müssen.

Das Hinzufügen einer Suchmöglichkeit in Ihrem sekundären Menü kann jedoch eine interessante Sache sein. Sehen wir uns einige Gründe an, warum Sie einen hinzufügen möchten.

Bieten Sie Ihren Besuchern eine Suchmöglichkeit von Anfang an

Sie haben alle Arten von Besuchern auf Ihrer Website. Einige von ihnen möchten Dinge erkunden und sich Zeit nehmen, während andere sofort spezifische Informationen finden möchten. Indem Sie Ihr Suchfeld zum sekundären Menü hinzufügen, wird sichergestellt, dass die Besucher, die nach etwas Bestimmtem suchen, dies sofort tun können. Da sich oben auf der Seite ein sekundäres Menü befindet, werden die Besucher, die es eilig haben, den Aufwand zu schätzen wissen, der ihre Benutzererfahrung verbessert.

So speichern Sie Ihr Hauptmenü aus dem Suchfeld

Natürlich können Sie auch das Suchfeld zum Hauptmenü hinzufügen. In einigen Fällen möchten Sie dies jedoch möglicherweise nicht. Zum Beispiel; wenn Sie den Fokus auf Ihren Menüpunkten behalten oder die Menüpunkte nicht mit dem Suchfeld vermischen möchten. Ein anderer Grund könnte sein, dass Sie bereits einige Menüpunkte haben, die Ihr Hauptmenü überfüllt erscheinen lassen, und Sie kein Suchfeld hinzufügen möchten.

Betonen Sie das Suchfeld, ohne ein auffälliges Hauptmenü zu haben

Die meisten Leute neigen dazu, ihr primäres Menü nüchtern zu halten und ihr sekundäres Menü zum Knallen zu bringen. In erster Linie, weil sie den offensichtlichen Unterschied zwischen den beiden Menüs zeigen wollen. Und sekundär, weil das sekundäre Menü oft einige Dinge enthält, die sie hervorheben möchten (wie die Social-Media-Symbole). Wenn Sie sich entscheiden, das Suchfeld auch in Ihr Sekundärmenü zu integrieren, wird es automatisch ebenfalls hervorgehoben und regt Ihre Besucher an, genau das zu suchen und zu finden, wonach sie suchen.

So fügen Sie dem sekundären Menü von Divi ein Suchfeld hinzu

Abonnieren Sie unseren Youtube-Kanal

Suchfeld zur Header-PHP-Datei hinzufügen

Um das Suchfeld wie in der Abbildung unten gezeigt tatsächlich zu Ihrem Header hinzuzufügen, müssen Sie in erster Linie etwas zur Datei header.php Ihrer Website hinzufügen. Die Codezeile, die Sie benötigen, ist die folgende:

<?php get_search_form(); ?>

Kopieren Sie diese PHP-Codezeile und gehen Sie zu Ihrem WordPress-Dashboard. Gehen Sie in Ihrem WordPress-Dashboard zu Darstellung > Editor > header.php.

Sie können die Codezeile jetzt dort platzieren, wo Ihre Suchleiste erscheinen soll. Da es direkt neben den Social-Media-Icons erscheinen soll, zeigen wir Ihnen, wo es genau im Code platziert werden muss. Wir müssen es direkt vor dem sekundären Menü platzieren, der Container und die obere Kopfzeile schließen.

Gestalten Sie Ihr Suchfeld

Standardmäßig sieht das Suchfeld etwas veraltet aus. Sie werden wahrscheinlich einige Dinge ändern wollen, damit sie so aussieht, wie Sie es möchten, und um sie an das Erscheinungsbild des Rests Ihrer Website anzupassen. Dies sind drei Dinge, die Sie wahrscheinlich ändern möchten: die Suchbezeichnung, die Sucheingabe und die Schaltflächeneingabe.

Wenn Sie keine CSS-Änderungen am Suchfeld vornehmen, sieht es in Ihrem sekundären Menü standardmäßig so aus:

Was natürlich nicht das Endergebnis ist, das wir erreichen wollen. Glücklicherweise können wir so viele Änderungen am Feld vornehmen, wie wir möchten. Im nächsten Teil dieses Beitrags zeigen wir Ihnen, wie Sie alle Elemente des Suchfelds ändern und teilen auch die CSS-Codezeilen, um das folgende Ergebnis zu erzielen:

Suchlabel entfernen/ändern

Das erste Element, das Teil des Suchfelds ist, ist das Suchlabel. Dies ist der angezeigte Text, der den Benutzern erklärt, dass sie mithilfe des Felds nach allem auf der Website suchen können. Dieses Etikett ist jedoch nicht erforderlich. Jeder weiß heute, wie ein Suchfeld funktioniert. Sie können das Suchlabel jederzeit verschwinden lassen, indem Sie 'display:none;' zum CSS dieses Labels. Oder Sie können das Aussehen des Etiketts ändern.

Die Klasse, die Sie benötigen, um Änderungen an der Suchbezeichnung vorzunehmen, ist „.screen-reader-text“. Wie im folgenden Beispiel gezeigt, können Sie die Anzeige deaktivieren.

.screen-reader-text {
display: none;
}

Gestalten Sie Ihre Sucheingabe

Das nächste, was Sie möglicherweise formatieren möchten, ist die Sucheingabe. Um Anpassungen an dieser Eingabe vorzunehmen, platzieren Sie alle CSS-Codezeilen zwischen den folgenden Klammern:

 input#s
{

}

Gestalten Sie Ihre Tasteneingabe

Und schließlich haben wir auch den Button-Stil. Um Änderungen an diesem Teil des Suchfelds vorzunehmen, platzieren Sie Ihre CSS-Codezeilen zwischen den folgenden Klammern:

input#searchsubmit
{
}

Benötigter CSS-Code für unser Beispiel

Nachdem Sie die PHP-Änderung vorgenommen haben, können Sie sofort das oben gezeigte Ergebnis erzielen, indem Sie zu Ihrem WordPress-Dashboard > Divi > Theme-Optionen > Allgemein > gehen und die folgenden CSS-Codezeilen zum Custom-Feld hinzufügen:

.screen-reader-text {
display: none;
}

input#s {
border-radius: 5px;
}

input#searchsubmit {
border: 1px solid #000000;
color: #FFFFFF;
background-color: #000000;
border-radius: 5px;
}

form#searchform {
float: right;
}
@media screen and (min-width: 480px) {
#top-header .container {
padding-bottom: 5px;
}

#et-secondary-menu .et-social-icons {
margin-top: 6px;
}}

Ergebnis

Nachdem wir nun alle Schritte durchlaufen haben, sehen wir uns noch einmal an, wie Ihr Header aussehen sollte:

Abschließende Gedanken

In diesem Tutorial haben wir Ihnen gezeigt, wie Sie Ihrem sekundären Menü ein Suchfeld hinzufügen. Außerdem haben wir Ihnen gezeigt, wie Sie die Elemente in diesem Suchfeld ändern können, und Ihnen ein Beispiel für CSS-Codezeilen präsentiert, die Sie einfach kopieren und für Ihren eigenen Gebrauch einfügen können. Wenn Sie Fragen oder Anregungen haben, können Sie gerne einen Kommentar im Kommentarbereich unten hinterlassen!

Abonnieren Sie unbedingt unseren E-Mail-Newsletter und unseren YouTube-Kanal, damit Sie keine große Ankündigung, keinen nützlichen Tipp oder ein Divi-Werbegeschenk verpassen!

Ausgewähltes Bild von D Line / shutterstock.com