Jak wyróżnić element menu w WordPress

Podświetlenie elementu menu w WordPressie może przyciągnąć uwagę odwiedzających do ważnych stron lub specjalnych ofert. Może to pomóc w poprawie nawigacji i zaangażowania użytkowników.

Niezależnie od tego, czy chcesz podkreślić nową funkcję, wyprzedaż, czy ważne ogłoszenie, wyróżnienie niektórych elementów menu może zwiększyć skuteczność Twojej witryny.

Na przykład, podświetliliśmy stronę z cennikiem w głównym menu nawigacyjnym wielu naszych marek partnerskich, aby zwrócić uwagę użytkowników. Takie podejście zachęciło więcej odwiedzających do zapoznania się z naszymi cenami produktów i przełożyło się na wzrost konwersji.

W tym artykule pokażemy Ci, jak łatwo wyróżnić element menu w WordPress za pomocą kodu CSS.

Dlaczego warto wyróżnić element menu w WordPress?

Menu nawigacyjne to lista linków prowadzących do ważnych obszarów Twojej witryny. Zazwyczaj są one prezentowane jako poziomy pasek w nagłówku każdej strony w witrynie WordPress.

Podświetlając element menu w menu nawigacyjnym, możesz łatwo skierować uwagę użytkownika na najistotniejsze wezwanie do działania.

Na przykład, jeśli chcesz, aby użytkownicy odwiedzili stronę z cennikiem lub konkretny wpis na Twoim blogu WordPress, możesz wyróżnić ten element w swoim menu nawigacyjnym. Może to zwiększyć ruch na tej stronie i podnieść sprzedaż.

Powiedziawszy to, zobaczmy, jak możesz podświetlić element menu w WordPressie za pomocą CSS:

Metoda 1: Podświetlanie elementu menu za pomocą edytora pełnej witryny

Jeśli używasz motywu obsługującego bloki, będziesz mieć Edytor Pełnej Witryny zamiast starszego Dostosowywania Motywu. W nim również możesz łatwo wyróżnić bieżący element menu.

Najpierw przejdź do strony Wygląd » Edytor z panelu administracyjnego WordPress. Spowoduje to przejście do edytora całej witryny.

Tutaj po prostu kliknij dwukrotnie element menu, który chcesz podświetlić, a następnie kliknij ikonę „Ustawienia” u góry. Spowoduje to natychmiastowe otwarcie ustawień tego konkretnego elementu menu w panelu bloków.

Teraz po prostu przewiń w dół do zakładki „Zaawansowane” i kliknij ikonę strzałki obok niej, aby ją rozwinąć.

Spowoduje to otwarcie pola „Dodatkowa klasa CSS”, w którym musisz wpisać highlighted-menu.

Następnie kliknij przycisk „Zapisz” na górze strony, aby zapisać zmiany.

Następnie będziesz musiał dodać niewielką ilość kodu CSS do swojego motywu, aby uzyskać efekt wyróżnienia. Możesz albo naprawić brakujące Dostosowywanie Motywu, albo użyć wtyczki do fragmentów kodu, aby dodać kod CSS.

Jak dodawać fragmenty kodu CSS za pomocą WPCode

Do dodawania kodu CSS do WordPressa polecamy użyć WPCode, ponieważ jest to najlepsza wtyczka do fragmentów kodu WordPress na rynku, która sprawia, że dodawanie niestandardowego kodu jest bezpieczne i łatwe.

Najpierw musisz zainstalować i aktywować wtyczkę WPCode. Więcej instrukcji znajdziesz w naszym przewodniku krok po kroku, jak zainstalować wtyczkę WordPress.

Po aktywacji przejdź do strony Fragmenty kodu » + Dodaj fragment z panelu administracyjnego WordPress.

Tutaj najedź kursorem myszy na opcję „Dodaj swój niestandardowy kod (nowy fragment)” i kliknij przycisk „+ Dodaj niestandardowy fragment” pod nią.

Następnie musisz wybrać „Fragment kodu CSS” jako typ kodu z wyświetlonej listy opcji.

Teraz zostaniesz przeniesiony na stronę „Utwórz niestandardowy fragment”, gdzie możesz zacząć od wybrania nazwy dla swojego fragmentu.

Następnie skopiuj i wklej poniższy kod CSS do pola „Podgląd kodu”:

/* Highlighted menu */
.highlighted-menu
{
background: #d3d3d3;
border-radius: 35px;
padding: 0px 20px;
line-height: 50px;
}

Oto jak powinno to wyglądać:

Po wykonaniu tej czynności przewiń w dół do sekcji „Wstawianie”.

Tutaj po prostu wybierz tryb „Automatyczne wstawianie”, aby kod mógł być automatycznie wykonywany na całej Twojej stronie internetowej.

Teraz przejdź na górę strony i przełącz przełącznik z „Nieaktywny” na „Aktywny”.

Następnie po prostu kliknij przycisk „Zapisz fragment”, aby zapisać swoje ustawienia.

Pomyślnie podświetliłeś element menu w WordPress przy użyciu edytora całego witryny.

Tak będzie wyglądał Twój element menu po dodaniu kodu CSS.

Jak uzyskać dostęp do narzędzia dostosowywania motywu za pomocą motywu blokowego

Jeśli chcesz użyć Personalizatora motywu i motywu FSE, po prostu skopiuj i wklej poniższy adres URL do swojej przeglądarki. Pamiętaj, aby zastąpić „example.com” nazwą domeny swojej witryny:

https://example.com/wp-admin/customize.php

Spowoduje to otwarcie narzędzia do dostosowywania motywu dla Twojego motywu blokowego, gdzie musisz rozwinąć kartę „Dodatkowy CSS”.

Stąd skopiuj i wklej fragment CSS do pola „Dodatkowy CSS”:

/* Highlighted menu */
.highlighted-menu
{
background: #FFB6C1;
border-radius: 35px;
padding: 0px 20px;
line-height: 50px;
}

Następnie po prostu kliknij przycisk „Opublikuj” u góry, aby zapisać ustawienia.

Metoda 2: Wyróżnianie elementu menu za pomocą narzędzia do dostosowywania motywu

Jeśli używasz starszego motywu WordPress, prawdopodobnie będziesz mieć domyślnie włączone dostosowywanie motywu. Wyróżnienie elementu menu w dostosowywaniu motywu jest dość prostym procesem.

Najpierw po prostu przejdź do Wygląd » Dostosuj w swoim panelu WordPress, aby uruchomić dostosowywanie motywu. Gdy się otworzy, po prostu kliknij zakładkę „Menu” w lewym pasku bocznym.

Stąd kliknij ikonę zębatki w prawym górnym rogu, aby wyświetlić zaawansowane właściwości.

Teraz zaznacz pole „Klasy CSS”.

Następnie przewiń w dół do sekcji „Menu”.

Jeśli masz wiele menu WordPress, po prostu kliknij menu z elementami, które chcesz podświetlić.

Spowoduje to otwarcie nowej karty, w której możesz wybrać element menu, który chcesz wyróżnić. Może to być „Kontakt” jak w naszym przykładzie, lub może to być strona z cennikiem lub link do Twojego sklepu internetowego.

Po prostu kliknij wybrany element menu, aby rozwinąć niektóre ustawienia. Tutaj kliknij pole „Klasy CSS”.

Wszystko, co musisz zrobić, to wpisać 'highlighted-menu' w pole. Możesz dodać tę klasę CSS do wielu elementów menu, a wszystkie zostaną podświetlone.

Następnie po prostu przejdź do zakładki „Dodatkowy CSS” w personalizatorze motywu.

Następnie skopiuj i wklej poniższy kod CSS:

/* Highlighted menu */
.highlighted-menu
{
background: #FFB6C1;
border-radius: 35px;
padding: 0px 20px;
line-height: 50px;
}

Gratulacje! Pomyślnie podświetliłeś element menu.

Na koniec nie zapomnij kliknąć przycisku „Opublikuj” na górze, aby zapisać swoje ustawienia.

Dostosowywanie podświetlenia elementu menu

Teraz, gdy podświetliłeś element menu, możesz dostosować kod CSS, aby spersonalizować swój element menu według własnych upodobań.

Na przykład możesz zmienić kolor tła elementu menu.

Po prostu poszukaj następującego kodu w fragmencie CSS, który właśnie wkleiłeś:

background: #FFB6C1

Po jego zlokalizowaniu możesz po prostu zastąpić numer kodu koloru różowego kodem szesnastkowym dowolnego koloru według własnego wyboru:

background: #7FFFD4;

Powyżej znajduje się kod szesnastkowy dla akwamaryny.

Możesz zapoznać się z naszym przewodnikiem, aby łatwo dodać niestandardowy kod CSS, aby uzyskać inne pomysły na dostosowanie wyróżnionego elementu menu.

Gdy będziesz zadowolony z wyboru, po prostu kliknij przycisk „Opublikuj” w narzędziu do dostosowywania motywu lub „Zapisz fragment” w WPCode, aby zapisać zmiany.

Mamy nadzieję, że ten artykuł pomógł Ci dowiedzieć się, jak wyróżnić ikonę menu w WordPress. Możesz również zapoznać się z naszym przewodnikiem dla początkujących, jak stylizować menu nawigacyjne WordPress lub naszym samouczkiem, jak dodawać ikony obrazkowe do menu nawigacyjnych w WordPress.

Jeśli podobał Ci się ten artykuł, zasubskrybuj nasz kanał YouTube po samouczki wideo WordPress. Możesz nas również znaleźć na Twitterze i Facebooku.