Comment ajouter un élément en vedette au menu WordPress

Dans ce didacticiel, nous allons voir comment ajouter un élément de menu en vedette.

Nous pouvons l'utiliser pour indiquer qu'un article est nouveau ou toute autre chose à laquelle vous pouvez penser.

On va aussi le faire sans aucun plugin, on va le faire avec un peu de code css que vous retrouverez dans ce même tuto.

Le résultat que vous obtiendrez est le suivant :

Si vous n'êtes pas abonné à la Zone Premium, vous pouvez donner inscrivez-vous pour 10 €/mois ici

Voici le tutoriel vidéo :

La première chose que nous allons faire est d'ajouter le code CSS dans personnaliser -> CSS supplémentaire et d'ajouter le code suivant :

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

Maintenant que nous avons ajouté le code, nous allons dans Apparence -> Menus et affichons l'élément que nous voulons mettre en évidence et ajouter dans le champ étiquette de navigation le code suivant:

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

La façon dont vous pouvez voir le résultat est très cool et pour y parvenir, nous n'avons pas utilisé de plugin, nous l'avons fait manuellement.

N'oubliez pas, le meilleur plugin est celui qui n'est pas installé 😉

J'espère que ça vous a plu, à bientôt dans le prochain tuto.