Jak dodać przycisk CTA do belki menu?

8 mar 2019Divi, tips&tricks, Wordpress0 komentarzy

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;
}
}

0 komentarzy

Wyślij komentarz

Twój adres e-mail nie zostanie opublikowany. Wymagane pola są oznaczone *

Paweł Szynkiewicz

Paweł Szynkiewicz

Ekspert od produktywności i WordPressa/Divi

Od ponad 20 lat pracuję jako projektant, a od 10 lat specjalizuję się w wykorzystaniu WordPressa i Divi do samodzielnego wdrażania projektów. W tym czasie rozwinąłem swoją wiedzę na temat produktywności i efektywnego wykorzystania tych narzędzi. W tym wpisie dzielę się praktycznymi wskazówkami, które pomogą Ci zoptymalizować Twój warsztat pracy i samodzielnie wdrażać projekty.

Przydała Ci się ta wiedza? Postaw mi kawę, abym mógł tworzyć więcej wartościowych treści!

Postaw mi kawę na buycoffee.to

Gdzie umieścić powyższy kod?

Pamiętaj – nigdy nie umieszczaj żadnego kodu w plikach motywu Divi (ani żadnego innego). Z prostej przyczyny – każda aktualizacja motywu spowoduje wyczyszczenie Twoich zmian.

W celu dodania kodu CSS, który ma wpływać na wszystkie elementy danego typu w serwisie  – użyj przystosowanych do tego miejsc:

Opcja 1

W kokpicie swojej strony przejdź do zakładki „Divi” i przewiń ekran na sam dół. W opcjach szablonów graficznych znajduje się pole „Niestandardowe CSS”. Wszystkie zmiany tam wprowadzone zostaną zachowane nawet po aktualizacji.

Opcja 2

Będąc zalogowanym w panelu administracyjnym i przeglądając swoją stronę – na górze serwisu masz włączony pasek administratora. Klikając na tytuł strony rozwinie Ci się menu. Wybierz z niego „Stylista tematów”, a następnie „Spersonalizowany CSS”. Po wpisaniu kodu kliknij „Opublikuj”.

Opcja 3

Umieść w pliku style.css w Motywie potomnym. Jak stworzyć motyw potomny (child theme) dowiesz się tutaj.

Share This