Table of Contents
创建一个显示 24 小时促销倒数计时器的弹出窗口
您将学习如何创建一个弹出窗口:
- 增加紧迫感
- 增加销售额
https://youtube.com/watch?v=S4C_UplQugs%3Ffeature%3Doembed%26enablejsapi%3D1%26origin%3Dhttps%253A%252F%252Felementor.com
设计弹出窗口及其内容 #
- 转到模板 > 弹出窗口 >添加新的并给你的新弹出窗口一个名字
- 选择一个预先设计的 Popup 模板或关闭 Library overlay 并从头开始设计您的 Popup。对于这个例子,我们将设计自己的。
弹出 > 布局选项卡 #
- 宽度:100vw,因此它将显示在 100% 的视口宽度上
- 高度:自定义
- 自定义高度:300px
- 位置 > 垂直:顶部
- 覆盖:滑动关闭
- 入口动画:淡入
- 动画持续时间:2.2 秒
弹出 > 样式选项卡 #
- 弹出>颜色:滑动到透明
- Popup > Box Shadow:单击重置箭头以关闭框阴影。
- 关闭按钮 > 垂直位置:20
- 关闭按钮 > 水平位置:4
- 尺寸: 30
弹出 > 高级选项卡 #
填充:全部 30px。
内容 #
- 单击+添加一个包含 4 列的新部分。
- 部分 > 布局 >内容位置:中间
- 部分 > 样式 >颜色:#e8e8e8
- 添加一个标题小部件,然后键入您的标题,并根据需要调整字体大小和粗细
- 添加按钮小部件,并根据需要调整文本、颜色和设计元素
- 添加一个倒计时小部件,并通过拖动列将其拉伸
- 倒计时 > 内容 >类型:长青计时器
- 倒计时 > 内容 >营业时间:23
- 倒计时 > 内容 >分钟:59
- 倒计时 > 内容 >过期后的操作:选择隐藏和新消息
- Countdown > Content > Message:您希望与计时器一起显示的消息到期
- 倒计时 > 样式 > 框 >背景颜色:选择一种颜色
- 倒计时>样式>内容>数字:根据需要更改颜色和版式
- 倒计时 > 样式 > 内容 >标签:根据需要更改颜色和排版
- 添加一个图像小部件,然后从您的图库中选择一张照片。
- Image > Advanced > Margin:在底部设置一个负边距,这样图像就会稍微浮动在弹出窗口的下方。
- 图像>高级>入口动画:向左下方旋转
- 图像>高级>动画持续时间:慢
- 图像 > 高级 >动画延迟(毫秒):500
设置发布选项 #
- 条件:包括 > 整个网站
- 触发器 > 页面加载:是,在 3 秒内
- 高级规则 > 对登录用户隐藏:是,所有用户
- 高级规则 > 最多显示 X 次:是,1 次
全做完了。访问您的页面,3 秒后,您的倒计时弹出窗口将出现,营造一种紧迫感和购买产品的动力。