🎁 Get Up To 70% Off and a Free Prize During Divi Black Friday Sale! Get Divi

Open Social Links in Person Module in a New Tab on Divi Theme

Blog, Divi Tutorial | 5 comments

In this quick tutorial I will share the steps to open the Social Media links in a New Tab for the Person Module in the Divi theme.

There is no option in the Person module settings to make the social media links open in a new tab when clicked. The only options present for link target are related to the Module Link and setting it to a New Tab has no effect on the Social Media icons that are present in the module.

The Social Icons in the Person module can be opened inside a new tab using some simple jQuery code.

Open Social Links in New Tab for All Person Modules

If you want to make the social links open in a New Tab on all the Person Modules on your website then all you need to is copy the code below and then paste it at your WordPress Dashboard > Theme Options > Integration > Add code to the < head > of your blog

<script>
jQuery(function($){
$(document).ready(function(){
$('.et_pb_team_member .et_pb_member_social_links a').attr('target',"_blank");
});
});
</script>

If you are having trouble finding the right place to add the code then here is screenshot to help you.

Divi Theme Options jquery

This code will make the links open in a new tab for all the Person modules on your website. However if for some reason you don’t want the code to affect all the Person Modules on your website then you can try the steps below.

Open Social Links in New Tab for Specific Person Modules

The first thing that you need to do is add a CSS Class to the Person Module. Go inside the Person Module Settings > Advanced > CSS ID & Classes > CSS Class and then add lwp-person-link as seen in the screenshot below.

This will help us target the specific person modules where you want to open the Social Links in a new tab.

Adding CSS Class to Person Module to Open Social Links in a New Tab

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

<script>
jQuery(function($) {
    $(document).ready(function() {
        $('.lwp-person-link .et_pb_member_social_links a').attr('target', "_blank");
    });
});
</script>

Make sure that you do not add both the code to the Integration tab. If you have the first code added then it will add make all person modules open the links in new tab. If you only want to make some Person modules open the link then you only need to add the code that is right above this text.

Next you can learn how to Open Fullwidth Header Buttons In a New Tab.

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

About the Author

The author of learnhowwp.com is a WordPress expert with over a decade of experience, specializing in Divi. Since 2014, they have built numerous WordPress sites and developed 8 Divi plugins with over 30,000 active installations. A former support team member at Elegant Themes, they launched learnhowwp.com in 2020 to share their in-depth knowledge of Divi. Now home to over 65+ articles dedicated to Divi tutorials and insights

5 Comments

  1. Heather

    Thank you!! You’re a life saver!

    Reply
  2. Libby

    Awesome – thanks so much!

    Reply
  3. Yıldırım Hakan Savcı

    Is there any way to change social media icons?

    Reply
  4. Segun Alalade

    Thanks for this code. I don’t know why this is not included in the module. The code works perfectly. Thanks once again.

    Reply
    • learnhowwp.com

      You are welcome. Glad to know it helped.

      Reply

Submit a Comment

Your email address will not be published. Required fields are marked *

Our Plugins Are Already Being Used On 30,000+ Amazing Websites.

We offer a 30 Day Money Back Guarantee on all plugins, so joining is Risk-Free!