🎁 Get Up To 70% Off and a Free Prize During Divi Black Friday Sale! Get Divi

How To Open Buttons In a New Tab In The Divi Fullwidth Header

Blog, Divi Tutorial | 6 comments

In this tutorial I will show you how to make the buttons in the Fullwidth Header module open inside a new tab.

The Fullwidth header is a good way to add full page headers on your pages. But the button settings lack the option of opening them in a new tab by default. The New Tab option in the Module Link Target only works on the Module link. It does not affect the buttons.

However it is pretty simple to make the buttons in new tab using some simple jQuery code.

1. Add CSS Class to the Fullwidth Header Settings

The first thing you need to do is add a CSS Class to the Fullwidth Header Module so that we can catch it separately and not affect all the Fullwidth Header modules on your website.

Open the Fullwidth Header Settings > Advanced > CSS ID & Classes > CSS Class and then enter lwp-header-link.

If you are not sure where to add it then please have a look at the screenshot below.

Fullwidth Header CSS Class to open buttons in new tab

2(a). Add jQuery to Open Buttons In New Tab In Theme Options

Divi Theme Options jquery code to open fullwidth header buttons in new tab

Next go to your WordPress Dashboard > Theme Options > Integration > Add code to the < head > of your blog and add the code below inside it.

<script>
jQuery(function($) {
    $(document).ready(function() {
        $(".lwp-header-link .et_pb_button").attr("target", "_blank");
    });
});
</script>

That’s it. If you click on the buttons now they should open in a new tab.

2(b). Only Open One Button In New Tab In The Fullwidth Header

The code above will make both buttons open on a New Tab but what if you want to make only one of the buttons open in a new tab in the header.

The first step is the same you need to add the class lwp-header-link in the Module Settings.

However to make only one button open on the new tab add the following code in your Theme Options > Integration > Add code to the < head > of your blog area.

<script>
jQuery(function($) {
    $(document).ready(function() {
        $(".lwp-header-link .et_pb_button_one").attr("target", "_blank"); //Open Button One In New Tab
        $(".lwp-header-link .et_pb_button_two").attr("target", "_blank"); //Open Button Two In New Tab
    });
});
</script>

This code also does the same thing for now. Opens both the buttons in a new tab but the code for each button is on a separate line.

If you only want to open Button One on a New Tab then you can remove the line of code for Button Two. And if you only to open Button Two in a New Tab then you can remove the line for Button One.

Next you can learn how to Open Social Links in the Person Module on a New Tab.

Leave a comment below if you have any questions. Don’t forget to subscribe to the Newsletter to receive the latest tutorials in your inbox.

About the Author

The author of learnhowwp.com is a WordPress expert with over a decade of experience, specializing in Divi. Since 2014, they have built numerous WordPress sites and developed 8 Divi plugins with over 30,000 active installations. A former support team member at Elegant Themes, they launched learnhowwp.com in 2020 to share their in-depth knowledge of Divi. Now home to over 65+ articles dedicated to Divi tutorials and insights

6 Comments

  1. Robin Changarathil

    Thank you. This was so helpful!!

    Reply
  2. Jan

    Thank you! Works perfectly

    Reply
    • learnhowwp.com

      You are welcome Jan.

      Reply
  3. C. Smith

    Thanks so much – this worked for me too.

    Reply
  4. Bruno Cover

    I am sorry… This is good: thanks a lot. Best regards

    Reply
  5. Kalpana

    Thank you.. This is actually working..

    Reply

Submit a Comment

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

Our Plugins Are Already Being Used On 30,000+ Amazing Websites.

We offer a 30 Day Money Back Guarantee on all plugins, so joining is Risk-Free!