Open Social Icons in a New Window/Tab – DIVI

Girish Dadlani — Wed, 09 Oct 2019 05:59:31 +0000

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

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.

Add Extra Text on your DIVI Top Header Before the Phone Number

Girish Dadlani — Tue, 10 Sep 2019 17:48:51 +0000

Lets add some extra text to the top header in DIVI. DIVI allows you add the phone number and Email using the theme customizer options in the top header. The Top header in DIVI is the one which sits above the primary menu bar. The secondary menu also shows up inside the top header. The image below shows the primary menu, secondary menu and the top header.

There is also an option for displaying your social media icons in the customizer. When the option to Show social media is checked in the header element in the DIVI Theme Customizer, the social icons also get displayed on the top header too.

Primary and Secondary Menu in DIVI

Prepend Text to the Top Header using jQuery

For this example I am going to add “Best DIVI Freelancer for your website!”. To do this we have to add a little bit of 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 Integration Tab DIVI

[sourcecode language=”javascript”]

[/sourcecode]

This will show your extra text on the top header, before the phone number as shown below.

Extra text – Top Header Divi

Lets Make this Text Clickable

Sometime you want the text to be clickable, if you were linking it to another page like a contact page. If you want to make the new text that you added Clickable then add the following jQuery. This will create an anchor link for your new extra text.