Ein Divi-Menüeintrag als CTA-Button nutzen

Das Divi-Theme ist eins der populärsten WordPress-Themes überhaupt.

Auch ich setze es für meine Projekte und die unserer Kunden immer wieder gerne ein. Man braucht das Rad nicht neu zu erfinden und ist in der Gestaltung sehr flexibel.
Der integrierte Builder erlaubt es auch (ohne Update- und inkompatibilitätsproblemen wie mit dem bekannten Visual Composer) Endkunden einfach und unkompliziert Änderungen durchzuführen.
„Out-of-the-Box“ ist das Theme relativ schlicht aber technisch sauber und damit auch suchmaschinenfreundlich umgesetzt.

Hinsichtlich besserer beziehungsweise für Conversion optimierten UX Design kam mir der Wunsch die für mein Zielvorhaben entscheidenden Links im Menü hervorzuheben.
Sprich: Ich möchte ein Menüeintrag als CTA verwenden.

Dabei geholfen hat mir folgender Code-Schnipsel:

/*------------------------------------------------*/
/*-----------------[CTA Menu Item]----------------*/
/*------------------------------------------------*/
 
/* style the get started cta button */
            .get-started {border-radius: 0px;}
            .get-started a {color: #fff!important;}
            li.get-started {
                background-color:#ed7818; 
                font-weight: 700; 
                text-transform: uppercase; 
                text-align: center; 
                padding: 12px 13px 10px 10px!important;
            border-radius: 3px;
                -moz-transition: all 0.5s; 
                -webkit-transition: all 0.5s;
                transition: all 0.5s;}
            li.get-started:hover {background-color:#c96310;}
 
/* fixed header button text color */
                 .et-fixed-header #top-menu .get-started a {
                        color: #fff!important;}
        .get-started li.current-menu-ancestor > a, .get-started li.current-menu-item > a {
                    color: #fff !important;}
 
 
 
    @media only screen and (min-width : 981px) {
            li.get-started {height: 33px;}}



.et-fixed-header #top-menu li.menu-item-xxxx > a {
 color: #ffffff !important;}

Dem entsprechenden Menüpunkt muss ich jetzt nur noch die Klasse „get-started“ zuweisen.
Damit habe ich nun aus meinem Menüeintrag eine CTA gemacht.