如何在 Divi 中為您的博客帖子添加滾動觸發彈出窗口

在您的博客文章中添加滾動觸發的彈出窗口似乎是一件非常明智的事情。 您之前在閱讀其他博客時可能已經看過它們。 當用戶滾動到帖子的某個點（通常是結尾）時，會突然出現一個包含一些號召性用語的框。 滾動觸發彈出窗口的全部目的是在您希望訪問者在頁面上看到它的確切時刻向訪問者呈現有針對性的號召性用語。 簡而言之，它是提高轉化率或獲得合格潛在客戶的絕佳工具。 因此，許多轉換提升插件（如我們自己的 Bloom 或 Optin Monster）允許您做同樣的事情。

在本教程中，我們將向您展示如何在沒有插件的情況下從頭開始向 Divi 中的博客文章添加滾動觸發的彈出窗口。 為此，我們將使用 Divi Theme Builder 設計一個彈出窗口，其中包含按類別顯示的相關帖子以及一個包含電子郵件選項的彈出窗口。 滾動觸發將使用一小段 jQuery 來完成。

讓我們開始吧！

搶先看

這是我們將要創建的滾動觸發彈出窗口的快速瀏覽。

我們將在彈出窗口中創建以顯示相關帖子（按類別），如下所示。

我們還將向您展示如何將電子郵件選項添加到彈出窗口以及此處所見。

免費下載滾動觸發彈出 Divi 帖子模板

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

下載文件

免費下載

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

下載

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

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

讓我們進入教程好嗎？

你需要什麼開始

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

您將需要下載第四個主題構建器包，因為我們將在本教程中使用該包中的預製帖子模板。

您還需要至少為測試目的創建一些博客帖子，以便帖子模板顯示結果。

之後，您就可以開始了。

在你的 Divi 博客文章末尾創建一個滾動觸發的彈出窗口

從第四個主題構建器包導入博客帖子模板

從 WordPress 儀表板，導航到 Divi > Theme Builder。 在主題構建器中，選擇頁面右上角的便攜性圖標。 在可移植性彈出窗口中，選擇導入選項卡，選擇 theme-builder-pack-4-post-template.json 文件並單擊導入按鈕。 （此導入文件將位於第四個主題生成器包文件夾中）

您還可以選擇將全局頁眉和頁腳作為靜態佈局導入的選項。

導入模板後，單擊圖標可編輯自定義正文區域。

這將帶您進入正文模板佈局編輯器，我們將在其中添加滾動觸發的彈出窗口。

按類別設計帶有相關帖子的滾動觸發彈出窗口

彈出窗口將包含在一個 Divi 行中。 因此，一旦我們獲得了彈出功能，您就可以用任何模塊填充該行以創建您想要的任何內容。 對於第一個示例，我們將創建一個按類別顯示相關帖子的彈出窗口。 這樣，當訪問者滾動到帖子底部時，他們會在彈出窗口中收到推薦給他們的相關帖子。

這是如何做到的。

添加一列行

首先在帖子模板佈局中包含帖子內容模塊的行下方添加一列行。

行設置

在添加模塊之前，按如下方式更新行設置：

• 背景顏色：#ffffff
• 天溝寬度：1
• 寬度：300px（桌面），200px（手機）
• 填充：頂部 20 像素，底部 0 像素
• 盒子陰影：見截圖

添加文本模塊

自定義行設置後，在行中添加文本模塊。 這將是我們相關帖子彈出窗口的標題區域。

內容

使用文本“相關帖子”更新正文內容。

設計

然後更新設計設置如下：

• 文字字體：Heebo
• 文字字體樣式：TT
• 文字文字顏色：#f94857
• 文本對齊：居中

添加博客模塊

在文本模塊下，添加一個博客模塊。

內容

由於我們只想展示一個相關帖子，因此我們將帖子計數限制為 1 並包括“當前類別”，以便彈出窗口中顯示的帖子將共享模板上顯示的實際帖子的相同類別。

更新以下內容：

• 帖子數：1
• 包含的類別：當前類別

元素

在元素選項組下，確保您選擇僅顯示特色圖像。 隱藏其他一切。

設計

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

• 標題字體：Heebo
• 標題字體粗細：超粗
• 標題文字大小：16px
• 標題行高度：1.4em
• 填充：頂部 5%，左側 5%，右側 5%

高級行設置

CSS 類、自定義 CSS 和 Z 索引

在高級選項卡下，我們需要給我們的行一個 CSS 類，一個小的自定義 CSS，並更新 z 索引，以便彈出窗口保持在頁面上的其他內容之上。

在前端使用可視化構建器時，此步驟將隱藏該行。 因此，最好在更新這些選項之前部署線框視圖。

進入線框視圖模式後，打開行設置備份並添加以下 CSS 類：

• CSS 類：後行

然後將以下自定義 css 添加到 Main Element：

position: fixed;
bottom: 0%;
right: -300px;

並更新 Z 索引：

• Z指數：999

添加分隔線作為滾動觸發點

此時，我們的彈出窗口已準備就緒。 現在我們需要決定在帖子模板上添加滾動觸發點的位置，這樣一旦用戶滾動到這些點，彈出窗口就會顯示或隱藏。 滾動觸發點將由具有 CSS 類的元素確定。 由於我們希望滾動觸發點位於帖子的底部，因此我們可以使用帶有 CSS 類的分隔線作為滾動觸發點元素。

添加滾動觸發點 #1

要添加我們的第一個滾動觸發點，讓我們直接在帖子內容模塊下添加一個分隔器模塊。

然後添加以下 CSS 類：

• CSS 類：post-waypoint

那很簡單。

添加滾動觸發點 #2

現在要添加第二個觸發點（將在頁面下方隱藏彈出窗口的那個），複製剛剛創建的分隔器模塊。

然後將其粘貼到帖子模板下方您希望關閉（或隱藏）彈出窗口的位置。 對於此示例，我將其添加到相關帖子博客模塊的正下方和帖子模板的評論部分的正上方。

使用代碼模塊添加自定義代碼

為了讓這個滾動觸發的彈出窗口工作，剩下要做的就是一些代碼。

繼續向帖子模板添加代碼模塊。

然後在代碼框中粘貼以下代碼：

<style>
  .post-row {
    transition: all .4s;
  }
  .post-row.show-post {
    right: 0px;
  }
</style>
<script>
  jQuery(document).ready(function($) {
    $('.post-waypoint').waypoint(function() {
        $('.post-row').toggleClass('show-post');
    }, {offset: '97%'});
  });
</script>

結果

要查看結果，請訪問您的一篇博文並向下滾動頁面。 當您到達帖子內容的底部時，您應該會看到相關的帖子彈出窗口。 繼續滾動以查看它隱藏在帖子的相關帖子部分之後。

將電子郵件選項添加到滾動觸發的彈出窗口

相關的帖子彈出窗口很酷，但也許您希望通過電子郵件選擇彈出窗口。 這很容易做到。 事實上，我們甚至可以使用已在此模板上的預製頁腳佈局中設計的電子郵件選項。

將頁腳電子郵件選項保存到 Divi 庫

保存您的佈局並退出到主題構建器。 然後單擊以編輯自定義頁腳模板佈局。

找到email optin模塊，保存到divi庫中。

將保存的電子郵件選項添加到彈出行

現在返回自定義正文模板佈局並將保存的電子郵件添加到您用作彈出窗口的同一行。 請記住，該行內的任何內容都將顯示為彈出內容。

由於您沒有使用 text 和 blog 模塊，您可以禁止在前端看到它們。

電子郵件選擇設置

一旦電子郵件選擇就位並且其他模塊被禁用，請按如下方式更新電子郵件選擇設置：

• 標題：“喜歡這篇文章？”
• 正文：“加入我們的時事通訊！”

然後添加以下填充：

• 填充：底部 5%，右側 20px

結果

現在在實時帖子上查看結果。

最後的想法

滾動觸發的彈出窗口絕對是您博客的寶貴資產。 它們提供了一種利用合格潛在客戶的不顯眼的方式。 使用相關的帖子彈出窗口讓他們參與您的網站，或使用電子郵件選擇來幫助擴大您的列表。 使用 Divi，您還可以添加幾乎任何您能想到的其他內容。 您可以準確決定何時希望訪問者看到那些非常強大的彈出窗口。 我希望你發現它對你自己的博客或下一個項目有用。

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

乾杯!