WordPress divi主题

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

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

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

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

google广告开户

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

让我们开始吧!

抢先看

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

滑入式号召性用语

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

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

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

让我们来看看教程好吗?

你需要什么开始

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

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

WordPress divi主题

之后,您就可以出发了。

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

创建新模板

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

社交媒体关注按钮栏

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

社交媒体关注按钮栏

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

社交媒体关注按钮栏

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

社交媒体关注按钮栏

创建帖子内容部分

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

fiverr建站WordPress程序员

添加一列行

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

社交媒体关注按钮栏

添加帖子内容模块

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

滑入式号召性用语

行设置

之后,按如下方式更新行设置:

独立站选品工具
  • 宽度:100%
  • 最大宽度:100%
  • 内边距:0px 顶部,0px 底部

滑入式号召性用语

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

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

添加部分

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

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

滑入式号召性用语

高质量外链购买

添加一列行

然后给该部分一列行。

滑入式号召性用语

部分设置

拖动(或移动)帖子内容部分上方的部分并更新部分设置,如下所示:

  • 背景渐变左颜色:
  • 背景渐变正确颜色:
  • 在图像上方显示渐变:是
  • 背景图片: [insert image]
  • 宽度:320 像素
  • 边距:剩余 320 像素
  • 内边距:0px 顶部,0px 底部
  • 动画风格:幻灯片
  • 动画方向:右
  • 动画延迟:2000ms

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

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

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

JasperAI 10000字免费额度试用
position: fixed;
top: 80px;
left: -320px;

滑入式号召性用语

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

行设置

现在让我们按如下方式更新行设置:

  • 使用自定义装订线宽度:是
  • 天沟宽度:1
  • 宽度:100%
  • 内边距:0px 顶部,0px 底部

滑入式号召性用语

添加号召性用语模块

在该行内,添加一个号召性用语模块。

WordPress备份工具updrafplus

滑入式号召性用语

号召性用语设置

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

内容
  • 标题: [enter text of choice]
  • 按钮: [enter text of choice]
  • 身体: [enter text of choice]
  • 按钮链接地址: [enter actual url or #]

滑入式号召性用语

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

滑入式号召性用语

设计设置(文本、按钮和填充)

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

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

滑入式号召性用语

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

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

滑入式号召性用语

模糊设置

更新以下设计设置。

内容
  • 删除默认标题和正文
  • 使用图标:是
  • 图标:加号(见截图)

滑入式号召性用语

设计
  • 图标颜色:#000000
  • 使用图标字体大小:是
  • 图标字体大小:40px
  • 宽度:40 像素
  • 高度:40 像素
  • 圆角:50%
  • 变换旋转Z轴:135度

滑入式号召性用语

高级设置

在高级选项卡下,添加以下 CSS 类:

  • CSS 类:slide-in_target

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

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

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

margin-bottom: 0px;

滑入式号召性用语

结果

这是迄今为止的结果。

滑入式号召性用语

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

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

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

重复部分

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

滑入式号召性用语

更新部分设置

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

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

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

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

自定义 CSS

更新 Blurb 模块设置

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

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

自定义 CSS

结果

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

右上角号召性用语

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

重复部分

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

重复部分

更新部分设置

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

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

代码片段

更新 Blurb 模块设置

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

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

滑入式号召性用语

结果

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

滑入式号召性用语

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

重复部分

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

滑入式号召性用语

更新部分设置

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

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

滑入式号召性用语

更新 Blurb 模块设置

然后打开blurb模块设置并通过替换“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 的转化率,并找出哪个角落的转化率最高。

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

干杯!

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