In this quick tip we will learn how to open the DIVI social icons in a new window/tab. By default the social icons will open on the same browser page, and that will take away the user from your website. To prevent that we will add a little bit of jQuery in DIVI to make sure that our social icons open in a new tab.
Social Icons are found in two places, depending on what options you choose in DIVI.
Which Social Icons will Show Up?
This depends on which social icons you choose in your DIVI Theme Options. as shown below. To select which social icons show up, navigate to your DIVI –> Theme Options –> General Tab and pick the social icons you want to display.
Which Social Icons to Display – DIVI
Where to Display the Social Icons?
There are two locations you can choose to display your social icons: The Secondary Menu/Top Header or Bottom Bar/Footer.
Display Social Icons on Secondary Menu/Top Header
To display social icons on your Secondary Menu/Top Header, make sure you have the “SHOW SOCIAL ICONS” checked in your Header elements. You can do this by navigating to
DIVI –> Theme Customizer –-> Header & Navigation –-> Header Elements –> SHOW SOCIAL ICONS
Display Social Icons on Secondary Menu – DIVI
Display Social icons on DIVI Bottom Bar/Footer
To display social icons on your Bottom Bar in your footer, make sure you have the “SHOW SOCIAL ICONS” checked in your Footer elements. You can do this by navigating to
DIVI – Theme Customizer – > Footer –> Footer Elements –> SHOW SOCIAL ICONS
Display Social Icons on Bottom Bar – DIVI
Open Social Icons in a New Tab using jQuery
To add the jQuery, go to DIVI- Theme Options – Integration Tab and look for “Add code to the < head > of your blog” as shown below. Add the following jQuery in that box.
Add jQuery to Open Social Icons in New Tab – DIVI
<script type=”text/javascript”>
jQuery(document).ready(function(){
jQuery(“.et-social-icon a”).attr(‘target’, ‘_blank’);
});
</script>
Save your changes. This will open your social icons – both on secondary menu and footer in a new tab.
I hope this is helpful and you get a chance to use it on your site. Do leave me a comment if you use this tip on your DIVI website. For more such tips on WordPress and DIVI, check out my DIVI Blog. If you like to hire me for designing or editing your DIVI website, send me a message on my contact page.
I would love to hear about how I can help you with your business website. I have a Masters in Computer Science from Pace University, New York. Having worked in the software industry for many years, I am now freelancing and have specialized in using the DIVI theme from Elegant Themes, since the past eight years. Do have a look at my portfolio to view my other completed projects. Feel free to contact me and I will get back to you immediately.
0 Comments