Open Social Links in New Tab

Last modified Oct 15, 2019
Difficulty Beginner
Language JavaScript

Watch Tutorial

Useful links

Divi Switch
Divi Space Membership

Transcript:

Hey everybody, David here from Divi Space. By default, when someone visiting your site clicks your social media icons in the header or footer, the links open in the same window. If a user clicks on an external link that doesn’t open in a new tab, once they close that tab they won’t be able to get back to your website.

Today I’m gonna show you how to automatically set them to open in a new tab so your website stays open in their browser. But before we start, you can also check our post that covers all three alternative ways to add javascript code to your website. Today I’m only going to cover one. Here we go!

Login to your WordPress dashboard. Hover over ‘Divi’ and click ‘Theme Options’. Select ‘Integrations’. Scroll down to ‘Add code to the < head > of your blog’ box and paste the code in the video description. Make sure you have Enabled header code above. Click save changes. Refresh the page and test it by clicking on the social icon. Awesome, it opens in the new tab!

And great news for our members, this feature is available in the Divi Switch plugin that is included in the membership plans meaning you can click a switch rather than paste a code. You can also get the Divi Switch plugin as a standalone purchase. Once the Divi Switch is installed on your website, head over to the Divi Switch settings in your Divi Theme and enable the switch “Open Social Links In New Tab” and it will automatically set social icons to open in a new tab. Simple, right? Thanks for watching the video. We’ll see you in the next tutorial.

Does this snippet (still) work?

Please let us know if everything worked as expected. We have tested this code with the Version: 3.29.3 of the Divi Theme.
If you think this code saved you time, we will be happy to receive a comment! 🙂

Subscribe to our youtube channel because there’s more to come!

____

License: This snippet contains code from the Divi Theme, copyright https://elegantthemes.com, modified by Divi Space, September 2019. Licensed under the GNU General Public License, no warranty; click here for details.

JavaScript

<!-- make social icons click to call -->
<script type="text/javascript">
jQuery(document).ready(function($) {
jQuery(".et-social-icon a").attr('target', 'blank');
});
</script>

 

Your Comments

Submit a Comment

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

Receive notifications about our new blog posts.

Before You Start

Build a Child Theme

Child themes are incredibly important for the overall look, feel, and navigation of your website, so we encourage you to take the time to get to know the content. This will help your web design and development processes tremendously. That’s why we’ve made it super easy to build a child theme for Divi or Extra in seconds!

Generate Child Theme

How to Add Java Script and jQuery to Divi

There are four ways you can add JavaScript or jQuery to a Divi website: use the code module, the Divi Theme Options console, enqueue scripts using the functions.php file, or using a plugin.

Read More

How to Add CSS to Divi

Divi users can choose between five different methods to add custom CSS to their websites. Read more about these various methods you can use to add custom CSS to your Divi theme, as well as better understand the pros and cons of each method.

Read More