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

Divi Filter für Blogkategorien

Divi Filter für Blogkategorien

Wie du ganz einfach für deine Blogübersichtsseite einen Kategorienfilter erstellst Wenn du auf deiner Blogübersichtsseite keine Sidebar verwendest, hast du auch die Kategorieauswahl nicht zur Verfügung. Divi selbst bietet so einen Filter nicht an; ich zeige dir hier...

WordPress Menü erstellen

WordPress Menü erstellen

Folge dieser einfachen Schritt für Schritt Anleitung oder schaue dir das Video-Tutorial an. https://youtu.be/k7LPxAsPruM Standard Menüpunkte 1. Logge dich in dein Wordpress Dashboard ein und wähle im linken Menü unter dem Punkt "Design" -> Menü aus. 2. Klicke auf...

0 Kommentare

Einen Kommentar abschicken

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