一、功能效果

好看的电脑网站手风琴设计效果是这样的：

也可是这样的：

让我们一起进入到电脑版网站开始配置吧。

二、功能说明

【版本】网站任意版本均支持使用手风琴模块。

三、设置教程

1. 添加手风琴模块

在设计页面找到左侧导航【模块-添加模块- 排版 】中找到【 手风琴 】模块，单击可添加到当前页面底部，也可长按拖动到想要的位置放置。

2. 编辑手风琴模块

2.1 切换初始或悬停添加模块

① 选择切换【 初始或悬停 】，可编辑初始状态、鼠标悬停区域的悬停状态效果。

② 可长按拖动导航左侧导航模块面板的模块放到手风琴模块里，或者在手风琴模块里选择【 添加模块 】按钮后再选择模块。

2.2 添加或删除列

① 在列工具栏上可选择【+】号添加列，在该列右侧新增一列。

② 选择删除按钮，则可删除当前列。

（注意：数量上不得少于2个列；

不得多于 6个列）

2.3 配置样式

① 选择配置样式， 可对每一列编辑单独配置样式。

② 可对列的更多配置做自定义编辑。

配置统一的列样式，包括列宽度、列高度、悬停阴影、初始阴影（统一配置，不能单独对某一单独立配置， 列宽度，数值单位是占比）

2.4 配置默认的悬停展开列

① 可配置列为默认展开的列，在网站打开后，当前列会为悬停展开的效果。

默认是首个列为默认展开列，也可根据需要先配置居中的列为默认展开。

3. 批量编辑提高效率

3.1 复制列

可编辑好一个列后，复制设计好的列，再删除不需要先的空白列，快速做批量编辑。

3.2 根据图片背景编辑列

可编辑好列的个数、宽高度后，通过添加图片背景，根据图片尺寸上传设计好的图，即可快速制作。

四、操作示例

1. 初始页面添加内容：选择【初始】设置你想要展示的内容。

例如图片，或者文字等等。

2. 给悬停页面配置内容，可是文字、图片等等，根据你的实际情况配置即可。

3. 配置好初始页面和悬停页面内容后保存并生效，即可实现手风琴效果啦。

内容折叠建议

以下补充内容用于帮助你在自适应模板中使用手风琴模块时，把信息组织得更清楚：

• 适用内容：问答、说明条款、服务流程和分类介绍都很适合用折叠结构来降低页面拥挤感。
• 默认展开：默认展开项不宜过多，建议只突出最重要的一两项内容。
• 标题表达：折叠项标题建议直接说明问题或主题，避免用户必须点开后才知道里面是什么。
• 手机体验：手风琴在手机端很常用，发布前建议重点检查点击区域和折叠动画是否顺畅。