跳转到内容
免费安装
简体中文
在 Claude 中打开 就此页面提问在 ChatGPT 中打开 就此页面提问

横幅内容和元素

横幅可以包含的六种元素、如何排序,以及如何通过分组让一个横幅传达两条信息。

Content 面板是构建器侧栏中的第一个图标。横幅所说的所有内容都在这里设置。

Content 面板,其中的 Elements 卡片列出 Text、Countdown 和 Button,下方是 Add element 按钮和 Add group 按钮

元素在横幅中从左到右排列,顺序与它们在此列表中的顺序一致。

  • Add element 会打开包含六种类型的菜单。新元素会添加到列表末尾。
  • 拖动行左侧的手柄可移动该元素。横幅会按这里的顺序排列。
  • 将鼠标悬停在行上,会显示复制和删除按钮。
  • 点击某一行,即可在右侧一栏中打开它的设置。

消息本身。可设置文字内容、大小、粗体、斜体、下划线以及它自己的颜色。

如果颜色留空,文字会沿用横幅自身的文字颜色,因此重新设置横幅样式时,消息也会随之改变。

横幅内的实时计时器。它有三种模式:

模式 买家看到的内容
Count down to a date 所有人看到相同的剩余时间
Fixed minutes per visitor 每位买家在到达时获得自己的计时
Daily recurring 在选定的工作日、两个时间之间运行

您还可以选择显示哪些单位(天、小时、分钟、秒)、是否在数字下方显示单位说明,以及说明的文字。说明留空则使用英文默认值。

When the timer ends 决定归零时的处理方式:隐藏横幅、保持在零,或重新开始。

一个标签加一个操作:

点击时 作用
Open a link 将买家带到某个网址
Scroll to a section 通过 CSS 选择器跳转到当前页面的某个部分
Apply a discount code 将折扣码应用到买家的购物车

对于链接,您还可以开启 Open in a new tab,这样您的商店会保留在后台。

其余是样式设置:形状(方形、圆角、胶囊形)、字号、尺寸预设、粗体/斜体/下划线、背景、标签颜色和边框。

折扣码本身,以虚线轮廓显示。开启 Copy on click 后,买家点击它即可复制,无需选中,也无需输入。

可以设置它的边框样式、圆角半径和专属颜色。

标志或徽章。粘贴网址,或上传文件,字段会自动填入。设置高度和替代文字。

替代文字是屏幕阅读器朗读的内容,也是图片加载失败时显示的内容。

没有可见内容。它之后的所有内容会另起一行,因此较长的横幅可以分为两行显示,而不是挤在一行。

将它拖到两个元素之间,即可在您想要的位置拆分横幅。

打开除换行以外的任何元素,它的 Style 部分以 Device settings 开头,有三个图标:眼睛、桌面和手机。

Countdown 元素的 Style 部分,顶部是 Device settings 行,显示眼睛、桌面和手机图标

Device settings 位于 Style 的顶部,其下的所有设置都跟随您选择的图标。

眼睛是常规情况:您设置的内容同时适用于两种屏幕。

桌面和手机图标会将其下的设置限定在该屏幕。选择手机并将字号降到 12,则只有手机会使用 12,桌面端仍保持眼睛图标所设置的值。Style 中的所有设置都可以这样拆分:字号、倒计时的数字和标签大小、颜色及其显示的单位、图片高度、按钮的形状和大小、折扣码的边框和颜色。

选择某种屏幕还会显示 Hide on desktop 或 Hide on mobile 开关。通过它,您可以去掉不适合手机的元素(例如长句或图片),而无需另建一个横幅。该元素仍会在另一种屏幕上显示。

换行没有 Style 部分,因此保留一个简单的 Show on 控件:Both screens、Desktop only 或 Mobile only。

元素列表下方是 Add group。

只有一个分组是常规情况。再添加第二个,横幅就会在它们之间循环:先显示第一个分组,然后是第二个,再回到第一个。每个分组包含各自的元素,因此一个横幅可以交替显示“Free shipping over $50”和“Sale ends tonight”。

切换的速度,以及是交叉淡入淡出还是滑动,请参阅动画和分组。

这对您有帮助吗?