We all know that building a website that attracts and speaks to a particular audience is a process. Every action they take on your website matters because it’s part of their customer journey. Every visitor, and potential client, needs to feel personally approached and understood.
Getting your website on point requires a lot of things, like a good design, well-thought-out content and definitely enough CTAs that’ll push your visitors to take the actions both you and they want.
One of the most used elements that support calls to action on a website is a button. You can usually find buttons in various sections of a website. They can lead to different parts of the website or they can refer a visitor to an external website.
With Divi, we allow each person who’s creating a website to include their buttons wherever they want and how much they want. If you want to engage with your target audience in a fast way and if you want to trigger curiosity right from the start of their visit on your website, it’s a good thing to add a CTA in your hero section.
Why Should you Automatically Open a Link in a New Tab/Window?
We can’t influence having a link opened in a new window. It’s something that many people misused in the past, and now, it all depends on the preferences the user has. However, we do have the option to open a certain link in a new tab instead of in the same window. There are plenty of reasons why you would want to open a link in a new tab, here are some of them:
Not letting your visitors get away from the website
The moment you lose your visitors, it’s all that difficult to get them back on your website again. That’s usually the case when you send them to an external website within the same window when clicking on a button.
So, why send them away in the first place? By making buttons open in a new tab, you make sure that they still have a page open with your website in their tabs. They can get back to your page without having to go through their history.
Continuing their stay at your website after having closed the link they opened
It’s a natural thing to close a tab whenever you finish reading something. It’s either that, or you’re clicking away. In both situations, from the moment that they move on to a next action, they’re another step away from you.
Automatically opening the link in a new tab or window helps you remind people how they landed somewhere else in the first place; through your website.
Picking up on the open tab later on
You wouldn’t be the first person to have a bunch of tabs lined up next to each other for days. That’s exactly what makes it valuable to keep yours present in people’s browser. If visitors find your website in their open tabs after a few days, they might have had the time to let your content sink in and give it another round.
The odds are likely that the content will be much more understood when being read for a second, third or fourth time.
Get Started: Open Fullwidth Header & Slider Buttons in New Tab
When we’re not using a Fullwidth Section with a Fullwidth Header or Fullwidth Slider, we’re usually adding a standard section and adding Button Modules to it manually. In the Content tab of each Button Module, you can choose whether you want to open a link in the same window or a new tab. You can find this option in the Link subcategory of the Content tab.
In the Fullwidth Header & Slider, these possibilities are not included. And because the HTML is predefined, we cannot simply modify the HTML code that comes along with it. That’s why we’re going to add jQuery code that’ll make both the Fullwidth Header and Fullwidth Slider buttons open in a new tab/window.
Creating a Fullwidth Header
Let’s start by adding a new Fullwidth Section to an existing or a new page.
Within that Fullwidth Section, select the Fullwidth Header. The Fullwidth Header provides a website with a beautiful header that has everything it needs. Now, scroll down the Content tab of the Fullwidth header and write down the text you’d like to appear on the button. After that, add a link to the button as well.
Then, go to the Advanced tab of the Fullwidth header and scroll down until you come across the button fields. In this case, we only want to use button number one. Suppose you want to open the second button in a new tab, you’ll have to use the class that’s assigned to button two.
Click in the Button One field and watch the class appear in an orange font color. The class is ‘.et_pb_fullwidth_header_0 .header-content-container .header-content .et_pb_button_one.et_pb_button’. We’ll need this class in our jQuery code. If you want the second button to open in a new tab or window, go ahead and save that class somewhere.
Creating a Fullwidth Slider
If you want to add a Fullwidth Slider instead, go ahead and add a new Fullwidth Section. This time, place a Fullwidth Slider in the section. Write down the button text in the Content tab and move on to the Advanced tab.
Scroll down that tab until you find the Slide Button option. Copy the assigned class of the button that is part of the Fullwidth Slider.
Adding jQuery Code to Divi Theme Options
The code that we’ll be using to help open the links in a new tab for the Fullwidth Header & Slider are different. Besides that, we can also integrate the jQuery code into our website in two different ways. The most common one is adding code to the Theme Options of your Divi website.
The reason why people use this option most often is that because it’ll apply to the whole website. On whatever page of your site you might be, the code will apply. It’s the easiest way to add custom code to your website if you are reusing certain sections or elements in different pages of your website.
To add the code to your whole website, go to Divi > Theme Options > Integration and add the following code to the <head> of your website:
jQuery code for the Fullwidth Header button
<script>
jQuery(function($){
$('.et_pb_fullwidth_header_0 .header-content-container .header-content .et_pb_button_one.et_pb_button').attr('target', '_blank');
});
</script>
jQuery code for the Fullwidth Slider button
<script>
jQuery(function($){
$('.et_pb_slide_0.et_pb_slide .et_pb_container a.et_pb_more_button.et_pb_button').attr('target', '_blank');
});
</script>
Don’t forget to add the text between <script> tags as shown in the print screen above.
As you can notice, the code is slightly different for the Fullwidth Header and the Fullwidth Slider. You can notice how the class of each button is written between brackets in the third line of the code. So, suppose, you want to make the code apply to the second button of the Fullwidth Header, just replace the written class with the one that’s assigned to the second button.
After that, save the changes. The code will immediately apply on your whole website.
Adding jQuery Code to Code Module
Another possibility to add the code to your website is by using the Code Module. This Module is usually used when the code you want to include only applies to one page.
Open the page where you want to apply the changes and add a row with one column at the top of the page. After that, add a code module to that row.
Copy the same code and paste it into the Content Box within the Text subcategory of the Content tab.
jQuery code for the Fullwidth Header button
<script>
jQuery(function($){
$('.et_pb_fullwidth_header_0 .header-content-container .header-content .et_pb_button_one.et_pb_button').attr('target', '_blank');
});
</script>
jQuery code for the Fullwidth Slider button
<script>
jQuery(function($){
$('.et_pb_slide_0.et_pb_slide .et_pb_container a.et_pb_more_button.et_pb_button').attr('target', '_blank');
});
</script>
Save the changes.
Don’t forget to add the text between <script> tags as shown in the print screen above. The code will now apply to that page of the website only.
Final Thoughts
Adding the following code on your website is only necessary when you want a button to open in a new tab while using the Fullwidth Header & Slider in a Fullwidth Section. With the Button Module, you have an included option within the Divi Builder where you can choose to open a link in a new tab.
If you want to use the code in several pages of your website, add it to the Theme Options of your website. But if you’re only using the code for one Fullwidth Header or Fullwidth Slider, you might be better off by adding the code in a Code Module on that specific page.
How often do you make your links open in a new tab and why? Let us know in the comments section below!
The post How to Open Fullwidth Header & Slider Buttons in New Tab/Window appeared first on Elegant Themes Blog.
