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.
worked like a breeze!
Worked for me
The snippet did not work for me, but does in vanilla JavaScript:
var links = document.querySelectorAll('.et-social-icon a'); for (var i = 0; i < links.length; ++i) { var item = links[i]; item.setAttribute('target', 'blank'); }still working
Works very good, thank you.
Just what I wanted. Worked perfectly.
Still working well with version 4.9.1. 🙂
Thanks for testing and letting everyone know!
Works well ! 🙂
I could not get it to work. I am not sure where to put the additional code, I tried this:
jQuery(document).ready(function($) {
jQuery(“.et-social-icon a”).attr(‘target’, ‘blank’);
}) jQuery(“a.et_pb_font_icon”).attr(‘target’, ‘blank’);;
Hi, please read our article about How to Add JavaScript and jQuery to Divi
: https://wpzone.co/tutorials/how-to-add-javascript-and-jquery-to-divi/
Im trying to put a rel=non-open on the social media button since lighthouse is complaining.. how would you do it:?
Try:
Works a charm
Yup still works awesome. Thanks!
Don’t know why Elegant doesn’t think this option is kinda important.
So many things in DIVI need code workarounds… kinda frustrating …
Very helpful, thank you so much!
Perfect, thanks!
Still working! very nice little code. Thank you.
Yes, this worked perfectly by integrating using the header area. Thank you!!
Works for me on the most current version of Divi!
This code does not work on my version of Divi (as of April 30 2020) but works with this adjustment:
jQuery(“a.et_pb_font_icon”).attr(‘target’, ‘blank’);