Artykuł pochodzi z serwisu DiviHelp Artykuł powstał na potrzeby mojego starego serwisu DiviHelp. Ponieważ przestałem go rozwijać – przeniosłem archiwalne artykuły na blog prywatny..

Czasami chcemy w nawigacji umieścić dodatkowy przycisk – tak zwane CTA (Call to action) – czyli wezwanie do działania. Może to być „zadaj pytanie”, „zobacz naszą ofertę itp.

Taki przycisk powinien się odróżniać od pozostałych elementów nawigacji – bić po oczach zachęcając do kliknięcia. Standardowe opcje WordPress czy Divi nie pozwalają na umieszczenie takiego elementu. Natomiast dostępne wtyczki zazwyczaj albo robią to co można łatwo zrobić za pomocą kilku linijek CSS, albo powodują, że nasze menu przestaje wyglądać tak jak chcieliśmy.

Co w takim razie zrobić?

• Po pierwsze trzeba w kokpicie przejść do sekcji Wygląd -> Menu.
• Następnie do naszego menu trzeba dodać nowy element menu używając istniejącej strony lub Własnego odnośnika (przykład na podstawie własnego odnośnika).

• Po określeniu gdzie przycisk ma kierować – trzeba dać mu nową klasę CSS. W naszym przykładzie jest to klasa nazywająca się menu-cta (pamiętaj – nie używaj w nazwie kropek, spacji, polskich znaków itp.)
• Jeśli nie mamy widocznej opcji dodawania klasy CSS należy ją włączyć za pomocą Opcje ekranu -> Klasy CSS (dostępne na górze ekranu)
  

Kiedy już wykonaliśmy te kroki – należy użyć poniższego kodu CSS (oczywiście zmieniając kolory i kształt przycisku wg własnych upodobań):

/*—————Przycisk CTA w menu—————*/
#top-menu li a:hover {opacity: 1!important;}
.menu-cta a {
border: 2px solid #64bccd!important; /* grubość ramki przycisku i jej kolor */
color: #64bccd !important; /* kolor napisu na przycisku */
padding: 12px 30px !important; /*odstęp ramek od tekstu */
border-radius: 25px; /* zaokrąglenie przycisku */
text-align: center; /* pozycja treści na przycisku */
}
.menu-cta a:hover {
background-color: #64bccd; /* zmiana koloru tła jak się najedzie na przycisk kursorem */
color: white!important; /* zmiana koloru tekstu po najechaniu */
}
.et_header_style_left #et-top-navigation {
padding-top: 16px!important;
}
.et_header_style_left .et-fixed-header #et-top-navigation {
padding-top: 6px!important;
}
/*————— Kolor przycisku jeśli mamy włączone menu w trakcie przewijania —————*/
#main-header.et-fixed-header .menu-cta a {
color: #64bccd !important;
}
/*————— Wygląd przycisku na urządzeniach mobilnych —————*/
@media only screen and (max-width: 980px) {
.menu-cta a {
background-color: #64bccd;
color: #fff !important;
}
}