WordPress divi主题

如何在 Divi 中为您的博客文章添加滚动触发弹出窗口

by | May 7, 2022 | Divi主题使用教程 | 0 comments

5分钟生成10篇英文软文article forge软件试用

在您的博客文章中添加滚动触发弹出窗口似乎是一件非常聪明的事情。 在阅读其他博客时,您可能已经看过它们。 当用户滚动到帖子的某个点(通常是结尾)时,会突然出现一个包含一些号召性用语的框。 滚动触发弹出窗口的全部目的是在您希望他们在页面上看到它的确切时刻向访问者展示有针对性的号召性用语。 简而言之,它是提高转化率或获得合格潜在客户的绝佳工具。 正因为如此,许多促进转化的插件(比如我们自己的 Bloom 或 Optin Monster)允许你做同样的事情。

google广告开户

在本教程中,我们将向您展示如何在没有插件的情况下从头开始在 Divi 中为您的博客文章添加滚动触发弹出窗口。 为此,我们将使用 Divi Theme Builder 设计一个弹出窗口,其中包含按类别的相关帖子,以及一个包含电子邮件选项的弹出窗口。 滚动触发将使用一小段 jQuery 来完成。

让我们开始吧!

抢先看

下面是我们将要创建的滚动触发弹出窗口的快速浏览。

我们将在弹出窗口中创建以显示相关帖子(按类别),如下所示。

滚动触发的弹出窗口

滚动触发的弹出窗口

我们还将向您展示如何在弹出窗口中添加电子邮件选项以及在此处看到的。

滚动触发的弹出窗口

滚动触发的弹出窗口

WordPress divi主题

免费下载 Scroll Triggered Popup Divi Post 模板

要掌握本教程中的帖子模板,您首先需要使用下面的按钮下载它。 要访问下载,您需要使用下面的表格订阅我们的 Divi Daily 电子邮件列表。 作为新订阅者,您将在每周一收到更多 Divi 福利和免费的 Divi Layout 包! 如果您已经在列表中,只需在下面输入您的电子邮件地址,然后单击下载。 您不会被“重新订阅”或收到额外的电子邮件。

要将布局导入您的页面,只需提取 zip 文件并使用 Theme Builder Portability 选项将其中一个 json 文件添加到 Divi Theme Builder 中。

让我们来看看教程好吗?

你需要什么开始

首先,您需要安装并激活 Divi 主题。 确保您拥有最新版本的 Divi。

您将需要下载第四个主题构建器包,因为我们将在本教程中使用该包中的预制帖子模板。

您还需要至少创建一些用于测试目的的博客文章,以便文章模板显示结果。

之后,您就可以出发了。

在 Divi 博客文章的末尾创建一个滚动触发的弹出窗口

从第四个主题构建器包导入博客文章模板

从 WordPress 仪表板,导航到 Divi > Theme Builder。 在主题构建器中,选择页面右上角的可移植性图标。 在可移植性弹出窗口中,选择导入选项卡,选择 theme-builder-pack-4-post-template.json 文件并单击导入按钮。 (此导入文件将位于第四个主题生成器包文件夹中)

滚动触发的弹出窗口

您还可以选择将全局页眉和页脚导入为静态布局的选项。

fiverr建站WordPress程序员

滚动触发的弹出窗口

导入模板后,单击图标编辑自定义正文区域。

滚动触发的弹出窗口

这将带您进入正文模板布局编辑器,我们将在其中添加滚动触发的弹出窗口。

按类别设计带有相关帖子的滚动触发弹出窗口

弹出窗口将包含在 Divi 行中。 因此,一旦我们获得了弹出功能,您就可以使用任何模块填充该行以创建您想要的任何内容。 对于第一个示例,我们将创建一个按类别显示相关帖子的弹出窗口。 这样,当访问者滚动到帖子底部时,他们会在弹出窗口中获得推荐给他们的相关帖子。

独立站选品工具

这是如何做到的。

添加一列行

首先在帖子模板布局中包含帖子内容模块的行下方添加一列行。

滚动触发的弹出窗口

行设置

在添加模块之前,更新行设置如下:

  • 背景颜色:#ffffff
  • 天沟宽度:1
  • 宽度:300px(桌面),200px(手机)
  • 内边距:顶部 20 像素,底部 0 像素
  • 盒子阴影:见截图

滚动触发的弹出窗口

高质量外链购买

添加文本模块

自定义行设置后,将文本模块添加到行。 这将是我们相关帖子弹出窗口的标题区域。

滚动触发的弹出窗口

内容

使用文本“相关帖子”更新正文内容。

滚动触发的弹出窗口

设计

然后更新设计设置如下:

JasperAI 10000字免费额度试用
  • 文字字体:Heebo
  • 文字字体样式:TT
  • 文字文字颜色:#f94857
  • 文字对齐:居中

滚动触发的弹出窗口

添加博客模块

在文本模块下,添加一个博客模块。

滚动触发的弹出窗口

内容

由于我们只想展示一篇相关的帖子,我们将帖子数限制为一个并包含“当前类别”,以便弹出窗口中显示的帖子将与模板上显示的实际帖子共享相同的类别。

更新以下内容:

WordPress备份工具updrafplus
  • 帖子数:1
  • 包含的类别:当前类别

滚动触发的弹出窗口

元素

在元素选项组下,确保您选择仅显示特色图像。 隐藏其他一切。

滚动触发的弹出窗口

设计

在设计选项卡下,更新以下内容:

  • 标题字体:Heebo
  • 标题字体粗细:超粗体
  • 标题文字大小:16px
  • 标题行高:1.4em
  • 填充:顶部 5%,左侧 5%,右侧 5%

滚动触发的弹出窗口

高级行设置

CSS 类、自定义 CSS 和 Z 索引

在高级选项卡下,我们需要为我们的行提供一个 CSS 类、一些自定义 CSS,并更新 z 索引,以使弹出窗口保持在页面上的其他内容之上。

当在前端使用可视化构建器时,此步骤将隐藏该行。 因此,在更新这些选项之前部署线框视图可能会更好。

进入线框视图模式后,打开行设置备份并添加以下 CSS 类:

然后将以下自定义 css 添加到主元素:

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

并更新 Z 指数:

滚动触发的弹出窗口

添加分隔线作为滚动触发点

此时,我们的弹出窗口已准备就绪。 现在我们需要决定在帖子模板上添加滚动触发点的位置,这样一旦用户滚动到这些点,弹出窗口就会显示或隐藏。 滚动触发点将由具有 CSS 类的元素确定。 由于我们希望滚动触发点位于帖子的底部,因此我们可以使用带有 CSS 类的分隔线作为滚动触发点元素。

添加滚动触发点 #1

为了添加我们的第一个滚动触发点,让我们直接在帖子内容模块下添加一个分隔模块。

滚动触发的弹出窗口

然后添加以下 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>

滚动触发的弹出窗口

结果

要查看结果,请访问您的一篇博客文章并向下滚动页面。 当您到达帖子内容的底部时,您应该会看到相关的帖子弹出窗口。 继续滚动以在帖子的相关帖子部分之后看到它隐藏。

滚动触发的弹出窗口

滚动触发的弹出窗口

向滚动触发的弹出窗口添加电子邮件选项

相关的帖子弹出窗口很酷,但也许您希望选择弹出电子邮件。 这很容易做到。 事实上,我们甚至可以使用已经在此模板的预制页脚布局中设计的电子邮件选项。

将页脚电子邮件选项保存到 Divi 库

保存您的布局并退出到主题生成器。 然后单击以编辑自定义页脚模板布局。

滚动触发的弹出窗口

找到电子邮件 optin 模块并将其保存到 divi 库。

滚动触发的弹出窗口

将保存的电子邮件选项添加到弹出行

现在返回自定义正文模板布局,并在您用作弹出窗口的同一行添加已保存的电子邮件选项。 请记住,该行内的任何内容都将显示为弹出内容。

滚动触发的弹出窗口

由于您没有使用文本和博客模块,您可以在前端禁用它们。

电子邮件选项设置

一旦电子邮件选项就位并且其他模块被禁用,请按如下方式更新电子邮件选项设置:

  • 标题:“喜欢这篇文章吗?”
  • 正文:“加入我们的时事通讯!”

滚动触发的弹出窗口

然后添加以下填充:

  • 内边距:底部 5%,右侧 20px

滚动触发的弹出窗口

结果

现在在实时帖子上查看结果。

滚动触发的弹出窗口

滚动触发的弹出窗口

最后的想法

滚动触发的弹出窗口绝对是您博客的宝贵资产。 他们提供了一种利用合格潜在客户的不引人注目的方式。 使用相关的帖子弹出窗口让他们参与您的网站,或使用电子邮件选项来帮助增加您的列表。 使用 Divi,您还可以添加您能想到的任何其他内容。 您可以准确地决定何时希望访问者看到那些非常强大的弹出窗口。 我希望您发现它对您自己的博客或下一个项目有用。

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

干杯!

5分钟生成10篇英文软文article forge软件试用
tiktok
WordPress divi主题