一、教程目的

切换到手机视图后，除了文本、图片、按钮三个常用模块，其他模块都有独立的编辑项，例如文字配置、图片配置、标题栏、间距等等。

由于不同模块的编辑项稍有不同，而“标题栏”和“间距”是除了三个常用模块之外，每个模块都有的编辑项，因此接来下将会重点介绍“标题栏”和“间距”这两个编辑项。

二、功能说明

【版本】建站任意版本均支持自定义

三、设置教程

下面会以“产品分类”模块为例，介绍手机视图下的“标题栏”和“间距”如何配置。

1. 标题栏

默认是隐藏标题栏，当取消勾选“隐藏”后，可自定义标题文字、标题文字样式、标题栏高度、标题栏背景。

1.1 标题

标题文字内容支持自定义。

2. 文字

标题文字样式默认是微软雅黑、大小16、颜色为网站主题色、位置居左，其中大小、颜色、位置这三种样式均支持自定义。

当你不知道如何配置网站主题色时，请查看并确认链接教程：【自适应模板】如何设置网站样式

3. 高度

标题栏的高度支持自定义，效果如下图所示。

4. 背景

标题栏背景支持配置为“默认”、“隐藏”、“自定义”。

默认：即标题栏背景色为白色；

隐藏：即标题栏背景色为透明，当网站背景色不为白色时才能看出透明效果；

自定义：可自定义配置标题栏背景色为“纯色”、“渐变”或“图片”；

三者的效果差异如下图所示。

（↑ 默认）

（↑ 隐藏）

（↑ 自定义）

2. 间距

可通过调修改“产品分类”模块的外间距，调整“产品分类”模块与通栏内容区边界之间的距离。

（其他模块同理，通过修改模块的外间距，即可调整模块与通栏内容区边界之间的距离。

）

手机视图编辑建议

以下补充说明用于帮助你在编辑自适应模板的手机视图时，更高效地把重点放在真正影响移动端体验的部分：

• 优先级建议：手机视图下应优先关注标题栏、间距、文字大小和按钮点击区域，这些最直接影响移动端浏览体验。
• 设计思路：电脑端可用的复杂布局不一定适合手机端，建议在手机视图中优先追求清晰、轻量和便于点击。
• 模块检查：切换到手机视图后，建议逐个检查包含图片、商品、表单和按钮的模块，避免关键模块出现错位或拥挤。
• 验证方式：调整完成后建议在真实手机设备中预览，而不是只停留在设计器视图中判断效果。