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:

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

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.

Der Menüpunkt sollte jetzt als Button angezeigt werden.