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:
$(‘.et_pb_fullwidth_header_0 .header-content-container .header-content .et_pb_button_one.et_pb_button’).attr(‘target’, ‘_blank’);
For Button 2:
$(‘.et_pb_fullwidth_header_0 .header-content-container .header-content .et_pb_button_two.et_pb_button’).attr(‘target’, ‘_blank’);
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.