在本教程中，我们将设计一个可关闭的侧边弹窗，可以添加到页面的任何角落使用Divi主题生成器。一旦完成，您将有能力推广您的产品和特别优惠在任何地方的网页，而不必使用插件。
我们开始吧!
预览
以下是我们将添加到页面模板的所有四个角落的四个幻灯片CTA的快速查看。当然，您不需要同时部署所有四个。请注意，通过单击“x”图标，每个按钮都是可关闭的，然后通过单击“plus”图标，您可以选择将CTA切换回打开。
你需要开始什么
要开始，你需要安装并激活Divi主题…确保你有最新版本的Divi。
您还需要至少为测试目的使用DiviBuilder创建一个页面，以便将新模板分配给该页面以显示结果。
在divi中为页面模板的每个角落创建一个可关闭的滑动调用-操作
创建新模板
从WordPress仪表板，导航到Divi>ThemeBuilder。然后单击“添加新模板”框以创建新模板。
将模板分配给您想要显示的页面。
在新模板上，单击“添加自定义主体”区域，然后选择“构建自定义主体”。
然后选择“从头开始构建”选项。
创建员额内容科
POST内容部分是任何页面模板的必要部分，以显示在Divi或WordPress中构建的页面或帖子的实际内容。我们将在创建第一个幻灯片调用操作之前将其添加到我们的模板中。
增加一列行
首先，在常规部分中添加一行.
添加邮政内容模块
然后向行添加POST内容模块。
行设置
之后，按以下方式更新行设置：
- 宽度：100%
- 最大宽度：100%
- 填充：0 px顶部，0 px底部
创建左上角幻灯片
现在我们的POST内容模块已经就位，我们准备开始在页面模板的左上角添加我们的第一个幻灯片到操作调用。
增加科
每个新的行动调用都将创建一个完整的新部分。这将允许您添加设计调用操作所需的任何布局或模块。
向模板布局中添加一个新的常规部分。
增加一列行
然后给区段一个列行。
节设置
在POST内容部分上方拖动(或移动)该部分，并按以下方式更新区段设置：
- 背景渐变左颜色：
- 背景渐变右色：
- 图像上方显示梯度：是
- 背景图像：[插入图像]
- 宽度：320 px
- 页边距：320 px左
- 填充：0 px顶部，0 px底部
- 动画风格：幻灯片
- 动画方向：右
- 动画延迟：2000 ms
然后跳过高级选项卡，添加以下CSSClass和Z索引：
- css类：CTA幻灯片
- Z指数：999
并添加以下自定义CSS片段(主元素)：
|
01
02
03
|
position: fixed;top: 80px;left: -320px; |
我们需要CSS类，这样我们就可以在后面的代码中针对这个部分。自定义CSS会将页面模板左上角的部分定位在固定(或粘性)位置。“左侧：-320 px”位置应该将整个部分(320 px宽)移出浏览器窗口。但我们有320px的左侧，可以让它重新进入。之所以这样构建，是因为我们可以在单击“x”图标时切换边距值。这将导致CTA滑入和脱离视线。
行设置
现在，让我们按如下方式更新行设置：
- 使用自定义水槽宽度：是
- 排水沟宽度：1
- 宽度：100%
- 填充：0 px顶部，0 px底部
添加对行动模块的调用
在行内，添加对操作模块的调用。
呼叫行动设置
然后更新对操作设置的调用。
含量
- 标题：[输入选择的文本]
- 按钮：[输入选择的文本]
- 正文：[输入选择的文本]
- 按钮链接URL：[输入实际网址或#]
接下来，删除默认的背景色，以显示我们前面添加的部分的背景。
设计设置(文本、按钮和填充)
在“设计”选项卡下，更新以下内容：
- 标题字体：Lato
- 字体重量：沉重
- 标题线高度：1.3em
- 车身字体：Lato
- 体型重量：粗体
- 为按钮使用自定义样式：是
- 按钮文本大小：15 px
- 按钮边框宽度：0 px
- 按钮字母间距：1 px
- 按钮字体：Lato
- 按钮字体重量：重
- 按钮字体样式：TT
- 按钮填充：12 px顶部，12 px底部，32 px左，32 px右
- 填充：40 px顶部，40 px底部，40 px左，40 px右
使用Blurb模块添加打开和关闭图标
在操作调用完成后，我们需要创建用于打开和关闭幻灯片中的操作调用的图标按钮。若要创建此操作，请在“调用操作”模块下面添加一个blurb模块。
BLUURB设置
更新下列设计设置。
含量
- 删除默认标题和正文文本
- 使用图标：是的
- 图标：另外(见截图)
设计
- 图标颜色：#000000
- 使用图标字体大小：是
- 图标字体大小：40 px
- 宽度：40 px
- 高度：40 px
- 圆角：50%
- 变换旋转Z轴：135 deg
高级设置
在“高级”选项卡下，添加以下CSS类：
- css类：幻灯片中的目标
然后将这个自定义CSS添加到主元素中。
|
01
02
03
|
position: absolute;bottom: 0px;right: -40px; |
将以下自定义CSS添加到Blurb图像中。
|
01
|
margin-bottom: 0px; |
结果
这是目前为止的结果。
请记住，在单击“x”图标时，我们仍然需要添加一些代码来添加关闭和打开功能。在模板的四个角落中创建一个操作调用之后，我们将添加代码。
创建右上角滑行呼叫动作
通过创建第一个滑动调用操作，我们可以通过复制已经构建的部分来加快创建其余CTA的过程。接下来，我们将为右上角创建一个滑动调用操作。
复本科
部署线框视图模式，然后复制左上角的CTA部分。
更新节设置
然后按以下方式更新新的节设置：
- 保证金：320便士
- 动画方向：左
然后通过将“左”替换为“右”来更新主元素中的自定义CSS。下面是完整的片段：
|
01
02
03
|
position: fixed;top: 80px;right: -320px; |
更新Blurb模块设置
然后打开blurb模块设置，并通过将“右侧”替换为“左侧”来更新主元素中的自定义CSS片段。下面是完整的片段：
|
01
02
03
|
position: absolute;bottom: 0px;left: -40px; |
结果
现在，您将在页面模板的右上角看到一个幻灯片到操作的调用。
创建左下角滑块呼叫动作
复制
若要在页面模板的左下角创建幻灯片中的操作调用，请复制页面布局顶部的左上角cta部分。将重复部分标记为“左下角CTA”，然后将其移至POST内容部分下方。
更新节设置
然后打开节设置，更新主元素CSS，将“top：80px”替换为“底部：0px”。下面是最后一个片段：
|
01
02
03
|
position: fixed;bottom: 0px;left: -320px; |
更新Blurb模块设置
然后更新Blurb模块的主元素CSS，将“底部：0px”替换为“top：0px”。下面是最后一个片段：
|
01
02
03
|
position: absolute;top: 0px;right: -40px; |
结果
现在查看左下角的幻灯片调用，在活动页面上执行操作。
创建右下角滑块呼叫动作
复制
若要创建右下角幻灯片中的操作调用，请复制右上角CTA部分，并将重复部分移至POST内容部分下方。
更新节设置
打开节设置并更新主元素CSS，将“top：80px；”替换为“底部：0px；”。下面是最后一个片段：
|
01
02
03
|
position: absolute;bottom: 0px;right: -320px; |
更新Blurb模块设置
然后打开blurb模块设置并更新主元素CSS，将“底部：0px；”替换为“top：0px；”。下面是最后一个片段：
|
01
02
03
|
position: absolute;top: 0px;right: -40px; |
结果
现在查看右下角的幻灯片–在活动页面上调用动作。
使用代码模块添加自定义jQuery和CSS代码段
对于最后一步，我们需要添加一些定制的jQuery和CSS，这样我们就可以为每个幻灯片中的CTA提供打开和关闭功能。
添加代码模块
将代码模块添加到布局中的某个部分。
粘贴代码
然后打开代码设置并将以下代码粘贴到代码框中。
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
|
<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> |
