So fügen Sie eine Schaltfläche in Ihr WordPress-Header-Menü ein

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

Durch das Hinzufügen einer Schaltfläche in das Kopfzeilen-Navigationsmenü können Sie eine auffälligere Aufforderung zum Handeln erstellen. Sie kann mehr Klicks auf Ihre wichtigsten Seiten bringen und ein besseres Nutzererlebnis schaffen, indem sie Ihren Besuchern hilft, 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 in das WordPress-Header-Menü einfügen?

WordPress-Navigationsmenüs bestehen normalerweise aus einfachen Textlinks, die alle gleich aussehen. In Bezug auf das Design wird allen Links die gleiche Bedeutung und das gleiche Gewicht beigemessen.

Was wäre, wenn Sie einen Link zu einem Online-Bestellformular, einen Link zur Anmeldung oder zur Registrierung oder einen Link zum Sofortkauf hinzufügen wollten? Diese wichtigen Handlungsaufforderungen werden genauso aussehen wie die übrigen Links im Kopfmenü.

Wenn Sie wichtige Links in Ihrem WordPress-Navigationsmenü in Schaltflächen umwandeln, werden sie besser sichtbar. So können die Nutzer sie leichter finden, was ihr Engagement und ihre Erfahrung auf Ihrer Website verbessert.

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

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

Schauen wir uns also an, wie Sie eine Schaltfläche in Ihr WordPress-Header-Menü einfügen können, ohne ein Plugin zu installieren.

Hinzufügen einer Schaltfläche in Ihr WordPress-Header-Menü

Zunächst müssen Sie den Link, den Sie in eine Schaltfläche umwandeln möchten, in Ihr WordPress-Navigationsmenü einfügen.

Gehen Sie einfach auf die Seite Darstellung “ Menüs 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. Daraufhin wird ein Dropdown-Menü mit einer Reihe von Optionen angezeigt. Sie müssen das Kästchen neben der Option „CSS-Klassen“ aktivieren.

Scrollen Sie nun nach unten zu Ihrem Menü und klicken Sie auf das Menüelement, das Sie in eine Schaltfläche umwandeln möchten.

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

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

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

Gehen Sie einfach auf Erscheinungsbild “ Anpassen, um den WordPress-Theme-Anpassungsdienst zu starten.

Sie sehen nun eine Live-Vorschau Ihrer Website auf der rechten Seite und eine Reihe von Theme-Einstellungen in der linken Spalte.

Klicken Sie nun auf die Registerkarte „Zusätzliches CSS“, um sie zu erweitern. Dadurch wird ein Feld angezeigt, in das Sie Ihren eigenen CSS-Code einfü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 hinzugefügt haben, wendet der Theme-Customizer ihn automatisch auf Ihre Website-Vorschau an, und Sie können sehen, wie die Änderungen wirksam werden.

Keine Sorge, die Änderungen werden erst dann auf Ihrer Website aktiv, wenn Sie auf die Schaltfläche Veröffentlichen klicken.

Sie können mit dem CSS so viel herumspielen, wie Sie möchten. Sie können die Hintergrundfarbe und die Farbe des Linktextes ändern, einen Rahmen hinzufügen und vieles mehr.

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

War das nicht einfach?

Mit diesem Trick können Sie nicht nur Schaltflächen zu Ihrem Header-Menü hinzufügen, sondern auch jeden Link in Ihrem WordPress-Navigationsmenü hervorheben.

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

Wenn Ihnen dieser Artikel gefallen hat, dann abonnieren Sie bitte unseren YouTube-Kanal für WordPress-Videotutorials. Sie können uns auch auf Twitter und Facebook finden.