• 主页
  • 文章
  • 主题
  • 如何在 Divi 中向页面模板的任何角落添加可关闭的滑入式号召性用语

如何在 Divi 中向页面模板的任何角落添加可关闭的滑入式号召性用语

已发表: 2019-12-28

在您的网站上插入号召性用语是吸引访问者注意的最不显眼的方式之一。 大多数情况下，他们会简单地忽略 CTA 或关闭它以继续浏览页面，但有时您会赢得他们的支持。 滑入式号召性用语非常适合宣传登陆页面上的任何内容。

在本教程中，我们将设计一个可关闭的滑入式号召性用语，可以使用 Divi Theme Builder 添加到页面的任何角落。 完成后，您将能够在页面上的任何位置宣传您的产品和特别优惠，而无需使用插件。

让我们开始吧！

抢先看

以下是我们将添加到页面模板所有四个角的四个滑入 CTA 的快速浏览。 当然，您不需要同时部署所有四个。 请注意如何通过单击“x”图标来关闭每个选项，然后您可以选择通过单击“加号”图标将 CTA 切换回打开状态。

滑入式号召性用语

免费下载滑入式号召性用语 Divi 页面模板

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

下载文件
免费下载

免费下载

加入 Divi 时事通讯，我们将通过电子邮件向您发送一份最终的 Divi 登陆页面布局包，以及大量其他令人惊叹的免费 Divi 资源、提示和技巧。 跟随，您将很快成为 Divi 大师。 如果您已经订阅，只需在下面输入您的电子邮件地址，然后单击下载即可访问布局包。

您已成功订阅。 请检查您的电子邮件地址以确认您的订阅并获得免费的每周 Divi 布局包！

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

让我们进入教程好吗？

你需要什么开始

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

您还需要至少一个使用 Divi Builder 创建的页面用于测试目的，以便将新模板分配给该页面以显示结果。

之后，您就可以开始了。

在 Divi 中为页面模板的每个角落创建可关闭的滑入式号召性用语

创建新模板

从 WordPress 仪表板，导航到 Divi > Theme Builder。 然后单击“添加新模板”框以创建新模板。

社交媒体关注按钮栏

将模板分配给您希望显示促销栏的页面。

社交媒体关注按钮栏

在新模板上，单击“添加自定义正文”区域，然后选择“构建自定义正文”。

社交媒体关注按钮栏

然后选择“从头开始构建”选项。

社交媒体关注按钮栏

创建帖子内容部分

帖子内容部分是任何页面模板的必要部分，以显示页面的实际内容或在 Divi 或 WordPress 中构建的帖子。 在创建我们的第一个幻灯片号召性用语之前，我们将把它添加到我们的模板中。

添加一列行

首先，在常规部分添加一列行。

社交媒体关注按钮栏

添加帖子内容模块

然后将帖子内容模块添加到该行。

滑入式号召性用语

行设置

之后，按如下方式更新行设置：

  • 宽度：100%
  • 最大宽度：100%
  • 填充：0px 顶部，0px 底部

滑入式号召性用语

创建左上角的滑入式号召性用语

现在我们的帖子内容模块已经就位，我们准备开始将我们的第一个幻灯片号召性用语添加到页面模板的左上角。

添加部分

每个新的号召性用语都将创建一个全新的部分。 这将允许您添加设计号召性用语所需的任何布局或模块。

向模板布局添加一个新的常规部分。

滑入式号召性用语

添加一列行

然后给这个部分一个一列的行。

滑入式号召性用语

部分设置

拖动（或移动）帖子内容部分上方的部分并更新部分设置，如下所示：

  • 背景渐变左颜色：
  • 背景渐变右颜色：
  • 在图像上方显示渐变：是
  • 背景图片：[插入图片]
  • 宽度：320px
  • 边距：320px 左
  • 填充：0px 顶部，0px 底部
  • 动画风格：幻灯片
  • 动画方向：右
  • 动画延迟：2000ms

然后跳过高级选项卡并添加以下 CSS 类和 Z 索引：

  • CSS 类：slide-in-cta
  • Z指数：999

并在主元素中添加以下自定义 CSS 片段： 

position: fixed;
top: 80px;
left: -320px;

滑入式号召性用语

需要 CSS 类，以便我们稍后可以使用代码定位该部分。 自定义 CSS 会将页面模板左上角的部分定位在固定（或粘性）位置。 “left: -320px”位置应该将整个部分（320px 宽）移到浏览器窗口之外。 但是我们有 320px 的左边距来让它重新回到视野中。 以这种方式构建的原因是我们可以在单击“x”图标时打开和关闭边距值。 这将导致 CTA 滑入和滑出视图。

行设置

现在让我们更新行设置，如下所示：

  • 使用自定义装订线宽度：是
  • 天沟宽度：1
  • 宽度：100%
  • 填充：0px 顶部，0px 底部

滑入式号召性用语

添加号召性用语模块

在行内，添加一个 Call to Action Module。

滑入式号召性用语

号召性用语设置

然后更新号召性用语设置。

内容
  • 标题：[输入选择的文本]
  • 按钮：[输入选择的文本]
  • 正文：[输入选择的文本]
  • 按钮链接网址：[输入实际网址或#]

滑入式号召性用语

接下来，删除默认背景颜色以显示我们之前添加的部分的背景。

滑入式号召性用语

设计设置（文本、按钮和填充）

在设计选项卡下，更新以下内容：

  • 标题字体：Lato
  • 标题字体粗细：重
  • 标题行高度：1.3em
  • 正文字体：Lato
  • 正文字体粗细：粗体
  • 为按钮使用自定义样式：是
  • 按钮文字大小：15px
  • 按钮边框宽度：0px
  • 按钮字母间距：1px
  • 按钮字体：Lato
  • 按钮字体重量：重
  • 按钮字体样式：TT
  • 按钮填充：顶部 12 像素，底部 12 像素，左侧 32 像素，右侧 32 像素
  • 填充：顶部 40 像素，底部 40 像素，左侧 40 像素，右侧 40 像素

滑入式号召性用语

使用 Blurb 模块添加打开和关闭图标

号召性用语完成后，我们需要创建用于打开和关闭滑入式号召性用语的图标按钮。 要创建它，请在号召性用语模块下方添加一个模糊模块。

滑入式号召性用语

模糊设置

更新以下设计设置。

内容
  • 删除默认标题和正文
  • 使用图标：是
  • 图标：加号（见截图）

滑入式号召性用语

设计
  • 图标颜色：#000000
  • 使用图标字体大小：是
  • 图标字体大小：40px
  • 宽度：40px
  • 高度：40px
  • 圆角：50%
  • Transform 旋转 Z 轴：135deg

滑入式号召性用语

高级设置

在高级选项卡下，添加以下 CSS 类：

  • CSS 类：slide-in_target

然后将此自定义 CSS 添加到主元素。 

position: absolute;
bottom: 0px;
right: -40px;

将以下自定义 CSS 添加到 Blurb 图像。 

margin-bottom: 0px;

滑入式号召性用语

结果

这是到目前为止的结果。

滑入式号召性用语

请记住，当单击“x”图标时，我们仍然需要添加一些代码来添加关闭和打开功能。 我们将在模板的四个角中的每一个角中创建号召性用语后添加代码。

创建右上角的滑入式号召性用语

创建第一个滑入式号召性用语后，我们可以通过复制已经构建的部分来加快创建其余 CTA 的过程。 接下来，我们将为右上角创建一个滑入式号召性用语。

重复部分

部署线框视图模式，然后复制左上角的 CTA 部分。

滑入式号召性用语

更新部分设置

然后按如下方式更新新的部分设置：

  • 边距：320px 右边
  • 动画方向：左

然后通过将“左”替换为“右”来更新主元素中的自定义 CSS。 这是完整的片段： 

position: fixed;
top: 80px;
right: -320px;

自定义 CSS

更新模糊模块设置

然后打开模糊模块设置并通过将“右”替换为“左”来更新主元素中的自定义 CSS 片段。 这是完整的片段： 

position: absolute;
bottom: 0px;
left: -40px;

自定义 CSS

结果

现在，您将在页面模板的右上角看到一个滑入式号召性用语。

右上角号召性用语

创建左下角滑入式号召性用语

重复部分

要在页面模板的左下角创建滑入式号召性用语，请复制页面布局顶部的左上角 CTA 部分。 将重复的部分标记为“左下角 CTA”，然后将其移动到帖子内容部分下方。

重复部分

更新部分设置

然后打开部分设置，通过将“top: 80px”替换为“bottom: 0px”来更新主元素 CSS。 这是最后的片段： 

position: fixed;
bottom: 0px;
left: -320px;

代码片段

更新模糊模块设置

然后通过将“bottom: 0px”替换为“top: 0px”来更新 Blurb 模块的主要元素 CSS。 这是最后的片段： 

position: absolute;
top: 0px;
right: -40px;

滑入式号召性用语

结果

现在查看实时页面上左下角的滑入式号召性用语。

滑入式号召性用语

创建右下角的滑入式号召性用语

重复部分

要创建右下角的滑入号召性用语，请复制右上角的 CTA 部分并将复制的部分移动到帖子内容部分下方。

滑入式号召性用语

更新部分设置

打开部分设置并通过替换“top: 80px;”来更新主要元素CSS 与“底部：0px;”。 这是最后的片段： 

position: absolute;
bottom: 0px;
right: -320px;

滑入式号召性用语

更新模糊模块设置

然后打开模糊模块设置并通过替换“bottom: 0px;”来更新主元素CSS 与“顶部：0px;”。 这是最后的片段： 

position: absolute;
top: 0px;
right: -40px;

滑入式号召性用语

结果

现在查看实时页面上右下角的滑入式号召性用语。

滑入式号召性用语

使用代码模块添加自定义 jQuery 和 CSS 代码片段

对于最后一步，我们需要添加一些自定义 jQuery 和 CSS，以便我们可以为每个滑入式 CTA 获取打开和关闭功能。

添加代码模块

将代码模块添加到布局中的部分之一。

滑入式号召性用语

粘贴代码

然后打开代码设置，将以下代码粘贴到代码框中。 

<style>
  .slide-in-cta, .slide-in_target, .slide-in-toggle-active {
    transition: all 400ms ease-in-out;
  } 
  .slide-in-toggle-active {
    margin: 0px 0px 0px 0px !important;
  }
   .slide-in-toggle-active .slide-in_target  {
    transform: none !important;
    background: rgba(0,0,0,0.2);
  }  
  .slide-in_target {
    cursor: pointer;
  }
</style>
<script>
(function($) {
  $(document).ready(function(){
    $('.slide-in_target').click(function(){
      $(event.target).closest('.slide-in-cta').toggleClass('slide-in-toggle-active'); 
    });    
  });
})( jQuery );   
</script>

滑入式号召性用语

最后的想法

使用 Divi，创建滑入式号召性用语一点也不难。 由于您可以使用主题构建器向页面模板添加号召性用语，因此您可以更好地控制哪些页面将显示这些 CTA。 随意增加 CTA 部分的动画延迟，以便用户在页面加载后稍晚（或更早）看到 CTA 滑入动画。 您还可以使用 Divi 线索并启用拆分测试来提高这些 CTA 的转化率，并找出哪个角落的转化率最高。

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

干杯!