Open Buttons In a New Tab In The Divi Fullwidth Header

Introduction

If you’re using the Divi Fullwidth Header Module, may you have facing issue about button settings do not include an option to open links in a new tab. While the Module Link Target setting can open the module’s primary link in a new tab, without affect the buttons.

In this tutorial, I’ll show you how to open buttons in a new tab in the Divi Fullwidth Header using below jQuery code.

Step 1: Add a Simple CSS Class to the Fullwidth Header Module

To ensure that only specific Fullwidth Header modules are affected by this change, we need to add a CSS class to the module.

How to Add a CSS Class:

Open the Fullwidth Header Module Settings.
Navigate to Advanced > CSS ID & Classes.
In the CSS Class field, enter:
```
tds-header-btn
```

This class will help target the buttons inside this module without affecting others on your website.

Step 2: Add jQuery to Open Buttons in a New Tab

Since Divi does not provide a built-in setting for opening buttons in a new tab, we will add a small jQuery snippet to achieve this.

Adding jQuery Code to Theme Options:

Go to WordPress Dashboard > Divi > Theme Options.
Click on the Integration tab.
Locate Add code to the <head> of your blog.
Paste the following jQuery code inside it:

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

Explanation:

This script finds all buttons inside a Fullwidth Header Module with the class tds-header-btn and adds target="_blank" to open them in a new tab.

Step 3: Open Only One Button in a New Tab (Optional)

By default, the code above applies to all buttons inside the Fullwidth Header Module. If you only want one button to open in a new tab, use the following approach:

Follow Step 1 to add the class tds-header-btn to the module.
Replace the previous jQuery snippet with this one:

<script>
jQuery(function($) {
    $(document).ready(function() {
        $(".tds-header-btn .et_pb_button_one").attr("target", "_blank"); // Open Button One in New Tab
        // $(".tds-header-btn .et_pb_button_two").attr("target", "_blank"); // Uncomment to open Button Two in a New Tab
    });
});
</script>

Customization:

To open only Button One, keep the first line and remove the second line.
To open only Button Two, uncomment the second line and remove the first.

Conclusion

With this simple jQuery trick, you can easily open buttons in a new tab in the Divi Fullwidth Header Module. Whether you want both buttons or just one to open in a new tab, this method gives you full control.