Wie füge ich eine Call-To-Action Button zu meinem WordPress-Header-Menü hinzu

Wie füge ich eine Call-To-Action Button zu meinem WordPress-Header-Menü hinzu

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.

  1. Als erstes muss der Link zum Menü hinzugefügt werden. Gehe dazu in deinem WordPress Dashboards zu Menüs.

  2. Füge einen Link zu deinem Menü, das dein Button werden soll.
  3. 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.
WordPress-button

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.

 

Signature

Wix Website Template „Awaken“ für Yoga I Mindfulness I Meditation

Wix Website Template „Awaken“ für Yoga I Mindfulness I Meditation

Blogpost neue Webseiten Vorlage

Dieses WIX Website Template „Awaken“ hat es nach langer Ankündigung endlich in den Shop geschafft. Und es hat sich gelohnt.
Das Template wurde speziell für Coaches, & Lehrer für die Bereiche Yoga, Mindfulness und Meditation entwickelt.
Dieses Template ist minimalistisch, modern und ästethisch.

 

Das beinhaltet die Webseiten Vorlage:

Wix Vorlage mit vielen Buchungsmöglichkeiten.

  • Home
  • Über mich
  • Retreats
  • Online Kurse
  • Blog
  • Social Media
  • Kontakt
  • Call-to-Action-Button
  • Responsive Design für Desktop & Mobiltelefone
  • Buchungsmöglichkeit

Wie sieht die Vorlage aus?

Sieh dir die Live Demo Seite direkt an!

Awaken website template mockup
Wix Mockup for Cake Shops 2
Signature