万小智拖拽式页面模块布局调整高阶操作教程
万小智页面布局调整的核心思路，是先用 AI 对话把页面结构定准，再用可视化拖拽把模块位置、间距、层级和响应式表现磨细。单纯拖拽能解决局部细节，单纯对话能解决整体结构，两种模式配合起来，页面改动会更稳。
进入编辑状态后，页面顶部点击 编辑 即可切换到编辑模式。此时可以直接拖拽模块、修改文字图片、调整样式，也可以通过右侧 AI 对话面板继续下达布局指令。拖拽产生的修改和对话产生的修改是互通的，不会分成两套互不相干的内容。
想快速调整模块位置，最直接的办法是在编辑模式下按住模块拖动。适合微调相邻模块的上下顺序，比如把产品介绍移到案例展示上方，把表单模块挪到页面底部。如果模块嵌套比较深，或者页面内容较多，手动拖拽容易错位，这时用对话指令会更省事。比如在 AI 面板输入“将产品模块移动到案例模块上方”，系统会直接调整模块排列。
页面整体宽度可以在页面底部设置。点击页面底部齿轮图标，可以修改页面宽度，常见宽度建议设为 1200px，最大支持到 1600px。页面高度可以通过页面底部双箭头上下拖动调整。这个操作对通栏区块、页头页尾、内容区高度都有效，尤其是页面底部留白过多或模块被压缩时，调一下高度会更直观。
容器是万小智里最基础的布局单元，相当于给一组模块套一个“盒子”。把图片、按钮、文字放进同一个容器后，可以统一设置背景、边框、圆角、阴影和动效，也能精确控制它的宽高和位置。做卡片式布局、品牌展示区、服务模块时，容器能让页面结构更清楚。
自适应布局适合做通栏区块，比如页头导航、通栏横幅、页脚信息区。它的宽度会自动撑满父容器，不需要单独设置宽度，主要调整高度和垂直位置。样式上可以设置纯色、渐变、图片背景，也能加边框和阴影。页头页尾背景还可以单独进入设置面板调整，支持透明度控制。
多栏布局用来做左右结构、并列卡片、侧边栏内容都很顺手。添加多栏布局后，可以设置通栏或页面宽度，也能调整各栏比例和列间距。如果希望每栏视觉更独立，可以给单个栏目单独设置背景。需要注意的是，多栏布局的宽度通常跟随父容器，不能像普通容器那样随意限定固定宽度。
标签布局适合空间有限但内容较多的场景，比如产品系列切换、服务分类展示、常见问题分组。每个标签可以单独设置文本、链接和打开方式，切换方式支持点击切换或悬停切换。标签本身还能分别设置默认、悬停、选中三种状态的颜色和背景，这样导航感会更明显。
模块层级关系是拖拽布局里容易被忽略的一环。页面里如果模块互相遮挡、按钮点不到、背景盖住内容，多半是层级出了问题。选中模块后，可以通过右键菜单或排列设置调整层级，把需要露出的模块置顶，把装饰性背景压到下层。容器套容器时，建议从外层到内层逐层检查，避免把子模块拖到父容器之外。
对齐和分布适合处理一组模块的整齐度。比如三张产品卡片高低不一，或者几个按钮间距忽大忽小，可以先把相关模块选中，再设置左对齐、居中对齐、等距分布。按住 Ctrl 或 Cmd 键可以多选组件，批量调整位置、尺寸和样式，比一个一个改快很多。
尺寸和坐标需要精确控制时，不要只靠肉眼拖。选中模块后，在排列设置里可以直接输入宽度、高度和坐标值。做 Banner、表单、导航栏这类对位置敏感的模块，数值化调整更可靠。尤其是模块需要和页面宽度、栏目宽度严格对齐时，手动拖动很容易差几个像素，输入数值能避免反复返工。
页头和页尾属于全局区域，调整时建议单独进入设置。点击顶部齿轮图标后，可以分别选择页头或页尾，设置宽度、背景、透明度等属性。页头页尾通常使用自适应背景，这样在不同屏幕下不容易出现左右白边。如果页头导航项顺序需要调整，直接拖拽导航项即可，也可以设置悬停和选中样式，让菜单状态更清晰。
移动端适配不能只靠 PC 端拖拽完成。编辑过程中建议频繁切换桌面端和移动端预览，检查模块在窄屏下是否错位、文字是否溢出、按钮是否可点。多栏布局在手机上通常会变成上下堆叠，容器高度也可能随之变化。如果某个模块在移动端显示异常，可以单独调整该模块在移动视图下的间距、字号和显隐关系。
AI 对话适合处理结构性改动。比如新增一个新闻资讯板块、把首页轮播图换成浅色系、给联系表单增加预算字段、调整导航菜单顺序，这类需求用对话描述会比逐个拖拽更高效。对话修改完成后，仍然可以进入可视化编辑器继续微调文字、图片、间距和颜色。
可视化拖拽更适合处理细节。比如模块之间差一点间距、图片位置偏了、按钮不够突出、容器圆角不够统一，这些用鼠标直接调整会更直观。实际使用时，可以先用对话把页面骨架搭好，再用拖拽把每一处细节对齐；也可以先拖出一个大致版式，再用对话批量替换风格。
修改过程中建议随时预览。顶部预览可以快速查看整体效果，确认无误后再发布。万小智支持版本管理，如果某次布局调整不理想，可以回滚到之前的版本，避免误操作导致页面结构被打乱。
遇到复杂页面，可以把布局拆成三层来理解：最外层决定页面宽度和通栏背景，中间层决定模块排列和栏位比例，最内层决定具体内容的间距和样式。这样调整时不容易乱，也能更快定位问题到底出在容器、栏目还是单个模块上。
高阶布局的关键不是把每个模块拖到完美位置，而是让容器、栏目、模块之间的关系保持清晰。容器负责分组，多栏负责并列，标签负责切换，自适应布局负责通栏区域，拖拽和数值设置负责细节对齐，AI 对话负责整体结构调整。把这些能力配合起来，页面布局调整会更高效，也更容易保持整站风格一致。
