如何在 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，您还可以添加几乎任何您能想到的其他内容。 您可以准确决定何时希望访问者看到那些非常强大的弹出窗口。 我希望你发现它对你自己的博客或下一个项目有用。

我期待在下面的评论中收到您的来信。

干杯!