Někdy je užitečné zaujmout návštěvníka stránky hned při začátku jeho návštěvy. K tomu může sloužit například položka menu transformovaná na tlačítko. Jak to uděláme? Poměrně jednoduše.

Jako první krok přejdeme k nastavení menu a upravíme defaultní nastavení zobrazovaného nastavení tak, že povolíme zobrazování CSS tříd v nastavení menu. V pravé horní části v sekci Menu klikneme na záložku Nastavení zobrazených informací a v okně které vyjede zatrhneme položku CSS třídy a okno zase necháme zajet nahoru.

Nyní si otevřeme nastavení položky menu, kterou chceme změnit na tlačítko a přiřadíme k ní nějakou třídu. Pro ilustraci například menu-tlacitko a poté menu uložíme.

Následovně přejdeme k nastavení šablony a vložíme do místa pro úpravu CSS, tedy Divi > Nastavení šablony > Všeobecné > Přizpůsobené CSS následující CSS kód.

/*** Polozka menu jako tlacitko - Zabza.eu ***/

/* styl tlacitka vlozeneho jako polozka menu */
            .menu-tlacitko {border-radius: 0px;}
            .menu-tlacitko a {color: #fff!important;}
            li.menu-tlacitko {
                background-color:#2ea3f2; 
                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.menu-tlacitko:hover {background-color:#68bbf2;}
 
/* pro fixovanou naavigaci */
                 .et-fixed-header #top-menu .menu-tlacitko a {
                        color: #fff!important;}
        .menu-tlacitko li.current-menu-ancestor > a, .menu-tlacitko li.current-menu-item > a {
                    color: #fff !important;}
  
    @media only screen and (min-width : 981px) {
            li.menu-tlacitko {height: 33px;}}

Kód uložíme a je hotovo.