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

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 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

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

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.

 

0 Comments

Submit a Comment

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

I would love to hear about how I can help your business website. I have specialized in using the DIVI theme from Elegant Themes since the past five years. If you would like to see the projects that I have completed as a DIVI Designer, please do have a look at my portfolio. Please contact me and I will get back to you immediately.

Share This