El tema Divi nos ofrece, como opción, para hacer aparecer los iconos sociales al pie de cada página, pero ¿cómo personalizar esto? Cómo Abrir iconos de pie Divi en una nueva ventana del navegador ? De hecho, las opciones para mostrar los iconos del pie Divi son básicas, este tema no nos deja demasiadas opciones: sólo 4 iconos para colocar en la parte inferior derecha y que se abre en la misma pestaña del navegador! No entres en pánico, en este artículo veremos que en dos o tres clics, podemos cambiar la ventana abriendo nuestros enlaces a pie...
1 – Apertura de los iconos de pie Divi: Concepto de destino _ Autonomía / Meta _Blank
En HTML la etiqueta <a> permite añadir un enlace a una nueva página web, ya sea una página de su sitio o una página de un sitio externo. La sintaxis es la siguiente:
<a href="https://astucesdivi.com" target="_blank">Mon blog</a>El href ser el destino y el target ser la manera de llegar allí... Por eso hay diferentes valores para añadir al atributo objetivo – todos tomados en cuenta por los navegadores – pero sólo mantendremos los valores principales:
_blank: abre el enlace en una nueva ventana del navegador o pestaña_self: abre el enlace en la ventana actual = este es el defecto
Por defecto, WorPress utiliza el - Sí., tal vez sin saberlo, modificas este atributo de ti mismo cuando insertas un enlace en el cuerpo de tus artículos. Esto es exactamente lo que pasa cuando revisas la pequeña caja debajo de la dirección de destino, mira:
Sin embargo, el tema Divi no nos ofrece tal opción cuando entramos en las direcciones de nuestros perfiles sociales de la pestaña Divi Opción de Temas GeneralQué pena.
2 - ¿Cómo abrir una nueva ventana con el clic de un icono en el pie de Divi?
Si ya usas el tema Divi, usted debe haber notado que iconos situados en el pie su sitio o blog no se abrió en "objetivo blanco".
Esto significa que si un visitante a su sitio hace clic en cualquiera de los iconos situados en la parte inferior de cada página, dejará su sitio para ir a uno de sus perfiles sociales. Por lo tanto, este usuario de Internet habrá dejado su sitio y puede no volver a él, es el « ego objetivo ».
Por otro lado, si tuvieras la posibilidad de él Abra sus perfiles sociales en una nueva ventana del navegador, tal vez este usuario de Internet será tentado a continuar leyendo su artículo o navegando por su sitio.
Para remediar esto, es muy simple! Tendrás que añadir un poco de código a Divi que abrirá tus perfiles sociales en una nueva ventana cuando el usuario de Internet haga clic en él... Aquí está esta pieza de código:
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery(".et-social-icon a").attr('target', '_blank');
});
</script>
3 – ¿Dónde insertar la punta del código para abrir los iconos de pie Divi en una nueva ventana?
Recuerde, en un último artículo, le expliqué que Divi fácilmente habilitado la inserción de código en la sección "Head" de su sitio... Así que es precisamente aquí que tendrás que añadir este pequeño script.
Entonces ve a la pestaña Divi Opciones temáticas ■ Integración Añadir línea de código a la Cabeza de tu blog
Otra solución también: si prefiere integrar esta función en el tema de su hijo directamente, esto también es posible. Simplemente duplicar el archivo header.php en su tema infantil y añadir esta pieza de código.
Para ir más lejos...
El hecho abrir los iconos de pie Divi en una nueva ventana es muy importante ya que esto facilita la navegación y la experiencia de usuario de su reproductor.
Si este está interesado en su artículo, puede ser molesto si se ve obligado a regresar a él haciendo clic en las flechas « volver de una página » su navegante.
Además, es muy importante para sus estadísticas internas : si el lector sale de su sitio después de unos segundos, sin siquiera visitar otra página, hace su tasa de repuntes = Eso no es lo que estás buscando, ¿verdad?
Bonjour Lycia
Je voulais vous remercier pour toutes ces astuces très utiles.
J’ai développé mon site seule grâce à Divi : très facile d’usage et compliqué à la fois de créer son site mais des ressources comme les vôtres sont très aidantes.
Merci encore!
Merci Emmanuelle ! C’est très gentil à vous de laisser un tel message. Ça m’encourage pour continuer. Je suis en train de rédiger de nouveaux tutoriels actuellement… ils vous serviront peut-être. À bientôt !
Bonjour Lycia et merci une fois de plus pour ce tuto.
En plus des icones de reseaux sociaux, j’ai un lien vers mon forum exterieur a WordPress. Je ne vois pas bien quelle « variante » de ce code utiliser.
[jQuery(« .l’id css de ma ligne de menu »).attr(‘target’, ‘_blank’);] ?
Pouvez-vous me mettre sur la voie svp ?
Bonsoir Jean Michel. Vous ne devez pas toucher à ce code. Il sert seulement à ouvrir les icônes du footer dans un nouvel onglet. La réponse à votre besoin se trouve plutôt dans ce tuto : https://astucesdivi.com/ajouter-icones-footer-divi/
Vous pourrez ajouter un icône qui renvoi à votre forum. Le seul souci est que les icônes disponibles dans Divi ne sont que des icônes de réseaux sociaux.
Bonjour,
je me reponds a moi-meme puisque j’ai resolu mon probleme :
J’ai utilise la meme technique que pour les icones des reseaux sociaux en leur donnant une classe CSS :
/* renvoi de l’ouverture des icones bleues et des menus sur une nouvelle page */
jQuery(document).ready(function(){
jQuery(« .et-social-icon a »).attr(‘target’, ‘_blank’);
jQuery(« .amis a »).attr(‘target’, ‘_blank’);
jQuery(« .forum a »).attr(‘target’, ‘_blank’);
jQuery(« .blog a »).attr(‘target’, ‘_blank’);
jQuery(« .contact a »).attr(‘target’, ‘_blank’);
});
Merci du retour Jean Michel !
Merci Lycia, comme d’habitude le savoir est au rendez-vous !
Merci Jérôme 😉
Merci Lycia ! Adopté ! à tout hasard : Aurais tu une petite astuce pour faire de meme avec l’email que l’on peut ajouter à l’entête ? et faire en sorte que le numéro de telephone ajouté à l’entête puisse être appelé lorsque le site est consulté sur mobile en cliquant dessus ? J’ai essayé le code
( avec mailto: / tel: pour les liens)
dans les espaces réservés ( email / mobile) au niveau de la personnalisation du thème. mais ca ne colle pas . Merci pour tes précieux conseils !
Salut Sandrine, je pense qu’on peut faire cela avec un peu de code mais je n’ai jamais essayé. Je me demande si cette fonctionnalité ne serait pas disponible avec le plugin Divi Switch, du moins celle du téléphone… Regarde cet article : https://astucesdivi.com/divi-switch-plugin-multifonction/
Bonne journée.
Super article, j’ai pu insérer ce bout de code dans mon thème enfant, ça marche impeccable !
Merci à vous pour cette aide précieuse !
Par contre, aurez vous une solution afin d’ouvrir les boutons de « l’en tête plein écran » dans une nouvelle fenêtre ? j’ai bien coché « dans le même onglet » mais cela ne fonctionne pas …
Salut Julie, merci 😉
Pour le bouton de l’entête plein écran, je viens de vérifier et effectivement tu as raison : les deux options ouvrent le lien dans la même fenêtre. C’est un bug qui faudrait signaler au support de Divi. Ils pourraient le corriger lors de la prochaine mise à jour 😉
Bonjour Lycia
Lorsque je colle le code dans le fichier header.php de mon theme enfant j’ai le message d’erreur suivant : syntax error, unexpected ‘ Options du Thème > Intégration > Ajouter ligne de code à la de votre blog, fonctionne bien. Mais est-ce que le code sera conservé lors de la mise à jour du thème ?
Un grand merci pour votre aide.
Salut Sandra, si tu as une erreur, c’est que le code est mal collé ou qu’il en manque un bout… Mais effectivement, si l’option de passer par les options du thème > intégration fonctionne, tu n’auras pas de problème. Et oui, ce code sera conservé lors des mises à jour, c’est justement fait pour ça.
Donc tu ne crainds rien 😉
Merci Lycia pour ta réponse malgré que mon message soit quelque peu incompréhensible… ! Je pense qu’une partie a été tronqué lors de l’envoi 🙂
Deux tutos utilisés dans la même journée, merci encore Lycia et chapeau bas pour tes contenus très pédagogiques.
Merci Olivier 😉
Bonjour et d’avance merci votre blog m’aide très souvent !
Je cherche à faire le même procédé mais avec les icônes Linkedin du module Personne.
J’ai essayer d’adapter le code comme ceci :
jQuery(document).ready(function(){
jQuery(« .et-social-icon a »).attr(‘target’, ‘_blank’);
jQuery(« .et_pb_font_icon a »).attr(‘target’, ‘_blank’);
jQuery(« .et_pb_linkedin_icon a »).attr(‘target’, ‘_blank’);
});
Mais cela ne fonctionne pas. Avez-vous une idée de solution ?
Merci d’avance !
Salut Maud, je vais chercher…
Bonjour Lycia,
C’est bon j’ai trouvé la solution ! En fait le code précédent visait un cran trop haut. Voilà le code corrigé :
jQuery(document).ready(function(){
jQuery(« .et_pb_member_social_links a »).attr(‘target’, ‘_blank’);
});
Merci pour votre article qui m’a permis de trouvé la bonne piste !
Super Maud !
Merci pour le retour 😉
Merci pour vos astuces, je viendrais ici directement la prochaine fois… avant de m’arracher les cheveux !
Merci Virginie
C’est superbe c’est splendide, quel beau boulot!
Des lectures intéressantes et motivantes !
Merci Yanis 😉
Bonjour, Merci infiniment pour ce « bout de code », Bien cordialement, Alain Pons Photographe (utilisé pour mes 2 icones FB et Insta sur mon portail alain-pons.fr, 2 sites et une page portail créés par un novice total fin 2019 et 2020).
Super Alain 😉 !
Bonjour,
C’est exactement ce que je cherchais, mais cela ne fonctionne pas.
Je fais tout bien comme il faut, DIVI 4, mais l’ouverture de l’icone LinkedIn du footer continue de s’ouvrir dans la meme page….
Que puis-je faire ? Merci beaucoup
Tu devrais vérivier ton code, y’a pas de raison que ça marche pour l’un et pas pour l’autre 😉