In this tutorial I will share the steps to open the social links on a new tab in the Divi theme.

This article is specifically about the social icons in default header and footer of the Divi theme. The code below will only open a new tab when you click on the links or icons in the header and footer. It will not affect any other icons on your website.

If you want to open social icons that are inside the person module in a new tab then please check the article open social links on a new tab in person module.

Now lets get started.

Add jQuery Code to Open Social Links In New Tab

To make the social icons open in a new tab you just have to add a single code snippet to your website.

Please go to your WordPress Dashboard > Theme Options > Integration > Add code to the < head > of your blog and then add the following code.

<script>
jQuery(function($) {
    $(document).ready(function() {
        $("#top-header li.et-social-icon a").attr("target", "_blank");
        $("footer li.et-social-icon a").attr("target", "_blank");
    });
});
</script>

That is it. Now when you click the social icons in the header or footer they will open in a new tab instead of opening in the same tab.

If you are having trouble figuring out where to add the code then please have a look at the screenshot below.

The 4th line of code opens the social links in the header on a new tab and the 5th line of code makes the links in the footer open in a new tab.

If for some reason you don’t want the icons in the footer or header open in a new tab then you can remove their respective line from the code snippet.

Next you can read another Divi Tutorial

1. How to add a Call To Action Button to Divi Menu
2. How to Remove White Space Below Footer in Divi Theme
3. How to create an Image Carousel in Divi

Leave a comment below if you found this helpful or have any questions. Don’t forget to subscribe to the Newsletter to receive the latest tutorials in your inbox.