将 Divi 5 的画布切换至手机视图时，页面会变成一条窄列，但构建器侧边栏面板的大小和位置却保持不变。根据具体的屏幕设置，设置面板所占用的空间甚至可能比正在编辑的布局还要大。
如果只是快速检查一下，这种默认布局或许还能忍受：从顶栏切换断点，扫一眼布局，接着干活。但一旦进入专门针对移动端的精细化调整阶段，在窄画布下沿用全宽模式的面板排列方式，操作起来会显得相当别扭。
Divi 5 的“工作区”（Workspaces）功能允许用户为这类场景重新排列构建器界面，并保存该配置以便下次直接调用。以下流程展示了如何创建一个专门用于手机端编辑的工作区，并解析每一步的逻辑，以便根据自身屏幕尺寸和工作习惯做微调。
为何要为响应式编辑单独建立工作区？
Divi 5 将构建器的当前布局状态保存为“工作区”，包含面板位置、工具栏控件可见性和视图偏好，随时可以一键恢复。如果对该功能不熟悉，可以查阅官方关于工作区的完整指南。
随着项目推进，所需工具会发生变化。搭建新布局时，重点在于添加区块、行和模块，或者加载整组布局；而在优化现有设计的移动端表现时，重心则转向调整间距、缩放标题、更改堆叠顺序，和确认哪些元素在窄屏下仍需保留。
这种阶段需要设置面板触手可及，但添加新内容的控件则变得不那么常用。虽然桌面端布局的工作区也能凑合用，但留下的面板或遮罩可能会干扰对窄预览图的检查。单独保存一套配置，可以让这些取舍只需做一次。
为手机编辑保存的工作区还能提供一致的起点。不必每次开始工作时都重新拖拽面板或切换视图，直接加载预设配置即可。仍需注意，编辑前确认当前的活动断点，工作区只保证初始视图正确，不会锁定后续编辑仅限于手机端。
如何在 Divi 5 中搭建手机编辑工作区
点击左侧构建器栏中的“工作区”图标，打开“活动工作区”菜单。选择平时常用的工作区作为基底。这样可以在调整后续选项时，保留偏好的界面模式和配色方案。
最终配置会在第五步通过“另存为新工作区”保存，无需提前复制现有工作区或在设置过程中更新它们。
工作区设置包含多个选项组，查找各项功能可能需要滚动页面。操作过程中保持设置面板开启，检查最终布局时再将其关闭。
第一步：以手机宽度打开构建器
在工作区设置中找到“构建器默认视图模式”，选择“手机”。这将把手机视图设为该工作区的起始状态。确认画布已切换到窄预览后，再开始排列面板。
这一步需最先做，因为后续的面板调整依赖于手机画布周边的可用空间。以第二步为例，窄预览两侧的灰色区域是放置设置面板的理想位置，避免遮挡设计稿。若在桌面宽度下选择的面板位置，可能不适用于窄画布。
以手机视图启动也便于直接进入响应式设置。在修改数值前，一定要检查选中的断点，特别是当会话期间切换过视图或打开过响应式编辑器时。
第二步：浮出设置面板并置于画布旁侧
打开某个设置面板，右键点击其标题栏，选择“分离面板”（Undock Panel）。面板随即变为可拖拽的浮动窗口。也可在工作区设置的“设置模态框默认位置”中预设浮动布局。最终配置在第五步保存。
浮动面板允许独立于侧边栏定位设置项。需要时打开模块设置，调整后关闭面板即可获得无遮挡的页面视图。虽然停靠面板也可关闭，但浮动面板的优势在于能将打开的状态定位在手机预览旁。
在手机宽度下，布局占据窄列，两侧留有余地。将浮动设置面板拖至右侧空隙，避免贴近画布边缘。宽显示器可留出充足面板宽度，小笔记本则需调整面板尺寸以适应空间，若感觉不便，也可保持停靠状态。
核心目标是同时看到设置项及其对画面的影响。比如说修改内边距时，无需挪动面板即可观察区块的实时响应。
