开始之前
先把材料备齐，不用再多开标签页。
- 编辑器里已经开着一个现有项目。
- 台式机或笔记本的浏览器窗口够宽，能同时看到画布和检查器。
你将学会
- 看懂顶栏、左侧工具栏、画布、检查器和状态栏。
- 用画布或图层稳稳选中要的板块。
- 知道什么时候该用预览、演示、审查、上线和导出。
- 把编辑器界面风格和客户看到的网站主题分开。
01
动手改之前，先看懂顶栏
顶栏会告诉你现在是哪个项目、哪一页，保存状态如何；也在这里切换工作断点和缩放，审查与交付的按钮也都在上面。
- 在页面切换器旁边确认项目名称和当前页面。
- 离开页面前，先看清楚显示的是“已保存”“保存中…”还是“有未保存的更改”。
- 用 Desktop（电脑版）、Tablet（平板版）、Mobile（手机版）切换画布断点；用 Fit（自动缩放）让画布刚好放进可用空间。
- 文档的修改用“撤销”和“重做”；别把浏览器的后退当成编辑器的撤销键。
达到这一步就算做完： 你知道现在在哪一页，也会等到显示已保存再离开或开始审查。
02
把左侧工具栏当成任务地图
工具栏上每一项各管一类工作。开对面板，改动才不会出乎意料，交接时说明也好懂。
- 上线指南会告诉你，还有什么卡着不能安心上线。
- 组件用来加板块、管理可重复使用的素材；图层则显示精确的嵌套结构。
- 页面负责页面的名称、顺序、可见度、复制和删除。
- 主题改的是客户看到的网站设计系统；模块改的是经营能力；站点则放商家信息和设置。
- AI 助手在配置好之后可以帮你改。把它产出的东西当草稿，同样在编辑器里检查过再用。
达到这一步就算做完： 有人跟你说“改电话”“把某页隐藏”或“打开订座”，你能直接打开站点、页面或模块，不用在界面里到处找。
03
先选中正确的板块，再动它
一个做得漂亮的区段，通常是一整棵嵌套板块。你选中谁，检查器就改谁，所以动内容或布局之前先确认选中标签。
- 最快的方式是直接在画布上点你看得到的元素。
- 元素互相叠在一起、或藏得很深时，就开图层，在那里按名称选。
- 用组件搜索、点击或拖拽，把新板块放到当前选中的附近。导航栏会自动放到最上面。
- 放进去之后，先确认选中的是新板块，再改它的属性。
达到这一步就算做完： 检查器上方的标题就是你想改的那个板块，旁边的区段也没有莫名其妙跟着变。
04
检查器按“内容 → 样式 → 动作”的顺序用
把含义、外观和行为分开处理，能少掉很多白干的活，响应式覆盖也更好理清。
- 文案、标签、图片、价格和组件自己的数据，都在“内容”里改。
- 布局、尺寸、间距、字体排版、背景、边框和特效，都在“样式”里改。
- 点击之后要跳到哪、要触发什么经营动作，都在“动作”里设。
- 如果要改的是页面层级的元数据，而不是某个板块，就用“页面”标签页。
达到这一步就算做完： 板块说的话是对的、在当前断点看着也对，每个可交互的控件都做出你要的行为。
05
编辑器界面风格，和网站主题要分开
设置旁边的界面风格切换器，改的是你干活的环境。换一套编辑器外观很安全，客户看到的网站不会跟着变。
- Singular、Ignition 这类编辑器风格，用右上角的界面切换器换。
- 网站的颜色变量、字体和设计预设，到左侧工具栏的主题里改。
- 看截图审色之前，先确认画面上是编辑器外壳，还是客户真正会看到的画布。
达到这一步就算做完： 你把编辑器从 Singular 换成 Ignition，客户看到的网站完全没变。
06
审查和交付，要按对按钮
右上角那几个按钮，代表刻意分开的不同阶段。按错的话，本来只是内部检查，可能就变成交件给客户，甚至改到线上。
- “预览”会打开可交互的店面和后台，还带设备切换。
- “演示”（Demo）给客户看一个干净的画面，看完还能回来继续编辑。
- “审查”（Review）用来交出审查版本，也负责导入反馈。
- 工作空间开通云端发布后，“上线”（Go live）才会启动发布流程。
- “导出”（Export）产生的是可移植的文件，本身不代表网站已经公开部署。
- 不想在界面里东翻西找时，按 ? 看快捷键和编辑器帮助。
达到这一步就算做完： 你说得出手上这份文件或网址是哪个按钮做出来的，也说得清它是草稿、审查版、导出件，还是正式上线。
最后检查
这几条全部成立，才算真做完。
- 你随时知道当前是哪一页、哪个断点、缩放多少，以及保存状态。
- 常见的任务各归左侧哪个面板管，你都清楚。
- 你会先确认选中哪个板块，才去动检查器。
- 网站主题和编辑器界面风格的区别，你分得清楚。
- 预览、演示、审查、上线、导出，你各用在不同阶段。