标题组件
标题组件用于划分页面栏目或内容模块,可以组合主标题、副标题、装饰效果和【更多】入口。常用于商品列表、营销活动和图文内容上方。
适用场景
- 标记“新品推荐”“热销商品”等内容区块;
- 使用副标题补充栏目卖点;
- 通过【更多】入口跳转到完整列表页。
添加组件
- 在页面编辑器中拖入【标题】组件;
- 填写主标题,按需填写副标题;
- 选择【标准】或【居中】布局;
- 选择竖线、圆点、下划线、叠字或无装饰;
- 按需设置副标题位置;
- 标准布局可开启【显示更多】,并配置文案和动作;
- 调整字号、字重、间距和色调后保存预览。
主要配置
| 配置项 | 说明 |
|---|---|
| 主标题 | 当前内容区块的名称 |
| 副标题 | 对主标题进行补充说明 |
| 标题布局 | 标准布局支持右侧【更多】,居中布局突出栏目主题 |
| 标题装饰 | 支持竖线、圆点、下划线、叠字和无装饰 |
| 副标题位置 | 可放在主标题右侧或下方;叠字装饰会使用特殊排版 |
| 显示更多 | 控制是否显示右侧入口 |
| 更多文案 | 设置入口显示文字 |
| 更多动作 | 设置点击入口后的目标行为 |
| 标题样式 | 调整主标题字号、字重、副标题字号、间距和色调 |
推荐方案
- 普通栏目优先使用【标准 + 竖线】;
- 强调品牌感可使用【居中 + 下划线】;
- 叠字效果需要填写比主标题更长的副标题,才能形成完整背景字效果;
- 同一页面的同级标题应保持相同布局、字号和装饰。
使用建议
- 主标题保持简短,并与下方内容一致;
- 副标题只补充必要信息;
- 居中布局不显示【更多】入口;
- 开启【更多】后应配置有效点击动作;
- 标题和背景保持足够对比度;
- 相邻区块使用一致的标题层级和间距。
常见问题
为什么没有显示【更多】?
只有【标准】布局支持【更多】入口,请先切换标题布局。
叠字只显示很短一段怎么办?
叠字内容来自副标题。填写完整的英文、拼音或较长文案,并在手机预览中检查宽度。
