公告栏是一条细长的横条,通常位于页面最顶部,用于显示“本周免费配送”或“支持货到付款”之类的简短消息。它可以显示一条消息,也可以轮换多条消息。
添加公告栏
- 打开建站工具,进入您想要的页面。
- 在版块标签中,点击添加新版块,在布局分组中选择公告栏。
- 如果想让它位于最顶部,把它拖到页头上方。
- 选择一个公告区块,在公告文本中输入您的消息。
- 点击发布。
任何页面上每页最多可以添加 2 个公告栏。每个页面都保存自己的副本。要在所有地方显示同一个公告栏,请使用应用到所有页面,请参阅版块和区块。
消息
每条消息都是一个公告区块。点击添加新区块即可添加,每个公告栏最多 7 个。拖动它们可以改变顺序。隐藏的消息和空消息会被跳过。只有一条消息时,它会居中静止显示。
动画设置
只有当公告栏中有两条或更多可见消息时,才会出现动画设置。
- 模式:滑块一次显示一条消息,并带有用于前后切换的小箭头。滚动条把所有消息排成一行连续滚动。
- 方向:左或右,即消息移动的方向。
- 到下一条公告的时间:2 到 10 秒。在滑块模式下,它是每条消息停留的时间。在滚动条模式下,它设置速度:这一行文字滚过屏幕所需的时间,所以数字越大,滚动越慢。
- 分隔符:放在消息之间的短字符或表情符号,例如圆点或星号。仅用于滚动条模式。
当顾客把鼠标指向它、触摸它或用键盘移到它上面时,滚动条会暂停,方便阅读。在设备上开启了减少动态效果的顾客会看到它静止不动。
布局和外观
- 版块宽度:页面让消息保持在页面宽度内,全宽使用整个屏幕宽度。
- 配色方案:公告栏的背景和文字颜色。与页头形成强烈对比,有助于公告栏更醒目。配色方案在配色方案中编辑。
- 字体大小:10 到 30 像素。
- 内边距:文字上方、下方和两侧的空白。
- 自定义 CSS标签:仅用于此公告栏的您自己的样式。
创意
- 两个公告栏:一个显示固定消息(例如您的配送承诺),另一个轮换显示各种优惠。
- 简短的消息在屏幕较窄的手机上效果最好。
- 季节性消息:优惠结束时用眼睛图标隐藏公告栏,下次再显示。它的消息会被保留。
小贴士
- 找不到模式或分隔符:请先添加第二条消息。分隔符还要求模式设为滚动条。
- 其他页面上没有这个公告栏:每个页面都有自己的版块。请在那里添加,或在已有公告栏的页面上使用“应用到所有页面”。