使用拖放编辑器编辑页面
了解编辑器布局，添加板块和元素，用浮动工具栏和 Inspector 调整文字、颜色与版式，让 AI Agent 修改页面，管理版本并使用快捷键。
编辑器有什么用？#
编辑器用于编辑 LDPage 中的所有页面：添加或排序板块，在画布上直接改字，按 Desktop/Tablet/Mobile 屏幕调整颜色、字号和版式，添加留资表单和弹窗，并让 AI Agent 协助修改。在“页面”列表中点击某个页面即可打开，从模板创建页面后也会自动打开。
1. 编辑器界面布局#
- 1
顶栏左侧：LDPage 标志（返回概览）、← 返回页面列表、页面名称和保存状态：已保存（Đã lưu）、保存中（Đang lưu…）、未保存（Chưa lưu）、保存出错——将重试，或冲突——请重新加载最新版本。两个弯箭头是撤销（Ctrl+Z）和重做（Ctrl+Shift+Z）。
- 2
中间：Desktop、Tablet、Mobile 三个按钮用于选择正在编辑的断点，以及缩放框（适应窗口，50%–200%）。
- 3
右侧：显示/隐藏左侧面板（⌘/Ctrl+B）、显示/隐藏 Inspector（⌘/Ctrl+.）、键盘按钮打开快捷键表、浅色/深色主题按钮、预览（Xem trước——先保存再在新标签页打开预览）和发布（Xuất bản）。
- 4
最左侧的竖栏有 5 个标签页：添加（Thêm）、结构（Cấu trúc）、AI、历史（Lịch sử）、设置（Cài đặt）。再次点击当前标签页可关闭面板。
- 5
画布底部有缩放栏：− / +（⌘/Ctrl − 和 ⌘/Ctrl +），点击百分比回到适应窗口（⌘/Ctrl 0），以及标尺按钮（Shift+R）。
2. 添加板块和元素#
点击“添加”标签页打开“Thêm section & phần tử”（添加板块和元素）面板。面板顶部有搜索框（“Tìm mẫu: nút bo tròn, form, hero, cta…”），左栏为各个分类。
- 1
探索（Khám phá）：快速主题标签（Hero、按钮、Sale、倒计时、价格表、表单…）以及文字组合、标签与徽章、3D 图标等精选行；点击“Xem tất cả”（查看全部）打开整组。
- 2
常用（Hay dùng）：最近使用（刚添加的项目）和已收藏（点击项目上的星标即可收藏）。
- 3
元素（Phần tử）：文本、按钮、图片、图库、方框、图标、视频、地图与粉丝页、Tabs、Accordion、表格、菜单、评分、倒计时、HTML 代码等。
- 4
图片（Ảnh）：按行业分类的示例图片，可在页面中免费使用；可在 Inspector 中替换。
- 5
板块（Section）：在中间栏选择板块类型（Hero、功能/优势、介绍、流程、价格表、客户评价、常见问题、页脚等），再从“Tất cả / Mẫu thiết kế / Mẫu cơ bản”（全部 / 设计模板 / 基础模板）标签中选择。
- 6
布局（Bố cục——Section · 行 · 块以及预制板块）、表单（Form——表单模板和表单板块）以及实用工具（Tiện ích——弹窗、底部固定 CTA 栏、悬浮联系按钮等）。
- 7
添加方式：板块可点击后添加到当前可见板块的下方，或拖到画布上插入到准确位置。元素可点击后添加到屏幕中央（覆盖在页面上），或拖放到任意位置自由放置。
3. 选择并编辑元素#
- 1
在画布上点击元素即可选中。元素周围出现带缩放手柄的绿色框，上方显示路径标签（例如 Hero › 标题 …）；拖动标签旁的 ⠿ 手柄可自由移动，拖动时按住 Shift 可在布局中重新排列。
- 2
元素上方的浮动工具栏包含：改字（Sửa chữ，或双击；Enter 完成，Esc 取消）、减小/增大字号、粗体、斜体、下划线、文字颜色、对齐、用 AI Agent 编辑、打开 Inspector、复制（⌘/Ctrl+D）、删除（Delete）和 ⋯ 更多操作。
- 3
Inspector 在右侧打开，有设计（Thiết kế）和内容（Nội dung）两个标签页。顶部显示元素名称（点击可重命名）以及复制、锁定、在当前设备隐藏和删除按钮。
- 4
设计标签页有“常用”组（字号、粗细、文字颜色、背景色、圆角、统一内边距、对齐）以及“位置”“文字”等可折叠组；在“Tìm thuộc tính”（搜索属性：颜色、字号、圆角…）中输入可直接跳到相应属性。内容标签页按元素类型包含文字、链接、图片、表单字段等。
- 5
按屏幕调整：在顶栏选择 Tablet 或 Mobile 后再改样式——数值只作用于该断点。Inspector 底部的“Viết lại bằng AI”（用 AI 改写）按钮可改写该元素的文字。
- 6
在元素（或结构树中的行）上右键打开菜单：在 Inspector 中编辑、用 AI Agent 编辑、复制、上移、下移、锁定（画布上无法选中/编辑）、在此断点隐藏、删除。
4. 管理页面结构#
- 1
点击“结构”标签页。层级树视图（Cây phân cấp）列出每个板块及其子元素（段落、标题、行动按钮、图片、图标等），并附内容摘录。
- 2
点击某行即可选中元素并将画布滚动到该处；点击板块名称旁的箭头可折叠/展开。
- 3
将鼠标移到板块行上会出现 ↑ 上移 / ↓ 下移按钮，用于调整板块顺序。已锁定的元素显示 🔒 图标。
- 4
板块视图（Section）显示每个板块的缩略图，便于纵览整页。面板底部的“Chat với AI Agent”按钮可切换到 AI 标签页。
5. 用 AI Agent 编辑页面#
AI 标签页打开 AI Agent 对话框。Agent 会读取整个页面并自行完成：精确修改某个按钮/标题/图片，更换颜色/字体/风格，改写内容，增删和排序板块，移动端优化，SEO——然后自行检查。工作过程中你可以看到画布实时更新。
- 1
点击“Gợi ý cho trang này”（针对此页的建议）中的一项，或在“Bạn muốn chỉnh gì trên trang?”中输入需求后按 Enter（Shift+Enter 换行）。
- 2
输入 @ 可提及特定板块（每条消息最多 5 个）；输入 / 打开快捷命令：点评页面、移动端优化、SEO 优化、更换配色、更换字体、更换风格、改写内容、添加板块、参照示例网站、切换到代码模式。
- 3
通过图片图标附加图片或直接粘贴（Ctrl/⌘+V），每条消息最多 3 张，例如问题截图或参考设计。也可以粘贴网站链接供 Agent 参考。
- 4
Agent 运行期间，点击停止（Dừng）可取消本轮（页面保持不变），也可继续输入，消息会排队稍后发送。
- 5
每轮结束后，可使用回答下方的按钮：撤销本轮 AI 修改、查看本轮之前的页面、将页面恢复到本轮之后，或重试以生成另一个回答。
- 6
对话框顶部有时钟（对话历史）、+（新对话）和 ⋯（Agent 指令——Agent 始终遵守的固定规则；快捷工具如改写、缩短、扩写、纠正拼写、重新生成板块、SEO 建议；删除对话）。
6. 编辑历史与版本#
- 1
点击“历史”标签页。“Phiên làm việc này”（本次会话）列出打开编辑器以来的各个步骤；点击某一步即可回到该状态（⌘Z / ⌘⇧Z 逐步撤销/重做）。
- 2
“Phiên bản đã lưu”（已保存版本）：输入可选标签，例如“改颜色之前”，然后点击保存版本（Lưu phiên bản）。每次发布时也会自动创建版本（标签“Bản xuất bản”），AI Studio 每次修改页面前也会自动创建（标签“Trước khi AI Studio sửa”）。
- 3
对每个版本可以：查看（在画布上只读预览，点击“Đang xem”返回当前版本）、恢复（载入到草稿，仍可用 ⌘Z 撤销）或删除版本（永久删除，无法撤销）。
7. 表单、弹窗和页面工具#
- 1
从添加面板的“表单”分类添加表单。选中表单后，在 Inspector 的内容标签页中修改提交按钮文字（Nhãn nút gửi）、成功提示（Thông báo thành công）和字段列表（Các trường）。
- 2
每个字段有标签、字段类型（姓名、电话、Email、文本框、段落、数量、下拉列表、单选、选择颜色、复选框、同意条款）、宽度（整行、1/2 行、1/3 行）和“必填”选项。点击“+ Thêm trường”添加字段，或点击 ✕ 删除字段。
- 3
访客通过表单提交的数据保存在工作区的 Data Leads 中。
- 4
“实用工具”分类提供弹窗（直接在画布上编辑内容；在正式页面上弹窗居中悬浮，可用 ×、遮罩层或 Esc 关闭）、底部固定 CTA 栏、悬浮联系（电话/Zalo）、返回顶部、Cookie/通知栏、阅读进度条和滚动渐显。已启用的工具显示“Đang bật”（已启用）标签，再次点击即可关闭。
8. 快捷键与注意事项#
- 1
⌘/Ctrl + Z：撤销 · ⌘/Ctrl + Shift + Z：重做。
- 2
⌘/Ctrl + D：复制所选元素 · ↑ / ↓：移动所选元素 · Delete / Backspace：删除元素 · Esc：取消选择。
- 3
⌘/Ctrl + B：折叠/展开左侧面板 · ⌘/Ctrl + .：隐藏/显示 Inspector。
- 4
在 AI 对话中：Enter 发送，Shift+Enter 换行，⌘/Ctrl + V 粘贴截图。