如何在 Divi 中为您的页面设计欢迎门

已发表: 2020-01-15

欢迎门是提高网站上任何号召性用语转化率的有效方式。 事实上，欢迎门是一个流行的功能，它有像 OptinMonster 这样的插件来创建高转换率的电子邮件选项。 欢迎门背后的基本思想是通过全屏号召性用语隐藏网页内容。 这会强制用户在查看预期页面之前与 CTA 进行交互。

在本教程中，我们将向您展示一种快速简便的方法，无需使用插件即可向您的网页添加自定义欢迎门。 这对于提高着陆页上 CTA 的转化率可能会派上用场。

一探究竟！

抢先看

这是我们将在本教程中构建的欢迎门的快速浏览。

迪维迎宾门

迪维迎宾门

迪维迎宾门

免费下载布局

要亲身体验本教程中的设计，您首先需要使用下面的按钮下载它。 要访问下载，您需要使用下面的表格订阅我们的 Divi Daily 电子邮件列表。 作为新订户，您每周一将收到更多的 Divi 善良和免费的 Divi 布局包！ 如果您已经在列表中，只需在下面输入您的电子邮件地址，然后单击下载。 您不会被重新订阅或收到额外的电子邮件。

下载文件
免费下载

免费下载

加入 Divi 时事通讯，我们将通过电子邮件向您发送一份最终的 Divi 登陆页面布局包，以及大量其他令人惊叹的免费 Divi 资源、提示和技巧。 跟随，您将很快成为 Divi 大师。 如果您已经订阅，只需在下面输入您的电子邮件地址，然后单击下载即可访问布局包。

您已成功订阅。 请检查您的电子邮件地址以确认您的订阅并获得免费的每周 Divi 布局包！

要将布局导入您的页面，只需提取 zip 文件并将 json 文件拖到 Divi Builder 中。

让我们开始教程吧？

你需要什么开始

首先，您需要执行以下操作：

  1. 如果您还没有安装并激活 Divi 主题。
  2. 在WordPress中新建一个页面，在前端使用Divi Builder编辑页面（visual builder）。
  3. 选择“选择预制布局”选项。
    迪维迎宾门
  4. 选择 Bistro Layout Pack，然后从 Load from Library 弹出窗口中选择 Bistro Landing Page 布局，然后单击“使用此布局”按钮将布局导入页面。
    迪维迎宾门

之后，您就可以在创建自定义欢迎门时使用一个登录页面。

创建欢迎门

添加新部分

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

迪维迎宾门

设计剖面

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

背景

首先，添加一个背景渐变和图像如下：

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

迪维迎宾门

填充和动画

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

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

迪维迎宾门

定位欢迎门部分

现在我们准备给我们的部分一个具有更高 z 索引的固定位置，以便欢迎门将填满浏览器屏幕，直到用户单击“不，谢谢”按钮。

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

  • CSS ID：欢迎门

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

将以下自定义 CSS 添加到主元素： 

height: 100vh;
position:fixed;
width: 100%;
top: 0px;
display:flex;
flex-direction: column;

然后更新 Z 索引如下：

  • Z指数：11

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

迪维迎宾门

创建欢迎门内容

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

文本模块

在单列行内，添加一个具有以下内容的新文本模块： 

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

迪维迎宾门

文字设计

然后更新文字设计如下：

  • 文字字体：小屋
  • 文字文字颜色：#ffffff
  • 文字文字大小：24px（桌面），18px（手机）
  • 文本对齐：居中
  • 标题 2 字体：Cabin
  • 标题 2 字体粗细：粗体
  • 标题 2 文本颜色：#ffffff
  • 标题 2 文字大小：66 像素（桌面）、26 像素（平板电脑）

迪维迎宾门

添加两列行

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

迪维迎宾门

添加左键

在左栏中，添加一个按钮模块并更新设置如下：

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

迪维迎宾门

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

迪维迎宾门

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

display: block !important;

迪维迎宾门

添加正确的“不，谢谢”按钮

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

然后更新内容如下：

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

迪维迎宾门

然后更新按钮设计如下：

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

迪维迎宾门

然后将以下 CSS 类添加到不感谢按钮：

  • CSS 类：谢谢

迪维迎宾门

这将是我们在 jQuery 中的选择器，用于在单击时关闭欢迎门。

添加自定义代码

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

迪维迎宾门

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

迪维迎宾门

最后一点，让我们通过给包含我们的按钮的行一个最大宽度来使按钮靠得更近。 打开行设置并更新以下内容：

  • 最大宽度：600px

迪维迎宾门

最后结果

这是最终设计的样子。

迪维迎宾门

这是刷新页面时欢迎门的样子。

迪维迎宾门

这是欢迎门在手机上的样子。

迪维迎宾门

最后的想法

希望这个欢迎垫对您的页面或模板有所帮助。 Divi 可以使用可视化构建器轻松设计和定位欢迎垫，并且只需要一小段 jQuery 即可完成该功能。 因此，如果您在不使用插件的情况下为您的页面寻找快速欢迎垫，这应该会派上用场。

我期待在评论中收到您的来信。

干杯!