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

【divi主题教程】如何在Divi中为您的页面设计进入弹窗

16c27eededd5f6
欢迎词是增加网站上任何号召性用语转化的有效方法。实际上,欢迎门是OptinMonster之类的插件的流行功能,用于创建高转换电子邮件选择。欢迎使用门的基本思想是通过全屏行动呼吁隐藏网页的内容。这迫使用户在查看预期页面之前与CTA进行交互。

在本教程中,我们将向您展示一种快速简便的方法,无需使用插件即可将自定义欢迎门添加到您的网页。这可能有助于提高目标网页上的CTA转换。

一探究竟!

抢先看

快速浏览一下我们将在本教程中构建的欢迎界面。

18e6055f6e6c22

1ef82f323e6e54

169ee2ff58685e

 

让我们进入教程吧?

您需要开始什么

要开始使用,您需要执行以下操作:

  1. 如果尚未安装请安装并激活Divi Theme
  2. 在WordPress中创建一个新页面,并使用Divi Builder编辑前端的页面(可视生成器)。
  3. 选择选项“选择预制布局”。
    16e18c8e28a56f
  4. 选择Bistro布局包,然后从“从库中加载”弹出菜单中选择Bistro Landing Page布局,然后单击“使用此布局”按钮以将布局导入页面。
    1a276ea85fbe1f

之后,您将拥有一个创建自定义欢迎门的登录页面。

创建欢迎门

添加新部分

首先,创建一个新的常规部分并将其拖到页面顶部。然后向该部分添加一列的行。

135c67fee82e86

设计部分

在开始向该部分添加任何模块/内容之前,让我们添加一些自定义设计,以便我们有一个不错的画布可以继续使用。

背景

首先,添加背景渐变和图像,如下所示:

  • 背景渐变左侧颜色:rgba(0,17,38,0.7)
  • 背景渐变右颜色:#001126
  • 起始位置:68%
  • 将渐变放置在背景图片上方:是
  • 背景图片:[插入图片]

1892e4fee5c6e3

填充和动画

接下来,跳至“设计”选项卡并更新以下填充和动画设置:

  • 填充(桌面):顶部28vh,底部28vh
  • 填充(平板电脑):顶部18vh,底部18vh
  • 填充(电话):10vh顶部,10vh底部
  • 动画样式:幻灯片
  • 动画方向:向下
  • 动画起始不透明度:100%;

1f82f6afee5133

放置迎宾区

现在,我们可以为我们的部分提供较高的z索引固定位置,以便欢迎门将填充浏览器屏幕,直到用户单击“不,谢谢”按钮。

在添加定位CSS之前,让我们添加一个自定义CSS ID,如下所示:

  • CSS编号:welcome-gate

当用户单击“不,谢谢”按钮时,这将用于使用jQuery定位该部分以将其向上移出视图。

将以下定制CSS添加到main元素中:

01
02
03
04
05
06
height: 100vh;
position:fixed;
width: 100%;
top: 0px;
display:flex;
flex-direction: column;

然后,如下更新Z索引:

  • Z索引:11

注意:如果您还希望欢迎门也隐藏标题,则可以添加较高的Z索引,例如“ 99999”。

120f16e9876e5b

创建欢迎登门内容

现在我们的部分已经准备好,让我们开始添加欢迎门内容。您可以将任何想要的内容添加到此欢迎门。现在,让我们用两个按钮创建一个简单的CTA。左侧的按钮将是您希望用户单击的按钮。右侧的按钮将是“不,谢谢”按钮,它将关闭欢迎门。

文字模块

在这一行中,添加一个新的文本模块,其内容如下:

01
02
<h2>Free Dessert for First Timers</h2>
Book a reservation today and get your choice of any dessert on us!

1653ef92028ef6

文字设计

然后,如下更新文本设计:

  • 文字字型:机舱
  • 文字文字颜色:#ffffff
  • 文字文字大小:24px(桌面),18px(电话)
  • 文字对齐方式:居中
  • Heading 2 Font:Cabin
  • 标题2字体粗体:粗体
  • 标题2文字颜色:#ffffff
  • 标题2文字大小:66像素(台式机),26像素(平板电脑)

176e3de5af82b9

添加两列行

对于我们的按钮,让我们在文本下方创建一个两列的行。

19251f5ce6ea69

添加左键

在左列中,添加按钮模块并按如下所示更新设置:

  • 按钮文字:“好!让我们预订吧”

11766fa95e52fe

  • 按钮对齐方式:居中
  • 按钮文字颜色:#ffffff
  • 按钮背景颜色:#bd8f52
  • 按钮边框宽度:0px
  • 按钮字体粗细:粗体

189529f6ee5cef

然后添加以下自定义CSS,以使按钮跨越列的全角:

01
display: block !important;

19a2f15fea268e

添加右“不,谢谢”按钮

要创建“不用了,谢谢”按钮,首先复制左按钮并将其粘贴到右列中。

然后,如下更新内容:

  • 按钮文字:不用了,谢谢
  • 按钮链接URL:#(这很重要,因此按钮不会刷新页面)

1e629eb9f26275

然后,如下更新按钮设计:

  • 按钮文字颜色:#333333
  • 按钮背景颜色:rgba(255,255,255,0.4)

1fe9de2cfb563e

然后将以下CSS类添加到“不,谢谢”按钮中:

  • CSS类:不

152c5e6e6f9eee

这将是jQuery中的选择器,它会在单击时关闭欢迎门。

添加自定义代码

现在,让我们添加所需的自定义代码段,以添加当用户单击“不,谢谢”按钮时关闭欢迎界面的功能。为此,请在“谢谢”按钮模块下方添加一个代码模块。

19f6fd2f5e1f4e

然后将以下代码粘贴到代码模块代码框中:

<样式>
.move-gate {
top:-100vh!重要
过渡:全1;
}
</ style>
<脚本>
jQuery(document).ready(function($){
$(’。nothanks’)。click(function(){
$(’#welcome-gate’)。addClass(’move-gate’);
});
});
</ script>

15fee2a3e56ada

最后,让我们将包含我们按钮的行的最大宽度拉近按钮。打开行设置并更新以下内容:

  • 最大宽度:600像素

1e476e3eab52f5

最后结果

这是最终设计的样子。

18e6055f6e6c22

这是刷新页面时的欢迎界面。

1ef82f323e6e54

在这里,欢迎入口在手机上看起来像什么。

169ee2ff58685e

Divi主题教程精品教程

【DIVI视频教程】DIVI可视化编辑器主题标准视频教程

2020-1-4 21:06:38

WordPress教程精品教程

【WordPress教程】使用企业邮箱避免邮件标记为垃圾邮件,提高发信效率

2020-6-12 11:49:05

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

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