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

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

1ef25f63615e12
在你的网站上做一个滑动电话是吸引访问者注意的最不引人注目的方法之一。大多数情况下,他们会忽略CTA或关闭它继续浏览页面,但有时你会赢得他们的支持。在登陆页面上做任何事情都会有很好的效果。

在本教程中,我们将设计一个可关闭的侧边弹窗,可以添加到页面的任何角落使用Divi主题生成器。一旦完成,您将有能力推广您的产品和特别优惠在任何地方的网页,而不必使用插件。

我们开始吧!

预览

以下是我们将添加到页面模板的所有四个角落的四个幻灯片CTA的快速查看。当然,您不需要同时部署所有四个。请注意,通过单击“x”图标,每个按钮都是可关闭的,然后通过单击“plus”图标,您可以选择将CTA切换回打开。

11a6a5c1fe4e26

 

你需要开始什么

要开始,你需要安装并激活Divi主题…确保你有最新版本的Divi。

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

在divi中为页面模板的每个角落创建一个可关闭的滑动调用-操作

创建新模板

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

163e52751ef8b3

将模板分配给您想要显示的页面。

126fc14f5ee16a

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

1e817960e3fb52

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

164b143eef5d2e

创建员额内容科

POST内容部分是任何页面模板的必要部分,以显示在Divi或WordPress中构建的页面或帖子的实际内容。我们将在创建第一个幻灯片调用操作之前将其添加到我们的模板中。

增加一列行

首先,在常规部分中添加一行.

1092136fdee9f5

添加邮政内容模块

然后向行添加POST内容模块。

182f5a14eca26e

行设置

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

  • 宽度:100%
  • 最大宽度:100%
  • 填充:0 px顶部,0 px底部

12e64955edf232

创建左上角幻灯片

现在我们的POST内容模块已经就位,我们准备开始在页面模板的左上角添加我们的第一个幻灯片到操作调用。

增加科

每个新的行动调用都将创建一个完整的新部分。这将允许您添加设计调用操作所需的任何布局或模块。

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

126a14f5ee6299

增加一列行

然后给区段一个列行。

152f095e7ee692

节设置

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

1526eee6ff08f2

我们需要CSS类,这样我们就可以在后面的代码中针对这个部分。自定义CSS会将页面模板左上角的部分定位在固定(或粘性)位置。“左侧:-320 px”位置应该将整个部分(320 px宽)移出浏览器窗口。但我们有320px的左侧,可以让它重新进入。之所以这样构建,是因为我们可以在单击“x”图标时切换边距值。这将导致CTA滑入和脱离视线。

行设置

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

  • 使用自定义水槽宽度:是
  • 排水沟宽度:1
  • 宽度:100%
  • 填充:0 px顶部,0 px底部

12885efbd2976e

添加对行动模块的调用

在行内,添加对操作模块的调用。

1c52356d62e9ef

呼叫行动设置

然后更新对操作设置的调用。

含量
  • 标题:[输入选择的文本]
  • 按钮:[输入选择的文本]
  • 正文:[输入选择的文本]
  • 按钮链接URL:[输入实际网址或#]

1e65aef2e234e6

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

15266ef9cfb2fe

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

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

  • 标题字体: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右

11fe95e6838ee2

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

在操作调用完成后,我们需要创建用于打开和关闭幻灯片中的操作调用的图标按钮。若要创建此操作,请在“调用操作”模块下面添加一个blurb模块。

16e20beff53763

BLUURB设置

更新下列设计设置。

含量
  • 删除默认标题和正文文本
  • 使用图标:是的
  • 图标:另外(见截图)

1ba63fe4cae825

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

1f86b29635ee23

高级设置

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

  • css类:幻灯片中的目标

然后将这个自定义CSS添加到主元素中。

01
02
03
position: absolute;
bottom: 0px;
right: -40px;

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

01
margin-bottom: 0px;

1fe9723e56892a

结果

这是目前为止的结果。

13962fe08e2756

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

创建右上角滑行呼叫动作

通过创建第一个滑动调用操作,我们可以通过复制已经构建的部分来加快创建其余CTA的过程。接下来,我们将为右上角创建一个滑动调用操作。

复本科

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

11aba3642e57ef

更新节设置

然后按以下方式更新新的节设置:

  • 保证金:320便士
  • 动画方向:左

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

01
02
03
position: fixed;
top: 80px;
right: -320px;

133bebcd65f82e

更新Blurb模块设置

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

01
02
03
position: absolute;
bottom: 0px;
left: -40px;

13e34efd325226

结果

现在,您将在页面模板的右上角看到一个幻灯片到操作的调用。

1e60658fee3226

创建左下角滑块呼叫动作

复制

若要在页面模板的左下角创建幻灯片中的操作调用,请复制页面布局顶部的左上角cta部分。将重复部分标记为“左下角CTA”,然后将其移至POST内容部分下方。

13ee2f16438055

更新节设置

然后打开节设置,更新主元素CSS,将“top:80px”替换为“底部:0px”。下面是最后一个片段:

01
02
03
position: fixed;
bottom: 0px;
left: -320px;

1642bef2c45ef2

更新Blurb模块设置

然后更新Blurb模块的主元素CSS,将“底部:0px”替换为“top:0px”。下面是最后一个片段:

01
02
03
position: absolute;
top: 0px;
right: -40px;

1e44f252e8d486

结果

现在查看左下角的幻灯片调用,在活动页面上执行操作。

1276e40655e4df

创建右下角滑块呼叫动作

复制

若要创建右下角幻灯片中的操作调用,请复制右上角CTA部分,并将重复部分移至POST内容部分下方。

17e54b426f86ee

更新节设置

打开节设置并更新主元素CSS,将“top:80px;”替换为“底部:0px;”。下面是最后一个片段:

01
02
03
position: absolute;
bottom: 0px;
right: -320px;

1ef55614582e6a

更新Blurb模块设置

然后打开blurb模块设置并更新主元素CSS,将“底部:0px;”替换为“top:0px;”。下面是最后一个片段:

01
02
03
position: absolute;
top: 0px;
right: -40px;

19ee21fe456514

结果

现在查看右下角的幻灯片–在活动页面上调用动作。

1ee41f5263b5cf

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

对于最后一步,我们需要添加一些定制的jQuery和CSS,这样我们就可以为每个幻灯片中的CTA提供打开和关闭功能。

添加代码模块

将代码模块添加到布局中的某个部分。

16ea8d8359ef24

粘贴代码

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

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>

1ee4d2f4ff5f6e

Divi主题教程精品教程

【divi教程】如何使用Divi的主题生成器创建自定义全局标题

2020-1-2 15:44:11

Divi主题教程精品教程

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

2020-1-3 21:44:55

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

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