如何在 Divi 中向頁面模板的任何角落添加可關閉的滑入式號召性用語

在您的網站上插入號召性用語是吸引訪問者註意的最不顯眼的方式之一。 大多數情況下，他們會簡單地忽略 CTA 或關閉它以繼續瀏覽頁面，但有時您會贏得他們的支持。 滑入式號召性用語非常適合宣傳登陸頁面上的任何內容。

在本教程中，我們將設計一個可關閉的滑入式號召性用語，可以使用 Divi Theme Builder 添加到頁面的任何角落。 完成後，您將能夠在頁面上的任何位置宣傳您的產品和特別優惠，而無需使用插件。

讓我們開始吧！

搶先看

以下是我們將添加到頁面模板所有四個角的四個滑入 CTA 的快速瀏覽。 當然，您不需要同時部署所有四個。 請注意如何通過單擊“x”圖標來關閉每個選項，然後您可以選擇通過單擊“加號”圖標將 CTA 切換回打開狀態。

免費下載滑入式號召性用語 Divi 頁面模板

要使用本教程中的頁面模板，您首先需要使用下面的按鈕下載它。 要訪問下載，您需要使用下面的表格訂閱我們的 Divi Daily 電子郵件列表。 作為新訂戶，您每週一將收到更多的 Divi 善良和免費的 Divi 佈局包！ 如果您已經在列表中，只需在下面輸入您的電子郵件地址，然後單擊下載。 您不會被“重新訂閱”或收到額外的電子郵件。

下載文件

免費下載

加入 Divi 時事通訊，我們將通過電子郵件向您發送一份最終的 Divi 登陸頁面佈局包，以及大量其他令人驚嘆的免費 Divi 資源、提示和技巧。 跟隨，您將很快成為 Divi 大師。 如果您已經訂閱，只需在下面輸入您的電子郵件地址，然後單擊下載即可訪問佈局包。

下載

您已成功訂閱。 請檢查您的電子郵件地址以確認您的訂閱並獲得免費的每週 Divi 佈局包！

要將佈局導入您的頁面，只需提取 zip 文件並使用 Theme Builder Portability 選項將 json 文件之一添加到 Divi Theme Builder 中。

讓我們進入教程好嗎？

你需要什麼開始

首先，您需要安裝並激活 Divi 主題。 確保您擁有最新版本的 Divi。

您還需要至少一個使用 Divi Builder 創建的頁面用於測試目的，以便將新模板分配給該頁面以顯示結果。

之後，您就可以開始了。

在 Divi 中為頁面模板的每個角落創建可關閉的滑入式號召性用語

創建新模板

從 WordPress 儀表板，導航到 Divi > Theme Builder。 然後單擊“添加新模板”框以創建新模板。

將模板分配給您希望顯示促銷欄的頁面。

在新模板上，單擊“添加自定義正文”區域，然後選擇“構建自定義正文”。

然後選擇“從頭開始構建”選項。

創建帖子內容部分

帖子內容部分是任何頁面模板的必要部分，以顯示頁面的實際內容或在 Divi 或 WordPress 中構建的帖子。 在創建我們的第一個幻燈片號召性用語之前，我們將把它添加到我們的模板中。

添加一列行

首先，在常規部分添加一列行。

添加帖子內容模塊

然後向該行添加一個帖子內容模塊。

行設置

之後，按如下方式更新行設置：

• 寬度：100%
• 最大寬度：100%
• 填充：0px 頂部，0px 底部

創建左上角的滑入式號召性用語

現在我們的帖子內容模塊已經就位，我們準備開始將我們的第一個幻燈片號召性用語添加到頁面模板的左上角。

添加部分

每個新的號召性用語都將創建一個全新的部分。 這將允許您添加設計號召性用語所需的任何佈局或模塊。

向模板佈局添加一個新的常規部分。

添加一列行

然後給這個部分一個一列的行。

部分設置

拖動（或移動）帖子內容部分上方的部分並更新部分設置，如下所示：

• 背景漸變左顏色：
• 背景漸變右顏色：
• 在圖像上方顯示漸變：是
• 背景圖片：[插入圖片]
• 寬度：320px
• 邊距：320px 左
• 填充：0px 頂部，0px 底部
• 動畫風格：幻燈片
• 動畫方向：右
• 動畫延遲：2000ms

然後跳過高級選項卡並添加以下 CSS 類和 Z 索引：

• CSS 類：slide-in-cta
• Z指數：999

並在主元素中添加以下自定義 CSS 片段：

position: fixed;
top: 80px;
left: -320px;

需要 CSS 類，以便我們稍後可以使用代碼定位該部分。 自定義 CSS 會將頁面模板左上角的部分定位在固定（或粘性）位置。 “left: -320px”位置應該將整個部分（320px 寬）移到瀏覽器窗口之外。 但是我們有 320px 的左邊距來讓它重新回到視野中。 以這種方式構建的原因是我們可以在單擊“x”圖標時打開和關閉邊距值。 這將導致 CTA 滑入和滑出視圖。

行設置

現在讓我們更新行設置，如下所示：

• 使用自定義裝訂線寬度：是
• 天溝寬度：1
• 寬度：100%
• 填充：0px 頂部，0px 底部

添加號召性用語模塊

在行內，添加一個 Call to Action Module。

號召性用語設置

然後更新號召性用語設置。

內容

• 標題：[輸入選擇的文本]
• 按鈕：[輸入選擇的文本]
• 正文：[輸入選擇的文本]
• 按鈕鏈接網址：[輸入實際網址或#]

接下來，刪除默認背景顏色以顯示我們之前添加的部分的背景。

設計設置（文本、按鈕和填充）

在設計選項卡下，更新以下內容：

• 標題字體：Lato
• 標題字體粗細：重
• 標題行高度：1.3em
• 正文字體：Lato
• 正文字體粗細：粗體
• 為按鈕使用自定義樣式：是
• 按鈕文字大小：15px
• 按鈕邊框寬度：0px
• 按鈕字母間距：1px
• 按鈕字體：Lato
• 按鈕字體重量：重
• 按鈕字體樣式：TT
• 按鈕填充：頂部 12 像素，底部 12 像素，左側 32 像素，右側 32 像素
• 填充：頂部 40 像素，底部 40 像素，左側 40 像素，右側 40 像素

使用 Blurb 模塊添加打開和關閉圖標

號召性用語完成後，我們需要創建用於打開和關閉滑入式號召性用語的圖標按鈕。 要創建它，請在號召性用語模塊下方添加一個模糊模塊。

模糊設置

更新以下設計設置。

內容

• 刪除默認標題和正文
• 使用圖標：是
• 圖標：加號（見截圖）

設計

• 圖標顏色：#000000
• 使用圖標字體大小：是
• 圖標字體大小：40px
• 寬度：40px
• 高度：40px
• 圓角：50%
• Transform 旋轉 Z 軸：135deg

高級設置

在高級選項卡下，添加以下 CSS 類：

• CSS 類：slide-in_target

然後將此自定義 CSS 添加到主元素。

position: absolute;
bottom: 0px;
right: -40px;

將以下自定義 CSS 添加到 Blurb 圖像。

margin-bottom: 0px;

結果

這是到目前為止的結果。

請記住，當單擊“x”圖標時，我們仍然需要添加一些代碼來添加關閉和打開功能。 我們將在模板的四個角中的每一個角中創建號召性用語後添加代碼。

創建右上角的滑入式號召性用語

創建第一個滑入式號召性用語後，我們可以通過複製已經構建的部分來加快創建其餘 CTA 的過程。 接下來，我們將為右上角創建一個滑入式號召性用語。

重複部分

部署線框視圖模式，然後復制左上角的 CTA 部分。

更新部分設置

然後按如下方式更新新的部分設置：

• 邊距：320px 右邊
• 動畫方向：左

然後通過將“左”替換為“右”來更新主元素中的自定義 CSS。 這是完整的片段：

position: fixed;
top: 80px;
right: -320px;

更新模糊模塊設置

然後打開模糊模塊設置並通過將“右”替換為“左”來更新主元素中的自定義 CSS 片段。 這是完整的片段：

position: absolute;
bottom: 0px;
left: -40px;

結果

現在，您將在頁面模板的右上角看到一個滑入式號召性用語。

創建左下角滑入式號召性用語

重複部分

要在頁面模板的左下角創建滑入式號召性用語，請複制頁面佈局頂部的左上角 CTA 部分。 將重複的部分標記為“左下角 CTA”，然後將其移動到帖子內容部分下方。

更新部分設置

然後打開部分設置，通過將“top: 80px”替換為“bottom: 0px”來更新主元素 CSS。 這是最後的片段：

position: fixed;
bottom: 0px;
left: -320px;

更新模糊模塊設置

然後通過將“bottom: 0px”替換為“top: 0px”來更新 Blurb 模塊的主要元素 CSS。 這是最後的片段：

position: absolute;
top: 0px;
right: -40px;

結果

現在查看實時頁面上左下角的滑入式號召性用語。

創建右下角的滑入式號召性用語

重複部分

要創建右下角的滑入號召性用語，請複制右上角的 CTA 部分並將復制的部分移動到帖子內容部分下方。

更新部分設置

打開部分設置並通過替換“top: 80px;”來更新主要元素CSS 與“底部：0px;”。 這是最後的片段：

position: absolute;
bottom: 0px;
right: -320px;

更新模糊模塊設置

然後打開模糊模塊設置並通過替換“bottom: 0px;”來更新主元素CSS 與“頂部：0px;”。 這是最後的片段：

position: absolute;
top: 0px;
right: -40px;

結果

現在查看實時頁面上右下角的滑入式號召性用語。

使用代碼模塊添加自定義 jQuery 和 CSS 代碼片段

對於最後一步，我們需要添加一些自定義 jQuery 和 CSS，以便我們可以為每個滑入式 CTA 獲取打開和關閉功能。

添加代碼模塊

將代碼模塊添加到佈局中的部分之一。

粘貼代碼

然後打開代碼設置，將以下代碼粘貼到代碼框中。

<style>
  .slide-in-cta, .slide-in_target, .slide-in-toggle-active {
    transition: all 400ms ease-in-out;
  } 
  .slide-in-toggle-active {
    margin: 0px 0px 0px 0px !important;
  }
   .slide-in-toggle-active .slide-in_target  {
    transform: none !important;
    background: rgba(0,0,0,0.2);
  }  
  .slide-in_target {
    cursor: pointer;
  }
</style>
<script>
(function($) {
  $(document).ready(function(){
    $('.slide-in_target').click(function(){
      $(event.target).closest('.slide-in-cta').toggleClass('slide-in-toggle-active'); 
    });    
  });
})( jQuery );   
</script>

最後的想法

使用 Divi，創建滑入式號召性用語一點也不難。 由於您可以使用主題構建器向頁面模板添加號召性用語，因此您可以更好地控制哪些頁面將顯示這些 CTA。 隨意增加 CTA 部分的動畫延遲，以便用戶在頁面加載後稍晚（或更早）看到 CTA 滑入動畫。 您還可以使用 Divi 線索並啟用拆分測試來提高這些 CTA 的轉化率，並找出哪個角落的轉化率最高。

我期待在評論中收到您的來信。

乾杯!