So fügen Sie eine Schaltfläche zu Ihrem WordPress-Header hinzu (3 Wege) 

Als ich zum ersten Mal versuchte, eine Schaltfläche in meinen WordPress-Header einzufügen, wollte ich etwas, das auffällt, eine klare Handlungsaufforderung genau dort, wo die Leute es zuerst sehen würden.

Ob Sie zu einer Anmeldeseite, einem kostenlosen Angebot oder einem Buchungsformular verlinken, eine Schaltfläche in Ihrem WordPress-Menü kann Besucher genau dorthin leiten, wo Sie sie haben möchten. In meinen Tests dauert das Hinzufügen einer Schaltfläche zu einem WordPress-Header mit SeedProd unter 5 Minuten und erfordert keine Bearbeitung Ihrer Theme-Dateien.

In diesem Tutorial zeige ich Ihnen Schritt für Schritt, wie Sie auf 3 verschiedene Arten eine Schaltfläche zu Ihrem WordPress-Header hinzufügen.

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

Navigationsmenüs auf WordPress-Websites sind typischerweise Textlinks, die alle ähnlich aussehen. Daher hat jeder Menüpunkt die gleiche Bedeutung, Gewichtung und 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 auffallen oder dringend genug erscheinen, damit Benutzer zuerst darauf klicken.

Wenn Sie diesen wichtigen Link jedoch in eine Schaltfläche in WordPress umwandeln, wird er sofort auffälliger. Eine Schaltfläche in Ihrem WordPress-Header verbessert die Benutzererfahrung und das Engagement Ihrer Besucher mit Ihrer WordPress-Website.

Obwohl es Schaltflächenblöcke für Beiträge und Seiten gibt, bietet WordPress standardmäßig keine Menüschaltflächen an. Glücklicherweise gibt es einige Möglichkeiten, Schaltflächen zu Ihrem Menü hinzuzufügen, und sie sind relativ einfach zu implementieren.

Vor diesem Hintergrund betrachten wir 3 Möglichkeiten, eine Schaltfläche zu Ihrem WordPress-Header-Menü hinzuzufügen.

SeedProd ist die beste Option, wenn Sie visuelle Kontrolle wünschen und Ihr gesamtes Header-Layout anpassen möchten. Die CSS-Klassenmethode funktioniert mit jedem klassischen Theme und dauert etwa 3 Minuten, wenn Sie mit dem Einfügen von CSS vertraut sind. Der WordPress Full Site Editor ist in Block-Themes integriert und erfordert keine zusätzlichen Plugins.

Wie fügt man mit SeedProd eine Schaltfläche zu einem WordPress-Header hinzu?

Mit SeedProd können Sie in etwa 5 Minuten eine stilisierte Call-to-Action-Schaltfläche zu Ihrem WordPress-Header hinzufügen, indem Sie einen Schaltflächenblock in Ihre Header-Vorlage ziehen, ganz ohne Code.

Wir empfehlen diese Methode zuerst, da sie die meisten Anpassungsoptionen bietet und es Ihnen ermöglicht, Ihr WordPress-Header-Menü visuell per Drag & Drop zu erstellen.

SeedProd ist einer der Top-Landingpage- und Website-Builder für WordPress. Damit können Sie flexible, SEO-freundliche WordPress-Themes, Landingpages und komplette Websites erstellen, ohne einen Entwickler einstellen oder Shortcodes zu Ihrer Website hinzufügen zu müssen.

Mit dem Drag-and-Drop-Builder von SeedProd können Sie einen benutzerdefinierten Header, Footer oder eine Sidebar erstellen und Schaltflächen dort platzieren, wo es sinnvoll ist.

Sie können auch Countdown-Timer, Opt-in-Formulare, Galerien und Vorher-Nachher-Slider in dasselbe Header-Layout einfügen.

Befolgen Sie also die folgenden Schritte, um Schaltflächen mit SeedProd zu Ihrem WordPress-Header hinzuzufügen.

Schritt 1. SeedProd installieren und aktivieren

Zuerst müssen Sie eine Kopie des SeedProd-Plugins erwerben und auf Ihren Computer herunterladen. Wir werden SeedProd Pro für dieses Tutorial verwenden, da es die Theme Builder-Funktion enthält.

In Ihrem Konto-Dashboard sehen Sie eine große Download-Schaltfläche, um die Plugin-.zip-Datei zu speichern. Es ist auch ratsam, Ihren Lizenzschlüssel in diesem Stadium zu kopieren, da Sie ihn bald benötigen werden.

Nach dem Herunterladen des Plugins gehen Sie zu Ihrem WordPress-Dashboard und laden Sie die Plugin-Dateien hoch. Sie können jederzeit dieser Anleitung zum Installieren und Aktivieren eines WordPress-Plugins folgen, wenn Sie Hilfe benötigen.

Sobald Sie dies getan haben, gehen Sie zur Seite SeedProd » Einstellungen und fügen Sie Ihren Lizenzschlüssel ein.

Klicken Sie anschließend auf die Schaltfläche Schlüssel überprüfen, um Ihre Pro-Funktionen freizuschalten.

Schritt 2. Wählen Sie eine vorgefertigte Vorlage

Nachdem 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 verfolgen können, und zwar die folgenden:

• WordPress-Theme: Erstellen Sie ein benutzerdefiniertes WordPress-Theme, um Ihr aktuelles Website-Design durch eine benutzerdefinierte Header-Vorlage zu ersetzen. (kein Code erforderlich).
• Landingpage: Erstellen Sie eine einzelne Seite und fügen Sie nur dieser Seite einen benutzerdefinierten Header hinzu, während Sie Ihr vorhandenes Theme beibehalten.

Für diese 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 Landingpage in WordPress zu erstellen, und dann ab Schritt 4 zu diesem Tutorial zurückkehren.

Da wir die Option WordPress-Theme wählen, müssen Sie zu SeedProd » Theme Builder gehen und auf die Schaltfläche Themes klicken.

Dadurch wird eine Bibliothek mit vorgefertigten Website-Kits angezeigt, die Sie mit einem einzigen Klick importieren können.

Sie können die Vorlagen nach WooCommerce, Beliebtheit, Neueste zu Älteste und umgekehrt filtern. Wenn Sie ein Theme gefunden haben, das Ihnen gefällt, klicken Sie auf das Häkchen-Symbol, um es zu starten.

Sobald Ihr Theme importiert 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 einzelne mit dem visuellen Drag-and-Drop-Builder von SeedProd bearbeiten.

Schritt 3. Passen Sie Ihren Header an

Da Sie eine Schaltfläche zu Ihrer Kopfzeile hinzufügen möchten, bearbeiten wir nun die Vorlage Kopfzeile. Scrollen Sie nach unten, bis Sie sie in der Liste finden, und klicken Sie dann auf den Link Design bearbeiten.

Wenn Sie die Kopfzeilenvorlage öffnen, sehen Sie ein Layout mit 2 Spalten, wie dieses:

Wie Sie sehen können, gibt es auf der linken Seite verschiedene WordPress-Blöcke und rechts eine Vorschau Ihres Designs. Sie können überall auf Ihr Design klicken, um den Inhalt zu ändern, und Blöcke vom linken Bereich ziehen, um Ihrer Seite weitere Funktionen hinzuzufügen.

Wenn Sie sich das aktuelle Kopfzeilenlayout ansehen, sehen Sie eine Spalte mit einem Bildblock und eine Spalte mit dem WordPress-Menüblock.

Um eine Schaltfläche zur Kopfzeile hinzuzufügen, müssen Sie eine dritte Spalte hinzufügen, und wir zeigen Ihnen jetzt, wie das geht.

Fahren Sie zuerst mit der Maus über Ihren Kopfzeilenbereich, bis er einen lila Umriss hat, und klicken Sie dann auf das Symbol Abschnitt duplizieren.

Dadurch wird eine Kopie Ihrer Kopfzeile unter der ersten hinzugefügt.

Fahren Sie als Nächstes mit der Maus über die Spalte in Ihrem ersten Abschnitt, bis sie einen blauen Umriss hat, und klicken Sie dann auf das Papierkorb-Symbol, um sie zu löschen.

Sie haben nun einen leeren Abschnitt mit der Option, ein neues Spaltenlayout zu wählen. Klicken Sie auf das 3-Spalten-Layout.

Jetzt können Sie mit der Maus über das Symbol Verschieben in Ihrem duplizierten Abschnitt fahren und die Bild- und Navigationsmenüelementblöcke in Ihren neuen Abschnitt verschieben.

Dadurch bleibt eine leere Spalte übrig, in die Sie einen Schaltflächenblock einfügen können.

Bevor Sie zum nächsten Schritt übergehen, stellen Sie sicher, dass Sie den alten Kopfzeilenabschnitt löschen, indem Sie auf das Papierkorb-Symbol klicken.

Jetzt sind Sie bereit, eine Schaltfläche für Ihr WordPress-Kopfzeilenmenü zu erstellen.

Schritt 4. Fügen Sie eine Schaltfläche zu Ihrem Header hinzu

Das Hinzufügen einer Schaltfläche zu Ihrer Kopfzeile mit SeedProd ist einfach. Suchen Sie den Block Schaltfläche in der linken Seitenleiste und ziehen Sie ihn in die leere Spalte in Ihrem Kopfzeilenbereich.

Sobald die Schaltfläche platziert ist, können Sie darauf klicken, um den Schaltflächentext, den Untertext der Schaltfläche, den Link, die Ausrichtung auf Mobilgeräten und Desktops sowie die Schaltflächengröße anzupassen.

Sie können sogar benutzerdefinierte Symbole vor und nach dem Schaltflächentext hinzufügen, indem Sie aus der Bibliothek der Font Awesome-Symbole auswählen.

Für noch mehr Anpassungsoptionen klicken Sie auf die Registerkarte Erweitert. Hier können Sie die Textfarbe und Typografie bearbeiten, die Hintergrundfarbe ändern, einen Schatten hinzufügen, den Radius des Rahmens, Abstände, benutzerdefinierte CSS-Klassen festlegen und die Schaltfläche sogar auf bestimmten Geräten ausblenden.

Außerdem ist die Option Animation eine fantastische Möglichkeit, Ihre Schaltfläche stärker hervorzuheben.

Auf der Registerkarte Erweitert steuert der Schalter Ausblenden auf Mobilgeräten, ob die Schaltfläche in Ihrer mobilen Navigation angezeigt wird. Standardmäßig wird sie auf allen Geräten angezeigt.

Wenn Sie mit dem Aussehen Ihrer Menüschaltfläche zufrieden sind, klicken Sie auf die Schaltfläche Speichern.

Jetzt können Sie mit der Anpassung des Rests Ihres WordPress-Designs 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, ist der letzte Schritt, diese Änderungen live zu schalten. Gehen Sie dazu zuerst zurück zur Seite SeedProd » Theme Builder.

Finden Sie als Nächstes den Schalter SeedProd Theme aktivieren in der oberen rechten Ecke und stellen Sie ihn auf Ja.

Sie können jetzt eine Vorschau Ihres WordPress-Themes anzeigen und Ihren Header-Button in Aktion sehen.

So fügen Sie mit einer CSS-Klasse eine WordPress-Header-Schaltfläche hinzu

Die CSS-Klassenmethode funktioniert mit jedem klassischen WordPress-Theme und erfordert kein Plugin. Ich habe diesen Ansatz verwendet, wenn kein vollständiger visueller Builder benötigt wurde.

Gehen Sie zuerst zu Darstellung » Menüs in Ihrem WordPress-Dashboard. Wählen Sie das Menü, das Sie bearbeiten möchten, aus dem Dropdown-Menü am oberen Bildschirmrand aus.

Klicken Sie als Nächstes auf den Tab Bildschirmoptionen in der oberen rechten Ecke des Bildschirms. Aktivieren Sie das Kontrollkästchen neben CSS-Klassen. Dies fügt jedem Menüpunkt ein neues Feld hinzu.

Erweitern Sie nun den Menüpunkt, den Sie als Button gestalten möchten. Geben Sie einen Klassennamen in das Feld CSS-Klassen ein. Ich verwende header-button, aber jeder Name funktioniert, solange er keine Leerzeichen enthält. Klicken Sie auf Menü speichern, wenn Sie fertig sind.

Jetzt müssen Sie CSS hinzufügen, das diese Klasse in einen Button verwandelt. Der einfachste Weg ist über WPCode, womit Sie Code-Schnipsel hinzufügen können, ohne Ihre Theme-Dateien direkt zu bearbeiten. Gehen Sie zu Code-Schnipsel » Schnipsel hinzufügen, wählen Sie CSS als Schnipseltyp und fügen Sie Folgendes ein:

li.header-button > a {
    display: inline-block !important;
    background-color: #0073aa !important;
    color: #ffffff !important;
    padding: 12px 28px !important;
    border-radius: 4px !important;
    text-decoration: none !important;
    line-height: normal !important;
}
li.header-button > a:hover {
    background-color: #005177 !important;
    color: #ffffff !important;
}

Speichern und aktivieren Sie den Schnipsel. Ihr Menüpunkt wird nun als gestalteter Button in Ihrem WordPress-Header angezeigt.

Ändern Sie background-color, um sie an Ihre Markenfarben anzupassen. Passen Sie die padding-Werte an, um die Button-Größe zu steuern. Wenn Sie WPCode lieber nicht installieren möchten, funktioniert dasselbe CSS unter Darstellung » Anpassen » Zusätzliches CSS.

Beachten Sie, dass dieser Ansatz nur mit klassischen WordPress-Themes funktioniert, die Darstellung » Menüs verwenden. Wenn Ihre Website ein Block-Theme mit dem Full Site Editor verwendet, nutzen Sie die Methode im nächsten Abschnitt.

Wie fügt man eine WordPress-Header-Schaltfläche ohne Plugin hinzu?

Wenn Ihr WordPress-Theme den Full Site Editor verwendet, können Sie einen Header-Button ohne Plugins hinzufügen. Diese Methode funktioniert nur mit Block-Themes.

Gehen Sie zuerst zu Darstellung » Editor in Ihrem WordPress-Dashboard. Dies öffnet den WordPress Full Site Editor, der Blöcke zum Erstellen Ihrer Website verwendet.

Öffnen Sie als Nächstes die Seitenleiste, klicken Sie auf die Überschrift Vorlagenteile und wählen Sie rechts die Option Header aus.

Sobald Sie dies getan haben, sehen Sie ein visuelles Layout Ihres WordPress-Headers. Klicken Sie im Editor auf die Überschrift Navigation.

Sie sehen die Einstellungen für das Navigationslayout in der rechten Seitenleiste, aber klicken Sie zuerst auf das (+) Plus-Symbol, um Ihre Menüpunkte hinzuzufügen.

Sie können auf eine beliebige Seite klicken und danach suchen, um sie zu Ihrem Menü in WordPress hinzuzufügen.

Wenn Ihre Menülinks vorhanden sind, klicken Sie erneut auf das (+) Plus-Symbol, um einen neuen WordPress-Block hinzuzufügen. Suchen Sie diesmal nach dem Button-Block und fügen Sie ihn zu Ihrem Header hinzu.

Geben Sie nun den Button-Text ein und klicken Sie auf das Link-Symbol, um den Link hinzuzufügen, auf den Besucher klicken sollen. In unserem Fall fügen wir einen Link zu unserem kostenlosen Bericht hinzu.

In den Block-Bildschirmoptionen auf der rechten Seite können Sie Ihren Header-Menü-Button anpassen, indem Sie die folgenden Einstellungen ändern:

• Füll- oder Umriss-Button-Stil
• Breitenprozentsatz
• Text- und Hintergrundfarbe
• Typografiegröße
• Abstand
• Radius des Rahmens
• Zusätzliche CSS- und Klassenname
• Und mehr.

Der Button wird in Ihrem Header sowohl auf dem Desktop als auch auf dem Mobilgerät angezeigt. Innerhalb des Navigationsblocks können Sie auch steuern, wie er angezeigt wird, wenn das Menü auf kleineren Bildschirmen zusammenklappt.

Wenn Sie mit der Anpassung Ihres Buttons fertig sind, klicken Sie auf die Schaltfläche Speichern im Menü in der oberen rechten Ecke.

Nun wird jede Seite, die das Header-Vorlagenteil verwendet, Ihren Menü-Button und Ihre Navigationslinks anzeigen.

Wenn Sie ein Theme verwenden, das keine Funktionalität für den Website-Editor enthält, können Sie dieser Anleitung folgen, um einen Button zu Ihrem Menü hinzuzufügen, indem Sie den älteren Menü-Anpasser verwenden.

Ich persönlich habe festgestellt, dass der Drag-and-Drop-Builder von SeedProd der einfachste Weg ist, dies zu erreichen, insbesondere wenn Sie mehr Kontrolle wünschen, ohne Code anfassen zu müssen.

Häufig gestellte Fragen

Wie füge ich einen Button zum Header in WordPress hinzu?

Sie haben drei Möglichkeiten: Verwenden Sie SeedProd, um einen Button-Block visuell in Ihre Header-Vorlage zu ziehen, verwenden Sie den WordPress Full Site Editor, um einen Button-Block in Ihren Navigationsblock einzufügen, wenn Sie ein Block-Theme haben, oder weisen Sie einem Menüpunkt eine CSS-Klasse zu und gestalten Sie ihn mit einer kurzen CSS-Regel als Button. SeedProd ist die schnellste Option, wenn Sie Styling-Kontrolle wünschen, ohne Code schreiben zu müssen.

Wie lasse ich meinen Header-Button auf dem Handy anzeigen?

Öffnen Sie in SeedProd die Einstellungen des Button-Blocks und gehen Sie zur Registerkarte "Erweitert". Der Schalter "Auf Mobilgeräten ausblenden" ist standardmäßig deaktiviert, was bedeutet, dass Ihr Button auf allen Geräten angezeigt wird. Im WordPress Full Site Editor erbt der Button das reaktionsschnelle Verhalten des Navigationsblocks, sodass er auf dem Handy mit Ihrem Menü zusammenklappt, es sei denn, Sie konfigurieren ihn separat.

Kann ich mehrere Buttons zu meinem WordPress-Header hinzufügen?

Ja. Mit SeedProd können Sie mehrere Button-Blöcke in Ihre Header-Vorlage ziehen und jeden einzeln gestalten. Im Full Site Editor können Sie mehr als einen Button-Block innerhalb des Navigationsblocks hinzufügen. Für die CSS-Klassenmethode weisen Sie verschiedenen Menüpunkten unterschiedliche Klassennamen zu und gestalten jede Klasse separat.

Funktioniert das Hinzufügen eines Header-Buttons mit jedem WordPress-Theme?

Das hängt von der Methode ab. SeedProd ersetzt den Header Ihres Themes vollständig, sodass es unabhängig von Ihrem aktuellen Theme funktioniert. Die CSS-Klassenmethode funktioniert mit klassischen Themes, die Aussehen » Menüs verwenden. Die Full Site Editor-Methode erfordert ein Block-Theme. Wenn Sie sich nicht sicher sind, welche Art von Theme Sie haben, gehen Sie zu Aussehen in Ihrem WordPress-Dashboard. Wenn Sie eine Editor-Option sehen, haben Sie ein Block-Theme.

Ich hoffe, Sie fanden dieses Tutorial zum Hinzufügen eines Buttons in WordPress-Header-Menüs hilfreich. Möglicherweise interessieren Sie sich auch für die folgenden Tutorials zur Anpassung Ihrer WordPress-Website:

• So fügen Sie Geschäftszeiten zu WordPress hinzu
• So erstellen Sie ganz einfach eine Bild-Lightbox in WordPress
• Hintergrundbild in WordPress ohne CSS abdunkeln

Danke fürs Lesen! Wir würden uns freuen, Ihre Gedanken zu hören. Treten Sie also gerne der Unterhaltung auf YouTube, X und Facebook bei, um weitere hilfreiche Ratschläge und Inhalte für das Wachstum Ihres Unternehmens zu erhalten.