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 of your website:

jQuery code for the Fullwidth Header button

jQuery code for the Fullwidth Slider button

Don’t forget to add the text between

jQuery code for the Fullwidth Slider button

Save the changes.

Don’t forget to add the text between


Please enter your comment!
Please enter your name here