如何在新選項卡/窗口中打開 Divi 全角標題和滑塊按鈕

已發表: 2017-06-06

我們都知道，建立一個吸引特定受眾並與之交談的網站是一個過程。他們在您的網站上採取的每一項操作都很重要，因為這是他們客戶旅程的一部分。每位訪客和潛在客戶都需要感到親近和理解。

使您的網站準確無誤需要很多東西，例如良好的設計、深思熟慮的內容和足夠多的 CTA，可以促使您的訪問者採取您和他們想要的行動。

在網站上支持號召性用語的最常用元素之一是按鈕。您通常可以在網站的各個部分找到按鈕。他們可能會導致該網站的不同部分或可以參考一個訪問者的外部網站。

使用 Divi，我們允許創建網站的每個人在他們想要的任何位置以及他們想要的位置包含他們的按鈕。如果您想快速與目標受眾互動，並且想從他們訪問您網站的一開始就激發他們的好奇心，那麼在您的英雄部分添加 CTA 是一件好事。

為什麼要在新標籤頁/窗口中自動打開鏈接？

我們無法影響在新窗口中打開鏈接。這是過去很多人濫用的東西，現在，這完全取決於用戶的偏好。但是，我們確實可以選擇在新選項卡中而不是在同一窗口中打開某個鏈接。您想在新標籤頁中打開鏈接的原因有很多，以下是其中一些：

不要讓您的訪問者離開網站

一旦您失去訪問者，就很難讓他們重新回到您的網站上。當您單擊按鈕將它們發送到同一窗口內的外部網站時，通常就是這種情況。

那麼，一開始為什麼要把他們送走呢？通過在新選項卡中打開按鈕，您可以確保他們的選項卡中仍然有一個頁面打開，其中包含您的網站。他們可以返回到您的頁面，而無需查看他們的歷史記錄。

在關閉他們打開的鏈接後繼續留在您的網站上

每當您閱讀完內容時，關閉標籤是很自然的事情。要么就是這樣，要么你點擊了。在這兩種情況下，從他們開始下一步行動的那一刻起，他們就離你又差了一步。

在新標籤頁或窗口中自動打開鏈接有助於提醒人們他們最初是如何到達其他地方的；通過您的網站。

稍後選擇打開的選項卡

您不會是第一個將一堆標籤並排排列數天的人。這正是讓您的內容出現在人們的瀏覽器中很有價值的原因。如果訪問者在幾天后在他們打開的標籤中找到您的網站，他們可能有時間讓您的內容沉入其中並再進行一輪。

很可能在第二次、第三次或第四次閱讀時，內容會更容易被理解。

入門：在新選項卡中打開全角標題和滑塊按鈕

當我們不使用帶有全角標題或全角滑塊的全角部分時，我們通常會添加一個標準部分並手動向其添加按鈕模塊。在每個按鈕模塊的內容選項卡中，您可以選擇是要在同一窗口中打開鏈接還是在新選項卡中打開鏈接。您可以在“內容”選項卡的“鏈接”子類別中找到此選項。

在全角標題和滑塊中，不包括這些可能性。而且因為 HTML 是預定義的，我們不能簡單地修改隨之而來的 HTML 代碼。這就是為什麼我們要添加 jQuery 代碼，使 Fullwidth Header 和 Fullwidth Slider 按鈕在新選項卡/窗口中打開。

創建全角標題

讓我們從向現有頁面或新頁面添加新的全角部分開始。

在該全角部分中，選擇全角標題。 Fullwidth Header 為網站提供了一個漂亮的標題，其中包含它需要的一切。現在，向下滾動 Fullwidth 標題的 Content 選項卡並寫下您希望在按鈕上顯示的文本。之後，還要添加指向該按鈕的鏈接。

然後，轉到全角標題的高級選項卡並向下滾動，直到遇到按鈕字段。在這種情況下，我們只想使用第一個按鈕。假設您想在新選項卡中打開第二個按鈕，您必須使用分配給第二個按鈕的類。

單擊 Button One 字段並觀察類以橙色字體顏色顯示。該類是“.et_pb_fullwidth_header_0 .header-content-container .header-content .et_pb_button_one.et_pb_button”。我們將在我們的 jQuery 代碼中需要這個類。如果您希望在新選項卡或窗口中打開第二個按鈕，請繼續將該類保存在某處。

創建全角滑塊

如果您想添加一個全角滑塊，請繼續添加一個新的全角部分。這一次，在該部分放置一個全角滑塊。記下“內容”選項卡中的按鈕文本，然後轉到“高級”選項卡。

向下滾動該選項卡，直到找到“滑動按鈕”選項。複製屬於全角滑塊的按鈕的指定類。

將 jQuery 代碼添加到 Divi 主題選項

我們將用於幫助在全角標題和滑塊的新選項卡中打開鏈接的代碼是不同的。除此之外，我們還可以通過兩種不同的方式將 jQuery 代碼集成到我們的網站中。最常見的一種是向 Divi 網站的主題選項添加代碼。

人們最常使用此選項的原因是因為它適用於整個網站。在您網站的任何頁面上，代碼都將適用。如果您在網站的不同頁面中重複使用某些部分或元素，這是向網站添加自定義代碼的最簡單方法。

要將代碼添加到您的整個網站，請轉到Divi > Theme Options > Integration 並將以下代碼添加到您網站的 <head> ：

全角標題按鈕的 jQuery 代碼

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

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

不要忘記在 <script> 標籤之間添加文本，如上面的打印屏幕所示。

如您所見，全寬標題和全寬滑塊的代碼略有不同。您可以在代碼的第三行注意到每個按鈕的類是如何寫在括號之間的。因此，假設您想讓代碼應用於全角標題的第二個按鈕，只需將寫入的類替換為分配給第二個按鈕的類。

之後，保存更改。該代碼將立即應用於您的整個網站。

將 jQuery 代碼添加到代碼模塊

將代碼添加到您的網站的另一種可能性是使用代碼模塊。當您要包含的代碼僅適用於一頁時，通常會使用此模塊。

打開要應用更改的頁面，然後在頁面頂部添加一行，其中包含一列。之後，將代碼模塊添加到該行。

複製相同的代碼並將其粘貼到內容選項卡的文本子類別中的內容框中。

全角標題按鈕的 jQuery 代碼

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

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

保存更改。

不要忘記在 <script> 標籤之間添加文本，如上面的打印屏幕所示。該代碼現在僅適用於該網站的該頁面。

最後的想法

僅當您希望在全角部分中使用全角標題和滑塊時在新選項卡中打開按鈕時，才需要在您的網站上添加以下代碼。使用按鈕模塊，您可以在 Divi Builder 中包含一個選項，您可以選擇在新選項卡中打開鏈接。

如果您想在網站的多個頁面中使用該代碼，請將其添加到您網站的主題選項中。但是，如果您只使用一個全寬標題或全寬滑塊的代碼，則最好將代碼添加到該特定頁面的代碼模塊中。

您多久在新標籤頁中打開鏈接，為什麼？ 在下面的評論部分讓我們知道！