• Minuten Lesezeit
  • 0 Kommentare
  • 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:

    Design ohne Titel 1

    Button ins Divi Menü einfügen

    Mit Klick auf das Video akzeptierst du, dass eine Verbindung zu Youtube hergestellt wird. Es gilt die Datenschutzerklärung von Youtube.

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

    Wordpress ansicht 1
    wordpress linkziel 1
    menu css 1

    Der Menüpunkt sollte jetzt als Button angezeigt werden.


    Diese Beiträge könnten dich auch interessieren:

    {"email":"Email address invalid","url":"Website address invalid","required":"Required field missing"}
    >