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

Möchten Sie eine Schaltfläche in Ihrem WordPress-Kopfzeilenmenü hinzufügen?

Durch das Hinzufügen einer Schaltfläche zum Kopfzeilen-Navigationsmenü können Sie einen auffälligeren Aufruf zum Handeln erstellen. Sie können mehr Klicks auf Ihre wichtigsten Seiten erhalten und ein besseres Benutzererlebnis schaffen, indem Sie Ihren Besuchern helfen, aktiv zu werden.

In diesem Artikel zeigen wir Ihnen, wie Sie ganz einfach eine Schaltfläche zu Ihrem WordPress-Header-Menü hinzufügen können.

Warum eine Schaltfläche im WordPress-Header-Menü hinzufügen?

WordPress-Navigationsmenüs sind normalerweise einfache Textlinks, die gleich aussehen. In puncto Design haben alle Links die gleiche Bedeutung und das gleiche Gewicht.

Was ist, wenn Sie einen Link zu einem Online-Bestellformular, einen Link zur Anmelde- oder Registrierungsseite oder einen Link „Jetzt kaufen“ hinzufügen möchten? Diese wichtigen Handlungsaufforderungen sehen aus wie die restlichen Links im Kopfzeilenmenü.

Wenn Sie wichtige Links in Ihrem WordPress-Navigationsmenü in Schaltflächen umwandeln, werden sie besser sichtbar. Dies hilft Benutzern, sie leicht zu finden, und verbessert ihr Engagement und ihre Erfahrung auf Ihrer Website.

Standardmäßig verfügt WordPress über Optionen zum Hinzufügen von Schaltflächen zu WordPress-Beiträgen und -Seiten mithilfe des Schaltflächenblocks. Es verfügt jedoch nicht über eine integrierte Option zum Hinzufügen von Schaltflächen in Navigationsmenüs.

Glücklicherweise gibt es einen einfachen Trick, um jeden Link im WordPress-Navigationsmenü in eine Schaltfläche zu verwandeln.

Lassen Sie uns einen Blick darauf werfen, wie Sie dem WordPress-Header-Menü eine Schaltfläche hinzufügen, ohne ein Plugin zu installieren.

Video-Komplettlösung

Abonnieren Sie WPBeginner

Wenn Sie schriftliche Anweisungen bevorzugen, lesen Sie weiter.

Fügen Sie eine Schaltfläche im WordPress-Kopfzeilenmenü hinzu

Zuerst müssen Sie den Link, den Sie in eine Schaltfläche umwandeln möchten, in Ihrem WordPress-Navigationsmenü hinzufügen.

Gehen Sie einfach zu Aussehen »Menüs Seite in Ihrem WordPress-Dashboard und fügen Sie den Link zu Ihrem Navigationsmenü hinzu.

Danach müssen Sie oben auf die Schaltfläche Bildschirmoptionen klicken. Dadurch wird ein Dropdown-Menü mit einer Reihe von Optionen angezeigt. Sie müssen das Kontrollkästchen neben der Option „CSS-Klassen“ aktivieren.

Scrollen Sie nun nach unten zu Ihrem Menü und klicken Sie, um den Menüpunkt zu erweitern, den Sie in eine Schaltfläche umwandeln möchten.

Sie werden eine neue CSS-Klassenoption in den Menüpunkteinstellungen bemerken. Hier müssen Sie einen Klassennamen eingeben. Sie können dieser CSS-Klasse einen beliebigen eindeutigen Namen geben, aber für dieses Tutorial nennen wir sie eine Menüschaltfläche.

Nachdem Sie einen Namen eingegeben haben, klicken Sie auf die Schaltfläche „Menü speichern“, um Ihre Änderungen zu speichern.

Nachdem wir dem Menüelement nun unsere eigene benutzerdefinierte CSS-Klasse hinzugefügt haben, können wir es gestalten, indem wir unseren eigenen benutzerdefinierten CSS-Code hinzufügen.

geh einfach zu Aussehen » Anpassen um den WordPress-Theme-Customizer zu starten.

Sie sehen nun rechts eine Live-Vorschau Ihrer Website und in der linken Spalte eine Reihe von Themeneinstellungen.

Jetzt müssen Sie auf die zusätzliche CSS-Registerkarte klicken, um sie zu erweitern. Dies zeigt Ihnen ein Feld, in dem Sie Ihren benutzerdefinierten CSS-Code hinzufügen können.

Hier können Sie den folgenden CSS-Code als Ausgangspunkt kopieren und einfügen.

.menu-button { 
background-color:#eb5e28;
border:1px;
border-radius:3px;
-webkit-box-shadow:1px 1px 0px 0px #2f2f2f;
-moz-box-shadow:1px 1px 0px 0px #2f2f2f;
box-shadow:1px 1px 0px 0px #2f2f2f;
}
.menu-button a,  .menu-button a:hover, .menu-button a:active { 
color:#fff !important;
}

Sobald Sie den CSS-Code hinzufügen, wendet der Design-Anpasser ihn automatisch auf Ihre Website-Vorschau an und Sie können sehen, wie die Änderungen wirksam werden.

Keine Sorge, die Änderungen sind auf Ihrer Website erst verfügbar, wenn Sie auf die Schaltfläche „Veröffentlichen“ klicken.

Fühlen Sie sich frei, so viel mit dem CSS zu spielen, wie Sie möchten. Sie können die Hintergrundfarbe ändern, die Textfarbe verknüpfen, Rahmen hinzufügen und vieles mehr.

Vergessen Sie nicht, auf die Schaltfläche „Veröffentlichen“ zu klicken, um Ihre Änderungen zu speichern.

War es nicht so einfach?

Sie können diesen Trick verwenden, um nicht nur Schaltflächen zu Ihrem Kopfzeilenmenü hinzuzufügen, sondern Sie können ihn auch verwenden, um jeden Link in Ihrem WordPress-Navigationsmenü hervorzuheben.

Wir hoffen, dass dieser Artikel Ihnen geholfen hat, zu lernen, wie Sie Ihrem WordPress-Header-Menü eine Schaltfläche hinzufügen. Möchten Sie sehen, wie Benutzer mit Ihren Schaltflächen interagieren? Sehen Sie sich unseren Leitfaden an, wie Sie die Conversion-Rate in WordPress verfolgen können. Schauen Sie sich unten unsere Liste der besten Live-Chat-Software für kleine Unternehmen an.

Wenn Ihnen dieser Artikel gefallen hat, abonnieren Sie bitte unseren YouTube-Kanal für WordPress-Video-Tutorials. Sie finden uns auch unter Twitter Y Facebook.