Vous êtes ici : Accueil | Snippets WordPress | Divi | Comment ajouter l’adresse dans la barre de menu supérieur de Divi

Comment ajouter l’adresse dans la barre de menu supérieur de Divi

divi snippet

Si vous utilisez le thème Divi ( ou plutôt un thème enfant de Divi 😉 ), vous avez surement remarqué que les options de celui-ci ne permettent que d’ajouter son adresse email et son numéro de téléphone dans la barre supérieure situé au dessus du menu :

barre superieure divi wpmarmite

Mais pour certaines activités, il peut-être utile de faire figurer son adresse.

Pour remédier à cela, copiez-collez ce code dans Divi-> Options du thème -> Intégration -> Ajoute du code dans la balise <body>. Il ajoutera l’adresse au DEBUT de la barre supérieure:

<script>
jQuery(function($){
    if (!$('#et-info').length) { $('#top-header .container').prepend(''); }
    $('#et-info').prepend(
      '<span style="margin:0 10px"><i class="fa fa-map-marker" aria-hidden="true"></i> 15 avenue de la république, 75015 PARIS</span>'
    );
});
</script>

On ajoute donc ici l’adresse. Vous pouvez remplacer « 15 avenue de la république, 75015 PARIS » par la votre.

La classe « fa fa-map-marker » permet d’ajouter l’icone de localisation pour que ce soit homogène par rapport aux autres icones.

Pour ajouter des milliers d’icones via FontAwesome, utilisez ce snippet.

La fonction prepend() ajoute du contenu (ici l’adresse) au début de l’élément sélectionné (ici la barre supérieure).

Le résultat sur la barre supérieure:

barre superieure adresse debut wpmarmite

Si vous souhaitez afficher votre adresse APRÈS l’email et le téléphone, copiez-collez plutôt ce snippet au meme endroit. La fonction append() est utilisé à la place de la fonction prepend(). Elle ajoute du contenu à la fin de l’élément sélectionné.

<script>
jQuery(function($){
    if (!$('#et-info').length) { $('#top-header .container').append(''); }
    $('#et-info').append(
      '<span style="margin:0 10px"><i class="fa fa-map-marker" aria-hidden="true"></i> 15 avenue de la république, 75015 PARIS</span>'
    );
});
</script>

Le résultat avec ce snippet :

barre superieure adresse fin wpmarmite

Avez-vous ajouté d’autres informations à cette barre de menu ? Si oui, partagez vos suggestions en commentaire 🙂

Vous débutez ? Procurez-vous le Kit du Freelance WordPress

Trouver les bons clients, leur vendre des prestations et bien communiquer avec eux n'est pas inné. Évitez les galères et gagnez du temps en vous formant aux côtés de ces 7 professionnels.

Commencer maintenant

4 commentaires Ajoutez le vôtre

  1. Pas de support d’accord ! Mais en dehors de Divi, par exemple Genesis et thème News Pro, est-ce une procédure similaire ou approchante ? Merci.

    Répondre
    • Bonjour, une procédure similaire oui, mais les class et id utilisés ici sont ceux d’éléments propres à Divi

  2. Ce changement de texte via JS .. je me suis toujours demandé si google en indexait l’information ?

    Répondre
    • Oui, il suffit de regarder le code source généré par ta page.

Laisser un commentaire

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

La Marmite ne peut malheureusement pas fournir de support. Merci d'en tenir compte dans votre commentaire 😉

Si vous ne lui en voulez pas, donnez-lui un j'aime sur Facebook :



Pourquoi vous devez travailler avec un thème enfantVoir la vidéo
+ +
b9705b10cc738d5b08ea464734990234rrrrrrrrrrrrrrrrrrrrrrrrrr
42 Partages
Partagez
Tweetez
Partagez