Comment ouvrir les icônes du footer de Divi dans une nouvelle fenêtre du navigateur ?

Mis à jour le 28/11/2018 | Publié le 09/02/2018 | 17 commentaires

Le thème Divi nous propose, en option, de faire apparaitre les icônes sociaux en pied de chaque page, mais comment personnaliser cela ? Comment faire pour ouvrir les icônes du footer Divi dans une nouvelle fenêtre du navigateur ? En effet, les options d’affichage des icônes du footer de Divi sont basiques, ce thème ne nous laisse pas trop de choix : seulement 4 icônes à placer en bas à droite et qui s’ouvrent dans le même onglet du navigateur ! Pas de panique, dans cet article, nous allons voir qu’en deux ou trois clics, on peut modifier la fenêtre d’ouverture de nos liens en pied de page…

 

1 – Ouverture des icônes du footer de Divi : notion de Target _Self / Target _Blank

En HTML, la balise <a> permet d’ajouter un lien vers une nouvelle page web, que ce soit une page de votre site ou bien une page d’un site externe. La syntaxe est la suivante :

<a href="https://astucesdivi.com" target="_blank">Mon blog</a>

Le « href » étant la destination et le « target » étant le chemin à prendre pour y arriver… C’est pour cela qu’il existe différentes valeurs à ajouter à l’attribut « target » – toutes prises en compte par les navigateurs – mais nous ne retiendrons que les valeurs principales :

  • _blank : ouvre le lien dans une nouvelle fenêtre ou un nouvel onglet du navigateur
  • _self : ouvre le lien dans la fenêtre actuelle => c’est la valeur par défaut

 

Par défaut WorPress utilise le « target _self », peut-être que sans le savoir, vous modifiez cet attribut de vous même lorsque vous insérez un lien dans le corps de vos articles. C’est exactement ce qu’il se passe lorsque vous cochez la petite case en dessous de l’adresse de destination, regardez :

Ajouter un Target Blank dans un lien de WordPress

En cochant la petite case, vous ajoutez un « Target Blank » aux liens que vous insérez dans vos articles.

Toutefois, le thème Divi ne nous offre pas une telle option lorsque l’on renseigne les adresses de nos profils sociaux depuis l’onglet Divi > Option du Thème > Général, dommage…

 

2 – Comment permettre l’ouverture d’une nouvelle fenêtre au clic d’un icône dans le footer de Divi ?

Si vous utilisez déjà le thème Divi, vous avez certainement dû remarquer que les icônes situés dans le footer de votre site ou blog ne s’ouvraient pas en « target blank ».

Cela signifie que si un visiteur de votre site clique sur l’un des icônes situés en bas de chaque page, il quittera votre site pour aller vers l’un de vos profils sociaux. Cet internaute aura donc quitté votre site et ne reviendra peut-être pas dessus, c’est le « target self ».

Par contre, si vous aviez la possibilité de lui ouvrir vos profils sociaux dans une nouvelle fenêtre du navigateur, peut-être que cet internaute sera tenté de continuer la lecture de votre article ou bien la navigation sur votre site.

Pour remédier à cela, c’est très très simple ! Vous allez devoir ajouter un petit bout de code dans Divi qui permettra d’ouvrir vos profils sociaux dans une nouvelle fenêtre lorsque l’internaute cliquera dessus… Ce bout de code le voici :

<script type="text/javascript">
jQuery(document).ready(function(){
jQuery(".et-social-icon a").attr('target', '_blank');
});
</script>

 

3 – Où insérer le bout de code pour ouvrir les icônes du footer Divi dans une nouvelle fenêtre ?

Souvenez-vous, lors d’un dernier article, je vous avais expliqué que Divi permettait facilement l’insertion de code dans la section « Head » de votre site… C’est donc précisément à cet endroit que vous devrez ajouter ce petit script.

Rendez-vous alors à l’onglet Divi > Options du Thème > Intégration > Ajouter ligne de code à la < head > de votre blog

Bout de code à insérer pour ouvrir les icônes du footer Divi dans une nouvelle fenêtre

Bout de code à insérer dans l’onglet « intégration » des options de Divi pour ouvrir les icônes du footer Divi dans une nouvelle fenêtre

Autre solution également : si vous préférez intégrer cette fonction dans votre thème enfant directement, cela est également possible. Il vous suffira alors de dupliquer le fichier header.php dans votre thème enfant et d’y ajouter ce bout de code.

 

Pour aller plus loin…

Le fait d’ouvrir les icônes du footer Divi dans une nouvelle fenêtre est très important car cela facilite la navigation et l’expérience utilisateur de votre lecteur.

Si celui-ci est intéressé par votre article, il risque d’être agacé s’il est obligé de revenir dessus en cliquant sur les flèches « reculer d’une page » de son navigateur.

De plus, c’est super important pour vos statistiques internes : si le lecteur quitte votre site au bout de quelques secondes, sans même avoir visité une autre page, cela fait grimper votre taux de rebonds => ce n’est pas ce que vous recherchez, n’est-ce pas ?

 

Comment ouvrir en target-blank les icônes placés dans le footer de Divi

 

Divi tutorial : open icon footer in a new tab

Ça devrait vous plaire aussi :

Responsive Design Divi : comment gérer les différentes tailles d’écran ?

Responsive Design Divi : comment gérer les différentes tailles d’écran ?

Beaucoup d’utilisateurs se posent la question : comment optimiser le Responsive Design de Divi ? De nombreuses options sont disponibles nativement dans Divi pour améliorer le design sur vos divers écrans. Mais quelques fois, vous devrez aussi modifier les Medias Queries… Découvrez comment dans ce guide complet !

Créez un bouton « retour vers le haut » personnalisé en quelques clics !

Créez un bouton « retour vers le haut » personnalisé en quelques clics !

Quand je vous dis qu’on peut tout faire avec Divi ! Pas besoin de coder ou d’installer de nombreux plugins… Il suffit de savoir où chercher : les options sont là ! Dans cet article, je vous propose de découvrir comment créer un bouton « retour vers le haut » (back-to-top button) en seulement quelques clics !

17 Commentaires

  1. emmanuelle.audouard

    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!

  2. Lycia

    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 !

  3. Jean-Michel

    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 ?

  4. Lycia

    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.

  5. Jean-Michel

    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’);
    });

  6. Lycia Diaz

    Merci du retour Jean Michel !

  7. Jérôme

    Merci Lycia, comme d’habitude le savoir est au rendez-vous !

  8. Lycia Diaz

    Merci Jérôme 😉

  9. Sandrine

    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 !

  10. Lycia Diaz

    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.

  11. Julie

    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 …

  12. Lycia Diaz

    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 😉

  13. Sandra

    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.

  14. Lycia Diaz

    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 😉

  15. Sandra

    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 🙂

  16. Olivier.LM

    Deux tutos utilisés dans la même journée, merci encore Lycia et chapeau bas pour tes contenus très pédagogiques.

  17. Lycia Diaz

    Merci Olivier 😉

Soumettre un commentaire

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

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.

Pin It on Pinterest

Shares
Share This