loader image

Radiboxes Server machen WordPress Websites bis zu 4x schneller - ohne zusätzliche Optimierung. Raidboxes migriert deine Website und du kannst selbst vergleichen. Wenn du zufrieden bist, wähle einfach das passende Paket in deren Preistabelle.

4.97

Sehr gut

trustedshops.de

Autor

duckducknews

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.

Adding buttons in WordPress navigation menu

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.

Header navigation menu with plain links

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.

Navigation menu with a button

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.

Add a link to WordPress menu

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.

Show CSS classes in Screen Options

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

Add custom CSS class to a link

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.

Additional CSS option in WordPress theme customizer

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.

Menu button preview

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.

Die beliebtesten Beiträge

Wie man den ungültigen JSON-Fehler in WordPress behebt (Anleitung für Anfänger)

Versuchen Sie, den ungültigen JSON-Fehler in WordPress zu beheben? Dieser Fehler tritt auf, wenn Sie WordPress-Beiträge oder -Seiten auf Ihrer Website bearbeiten. Sie erhalten die Meldung "Die Antwort ist keine gültige JSON-Antwort" und die Aktualisierung der Seite schlägt fehl. In diesem Artikel zeigen wir Ihnen, wie Sie den ungültigen JSON-Fehler ...

So beheben Sie den Fehler „Verbindung ist nicht privat“ (Anleitung für Website-Besitzer)

Sehen Sie die Fehlermeldung "Ihre Verbindung ist nicht privat" auf Ihrer WordPress-Website? Dies ist die Fehlermeldung, die Sie in Google Chrome sehen. Der gleiche Fehler wird auf allen modernen Browsern mit leicht unterschiedlichen Meldungen angezeigt und kann für Anfänger bei der Fehlerbehebung etwas verwirrend sein. In dieser Anleitung für Website-Besitzer ...

Wie man eine Seite in voller Breite in WordPress erstellt (Anleitung für Anfänger)

Möchten Sie eine Seite in voller Breite in WordPress erstellen, so dass Sie Ihren Inhalt über den Bildschirm strecken können? Die meisten WordPress-Themes verfügen bereits über eine integrierte Vorlage für eine Seite in voller Breite, die Sie verwenden können. Wenn Ihr Theme jedoch keine hat, dann ist es einfach, sie ...
DSGVO Cookie-Einwilligung mit Real Cookie Banner