WordPress divi主题

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

| 5月 7, 2022 | Divi主题使用教程 | 0 条评论

5分钟生成10篇英文软文article forge软件试用

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

google广告开户

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

看看这个!

抢先看

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

迪维迎宾门

迪维迎宾门

迪维迎宾门

免费下载布局

要掌握本教程中的设计,您首先需要使用下面的按钮下载它。 要访问下载,您需要使用下面的表格订阅我们的 Divi Daily 电子邮件列表。 作为新订阅者,您将在每周一收到更多 Divi 福利和免费的 Divi Layout 包! 如果您已经在列表中,只需在下面输入您的电子邮件地址,然后单击下载。 您将不会被重新订阅或收到额外的电子邮件。

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

让我们来看看教程好吗?

WordPress divi主题

你需要什么开始

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

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

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

创建欢迎门

添加新部分

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

迪维迎宾门

设计截面

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

背景

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

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

迪维迎宾门

填充和动画

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

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

迪维迎宾门

定位欢迎门部分

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

fiverr建站WordPress程序员

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

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

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

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

然后按如下方式更新 Z 索引:

注意:如果您希望欢迎门也隐藏标题,您可以添加更高的 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 字体:小屋
  • 标题 2 字体粗细:粗体
  • 标题 2 文本颜色:#ffffff
  • 标题 2 文字大小:66px(桌面),26px(平板)

迪维迎宾门

添加两列行

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

迪维迎宾门

添加左键

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

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

迪维迎宾门

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

迪维迎宾门

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

display: block !important;

迪维迎宾门

添加右“不,谢谢”按钮

要创建“No Thanks”按钮,首先复制左侧按钮并将其粘贴到右侧列中。

然后更新内容如下:

WordPress备份工具updrafplus
  • 按钮文本:不,谢谢
  • 按钮链接 URL:#(这很重要,因此按钮不会刷新页面)

迪维迎宾门

然后更新按钮设计如下:

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

迪维迎宾门

然后将以下 CSS 类添加到 no Thanks 按钮:

迪维迎宾门

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

添加自定义代码

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

迪维迎宾门

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

迪维迎宾门

最后一点,让我们通过为包含我们的按钮的行提供最大宽度来使按钮靠得更近。 打开行设置并更新以下内容:

迪维迎宾门

最后结果

这是最终设计的样子。

迪维迎宾门

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

迪维迎宾门

这里是欢迎门在移动设备上的样子。

迪维迎宾门

最后的想法

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

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

干杯!

5分钟生成10篇英文软文article forge软件试用
tiktok
WordPress divi主题