让我们开始吧！
抢先看
快速浏览一下我们将要创建的滚动触发的弹出窗口。
我们将在弹出窗口中创建以显示相关帖子（按类别），如下所示。
我们还将向您展示如何在弹出窗口中添加电子邮件选项以及在此处看到的内容。
要将布局导入页面，只需提取zip文件，然后使用Theme Builder Portability选项将json文件之一添加到Divi Theme Builder中。
让我们进入教程吧？
您需要开始什么
首先，您需要安装并激活Divi Theme。确保您具有最新版本的Divi。
您还将至少需要创建一些用于测试目的的博客帖子，以便帖子模板显示结果。
之后，您就可以开始了。
在Divi博客文章末尾创建滚动触发的弹出窗口
从第四个主题生成器包中导入博客文章模板
从WordPress仪表板，导航至Divi> Theme Builder。在主题构建器中，选择页面右上方的可移植性图标。在可移植性弹出窗口中，选择导入选项卡，选择theme-builder-pack-4-post-template.json文件，然后单击导入按钮。（此导入文件将在“第四个主题生成器包”文件夹中）
您也可以选择将全局页眉和页脚导入为静态布局的选项。
导入模板后，单击图标以编辑自定义正文区域。
这将带您到主体模板布局编辑器，在其中我们将添加滚动触发的弹出窗口。
按类别设计具有相关帖子的滚动触发的弹出窗口
弹出窗口将包含在Divi行中。因此，一旦我们有了弹出功能，就可以用任何模块填充该行，以创建所需的任何内容。对于第一个示例，我们将创建一个弹出窗口，其中包含按类别列出的相关帖子。这样，当访问者滚动到帖子的底部时，他们会在弹出窗口中获得建议的相关帖子。
这是操作方法。
添加一列行
首先，在帖子模板布局中的包含帖子内容模块的行的下方添加一个单列行。
行设置
在添加模块之前，请按如下所示更新行设置：
- 背景颜色：#ffffff
- 装订线宽度：1
- 宽度：300像素（桌面），200像素（电话）
- 填充：顶部20像素，底部0像素
- Box Shadow：查看屏幕截图
添加文本模块
自定义行设置后，将文本模块添加到该行。这将是我们相关帖子弹出窗口的标题区域。
内容
用文本“相关帖子”更新正文内容。
设计
然后，如下更新设计设置：
- 文字字体：Heebo
- 文字字型：TT
- 文字文字颜色：＃f94857
- 文字对齐方式：居中
添加博客模块
在文本模块下，添加博客模块。
内容
因为我们只希望显示一个相关的帖子，所以我们将帖子数限制为一个，并包含“当前类别”，以便在弹出窗口中显示的帖子将与模板上显示的实际帖子共享相同的类别。
更新以下内容：
- 帖子数：1
- 包括类别：当前类别
元素
在elements选项组下，确保选择仅显示特色图像。隐藏其他所有内容。
设计
在设计选项卡下，更新以下内容：
- 标题字体：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类：航路点
那很简单。
添加滚动触发点＃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>
结果
要查看结果，请访问您的博客文章之一并向下滚动页面。到达帖子内容的底部时，应该会看到相关的帖子弹出窗口。继续滚动以查看它隐藏在帖子的相关帖子部分之后。
将电子邮件选项添加到滚动触发的弹出窗口
相关的帖子弹出窗口很酷，但是也许您希望选择一个电子邮件弹出窗口。这很容易做到。实际上，我们甚至可以在此模板上使用已经在预制页脚布局中设计的电子邮件optin。
将页脚电子邮件优化保存到Divi库
保存您的布局并退出到主题生成器。然后单击以编辑自定义页脚模板布局。
找到电子邮件optin模块并将其保存到divi库。
将已保存的电子邮件优化添加到弹出行
现在，返回到自定义正文模板布局，并在弹出窗口所在的同一行中添加保存的电子邮件。请记住，该行内的所有内容都将显示为弹出内容。
由于您没有使用文本和博客模块，因此可以禁止在前端显示它们。
电子邮件优化设置
一旦电子邮件选择就位并且其他模块被禁用，请如下更新电子邮件选择设置：
- 标题：“喜欢这篇文章？”
- 正文：“加入我们的时事通讯！”
然后添加以下填充：
- 填充：底部5％，右侧20px
结果
现在在现场发布中查看结果。
