Jak dodać wyróżniony element do menu WordPress?

W tym samouczku zobaczymy, jak możemy dodać polecany element menu.

Możemy go użyć do wskazania, że ​​przedmiot jest nowy lub cokolwiek innego, o czym możesz pomyśleć.

Zrobimy to również bez żadnej wtyczki, zrobimy to z odrobiną kodu css, który znajdziesz w tym samym samouczku.

Otrzymany wynik jest następujący:

Jeśli nie jesteś zapisany do Strefy Premium możesz dać zapisz się za 10 €/miesiąc tutaj

Oto samouczek wideo:

Pierwszą rzeczą, jaką zamierzamy zrobić, jest dodanie kodu CSS w custom -> Additional CSS i dodanie następującego kodu:

.menu-badge {
font-size: 9px;
margin-left: 4px;
position: relative;
top: -10px;
margin-bottom: 13px;
color: #ffffff;
background-color: #FF0000;
padding: 3px 4px;
border-radius: 3px;
}
.badge-bounce {
animation: bouncing .8s cubic-bezier(0.1,0.05,0.05,1) 0s infinite alternate both;
}

@keyframes bouncing{
    0%{top:-6px}
    100%{top:-10px}
}

Teraz, gdy mamy dodany kod, przechodzimy do Wygląd -> Menu i wyświetlamy element, który chcemy podświetlić i dodać w polu etykieta nawigacyjna następujący kod:

<span class="menu-badge badge-bounce">NUEVO</span>

Jak widać wynik jest bardzo fajny i aby go osiągnąć nie używaliśmy wtyczki, zrobiliśmy to ręcznie.

Pamiętaj, najlepsza wtyczka to ta, która nie jest zainstalowana 😉

Mam nadzieję, że Ci się podobało, do zobaczenia w następnym samouczku.