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:

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 in Menü Hover*/

.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.