Divi Hauptmenü-Link als Button anzeigen

Schritt 1: Füge dem Link, der als Button angezeigt werden soll unter Design > Menüs zuerst die Klasse dt-menu-cta hinzu.

Tipp: Falls du das Feld „CSS-Klassen (optional)“ nicht sehen solltest, kannst du oben rechts unterhalb der Werkzeugleiste deine Ansicht anpassen. Setze im Dropdown Menü unter „Erweiterte Menüeigenschaften anzeigen“ einfach das Häkchen bei „CSS-Klassen“. Dann solltest du das Feld sehen.

Schritt 2: Füge nun folgenden Code in das Stylesheet deines Child-Themes oder in den Custom-CSS Bereich im Divi Theme Customizer ein. Du kannst nun deinen Button sowie deine Menühöhe individuell im CSS anpassen.

/* Button Styling */
.dt-menu-cta a, .et-fixed-header #top-menu .dt-menu-cta a {
    background: #2ACCB3; /* Button Hintergrundfarbe hier austauschen */
    border-radius:25px 25px 25px 25px; /* Radius hier anpassen, oder Zeile komplett entfernen für eckigen Button */
    color:#fff !important;
    padding:12px 20px !important; /* Innenabstand des Buttons hier anpassen */
    opacity:1;
}

@media (min-width:981px) {
    /* Setzt den oberen und unteren Abstand des Hauptmenüs zurück */
    .et_header_style_left #et-top-navigation nav > ul > li:not(.dt-menu-cta) > a, 
    .et_header_style_left .et-fixed-header #et-top-navigation nav > ul > li:not(.dt-menu-cta) > a,
    .et_header_style_split #et-top-navigation nav > ul > li:not(.dt-menu-cta) > a {
        padding-bottom:0 !important;
    }
    /* Korrigiert die Position des Suchicons */
    #et_search_icon:before {
        top:-10px;
    }
    /* Positioniert die Menülinks vertikal mittig */
    .et_header_style_left #et-top-navigation, 
    .et_header_style_split #et-top-navigation {
        display: flex;
        align-items: center;
    }
    /* Hier Menühöhe anpassen */
    .et_header_style_left #et-top-navigation, 
    .et_header_style_split #et-top-navigation {
        padding:25px 0 !important;
    }
    /* Hier Menühöhe für fixiertes Navgationsmenü anpassen (Menühöhe beim scrollen) */
    .et_header_style_left .et-fixed-header #et-top-navigation {
        padding:15px 0 !important;
    }
}