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

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

一探究竟！

抢先看

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

让我们进入教程吧？

您需要开始什么

要开始使用，您需要执行以下操作：

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

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

创建欢迎门

添加新部分

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

设计部分

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

背景

首先，添加背景渐变和图像，如下所示：

• 背景渐变左侧颜色：rgba（0,17,38,0.7）
• 背景渐变右颜色：＃001126
• 起始位置：68％
• 将渐变放置在背景图片上方：是
• 背景图片：[插入图片]

填充和动画

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

• 填充（桌面）：顶部28vh，底部28vh
• 填充（平板电脑）：顶部18vh，底部18vh
• 填充（电话）：10vh顶部，10vh底部
• 动画样式：幻灯片
• 动画方向：向下
• 动画起始不透明度：100％；

放置迎宾区

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

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

• CSS编号：welcome-gate

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

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

然后，如下更新Z索引：

• Z索引：11

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

创建欢迎登门内容

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

文字模块

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

文字设计

然后，如下更新文本设计：

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

添加两列行

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

添加左键

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

• 按钮文字：“好！让我们预订吧”

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

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

添加右“不，谢谢”按钮

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

然后，如下更新内容：

• 按钮文字：不用了，谢谢
• 按钮链接URL：＃（这很重要，因此按钮不会刷新页面）

然后，如下更新按钮设计：

• 按钮文字颜色：＃333333
• 按钮背景颜色：rgba（255,255,255,0.4）

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

• CSS类：不

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

添加自定义代码

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

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

	<样式>
	.move-gate {
	top：-100vh！重要
	过渡：全1；
	}
	</ style>
	<脚本>
	jQuery（document）.ready（function（$）{
	$（’。nothanks’）。click（function（）{
	$（’＃welcome-gate’）。addClass（’move-gate’）;
	}）;
	}）;
	</ script>

查看原始gistfile1.txt 与托管的GitHub上

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

• 最大宽度：600像素

最后结果

这是最终设计的样子。

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

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