Mar 29, 2019 | Divi Resources

How to open social links in new tab in Divi and Extra theme

Divi and Extra theme has a feature to add social media icons on header and footer. A user can specify social media URLs from the Theme settings page and the respective icon appears on footer or header based on the display setting specified in the Customizer.

The social media icons links, however, open in the same window and thus a user navigates away from the website after clicking the social icons. In order to avoid a visitor dropout because of the Divi and Extra theme social icons opening in the same window, the code snippet provided below can be added to the section.

Divi and Extra both have the option to insert a script tag in website head which can be done from the theme options under the Integration tab and Add code to the < head > of your blog section. It can also be done by putting the code in header.php if a child theme is used.

Open social icon links in new window – Code snippet for Divi theme

The code snippet will be added as shown in the following image.

Open social icon links in new window – Code snippet for Extra theme

The code snippet will be added as shown in the following image.

Divi Social Icons in New Window

The above solution for Divi and Extra theme is tested to work and open social media links in new tab/window for header and footer. In order to create beautiful header and footer sections, you may want to check out our Divi 4 pack. It contains custom 12 Header layouts, 06 amazing Footer layouts, and 08 WooCommerce product page layouts.

Posted By:
Karan
Karan loves making web beautiful with his keen eyes toward design.

7 Comments

  1. surfzen

    Thanks so much for this! Worked perfectly in Extra theme!

    Reply
  2. Martin

    Exactly what I came for. Just integrated it in Divi, took 1 minute and works fine. Thanks a lot!

    Reply
    • Eno

      Please where did you add the code because it’s not working for me on Divi. I added the code in the header and also tried adding it in the body.

      Reply
      • Karan

        Add the code on header and “Enable header code”.

        Reply
  3. Eno

    I am using the People module in Divi and I need the socials to open in a new tab.

    Reply
    • Karan

      Hi Eno,

      Just replace the class name in the above code from “et-social-icon” to “et_pb_member_social_links”.

      Reply
  4. friendorfoley

    Thank you!

    Reply

Submit a Comment

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.

7 Comments

  1. surfzen

    Thanks so much for this! Worked perfectly in Extra theme!

    Reply
  2. Martin

    Exactly what I came for. Just integrated it in Divi, took 1 minute and works fine. Thanks a lot!

    Reply
    • Eno

      Please where did you add the code because it’s not working for me on Divi. I added the code in the header and also tried adding it in the body.

      Reply
      • Karan

        Add the code on header and “Enable header code”.

        Reply
  3. Eno

    I am using the People module in Divi and I need the socials to open in a new tab.

    Reply
    • Karan

      Hi Eno,

      Just replace the class name in the above code from “et-social-icon” to “et_pb_member_social_links”.

      Reply
  4. friendorfoley

    Thank you!

    Reply

Submit a Comment

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Build Divi Shop Amazingly With Divi Cart Pro in 2021 & Beyond

Build Divi Shop Amazingly With Divi Cart Pro in 2021 & Beyond

Building a Divi shop is amazing when you’ve got the right tool. And you don’t have to put extra work to make everything right for your customers as well as you —  the owner. You can use the Divi and WooCommerce to lay out the structure for your Divi store, but...

Fix WordPress Site Stuck in Maintenance Mode (3 Easy Ways)

Fix WordPress Site Stuck in Maintenance Mode (3 Easy Ways)

Is your WordPress site stuck in maintenance mode, and you aren’t able to find any way out? Then, in this tutorial, we’ll look into the issue and help you unstuck your website from maintenance mode. There will be no heavy lifting or anything hardcode related that might...

7 Tips & a Complete Guide to Design Perfect Website Header

7 Tips & a Complete Guide to Design Perfect Website Header

From recognizing a brand to navigate the website with ease, a visitor’s journey starts from the website header. And it continues up to an indefinite time whenever he visits the site -- to either explore, get the services, or read the blog and whatnot. The header of a...

Popular on Divi Extended

Divi Plus Divi Child Theme Divi Header Layouts