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ée au dessus du menu :
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 :
On ajoute donc ici l’adresse. Vous pouvez remplacer “15 avenue de la république, 75015 PARIS” par la vôtre.
La classe “fa fa-map-marker” permet d’ajouter l’icône de localisation pour que ce soit homogène par rapport aux autres icônes.
Pour ajouter des milliers d’icônes 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 :
Si vous souhaitez afficher votre adresse APRÈS l’email et le téléphone, copiez-collez plutôt ce snippet au même endroit. La fonction append()
est utilisée à la place de la fonction prepend()
. Elle ajoute du contenu à la fin de l’élément sélectionné.
Le résultat avec ce snippet :
Avez-vous ajouté d’autres informations à cette barre de menu ? Si oui, partagez vos suggestions en commentaire 🙂
Source: Divi Community
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.
Bonjour, une procédure similaire oui, mais les class et id utilisés ici sont ceux d’éléments propres à Divi
Ce changement de texte via JS .. je me suis toujours demandé si google en indexait l’information ?
Oui, il suffit de regarder le code source généré par ta page.
Bonjour,
J’aimerais ajouter un bouton J’aime dans la barre de menu supérieur à droite. J’ai généré le code sur Facebook developpers mais je ne sais pas comment l’insérer dans la barre de menu.
Bonjour, tu devrais y arriver en suivant ce tuto: https://www.elegantthemes.com/blog/divi-resources/how-to-add-social-icons-to-divis-primary-menu
Merci pour cette info 🙂 De mon côté je souhaiterai que le N° de tel et le mail apparaissent tout à droite de ma barre et non à gauche, n’étant pas spécialiste du CSS, sauriez-vous quel morceau de code ajouter ?
Merci beaucoup 🙂
Hello, essaye d’ajouter ce code CSS:
#et-info {
float: right;
}
Merci c’est tout bon 🙂 🙂
Top 😉
Bonjour Julien et merci pour toutes ces astuces. J’ai juste un petit souci pour l’icône de géolocalisation qui ne veut pas s’afficher. Je suis allée voir sur FontAwesome et la classe correspond bien : “fas fa-map-marker-alt”. As-tu une idée de quoi àa pourrait venir ? Merci par avance pour votre aide 🙂
Bonjour,
peux-tu me dire comment tu as intégré FontAwesome et quelle est la version que tu utilises? Et me copier ton code CSS?
Merci
Merci beaucoup pour l’astuce de la barre secondaire !
J’ai une petite question car je souhaiterais ajouter un logo tout à gauche sur cette fameuse barre secondaire.
Comment faire s’il vous plait ?
Cordialement
John
Bonjour Jonathan, tu peux maintenant créer n’importe quel menu en utilisant le thème Builder de Divi. Cela te permet de sélectionner et placer n’importe quel élément visuellement ou tu le souhaites 😉
Bonjour, merci beaucoup pour toutes ces informations. Est il possible également d’ajouter un bouton réservation dans cette barre de menu secondaire quand le menu est en Slide-in ?
Merci beaucoup 🙂
Bonjour, tu peux l’ajouter de la même manière ou refaire ton menu avec le Thème Builder pour mettre tout ce que tu souhaites dedans 😉
Bonjour
Peut-on plutot ajouter une phrase avec un lien ?
Merci
Bonjour, oui tu peux ajouter des balises html de liens dans le code.