
在本教程中,我们将向您展示一种快速简便的方法,无需使用插件即可将自定义欢迎门添加到您的网页。这可能有助于提高目标网页上的CTA转换。
一探究竟!
抢先看
快速浏览一下我们将在本教程中构建的欢迎界面。
让我们进入教程吧?
您需要开始什么
要开始使用,您需要执行以下操作:
- 如果尚未安装,请安装并激活Divi Theme。
- 在WordPress中创建一个新页面,并使用Divi Builder编辑前端的页面(可视生成器)。
- 选择选项“选择预制布局”。
- 选择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元素中:
01
02
03
04
05
06
|
height : 100 vh; position : fixed ; width : 100% ; top : 0px ; display : flex ; flex-direction : column; |
然后,如下更新Z索引:
- Z索引:11
注意:如果您还希望欢迎门也隐藏标题,则可以添加较高的Z索引,例如“ 99999”。
创建欢迎登门内容
现在我们的部分已经准备好,让我们开始添加欢迎门内容。您可以将任何想要的内容添加到此欢迎门。现在,让我们用两个按钮创建一个简单的CTA。左侧的按钮将是您希望用户单击的按钮。右侧的按钮将是“不,谢谢”按钮,它将关闭欢迎门。
文字模块
在这一行中,添加一个新的文本模块,其内容如下:
01
02
|
< h2 >Free Dessert for First Timers</ h2 > Book a reservation today and get your choice of any dessert on us! |
文字设计
然后,如下更新文本设计:
- 文字字型:机舱
- 文字文字颜色:#ffffff
- 文字文字大小:24px(桌面),18px(电话)
- 文字对齐方式:居中
- Heading 2 Font:Cabin
- 标题2字体粗体:粗体
- 标题2文字颜色:#ffffff
- 标题2文字大小:66像素(台式机),26像素(平板电脑)
添加两列行
对于我们的按钮,让我们在文本下方创建一个两列的行。
添加左键
在左列中,添加按钮模块并按如下所示更新设置:
- 按钮文字:“好!让我们预订吧”
- 按钮对齐方式:居中
- 按钮文字颜色:#ffffff
- 按钮背景颜色:#bd8f52
- 按钮边框宽度:0px
- 按钮字体粗细:粗体
然后添加以下自定义CSS,以使按钮跨越列的全角:
01
|
display : block !important ; |
添加右“不,谢谢”按钮
要创建“不用了,谢谢”按钮,首先复制左按钮并将其粘贴到右列中。
然后,如下更新内容:
- 按钮文字:不用了,谢谢
- 按钮链接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> |
最后,让我们将包含我们按钮的行的最大宽度拉近按钮。打开行设置并更新以下内容:
- 最大宽度:600像素
最后结果
这是最终设计的样子。
这是刷新页面时的欢迎界面。
在这里,欢迎入口在手机上看起来像什么。