WordPress Menü Button für Divi

Im Divi Theme ganz einfach einen Call2Act im Menü einfügen

Folge hier der Schritt für Schritt Anleitung oder schau dir das Video an:


Mit einem Klick auf den Play-Button wird eine Verbindung zu Youtube hergestellt. Es gilt die Google Datenschutzerklärung

So sieht unser Endergebnis aus:

CTA Menu Divi

1. Gehe zum Theme Customizer und rufe dort „Zusätzliches CSS“ auf. Alternativ findest du zusätzliches CSS auch im Dashboard unter -> Divi Themeoptionen.

Theme Customizer

2. Kopiere diesen Code und füge ihn im zusätzlichen CSS ein. Der obere Code ist für die normale Ansicht des Buttons, der untere für den Mousehover. Wenn sich die Buttonfarbe beim Drüberfahren mit der Maus nicht verändern soll, kannst du den 2. Block weglassen. Die Codes sind identisch, bis auf die Farbcodes.

/*Button in Menü*/
.button-menu a {
  background-color: #44ceb0;
  color: #fff !important;
  padding: 15px 25px !important;
  border-radius: 25px;
  text-align: center;
}
.button-menu:hover a {
  background-color: #44ceb0;
  color: #fff !important;
  padding: 15px 25px !important;
  border-radius: 25px;
  text-align: center;
}

Was bedeuten die einzelnen Zeilen?

.button menu
das ist die CSS-Klasse, die du beim Button eintragen musst

background-color: #44ceb0 /
Farbcode für den Button-Hintergrund

color: #fff
*Farbcode für den Text

padding: 15px 25 px
Abstand zum oberen und unteren Buttonrand

border-radius: 25px
rundet die Ecken des Buttons ab*/text-align: center /*zentriert den Text */

Gehe nun zum Dashboard -> Design -> Menü und wähle das richtige Menü aus. Gehe dann zum Menüpunkt, den du als Button anzeigen möchtest und klicke auf das kleine Dreieck ganz links. Es öffnen sich weitere Einstellungen. Trage hier im Feld „CSS-Klassen“ dies ein:

button-menu

Falls du das Feld für die CSS-Klasse nicht siehst, scrolle auf dieser Seite ganz nach oben und klicke auf „Ansicht“ – setze dort das entsprechende Häkchen.

Wordpress ansicht 1
wordpress linkziel 1
menu css 1

Der Menüpunkt sollte jetzt als Button angezeigt werden.

Das könnte dich auch interessieren

2 Comments

  1. Vielen Dank für die schöne Anleitung!
    Dazu habe ich eine Frage: bei mir funktioniert die Farbe im Button nicht. Die Farbe wird immer mit der Menüfarbe (bei mir weiß) überschrieben. Ich möchte die Farbe im Button gerne auf rot mit weißem Hintergrund ändern.
    Hätten Sie eine Idee?
    Ich arbeite auch mit Divi.

    Herzlichen Dank!!

    Reply
    • Ja, die Schriftfarbe bei den Buttons zickt gerne mal. Hast du einen Button im Menü hinzugefügt und mit einem CSS-Code das Design angepasst? Oder hast du das Menü mit dem Themebuilder erstellt? Dann kann ich dir eher helfen. Herzliche Grüße

      Reply

Submit a Comment

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert