How do I open Divi footer icons in a new browser window?

Updated on 28/11/2018 | Published on 09/02/2018 | 27 comments

The Divi theme offers us the option of having the social icons appear in the footer of each page, but how can we customize this? How do I open the Divi footer icons in a new browser window? Indeed, the display options of the Divi footer icons are basic, this theme doesn't leave us too much choice: only 4 icons to place at the bottom right and which open in the same browser tab! Don't panic, in this article, we'll see that in two or three clicks, we can change the opening window of our footer links...

 

1 - Opening the Divi footer icons: Target _Self / Target _Blank concept

In HTML, the tag allows you to add a link to a new web page, whether it is a page on your site or a page on an external site. The syntax is as follows:

Mon blog

The "href" being the destination and the "target " being the path to take to get there... That's why there is different values to add to the "target" attribute - all taken into account by the browsers - but we will retain only the main values:

  • _blank : opens the link in a new browser window or tab
  • _self : opens the link in the current window => this is the default value

 

By default WorPress uses the "target _self", perhaps without knowing it, you modify this attribute yourself when you insert a link in the body of your articles. This is exactly what happens when you check the little box below the destination address, see :

Ajouter un Target Blank dans un lien de WordPress

By checking the little box, you add a "Target Blank" to the links you insert in your articles.

However, the Divi theme doesn't offer such an option when we fill in our social profile addresses from the Divi > Theme Option > GeneralToo bad...

 

2 - How can I open a new window when I click an icon in the Divi footer?

If you are already using the Divi theme, you may have noticed that the icons in the footer of your site or blog do not open in "target blank"..

This means that if a visitor to your site clicks on one of the icons at the bottom of each page, he will leave your site and go to one of your social profiles. This visitor will have left your site and may not come back to it, this is the "target self"..

On the other hand, if you had the possibility to open your social profiles in a new browser window, perhaps this user will be tempted to continue reading your article or browsing your site.

To fix this, it's very very simple! You'll have to add a small piece of code in Divi that will open your social profiles in a new window when the user clicks on them... This piece of code is as follows:


 

3 - Where to insert the code to open the Divi footer icons in a new window?

Remember, in a previous article, I explained that Divi allows you to easily insert code in the "Head" section of your site... This is precisely where you should add this little script.

Then go to the Divi > Theme Options > Integration > Add line of code to the < head > of your blog

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

Code snippet to insert in the Divi options "integration" tab to open the Divi footer icons in a new window

Alternatively, if you prefer to integrate this feature directly into your child theme, this is also possible. All you have to do is duplicate the header.php file in your child theme and add this piece of code.

 

To go further...

Opening Divi footer icons in a new window is very important because it makes it easier for your player to navigate and enjoy the user experience.

If they are interested in your article, they may be annoyed if they have to go back to it by clicking on the "go back one page" arrows in their browser.

Moreover, it is super important for your internal statistics: if the reader leaves your site after a few seconds, without even having visited another page, it increases your bounce rate => that's not what you're looking for, is it?

 

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

 

Divi tutorial : open icon footer in a new tab

783 words

3

You should like it too:

Appliquer des masques et des formes sur vos images avec Divi

Apply masks and shapes to your images with Divi

Masks make your images look more graphic and give your layout an original look. Did you know that you can easily create them using the Divi Visual Builder? I show you how in this tutorial and in this video.

27 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 😉

  18. Maud

    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 !

  19. Lycia Diaz

    Salut Maud, je vais chercher…

  20. Maud Colly

    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 !

  21. Lycia Diaz

    Super Maud !
    Merci pour le retour 😉

  22. Virginie SASSERANT

    Merci pour vos astuces, je viendrais ici directement la prochaine fois… avant de m’arracher les cheveux !

  23. Lycia Diaz

    Merci Virginie

  24. Yanis Roux

    C’est superbe c’est splendide, quel beau boulot!
    Des lectures intéressantes et motivantes !

  25. Lycia Diaz

    Merci Yanis 😉

  26. Alain Pons

    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).

  27. Lycia Diaz

    Super Alain 😉 !

Soumettre un commentaire

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

Je souhaite recevoir les news du blog Astuces Divi !

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