Solution for Social Media Links in Divi 5 (Open in New Tab)

A Post from Randal Birkey about the Social Media Mudul Link

https://diviuniversity.com/portal/space/divi-community/post/social-media-module-links

It really got me thinking, and to be honest, I almost couldn't believe that something which worked perfectly in Divi 4 is now missing. So, I did some research...

Thank you so much for this post! Personally, I usually handle social media links at the very end of a project when the website is nearly finished. That’s exactly when I would have searched everywhere for this setting, eventually doubting myself and wondering if I was just too blind to find it. It would have cost a massive amount of time only to realize: this setting was simply overlooked.

Let’s be honest: Divi 5 was completely rebuilt on React, which was absolutely necessary and something we’ve all been waiting for. In such a massive transition, it’s understandable that these "little things" might get missed. This makes it even more important for all of us who need this feature to reach out to Elegant Themes via their support channel or chat. The more people mention it, the faster it will be implemented!

Until then, I’ve summarized the technical background and a working solution for you:

Why doesn't this work with CSS or Presets?

• CSS: Is only for design (colors, spacing). CSS cannot technically control a link's behavior (opening in a new tab).
• Presets: In Divi 5, presets store design attributes. Since the "Link Target" option is currently missing from the module’s core code, a preset cannot "force" this property.
• The Solution: We use a small snippet of JavaScript (jQuery) to tell the browser to open a new tab after the page has loaded.

Solution 1: Global for the entire Website

Use this code if you want all social media icons across your site to always open in a new tab.

Where: Divi > Theme Options > Integration > Add code to the < head >

html

<script type="text/javascript">
jQuery(document).ready(function($) {
    // Adds the target="_blank" attribute to all Social Media Module links
    $(".et_pb_social_media_follow_network a").attr('target', '_blank');
});
</script>

Even though this code is easy to understand and not complicated, you know what I always preach: Always create a backup and test in a staging environment first.

Solution 2: For a specific Module only

If you want to maintain control over which specific module opens in a new tab:

1. Assign a Class: Open the Module > Advanced > Attributes. Add an attribute: Name: class | Value: custom-social-tab.
2. Insert Code: (Either in Global Theme Options or a Code Module on the page):

html

<script type="text/javascript">
jQuery(document).ready(function($) {
    // Only affects modules with the class "custom-social-tab"
    $(".custom-social-tab .et_pb_social_media_follow_network a").attr('target', '_blank');
});
</script>

Even though this code is easy to understand and not complicated, you know what I always preach: Always create a backup and test in a staging environment first.

What happens if a user has JavaScript disabled?

In this rare case (approx. 1-2% of users), the link will still function perfectly, but it will open in the same tab. To inform these users, you can use this notice tag (only visible when JS is off):

html

<noscript>
  <div style="background-color: #ffcccc; color: #cc0000; padding: 15px; text-align: center; border: 1px solid #cc0000;">
    <strong>Note:</strong> JavaScript is disabled. To open links in new tabs automatically, please enable JavaScript in your browser settings.
  </div>
</noscript>

Even though this code is easy to understand and not complicated, you know what I always preach: Always create a backup and test in a staging environment first.

I hope this helps a few people until Elegant Themes officially brings this feature back!