Do you want to learn how to add a button to your WordPress header menus?
Adding a button in your WordPress header navigation menu lets you make a more eye-catching call to action. This approach not only draws attention but also enhances the navigation menu, helping visitors understand where to click next. It’s a simple way to test new features that could improve user engagement on your site.
In diesem Artikel erklären wir Ihnen Schritt für Schritt, wie Sie eine Schaltfläche in WordPress-Header-Menüs hinzufügen können.
Warum eine Schaltfläche zu Ihrem WordPress Header-Menü hinzufügen?
Navigationsmenüs auf WordPress-Websites sind in der Regel Textlinks, die alle ähnlich aussehen. Daher hat jeder Menüpunkt die gleiche Bedeutung, das gleiche Gewicht und die gleiche Dringlichkeit.
Wenn Sie eine URL zu einem wichtigen Bestellformular oder einer Registrierungsseite hinzufügen würden, würde sie genauso aussehen wie die anderen Links in Ihrem Menü. Sie würde nicht hervorstechen oder dringend genug aussehen, damit die Benutzer zuerst darauf klicken.
However, turning that important link into a button in WordPress will instantly make it more noticeable. Besides being able to find it more easily, a button in your WordPress header will improve visitors’ user experience and engagement with your WordPress website.
Obwohl WordPress über Schaltflächenblöcke für Beiträge und Seiten verfügt, bietet es derzeit standardmäßig keine Menüschaltflächen. Glücklicherweise gibt es einige Möglichkeiten, Schaltflächen zu Ihrem Menü hinzuzufügen, und sie sind relativ einfach zu implementieren.
In diesem Sinne sehen wir uns 2 Möglichkeiten an, eine Schaltfläche in WordPress-Header-Menüs hinzuzufügen, ohne HTML- oder CSS-Code zu schreiben.
Hinzufügen einer Schaltfläche in WordPress Header-Menü mit SeedProd
First, we’ll show you how to add a button to your header menu using a powerful WordPress plugin called SeedProd. We recommend this method first because it offers the most customization options and lets you build your WordPrress header menu visually with drag-and-drop.
SeedProd ist einer der besten Landing Page- und Website-Builder für WordPress. Damit können Sie flexible, SEO-freundliche WordPress-Themes, Landingpages und komplette Websites erstellen, ohne einen Entwickler einzustellen oder Shortcodes zu Ihrer Website hinzuzufügen.
Mit dem Drag-and-Drop-Seitenersteller können Sie auch eine benutzerdefinierte Kopfzeile, Fußzeile oder Seitenleiste für Ihre Website erstellen und mit dem Button-Block ganz einfach Kopfzeilenschaltflächen hinzufügen. Darüber hinaus gibt es unzählige andere WordPress-Blöcke, die Sie verwenden können, darunter WordPress-Widgets, Countdown-Timer, Optin-Formulare, Galerien, Vorher-Nachher-Slider und viele mehr.
Befolgen Sie also die folgenden Schritte, um mit SeedProd Schaltflächen zu Ihrem WordPress-Header hinzuzufügen.
Schritt 1. Installieren und Aktivieren von SeedProd
Zunächst einmal müssen Sie sich eine Kopie des SeedProd-Plugins besorgen und es auf Ihren Computer herunterladen. Für dieses Tutorial werden wir SeedProd Pro verwenden, weil es die Funktion Theme Builder enthält.
In Ihrem Konto-Dashboard finden Sie eine große Schaltfläche zum Herunterladen der Plugin-.zip-Datei. Es ist auch eine gute Idee, Ihren Lizenzschlüssel zu diesem Zeitpunkt zu kopieren, da Sie ihn in Kürze benötigen werden.
Nachdem Sie das Plugin heruntergeladen haben, gehen Sie zu Ihrem WordPress-Dashboard und laden Sie die Plugin-Dateien hoch. Sie können jederzeit diese Anleitung zur Installation und Aktivierung eines WordPress-Plugins befolgen, wenn Sie Hilfe benötigen.
Wenn Sie das getan haben, gehen Sie zur Seite SeedProd " Einstellungen und fügen Sie Ihren Lizenzschlüssel ein.
Klicken Sie dort auf die Schaltfläche Schlüssel überprüfen, um Ihre Pro-Funktionen freizuschalten.
Schritt 2. Wählen Sie eine vorgefertigte Vorlage
Wenn Ihr Lizenzschlüssel aktiv ist, können Sie nun entscheiden, welches Layout Sie mit SeedProd erstellen möchten. Es gibt 2 verschiedene Ansätze, die Sie wählen können, die wie folgt sind:
- WordPress-Theme: Erstellen Sie ein benutzerdefiniertes WordPress-Theme, um Ihr aktuelles Website-Design durch eine benutzerdefinierte Header-Vorlage zu ersetzen.(kein Code erforderlich).
- Landing Page: Erstellen Sie eine einzelne Seite und fügen Sie nur dieser Seite eine benutzerdefinierte Kopfzeile hinzu, während Sie Ihr bestehendes Design beibehalten.
In dieser Anleitung führen wir Sie durch Option 1, da sie das Navigationsmenü auf Ihrer gesamten Website ersetzt. Wenn Sie jedoch Option 2 bevorzugen, können Sie dieser Anleitung folgen, um eine Landing Page in WordPress zu erstellen, und dann ab Schritt 4 zu diesem Tutorial zurückkehren.
Da wir uns für die WordPress-Theme-Option entschieden haben, müssen Sie zu SeedProd " Theme Builder gehen und auf die Schaltfläche Themes klicken.
Daraufhin wird eine Bibliothek mit vorgefertigten Website-Bausätzen angezeigt, die Sie mit einem einzigen Klick importieren können.
Sie können die Vorlagen nach WooCommerce, Beliebtheit, neueste bis älteste und umgekehrt filtern. Wenn Sie ein Thema gefunden haben, das Ihnen gefällt, klicken Sie auf das Häkchensymbol, um es zu starten.
Sobald der Import Ihres Themas abgeschlossen ist, sehen Sie automatisch eine Seite wie diese:
Sie enthält eine Liste der Vorlagen, aus denen Ihr WordPress-Theme besteht, und Sie können jede Vorlage mit dem visuellen Drag-and-Drop-Builder von SeedProd bearbeiten.
Schritt 3. Anpassen der Kopfzeile
Since you want to add a button to your header, let’s go ahead and edit the Header template. Scroll down until you find it in the list, then click the Edit Design link.
Wenn Sie die Kopfzeilenvorlage öffnen, sehen Sie ein zweispaltiges Layout wie dieses:
Wie Sie sehen können, befinden sich auf der linken Seite verschiedene WordPress-Blöcke und auf der rechten Seite eine Vorschau Ihres Designs. Sie können auf eine beliebige Stelle Ihres Entwurfs klicken, um den Inhalt zu ändern, und Blöcke aus dem linken Bedienfeld ziehen, um weitere Funktionen zu Ihrer Seite hinzuzufügen.
When you look at the current header layout, you’ll see a column with an Image block and a column with the WordPress Menu block.
Um eine Schaltfläche in die Kopfzeile einzufügen, müssen Sie eine dritte Spalte hinzufügen, was wir Ihnen jetzt zeigen werden.
Bewegen Sie zunächst den Mauszeiger über Ihren Kopfzeilenabschnitt, bis er einen violetten Umriss hat, und klicken Sie dann auf das Symbol " Abschnitt duplizieren".
Dadurch wird eine Kopie Ihrer Kopfzeile unter der ersten hinzugefügt.
Bewegen Sie dann den Mauszeiger über die Spalte in Ihrem ersten Abschnitt, bis sie blau umrandet ist, und klicken Sie auf das Mülleimer-Symbol, um sie zu löschen.
Sie haben nun einen leeren Abschnitt mit der Möglichkeit, ein neues Spaltenlayout zu wählen. Klicken Sie also auf das 3-spaltige Layout.
Now you can hover over the Move icon on your duplicated section and move the image and nav menu items blocks into your new section.
Dadurch bleibt eine leere Spalte übrig, in die Sie einen Schaltflächenblock einfügen können.
Bevor Sie zum nächsten Schritt übergehen, sollten Sie den alten Kopfbereich löschen, indem Sie auf das Mülleimer-Symbol klicken.
Jetzt können Sie eine Schaltfläche für Ihr WordPress-Header-Menü erstellen.
Schritt 4. Hinzufügen einer Schaltfläche zur Kopfzeile
Das Hinzufügen einer Schaltfläche zu Ihrer Kopfzeile mit SeedProd ist einfach. Suchen Sie einfach den Block Schaltfläche in der linken Seitenleiste und ziehen Sie ihn in die leere Spalte in Ihrem Kopfbereich.
Sobald die Schaltfläche platziert ist, können Sie darauf klicken, um den Text des Schaltflächenlinks, den Untertext der Schaltfläche, den Link, die Ausrichtung auf dem Handy und dem Desktop sowie die Größe der Schaltfläche anzupassen.
Sie können sogar benutzerdefinierte Symbole vor und nach dem Schaltflächentext hinzufügen, indem Sie aus der Bibliothek von Font Awesome-Symbolen wählen.
For even more customization options, click the Advanced settings tab. This is where you can edit the text color and typography, change the background color, add a box shadow, border radius, spacing, custom CSS classes, and even hide the button on specific devices.
Außerdem ist die Option " Animation " eine fantastische Möglichkeit, um Ihre Schaltfläche besser zur Geltung zu bringen.
Wenn Sie mit dem Aussehen Ihrer Menüschaltfläche zufrieden sind, klicken Sie auf die Schaltfläche Speichern.
Nun können Sie mit der Anpassung des restlichen WordPress-Themes fortfahren. Sie können zum Beispiel Ihre Blog-Seite, einzelne Seitenvorlagen und die Seitenleiste bearbeiten oder Ihre WordPress-Fußzeile ändern.
Schritt 5. Veröffentlichen Sie Ihre Änderungen
Nachdem Sie den Rest Ihrer Website angepasst haben, besteht der letzte Schritt darin, diese Änderungen zu aktivieren. Gehen Sie dazu zunächst zurück zur Seite SeedProd " Theme Builder.
Suchen Sie als Nächstes den Schalter " SeedProd-Theme aktivieren " in der oberen rechten Ecke und stellen Sie ihn auf "Ja".
Tolles Zeug! Sie können jetzt eine Vorschau Ihres WordPress-Themas anzeigen und Ihre Header-Schaltfläche in Aktion sehen.
Hinzufügen einer Schaltfläche zu Ihrem WordPress-Header-Menü ohne ein Plugin
Manche Leute brauchen nicht die volle Flexibilität und die Anpassungsmöglichkeiten eines Page Builders, und andere ziehen es vor, das Hinzufügen weiterer WordPress-Plugins zu ihrer Website zu begrenzen. Wenn Sie in eine der beiden Kategorien fallen, ist die folgende Methode für Sie geeignet.
We’ll show you how to use the default WordPress full site editor to add a button to your header menu next without a plugin.
Gehen Sie zunächst in Ihrem WordPress-Dashboard auf Darstellung " Editor . Dadurch wird der WordPress-Editor geöffnet, der Blöcke zum Aufbau Ihrer Website verwendet.
Öffnen Sie dann die Seitenleiste, klicken Sie auf die Überschrift Vorlagenteile und wählen Sie die Option Kopfzeile auf der rechten Seite.
Sobald Sie das getan haben, sehen Sie ein visuelles Layout Ihres WordPress-Headers. Klicken Sie im Editor auf die Überschrift Navigation.
You’ll see the navigation layout settings in the right sidebar, but first, click the (+) plus icon to start adding your menu items.
You can click and search for any page to add it to your menu in WordPress.
Wenn Sie Ihre Menülinks platziert haben, klicken Sie erneut auf das Pluszeichen (+), um einen neuen WordPress-Block hinzuzufügen. Suchen Sie diesmal nach dem Button-Block und fügen Sie ihn zu Ihrer Kopfzeile hinzu.
Geben Sie nun den Text der Schaltfläche ein und klicken Sie auf das Link-Symbol, um den Link hinzuzufügen, auf den die Besucher klicken sollen. In unserem Fall werden wir einen Link zu unserem kostenlosen Bericht hinzufügen.
In the block screen options on the right, you can customize your header menu button by changing the following settings:
- Füllung oder Umriss der Schaltfläche
- Breite in Prozent
- Text- und Hintergrundfarbe
- Größe der Typografie
- Polsterung
- Radius der Umrandung
- Zusätzliche CSS und Klassenname
- Und mehr.
Wenn Sie mit dem Anpassen Ihrer Schaltfläche fertig sind, klicken Sie auf die Schaltfläche Menü speichern in der oberen rechten Ecke.
Jetzt werden auf jeder Seite, die die Kopfzeilenvorlage verwendet, die Menüschaltfläche und die Navigationslinks angezeigt.
Wenn Sie ein Theme verwenden, das keine Funktionen für den Site-Editor enthält, können Sie diese Anleitung befolgen, um mit dem älteren Menü-Customizer eine Schaltfläche zu Ihrem Menü hinzu zufügen.
Die beste und einfachste Lösung ist jedoch die Verwendung des Drag-and-Drop-Seitenerstellungsprogramms von SeedProd.
Das war's!
Wir hoffen, dass Sie diese Anleitung zum Hinzufügen einer Schaltfläche in WordPress-Header-Menüs hilfreich fanden. Vielleicht gefallen Ihnen auch die folgenden Tutorials zur Anpassung Ihrer WordPress-Website:
- Hinzufügen von Geschäftszeiten zu WordPress
- So erstellen Sie ganz einfach eine Bild-Lightbox in WordPress
- Wie man ein Hintergrundbild in WordPress ohne CSS dimmt
Vielen Dank fürs Lesen! Wir würden uns freuen, Ihre Meinung zu hören. Bitte hinterlassen Sie einen Kommentar mit Ihren Fragen und Ihrem Feedback.
Sie können uns auch auf YouTube, X (früher Twitter) und Facebook folgen, um weitere hilfreiche Inhalte für Ihr Unternehmen zu erhalten.
