The Divi theme allows us, as an option, to display the social icons at the bottom of each page, but how to customize this? How do I open the Divi footer icons in a new browser window? Indeed, the options for displaying Divi's footer icons are basic, this theme doesn't leave us too many choices: only 4 icons to place at the bottom right and which open in the same tab of the browser! Don't panic, in this article, we will see that in two or three clicks, we can modify the opening window of our links at the bottom of the page...


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

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 get there... That's why there is different values to be added to the "target" attribute - all taken into account by browsers - but we will only retain the main values:

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


By default WorPress uses the "target _self", maybe without knowing it, you change this attribute by 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, look:

Ajouter un Target Blank dans un lien de WordPress

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

However, the Divi theme does not offer us such an option when we enter the addresses of our social profiles from the tab Divi > Theme Option > General, too bad...


2 - How to allow the opening of a new window when an icon clicks in Divi's footer?

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

This means that if a visitor to your site clicks on one of the icons at the bottom of each page, they will leave your site to go to one of your social profiles. This Internet user will have left your site and may not come back on it, it 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 remedy this, it's very, very simple! You will have to add a small piece of code in Divi that will allow you to open your social profiles in a new window when the user clicks on them... This piece of code is here:


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

Remember, in a last article, I explained to you that Divi easily allows you to insert code in the "Head" section of your site... It is precisely at this point that you will have to add this little script.

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

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

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

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


To go further....

Opening the Divi footer icons in a new window is very important because it facilitates navigation and the user experience of your player.

If he is interested in your article, he may be annoyed if he has to go back to it by clicking on the "back one page" arrows in his browser.

Moreover, it is very important for your internal statistics: if the reader leaves your site after a few seconds, without even having visited another page, it makes 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


Pin It on Pinterest

Share This