October 25, 2020

How To Make Divi Fullwidth Header Buttons Open In A New Tab

What To Expect From This post:

1) The benefits of making your buttons open up in a new tab.

2) Where to add your code.

3) The code snippet that will make all your fullwidth header buttons open up in a new tab.

For other divi tutorials check out this page.

Benefits Of Making Your Buttons Open Up In A New Tab

The default settings for the Divi Fullwidth header buttons is that when a visitor clicks on the button, it will direct them to wherever the button’s link sends them.

This isn’t really a problem if the button directs them to another page on your website, for example, the shop page.

The problem arises when the button is directing them to another website, for example, your Facebook page… or any other website for that matter.

Unless your website’s sole purpose is to drive traffic to your social media pages, I am pretty sure that you would like to retain your visitors for as long as possible so that they can eventually end up using your services.

This is where opening a link in a new tab comes in handy because your website will remain open on your visitor’s device, for them to return to your site to carry on browsing through your content.

1) Navigate To:

In your WordPress side menu, navigate to the following:

Divi > Theme Options > Integration > Add code to the <head> of your blog.

This is where we are going to paste our code snippet.

2) Paste the following code

 For Button 1:

<script>
jQuery(function($){
$(‘.et_pb_fullwidth_header_0 .header-content-container .header-content .et_pb_button_one.et_pb_button’).attr(‘target’, ‘_blank’);
});
</script>

For Button 2:

<script>
jQuery(function($){
$(‘.et_pb_fullwidth_header_0 .header-content-container .header-content .et_pb_button_two.et_pb_button’).attr(‘target’, ‘_blank’);
});
</script>

 

3) Save

Don’t forget to click SAVE.

And that’s it!

Now you know how to make divi fullwidth header buttons open in a new tab.

 

Need A Website?

We specialize in designing highly professional websites for small to medium-sized businesses at an affordable cost.

Only pay us for the job once you are 100% satisfied with your new website.

We offer a lifetime after-sale support service for all of our customers.

Free Tutorials

For more useful Divi tutorials just like this one, go check out our Blog page where you’ll find a whole bunch of awesome goodies, to help make your website friggen AWESOME!

Newsletter

Subscribe to our newsletter if you would like to join our mailing list where you will receive things like specials, giveaways, and news. Don’t worry, we will NEVER send you any spam.

4 Comments

  1. Joanne

    This is so helpful thank you very much. I cant believe how quick n easy that was! Oh how I wish that I knew how to code

    Reply
    • ryan

      Hi Joanne, my pleasure!

      Reply
    • Kirsten

      Thanks for this info very easy to implement.

      Reply
      • ryan

        Ki Kirsten, its a pleasure! Im glad it helped

        Reply

Submit a Comment

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