Wie füge ich eine Call-To-Action Button zu meinem WordPress-Header-Menü hinzu
In meinem Blogbeitrag „Die Verwendung von Buttons auf Webseiten“ bin ich darauf eingegangen, wie und wo man Buttons oder CTA’s (Call-To-Action-Buttons) auf einer Webseite verwendet.
In diesem Blogpost erhaltet ihr den nötigen CSS-Code, den ihr zu Eurer Webseite hinzufügen könnt, um einen Button eurer Navigation hinzuzufügen.
Warum sollte ich einen Button meinem Header-Menü hinzufügen?
In WordPress sieht das Navigations Menü normalerweise einheitlich aus und die Links werden als Text hinzugefügt.
Oftmals entsteht allerdings der Wunsch am Ende der Navigation einen Button einfügen zu wollen, der dann z.B. zu einen Shop, Kontaktformular oder Kurs verlinkt.
Durch das Hinzufügen eines Buttons in diesem Bereich, wird dieser Link besser wahrgenommen und führt dazu, dass sich der Benutzer besser mit deiner Webseite agieren kann.
Auf Seiten oder Beitragsseiten können Buttons mit Block hinzugefügt werden. Dies funktioniert leider nicht im Menü.
Hinzufügen eines Buttons im WordPress Header Menü
Glücklicherweise ist dies mit dem Hinzufügen von zusätzlichem CSS Code im Theme Customizer möglich – und das ohne ein zusätzliches Plugin zu installieren.
- Als erstes muss der Link zum Menü hinzugefügt werden. Gehe dazu in deinem WordPress Dashboards zu Menüs.
- Füge einen Link zu deinem Menü, das dein Button werden soll.
- Unterhalb des Links kannst du CSS-Klassen eingeben ( sollte dieses Feld nicht angezeigt werden, gehe in der Ansicht ganz oben auf Ansicht anpassen – und setze einen Haken bei CSS-Klassen). In meinem Fall habe ich den Button wix-nav-button genannt.
Füge nun im Theme Customizer – Zusätzliches CSS folgenden Code hinzu. Solltest du deinen Button anders genannt haben musst du im CSS Code .wix-nav-button in deinen Namen ändern.
Nun kannst du den Button so anpassen, dass er zu deinem Branding passt.
Custom CSS Code:
/**Button Top Navbar- Wix-Shop**/
.wix-nav-button {
background-color:#BF8EA0;
padding: 10px 10px 5px 10px;
margin: 0px 0px 0px 0px;
border:0px;
border-radius:0px;
}
.wix-nav-button a, .wix-nav-button a:hover, .wix-nav-button a:active {
color:#fff !important;
}
Ich hoffe, dieser Artikel hilft dir einen Button in deiner Menüleiste hinzuzufügen. Analysiere regelmässig, inwiefern deine Besucher deinen Button verwenden.
