如何创建一个 Hello Bar 倒计时弹出窗口

创建一个显示 24 小时促销倒计时的弹出窗口

您将学习如何创建一个弹出窗口:

  1. 增加紧迫感
  2. 增加销售额
https://youtube.com/watch?v=S4C_UplQugs%3Ffeature%3Doembed

设计弹出窗口及其内容 #

  1. 转到模板>弹出窗口>添加新并为您的新弹出窗口命名
  2. 选择预先设计的弹出窗口模板或关闭库覆盖并从头开始设计您的弹出窗口。对于这个例子,我们将自己设计。

弹出 > 布局选项卡 #

  1. 宽度:100vw,因此它将显示在视口宽度的 100% 上
  2. 高度:自定义
  3. 自定义高度:300px
  4. 位置 > 垂直:顶部
  5. 覆盖:滑动到关闭
  6. 入口动画:淡入
  7. 动画时长:2.2 秒

弹出 > 样式选项卡 #

  1. 弹出>颜色:滑动到透明
  2. Popup > Box Shadow:单击重置箭头以关闭框阴影。
  3. 关闭按钮 > 垂直位置:20
  4. 关闭按钮 > 水平位置:4
  5. 尺寸:30

弹出 > 高级选项卡 #

填充:全部为 30 像素。


内容 #

  1. 单击+添加一个包含 4 列的新部分。
  2. 部分 > 布局 >内容位置:中间
  3. 部分 > 样式 >颜色:#e8e8e8
  4. 添加标题小部件,输入标题,并根据需要调整字体大小和粗细
  5. 添加Button小部件,并根据需要调整文本、颜色和设计元素
  6. 添加一个Countdown小部件,并通过拖动列将其拉伸
  7. 倒计时 > 内容 >类型:Evergreen Timer
  8. 倒计时 > 内容 >时间: 23
  9. 倒计时 > 内容 >分钟: 59
  10. 倒计时>内容>过期后的操作:选择隐藏和新消息
  11. 倒计时 > 内容 >消息:您希望与计时器一起显示的消息到期
  12. 倒计时>样式>框>背景颜色:选择一种颜色
  13. 倒计时>样式>内容>数字:根据需要更改颜色和版式
  14. 倒计时>样式>内容>标签:根据需要更改颜色和版式
  15. 添加一个图像小部件,然后从您的图库中选择一张照片。
  16. 图像 > 高级 >边距:在底部设置一个负边距,这样图像就会稍微浮动在弹出窗口下方。
  17. 图像 > 高级 >入口动画:左下旋转
  18. 图像 > 高级 >动画持续时间:慢
  19. 图像 > 高级 >动画延迟(毫秒):500

设置发布选项 #

  1. 条件:包括 > 整个网站
  2. 触发器 > 页面加载:是,在 3 秒内
  3. 高级规则>隐藏登录用户:是的,所有用户
  4. 高级规则 > 最多显示 X 次:是的,1 次

全部完成。访问您的页面,3 秒后,您的 Countdown 弹出窗口将出现,产生紧迫感和购买产品的动力。

Powered by BetterDocs

发表评论

您的电子邮箱地址不会被公开。

Scroll to Top