未命名_自定义px_2019.08.gif

【DIVI教程】如何在页面中滚动到某位置弹出窗口

12802605be5fce
向您的博客帖子添加滚动触发的弹出窗口似乎是一件很明智的事情。在阅读其他博客之前,您可能已经看过它们。当用户滚动到帖子的某个点(通常是结尾)时,会突然出现一个包含一些号召性用语的框。滚动触发的弹出窗口的整个目的是在您希望访问者在页面上看到访问者的确切时间向访问者提出有针对性的号召性用语。简而言之,它是提高转化率或获得合格潜在客户的好工具。在本教程中,我们将向您展示如何在无需插件的情况下从头开始将滚动触发的弹出窗口添加到Divi中的博客文章。为此,我们将使用Divi Theme Builder设计一个弹出窗口,该弹出窗口具有按类别分类的相关帖子以及一个包含电子邮件optin的弹出窗口。滚动触发将使用一小段jQuery完成。

让我们开始吧!

抢先看

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

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

12efd22652e135

12e125ee3f5656

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

1cde7e621f6585

15026bef5a99ce

要将布局导入页面,只需提取zip文件,然后使用Theme Builder Portability选项将json文件之一添加到Divi Theme Builder中。

让我们进入教程吧?

您需要开始什么

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

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

之后,您就可以开始了。

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

从第四个主题生成器包中导入博客文章模板

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

155e7ef2b986e6

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

1fe76ac5a523ee

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

1fe6912f5e853e

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

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

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

这是操作方法。

添加一列行

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

1e508609f6ee2a

行设置

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

  • 背景颜色:#ffffff
  • 装订线宽度:1
  • 宽度:300像素(桌面),200像素(电话)
  • 填充:顶部20像素,底部0像素
  • Box Shadow:查看屏幕截图

1e3e2621c5f526

添加文本模块

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

16e453cefff162

内容

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

16f35ff4be24e6

设计

然后,如下更新设计设置:

  • 文字字体:Heebo
  • 文字字型:TT
  • 文字文字颜色:#f94857
  • 文字对齐方式:居中

1626606e637fe5

添加博客模块

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

1e6426f50979ee

内容

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

更新以下内容:

  • 帖子数:1
  • 包括类别:当前类别

12d06e6faec8e5

元素

在elements选项组下,确保选择仅显示特色图像。隐藏其他所有内容。

1225eabe856f64

设计

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

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

15eea6e6407b2f

高级行设置

CSS类,自定义CSS和Z索引

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

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

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

  • CSS类:行后

然后将以下自定义css添加到Main Element:

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

并更新Z索引:

  • Z索引:999

182c5e6e6e2daf

将分频器添加为滚动触发点

至此,我们的弹出窗口已准备就绪。现在,我们需要确定在帖子模板上的何处添加滚动触发点,以便用户滚动到这些点后,将显示或隐藏弹出窗口。滚动触发点将由具有CSS类的元素确定。由于我们希望滚动触发点位于文章的底部,因此我们可以将带有CSS类的分隔符用作滚动触发点元素。

添加滚动触发点#1

要添加第一个滚动触发点,让我们在发布内容模块的正下方添加一个除法器模块。

12ec5e6b6f7e56

然后添加以下CSS类:

  • CSS类:航路点

15e625ee0faf67

那很简单。

添加滚动触发点#2

现在,要添加第二个触发点(一个将弹出窗口隐藏在页面下方的触发点),请复制刚创建的除法器模块。

145e0e6512f734

然后将其粘贴到要关闭(或隐藏)弹出窗口的帖子模板的下方。对于此示例,我将其添加到相关帖子博客模块的正下方,以及帖子模板的评论部分的正上方。

168e072e5292f6

使用代码模块添加自定义代码

该滚动触发的弹出窗口工作所需要做的就是一些代码。

继续,向帖子模板添加一个代码模块。

1362e3ef553c77

然后将以下代码粘贴到代码框中:

<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>

15e6e97927520f

结果

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

12efd22652e135

12e125ee3f5656

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

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

将页脚电子邮件优化保存到Divi库

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

17a7e376e72f5e

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

1e391e2b6f578e

将已保存的电子邮件优化添加到弹出行

现在,返回到自定义正文模板布局,并在弹出窗口所在的同一行中添加保存的电子邮件。请记住,该行内的所有内容都将显示为弹出内容。

1aeeaf775f2167

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

电子邮件优化设置

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

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

162ed75f6b730e

然后添加以下填充:

  • 填充:底部5%,右侧20px

175d56af9e2ec6

结果

现在在现场发布中查看结果。

1cde7e621f6585

15026bef5a99ce

Divi主题教程精品教程

【DIVI教程】如何在Divi中设置页面模板的添加侧边弹窗

2020-1-2 15:51:37

Divi主题教程精品教程

【DIVI视频教程】DIVI可视化编辑器主题标准视频教程

2020-1-4 21:06:38

未命名_自定义px_2019.08.gif

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索