栏目导航：电脑网站
建议先从栏目目录定位同类模块，再根据是否排障需求选择对应文档。
上位页：返回电脑网站栏目目录
同类页：折叠标签模块介绍、自由容器模块介绍、常用模块（文本、图片、按钮）介绍、横向标签/纵向标签模块介绍、全站搜索/产品搜索模块介绍
一、功能结果
好看的电脑网站手风琴设计效果是这样的：
也可是这样的：
让我们一起进入到电脑版网站开始配置吧。
二、功能说明
【版本】无版本限制
三、设置教程
1. 新增手风琴模块
在设计页面找到右侧导航【模块-新增模块- 排版 】中找到【 手风琴 】模块，单击可新增到当前页面底部，也可长按拖动到想要的位置放置。
（只支持嵌套到通栏、版式，不支持与标签模块互相嵌套）
2. 编辑手风琴模块
2.1 切换初始或悬停新增模块
① 选择切换【 初始或悬停 】，可编辑初始状态、鼠标悬停区域的悬停状态效果。
② 可长按拖动导航右侧导航模块面板的模块放入手风琴模块里，或者在手风琴模块里选择【 添加模块 】按钮后再选择模块。
2.2 新增或删除列
① 在列工具栏上可选择【+】号新增列，在该列右侧新增一列。
② 选择删除按钮，则可删除当前列。
（注意：数量上不得少于2个列；
不得多于6个列）
2.3 配置样式
① 选择配置样式， 可对每一列编辑单独配置样式。
② 可对选中列的初始与悬停分别配置背景。
③ 可对列的更多配置做自定义编辑。
配置统一的列样式，包括列宽度、列高度、悬停阴影、初始阴影（统一配置，不能单独对某一单独立配置， 列宽度，数值单位是占比）
2.4 配置默认的悬停展开列
① 可配置列为默认展开的列，在网站打开后，当前列会为悬停展开的效果。
默认是首个列为默认展开列，也可根据需要先配置居中的列为默认展开。
3. 批量编辑提高效率
3.1 复制列
可编辑好一个列后，复制设计好的列，再删除不需要先的空白列，快速做批量编辑。
3.2 根据图片背景编辑列
① 可编辑好列的个数、宽高度后，通过新增图片背景，根据图片尺寸上传到设计好的图，即可快速制作。
② 图片尺寸可在新增图片的弹窗中查看并获取推荐尺寸。
手风琴内容编排建议
手风琴模块适合承载问答、流程、参数对比等并列信息。要想用得更好，关键是每一栏的标题足够清晰、内容量相对均衡，并且展开/收起不会影响阅读节奏。
- 标题直达：标题应直接概括内容主题，避免用户必须点开才知道讲什么。
- 内容均衡：每一栏信息量尽量接近，避免某一栏过长导致阅读断层。
- 默认展开：建议默认展开最重要的一栏，提升首屏信息密度。
- 多端复查：发布后建议在不同宽度屏幕下复查列宽、图片比例和悬停效果。
适用与不适用
这篇《手风琴模块介绍》更适合用于处理表单字段设计、通知回执、数据处理与报价计算场景，尤其适合已经进入实际配置、联调或上线验证阶段的操作人员。
不适用的情况：如果页面只做静态内容展示而不涉及用户提交，本部分可只保留上线检查项。
前置条件
- 先明确表单目标：收集线索、预约、报名还是报价。
- 确认字段、通知接收人和数据去向已经设计清楚。
- 如涉及支付或计算，先准备真实测试数据。
验证方式
- 从前台完整提交一条真实数据。
- 检查后台记录、通知消息和回执提示是否一致。
- 如涉及计算/支付，确认金额、变量和结果承接正确。
失败排查
- 提交成功但无通知时，先查通知接收配置、短信/邮件通道和拦截。
- 提交后数据未显示时，优先查后台筛选条件、权限和字段规则。
- 报价计算异常时，优先查变量值和公式顺序。
上线检查清单
- 确认正式域名、正式终端和正式页面入口都已验证通过。
- 随机抽查至少 3 个关键动作或关键模块是否正常。
- 保留一份上线前后的截图或日志样本，便于后续排障。
真实案例式说明
例如《手风琴模块介绍》如果前台提示提交成功但销售没有收到通知，问题往往不在按钮本身，而在通知接收人、通道配置和回执链路。
常见问题入口
如果你当前更关注失败、未生效、审核不过或状态不同步，建议继续查看这些独立问题页：
继续查看帮助文档与建站服务
如果这篇文档解决了你当前的问题，可以继续回到帮助目录查看同类教程；如果你正在准备企业官网建设、套餐选型或定制开发，也可以继续进入对应服务页了解。