在您的网站上发出号召性用语是吸引您的注意力的侵入性最小的方法之一 游客。 大多数时候，他们会忽略 CTA 或关闭它以继续浏览页面，但有时你会赢得他们的支持。 号召性用语幻灯片非常适合 促进 几乎是登陆页面上的任何内容。

在本教程中，我们将设计一个可关闭的号召性用语，可以使用 Divi 主题生成器将其添加到页面的任何角落。 完成此操作后，您将可以选择 促进 您的产品和特别优惠可以在页面上的任何位置显示，而无需使用插件。

让我们开始吧！

概观

快速浏览一下我们将添加到页面模板四个角落的四个插入的CTA。 当然，您不需要同时部署所有四个。 请注意如何通过单击“ x”图标将其关闭，然后您可以通过单击“加号”图标选择重新启用CTA。

你需要什么才能开始

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

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

在Divi中创建带有页面模板的号召性用语

创建新模型

在WordPress信息中心中，转到Divi>主题生成器。 然后单击“添加新模板”框以创建新模板。

将模板分配给要在其上显示促销栏的页面。

在新模型上，单击“添加自定义主体”区域，然后选择“创建自定义主体”。

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

创建出版物内容部分

该部分 内容 post 是任何页面模板的必要组成部分，以便显示 内容 嵌入 Divi 或 WordPress 中的真实页面或帖子。 在创建第一个要插入的号召性用语之前，我们会将其添加到模板中。

在列中添加一行

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

添加发布内容模块

然后添加一个模块 内容 发布到该行。

线路设置

之后，按如下所示更新行参数：

• 宽度：100％
• 最大宽度：100％
• 填充：高0像素，低0像素

在左上方创建号召性用语

现在我们已经拥有了帖子内容模块，我们准备开始添加第一个号召性用语以插入页面模板的左上角。

添加部分

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

将新的常规部分添加到模板布局。

在列中添加一行

然后为该部分提供一行列。

栏目设置

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

• 左色背景渐变：
• 正确的背景渐变：
• 在图像上方显示渐变：是
• 背景图片：[插入图片]
• 宽度：320px
• 边距：还剩320px
• 填充：高0像素，低0像素
• 动画样式：幻灯片
• 动画方向：向右
• 动画延迟：2000毫秒

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

• CSS类：slide-in-cta
• Z索引：999

并在主要元素之后添加自定义CSS代码段：

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

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

线路设置

现在，如下更新线参数：

• 使用自定义装订线宽度：是
• 装订线宽度：1
• 宽度：100％
• 填充：高0像素，低0像素

添加号召性用语模块

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

号召性用语设置

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

包装内容

• 标题：[输入您选择的文字]
• 按钮：[输入您选择的文字]
• 正文：[输入您选择的文字]
• 按钮链接URL：[输入实际URL或＃]

然后删除默认的背景色以显示我们前面添加的部分的背景。

设计参数（文本，按钮和填充）

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

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

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

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

演示文字设置

更新以下设计参数。

包装内容

• 删除默认标题和正文
• 使用图标：是
• 图标：更多（请参见屏幕截图）

概念

• 图标颜色：＃000000
• 使用图标字体大小：是
• 图标字体大小：40像素
• 宽度：40px
• 高度：40px
• 圆角：50％
• 变换Z轴旋转角度：135度

进阶设定

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

• CSS类：slide-in_target

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

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

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

margin-bottom: 0px;

结果

这是到目前为止的结果。

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

在右上方创建号召性用语

通过内置第一个号召性用语，我们可以通过复制已经创建的部分来加快创建其余CTA的过程。 接下来，我们将在右上角创建幻灯片号召性用语。

重复部分

部署线框显示模式，然后复制左上方的CTA部分。

更新部分设置

然后，如下更新新的节参数：

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

然后通过将“ left”替换为“ right”来更新main元素中的自定义CSS。 这是完整的摘录：

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

更新Blurb模块的参数

然后打开Blurb模块设置，并通过将“ right”替换为“ left”来更新主要元素中的自定义CSS代码段。 这是完整的摘录：

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

结果

现在，您将在页面模板的右上方看到号召性用语作为幻灯片。

在其余的“右下”，“左下”部分中执行相同的操作。 您还需要调整每个模块的CSS代码，以得到与以下类似的结果。

使用代码模块添加自定义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。