Customise un seul onglet de ton menu

par | Fév 28, 2018 | Aller + Loin avec Divi | 0 commentaires

Tu souhaites personnaliser un onglet de menu ton menu dans ton site WordPress.

Tu ne vois pas à quoi cela va te servir, je vais te donner un exemple. Tu souhaites mettre un élément en valeur comme l’onglet « Obtenir un Devis », « Adhérer » ou encore « Contact ». Ce tuto va t’aider à mettre en pratique ces exemples.

Nous allons avoir besoin d’un petit peu de code CSS, mais no stress tout va bien se passer.

Allez on arrête les grands discours, et on passe à la technique.

Activons les classes CSS

Connecte toi à ton tableau de bord WordPress et va dans Apparences > Menus .

Créer un mega menu avec DIVI

Tout en haut, tu as une petite flèche  avec la mention « Option écran », clique dessus.

Tu vas avoir accès à des paramettrages supplémentaires, en dessous de « Afficher les propriétés avancées du menu » il te faut cocher la case  : « Classes CSS »

Mettre en avant un onglet de menu

Maintenant, tu vas déplier l’onglet que tu veux mettre en avant. Moi, je vais prendre l’onglet « Contact » pour l’exemple.

Mettre en valeur un onglet spécifique comme onglet contact

Maintenant, tu vas  écrire quelques règles CSS.

Allez, il te faut récupérer une feuille et un crayon et te mettre au boulot 🙂

C’était une boutade ! 😉

J’ai travaillé pour toi et je vais te donner un ptit code qui va customiser ton onglet. Mais si tu veux l’enrichir, fais toi plaisir 😉

 

#top-menu .atp-lien-personnalise a {

padding: 10px !important;
background: #0ebd6ecf;
color: #fff !important;
border: 2px solid #0ebd6ecf;
}

#top-menu .atp-lien-personnalise a:hover {
background: #fff;
color: #0ebd6ecf !important;
opacity: 1 !important;
}

Tu ne sais pas ou mettre ce code, normal parceque ne te l’ai pas encore expliquer.

Normalement, tu dois avoir un thème enfant, si tu ne sais pas ce que c’est,  je t’invite à lire cette article qui va t’éclairer sur la necessité d’en avoir un !    Je veux lire l’article !

Si tu sais de quoi je parle, on continue !

Dans ton tableau de bord WordPress va dans Apparences > Editeur 

Je vais dans editeur WordPress pour customiser mon css

Regarde la flèche 1 : Il faut que le seclect soit sur ton Thème enfant

Regarde la flèche 2 : Il faut que le fichier style.css soit actif

Regarde la flèche 3 : Tu copies/colles le code que je viens de te donner.

Regarde la flèche 4 : Tu mets à jour ton fichier

 

Tu peux admirer le travail 😉

L’onglet contact est mis en valeur, cela va attirer l’oeil de ton prospect.

Ton onglet contact dans ton menu est mis en avant

Tu as toutes les cartes en main, pour personnaliser tes onglets, tu peux personaliser le code à ta guise.

N’hésites pas à nous laisser le lien de ton site en commentaire, pour qu’on puisse admirer ton travail.

Je te dis à bientôt pour un nouveau Tuto pour Aller + loin avec DIvi

0 commentaires

Soumettre un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *