Hinzufügen einer Schaltfläche im Header-Navigationsmenü

Veröffentlicht: 2021-06-22

Das Header-Navigationsmenü ist WordPress ist ein oft ungenutztes Stück Website-Immobilien. Während die meisten Webmanager es nur für die Navigation verwenden, können Sie auch eine Suchleiste oder sogar Werbeinhalte hinzufügen. Um dies jedoch effektiv zu tun, sollten Sie erwägen, eine Schaltfläche im Kopfzeilen-Navigationsmenü hinzuzufügen . In diesem Artikel werden wir erläutern, warum dies von Vorteil ist und wie Sie dies richtig tun.

Der Vorteil des Hinzufügens einer Schaltfläche im Header-Navigationsmenü

Eine Schaltfläche im Kopfzeilen-Navigationsmenü zu haben, mag trivial erscheinen. Schließlich scheint es keinen großen Unterschied zwischen einem Standard-Hyperlink und einer Schaltfläche zu geben. Nun, tatsächlich kann eine Schaltfläche anstelle von reinem Text zu überraschenden Ergebnissen führen . Dies liegt hauptsächlich daran, wie die menschliche Aufmerksamkeit funktioniert und wie bemerkenswert Ihre Schaltflächen sind.

Wie Menschen normalerweise das Header-Navigationsmenü erleben

Das Header-Navigationsmenü ist normalerweise das Zweite, was den Leuten auffällt. Wenn Sie Ihre Website gut gestaltet und das Navigationsmenü richtig hinzugefügt haben, sollte der Titel Ihres Beitrags das erste sein, was dem Betrachter ins Auge fällt. Aber danach sollte ihr Blick natürlich zum Navigationsmenü gehen, um zu sehen, was verfügbar ist. Wenn sie sich entscheiden, auf der aktuellen Seite zu bleiben, sei es so. Aber wenn es auf Ihrer Website noch andere Points of Interest gibt, sollten diese im Header-Navigationsmenü deutlich sichtbar sein.

Ein Mädchen, das zusammen mit ihrem Großvater auf einer Website navigiert.
Sie sollten immer versuchen, Ihre Website intuitiv und einfach zu navigieren zu gestalten.

Schließlich sollte es Ihr Ziel sein, Menschen so lange wie möglich auf Ihrer Website zu halten . Und eine leicht verständliche Speisekarte kann eine große Hilfe sein. Also, wo kommen die Knöpfe in all dem her?

Der Vorteil des Hinzufügens einer Schaltfläche

Die Hauptidee beim Hinzufügen einer Schaltfläche besteht darin, etwas Wichtiges hervorzuheben. Das Header-Menü enthält zwar interessante Links, aber nicht alle sind gleich wichtig. Einige sind einfache Navigationshilfen, die beim Lesen helfen. Und andere sind eher direkte Werbeinhalte, die dazu dienen, Ihre Leser zur Konvertierung zu führen. Nun, wenn es um letztere Inhalte geht, sollten Schaltflächen Ihre erste Wahl sein . Da Sie sie nach Belieben ändern können, fallen sie natürlich auf und ziehen die Aufmerksamkeit auf sich. Wenn Sie also die Reise Ihrer Kunden durch Ihre Website verstehen, können Sie sie ganz einfach mit Schaltflächen zu sozialen Medien oder zu einer erfolgreichen Conversion führen.

Verschiedene Social-Media-Schaltflächen, die zeigen, was Sie beim Hinzufügen einer Schaltfläche im Kopfzeilen-Navigationsmenü beachten müssen.
Es ist nicht ungewöhnlich, dass Menschen Schaltflächen verwenden, um ihre Website mit sozialen Medien zu integrieren.

Tipps zur Anpassung

Das Anpassen Ihrer Schaltflächen, um den richtigen Effekt zu erzielen, kann etwas schwierig sein. Einerseits möchten Sie nicht, dass sie zu sehr hervorstechen, da sie das Aussehen der Webseite ruinieren. Aber Sie möchten auch nicht, dass sie sich zu sehr einfügen, da sie keine Aufmerksamkeit erregen. Was Sie also finden müssen, ist der Mittelweg, was leichter gesagt als getan ist. Unser Rat ist, nach Websites zu suchen, die erfolgreich Schaltflächen in ihrem Header-Navigationsmenü verwenden, und zu sehen, wie sie Farben verwenden. Denken Sie daran, dass Sie die Form, den Umriss, die Schriftart und die Farbe Ihrer Schaltfläche ändern können. Nutzen Sie also diese Vielfalt in der Individualisierung zu Ihrem Vorteil. Idealerweise finden Sie den Stil, der gut zur Gesamtästhetik Ihrer Website passt . Und gleichzeitig Aufmerksamkeit erregen.

So fügen Sie eine Schaltfläche im Header-Navigationsmenü hinzu

Glücklicherweise ist das Hinzufügen einer Schaltfläche im Navigationsmenü der WordPress-Kopfzeile überraschend einfach. Zuerst müssen Sie zum Navigationsmenü gehen und den Link hinzufügen, den Sie in eine Schaltfläche umwandeln möchten. Sie können dies auf der Seite Aussehen -> Menü tun. Wenn Sie das getan haben, klicken Sie oben auf die Schaltfläche Bildschirmoptionen. Auf diese Weise erhalten Sie ein Fly-Down-Menü mit einigen Optionen. Für diesen Fall müssen Sie nur die Option „CSS-Klassen“ aktivieren.

Wenn Sie dies durchgegangen sind, scrollen Sie nach unten und klicken Sie auf das Menüelement, das Sie in eine Schaltfläche umwandeln möchten. Dort erhalten Sie eine neue CSS-Klassenoption in den Artikeleinstellungen. Darin können Sie den Klassennamen eingeben. Theoretisch können Sie Ihre Klasse beliebig benennen. Aber für diesen Artikel geben wir zum leichteren Verständnis den Klassennamen „Menü-Schaltfläche“ . Nachdem Sie Ihren Namen eingegeben haben, denken Sie daran, auf die Schaltfläche „Menü speichern“ zu klicken.

CSS-Code hinzufügen

Nachdem wir unsere benutzerdefinierte CSS-Klasse hinzugefügt haben, können wir mit dem Hinzufügen des CSS-Codes fortfahren. Hier müssen Sie zu Aussehen -> Anpassen gehen und den WordPress-Design-Customizer starten. Auf diese Weise erhalten Sie eine Vorschau Ihrer Website und eine Liste der Designeinstellungen. Was Sie tun müssen, ist, auf die Registerkarte Zusätzliches CSS zu klicken und sie zu erweitern. Hier erhalten Sie ein Feld, in dem Sie Ihren benutzerdefinierten CSS-Code hinzufügen können. Für den Anfang empfehlen wir Ihnen, einfach den folgenden Code einzufügen:

.Menütaste {
Hintergrundfarbe:#eb5e28;
Rand: 1px;
Randradius: 3px;
-webkit-box-shadow:1px 1px 0px 0px #2f2f2f;
-moz-box-shadow:1px 1px 0px 0px #2f2f2f;
Box-Schatten: 1px 1px 0px 0px #2f2f2f;
}
.menu-button a, .menu-button a:hover, .menu-button a:active {
Farbe:#fff !wichtig;
}

Sobald Sie den CSS-Code hinzugefügt haben, wendet der Design-Anpasser ihn auf Ihre Website-Vorschau an. Dadurch können Sie die Änderungen sehen, die Sie vorgenommen haben. Und keine Sorge, die Änderungen sind nicht dauerhaft. Wenn Sie das Bedürfnis haben, experimentieren Sie mit CSS und sehen Sie, was Sie tun können. Um Ihre Änderungen zu speichern, klicken Sie auf die Schaltfläche Veröffentlichen.

Ein Laptop mit CSS-Programmierung darauf.
Versuchen Sie, ein bisschen CSS zu lernen, bevor Sie etwas zum Kopfzeilen-Navigationsmenü hinzufügen. Es wird Ihnen eine Welt des Guten tun.

Und damit sind Sie fertig mit dem Hinzufügen einer Schaltfläche im Header-Navigationsmenü.

Abschließende Gedanken

Alles in allem können Schaltflächen ein großartiges Addon für Ihr Kopfzeilenmenü sein. Aber es ist von größter Bedeutung, dass Sie das richtige Design finden . Tatsächlich ist einer der Hauptgründe, warum Leute es vermeiden, eine Schaltfläche hinzuzufügen, dass sie einfach nicht in das Website-Design passen können. Wenn Sie nicht weiterkommen, empfehlen wir Ihnen dringend, sich an einen professionellen Grafikdesigner zu wenden und seinen Beitrag zu schätzen. Wie Sie sehen können, braucht es wirklich nicht viel, um eine Schaltfläche hinzuzufügen, sobald Sie das Design herausgefunden haben.