Technologische Neuigkeiten, Bewertungen und Tipps!

So fügen Sie auf zwei Arten ganz einfach eine Schaltfläche zu Ihrem WordPress-Header hinzu

Hinweis: Der folgende Artikel hilft Ihnen weiter: So fügen Sie auf zwei Arten ganz einfach eine Schaltfläche zu Ihrem WordPress-Header hinzu

Möchten Sie erfahren, wie Sie eine Schaltfläche in WordPress-Kopfzeilenmenüs hinzufügen?

Durch das Hinzufügen einer Schaltfläche in Ihrem Header-Navigationsmenü können Sie einen auffälligeren Call-to-Action erstellen. Auf diese Weise können Sie mehr Klicks auf wichtige Webseiten generieren und das Benutzererlebnis verbessern, indem Sie den Besuchern zeigen, wo sie als Nächstes klicken müssen.

In diesem Artikel erklären wir Schritt für Schritt, wie Sie eine Schaltfläche in WordPress-Kopfzeilenmenüs hinzufügen.

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

Navigationsmenüs auf WordPress-Websites sind normalerweise Textlinks, die alle ähnlich aussehen. Daher hat jeder Menüpunkt die gleiche Bedeutung, das gleiche Gewicht und die gleiche Dringlichkeit.

Wenn Sie einem wichtigen Bestellformular oder einer Registrierungsseite eine URL hinzufügen würden, würde diese genauso aussehen wie die anderen Links in Ihrem Menü. Es wird nicht hervorstechen oder nicht dringend genug aussehen, als dass Benutzer es zuerst anklicken müssten.

Wenn Sie diesen wichtigen Link jedoch in eine Schaltfläche umwandeln, wird er sofort auffälliger. Eine Schaltfläche erleichtert nicht nur das Auffinden, sondern verbessert auch das Benutzererlebnis und die Interaktion der Besucher mit Ihrer WordPress-Site.

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

Schauen wir uns vor diesem Hintergrund zwei Möglichkeiten an, um eine Schaltfläche in WordPress-Header-Menüs hinzuzufügen, ohne HTML- oder CSS-Code schreiben zu müssen.

Zunächst zeigen wir Ihnen, wie Sie mit einem leistungsstarken WordPress-Plugin namens SeedProd eine Schaltfläche zu Ihrem Header-Menü hinzufügen. Wir empfehlen zunächst diese Methode, da sie die meisten Anpassungsmöglichkeiten bietet und Sie Ihr Kopfzeilenmenü visuell per Drag-and-Drop erstellen können.

SeedProd ist einer der besten Landingpage- und Website-Builder für WordPress. Damit können Sie flexible, SEO-freundliche WordPress-Themes, Landingpages und komplette Websites erstellen, ohne einen Entwickler zu beauftragen 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, Opt-in-Formulare, Galerien, Vorher- und Nachher-Schieberegler und vieles mehr.

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

Schritt 1. Installieren und aktivieren Sie SeedProd

Zunächst müssen Sie sich eine Kopie des SeedProd-Plugins besorgen und es auf Ihren Computer herunterladen. Für dieses Tutorial verwenden wir SeedProd Pro, da es die Theme Builder-Funktion enthält.

In Ihrem Konto-Dashboard sehen Sie eine große Download-Schaltfläche zum Speichern der Plugin-.zip-Datei. Es ist auch eine gute Idee, zu diesem Zeitpunkt Ihren Lizenzschlüssel zu kopieren, da Sie ihn in Kürze benötigen werden.

Gehen Sie nach dem Herunterladen des Plugins zu Ihrem WordPress-Dashboard und laden Sie die Plugin-Dateien hoch. Sie können dieser Anleitung jederzeit weiter folgen Installieren und Aktivieren eines WordPress-Plugins Wenn du Hilfe benötigst.

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

Klicken Sie dort auf Schlüssel überprüfen Klicken Sie auf die Schaltfläche, 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 zwei verschiedene Ansätze, die Sie wählen können:

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

In diesem Leitfaden führen wir Sie durch Option 1, da diese 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 zu diesem Tutorial ab Schritt 4 zurückkehren.

Da wir uns für die WordPress-Theme-Option entscheiden, müssen Sie zu gehen SeedProd » Theme Builder und klicken Sie auf Themen Taste.

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

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

Sobald der Import Ihres Themes abgeschlossen ist, wird automatisch eine Seite wie diese angezeigt:

Es enthält eine Liste der Vorlagen, aus denen Ihr WordPress-Theme besteht, und Sie können jede mit dem visuellen Drag-and-Drop-Builder von SeedProd bearbeiten.

Da Sie Ihrer Kopfzeile eine Schaltfläche hinzufügen möchten, können Sie diese bearbeiten Header Vorlage. Scrollen Sie nach unten, bis Sie es in der Liste finden, und klicken Sie dann auf Design bearbeiten Verknüpfung.

Wenn Sie die Kopfzeilenvorlage öffnen, sehen Sie ein zweispaltiges Layout wie dieses:

Wie Sie sehen, befinden sich links verschiedene WordPress-Blöcke und rechts eine Vorschau Ihres Designs. Sie können auf eine beliebige Stelle in Ihrem Design klicken, um den Inhalt zu ändern, und Blöcke aus dem linken Bereich ziehen, um Ihrer Seite weitere Funktionen hinzuzufügen.

Wenn Sie sich das aktuelle Header-Layout ansehen, sehen Sie eine Spalte mit einem Bildblock und eine Spalte mit dem Navigationsmenüblock.

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

Bewegen Sie den Mauszeiger zunächst über Ihren Kopfzeilenbereich, bis dieser eine violette Umrandung aufweist, und klicken Sie dann auf Abschnitt duplizieren Symbol.

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

Bewegen Sie als Nächstes den Mauszeiger über die Spalte in Ihrem ersten Abschnitt, bis sie eine blaue Umrandung hat, und klicken Sie dann auf Mülleimer Symbol, um es zu löschen.

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

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

Dadurch erhalten Sie eine leere Spalte, in der Sie einen Button-Block hinzufügen können.

Bevor Sie mit dem nächsten Schritt fortfahren, stellen Sie sicher, dass Sie den alten Kopfzeilenabschnitt löschen, indem Sie auf klicken Mülleimer Symbol.

Jetzt können Sie eine Schaltfläche für Ihr WordPress-Header-Menü erstellen.

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

Sobald die Schaltfläche angebracht ist, können Sie darauf klicken, um den Linktext der Schaltfläche, 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 Fortschrittlich Registerkarte „Einstellungen“. Hier können Sie die Textfarbe und Typografie bearbeiten, die Hintergrundfarbe ändern, einen Rahmenschatten, einen Rahmenradius, Abstände und benutzerdefinierte CSS-Klassen hinzufügen und sogar die Schaltfläche auf bestimmten Geräten ausblenden.

Plus, die Animation Option ist eine fantastische Möglichkeit, Ihren Button noch mehr hervorzuheben.

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

Jetzt können Sie den Rest Ihres WordPress-Themes weiter anpassen. Sie können beispielsweise 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 live zu übertragen. Gehen Sie dazu zunächst zurück zum SeedProd » Theme Builder Buchseite.

Als nächstes finden Sie die Aktivieren Sie das SeedProd-Theme Klicken Sie in der oberen rechten Ecke auf den Schalter und stellen Sie ihn auf die Position „Ja“.

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

Manche Menschen benötigen nicht die volle Flexibilität und Anpassungsmöglichkeiten eines Seitenerstellers, andere ziehen es vor, das Hinzufügen weiterer WordPress-Plugins zu ihrer Website einzuschränken. Wenn Sie in eine der beiden Kategorien fallen, ist die folgende Methode genau das Richtige für Sie.

Wir zeigen Ihnen, wie Sie mit dem standardmäßigen WordPress-Vollseiteneditor ohne Plugin eine Schaltfläche zu Ihrem Header hinzufügen.

Gehen Sie zunächst zu Aussehen ” Editor aus Ihrem WordPress-Dashboard. Dadurch wird der vollständige WordPress-Site-Editor geöffnet, der Blöcke zum Erstellen Ihrer Website verwendet.

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

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

Die Einstellungen für das Navigationslayout werden in der rechten Seitenleiste angezeigt. Klicken Sie jedoch zunächst auf das Pluszeichen (+), um mit dem Hinzufügen Ihrer Menülinks zu beginnen.

Sie können auf eine beliebige Seite klicken und nach ihr suchen, um sie Ihrem Menü hinzuzufügen.

Wenn Ihre Menülinks vorhanden sind, klicken Sie erneut auf das Pluszeichen (+), um einen neuen WordPress-Block hinzuzufügen. Suchen Sie dieses Mal nach dem Taste Block und fügen Sie ihn Ihrem Header hinzu.

Geben Sie nun den Text der Schaltfläche ein und klicken Sie auf das Linksymbol, um den Link hinzuzufügen, auf den die Besucher klicken sollen. In unserem Fall fügen wir einen Link zu unserem kostenlosen Bericht hinzu.

In den Blockbildschirmoptionen auf der rechten Seite können Sie Ihre Kopfzeilenschaltfläche anpassen, indem Sie die folgenden Einstellungen ändern:

  • Schaltflächenstil „Füllung“ oder „Umriss“.
  • Breitenprozentsatz
  • Text- und Hintergrundfarbe
  • Typografiegröße
  • Polsterung
  • Grenzradius
  • Zusätzliches CSS und Klassenname
  • Und mehr.

Wenn Sie mit der Anpassung Ihrer Schaltfläche fertig sind, klicken Sie auf Speichern Menüschaltfläche in der oberen rechten Ecke.

Jetzt werden auf jeder Seite, die den Header-Vorlagenteil verwendet, Ihre Menüschaltfläche und Navigationslinks angezeigt.

Wenn Sie ein Theme verwenden, das keine Funktionalität für den Site-Editor enthält, können Sie dieser Anleitung folgen Hinzufügen einer Schaltfläche zu Ihrem Menü Verwenden des älteren Menü-Customizers.

Die beste und einfachste Lösung ist jedoch die Verwendung des Drag-and-Drop-Seitenerstellers von SeedProd.

Das ist es!

Wir hoffen, dass Sie dieses Tutorial zum Hinzufügen einer Schaltfläche in WordPress-Kopfzeilenmenüs hilfreich fanden. Vielleicht gefallen Ihnen auch die folgenden Tutorials zum Anpassen Ihrer WordPress-Website:

Danke fürs Lesen. Bitte folgen Sie uns weiter YouTube, TwitterUnd Facebook für weitere hilfreiche Inhalte zum Wachstum Ihres Unternehmens.