Table of Contents
创建一个带有滑块背景的登录表单弹出窗口。
您将学习如何:
- 单击按钮打开登录表单弹出窗口
- 使用幻灯片作为弹出窗口的背景
- 关闭弹出窗口时将用户重定向到她的仪表板
https://youtube.com/watch?v=ixQWeI1EVD0%3Ffeature%3Doembed%26enablejsapi%3D1%26origin%3Dhttps%253A%252F%252Felementor.com
设计弹出窗口及其内容 #
- 转到Templates > Popups > Add New并为您的新 Popup 命名。(另一种方法是按 CMD+E 或 CTRL+E 打开Finder,搜索 Popup ,选择Add New Popup,然后给它一个名字。)
- 选择预先设计的弹出窗口模板或关闭库覆盖并从头开始设计您的弹出窗口。对于这个例子,我们将自己设计。
弹出 > 布局选项卡 #
- 自定义宽度:设置为 300px
- 高度:选择自定义
- 自定义高度:设置为 600px
- 覆盖:设置为隐藏
弹出 > 高级选项卡 #
防止关闭覆盖:设置为是
内容 #
第 1 节:
布局选项卡 #
- 最小高度:设置为 600 像素
- 现在向该部分添加一个标题和登录小部件。根据需要调整标题内容和样式。
- 在Login Widget > Content > Additional Options > Redirect After Login:设置为On并输入页面的 URL 以将用户重定向到
第 2 节:
布局选项卡 #
最小高度:设置为 600 像素
幻灯片小部件 > 布局选项卡 #
- 高度:设置为 600px
- 图像> 对于幻灯片的每个图像,重复以下四个选项更改:
- 图片:选择一张图片
- 尺寸:选择封面
- 肯伯恩斯效果:设置为是
- 缩放方向:设置为 In
现在让我们将两个部分放在另一个上面。
- 第 2 部分> 边距 > 顶部:-600 像素(负 600)
- 第 1 节> Z 索引:1
发布弹出窗口 #
单击 发布按钮。此弹出窗口没有条件、触发器或高级规则,因此请单击“保存并关闭”按钮。
控制弹出窗口 #
- 编辑包含登录按钮的页面。
- 编辑登录按钮。如果您还没有创建按钮,您现在可以创建。根据需要编辑其文本和排版。
按钮小部件 > 内容 #
- Button > Link:单击 Dynamic 图标
,然后在Actions下,选择Popup
- 再次单击Popup并选择Toggle Popup。
- 现在在弹出字段中,开始输入以搜索您刚刚创建的登录小部件。
- 单击更新按钮。
弹出 > 高级选项卡 #
- 防止关闭覆盖:设置为是
全部做完。以普通访问者(未登录)的身份访问带有登录按钮的页面。单击登录按钮。如果您填写表格并成功登录,您将被重定向到您指定为仪表板的页面。如果您选择关闭弹出窗口而不是登录,请再次单击登录按钮以切换/关闭弹出窗口。