We know that designing a website is an art. Above all, when it comes to balancing the design with the user experience and the objectives that we set ourselves to achieve with each page. We have to achieve the combination of a striking design that also allows the intuitive operation of the page, optimize the functions to the maximum and try to achieve the minimum of page abandonments.

The buttons are fundamental in a web, and the call-to-action buttons in the full-width header or the slider are very useful to direct the user to an action that we need the user to execute in order to bring it closer to the conversions we desire. For example, you can offer your best promotions or products to get the user’s attention and access a page where they can buy them.
In Divi it’s possible to activate call to action buttons in full-width headers and sliders, so today we are going to learn how to do them.

What are the advantages of opening the call-to-action buttons in another tab or window?

Since the use and navigation on the website depends largely on the user’s tastes and also, thanks to the pop-up windows we generate a certain aversion to the windows that open automatically (thanks, pop-ups with advertising), design a website with these characteristics must be a very well thought mission.

Visitors don’t leave your page

When a user clicks on a button on your website and the link opens on another page, they stay on your website without leaving the page they were seeing at the start. It is difficult to recover a user who leaves the page, so we don’t recommend that external links on your website open in the same tab or window but in a different one, and they should not use the browser’s history to return to your page.

They remain on your website, even when they close the window or tab that they opened

Does it happen that when you finish reading a tab you close it immediately or go to another website? It’s something normal that a great majority of users do, and what we want is for them to stay as much as possible on the web. Open the links in another tab or window remind them that they were on your page and why they were there, so it increases the chances of them continuing to navigate in it and, therefore, to achieve conversions.

Another aspect of this, is that there are people who leave the tabs open for days, and when they count them to verify which they are going to close, they can find your content and return to consume it or make the decision to buy, for example.

How to open the header or slider buttons in a new tab?

If you’re not occupying the full-width section with a full-width header or slider as well, you can add a standard section by adding module buttons and selecting Open in another tab in the Content > Link tab.

Achieving the same if we are using a header and full-width slider is not so easy, so today we will use a little jQuery. Let’s start!

Create the full-width header

First we must create a section of full width to the page. At the bottom of the Content tab, you will see what Button # 1 text field, there you must write the text you want the button to be on and then add the link to which the button will be taken. If you want to use two buttons, you must perform the same procedure but adding the information in the field of Button # 2.

In the Advanced tab of the full width header you will see, scrolling down, the fields of Buttons. When you click on the field of button # 1, the class will appear in orange on the side, but we need this class in jQuery, so copy the class you see in orange because we will need it later.

Create the full-width slider

If instead of a full-width header you want a slider, create a full-width section and place a slider of the same width on it. As in the header, you will need to write the text and the link that the button should have and go to the Advanced tab.
Copy the class you will see in the button field to a notebook.

Add the jQuery code to the Divi theme options

The code that will allow to click on the button to open a page in another window or tab is different from the one we just copied. The easiest and most common way to integrate the jQuery code is by adding it to the Divi theme options, as it applies to the entire web page. No matter which page of your website you are on, the link of the button will open in another window or tab. To achieve this we just mentioned we can achieve it with the following route:

1. Divi
2. theme options
3. Integration
4. Add the following code to the <head> of your web page. Remember that it should always be between the <script> tags. The class of each code is slightly different. If you use a second button, replace button_one with the class assigned to the second button.
5. Save the changes!

If you are using the full-width header, use this jQuery code

 <script>

jQuery (function ($) {

$ ('. et_pb_fullwidth_header_0 .header-content-container .header-content .et_pb_button_one.et_pb_button'). attr ('target', '_blank');

});

</ script>

If you are using the full-width slider, use this jQuery code

 <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>

If you want the code to apply to only one page…

Open the page where you want to apply the changes and add a row with a column at the top of the page. Then, add a code module. Copy the same code and paste it into the content box within the subcategory of the Content tab. Do not forget to add the text inside tags <script> and save the changes.

If you are using button in a full width header add this jQuery code

 <script>

jQuery (function ($) {

$ ('. et_pb_fullwidth_header_0 .header-content-container .header-content .et_pb_button_one.et_pb_button'). attr ('target', '_blank');

});

</ script>

If you are using button in a full width header add this jQuery code

 <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>

Do you enjoy using this method for the buttons on your website? Tell us!