> ## Documentation Index
> Fetch the complete documentation index at: https://docs.scanova.io/llms.txt
> Use this file to discover all available pages before exploring further.

# Page Builder 概览

> 什么是 Page Builder，以及如何访问它。

## Page Builder 是什么

Page Builder 是 Scanova 面向落地页的区块化编辑器：添加内容区块（标题、图片、视频、地图、联系方式、表单等），在画布上排列它们，为结果应用主题，然后发布到该二维码的实时 URL。每一个「Build a Page」类型的二维码——以及 Custom Page、Restaurant、Wedding、Event 等类似分类——都会打开同一个编辑器。

<Note>
  侧边栏中对应您二维码的条目名为 **QR Codes**，而不是 "My QR Codes"。
</Note>

## 创建一个页面

<Steps>
  <Step title="打开 Create QR Code">
    在侧边栏中点击 **Create QR Code**（或访问 `/qr/create`）。您会进入一个包含三张卡片的选择界面：**AI Studio**（"Tell us what you want — AI generates the blocks and copy"）、**Build a Page**（"Block-based landing page builder. Start from a template or blank canvas"）和 **Quick Code**（"A direct QR code for a URL, phone, email, Wi-Fi, or plain text. No landing page"）。无论选择哪条路径，最终都会进入同一个编辑器。

    <Frame caption="Create a new QR code 选择界面 —— AI Studio、Build a Page 和 Quick Code">
      <img src="https://mintcdn.com/scanova-api/q8t3kzcRTgAP7jV0/images/v2/page-builder/overview/create-qr-code-picker.png?fit=max&auto=format&n=q8t3kzcRTgAP7jV0&q=85&s=6529cda9a263b42b4132de26d5f54087" alt="Create a new QR code 界面显示三张卡片：AI Studio、Build a Page 和 Quick Code，每张卡片都带有预估时间和一个 Start 按钮" width="1440" height="900" data-path="images/v2/page-builder/overview/create-qr-code-picker.png" />
    </Frame>
  </Step>

  <Step title="点击 Build a Page">
    这会打开 **Choose a template**（`/qr/new`）——一个按分类筛选的模板库（Business、Restaurant、Wedding、Event、Product、Social Media 等），此外还有一个 **Start Blank** 选项，以及一个 **My Templates** 标签页，用于存放您保存过的所有模板。

    <Frame caption="按分类筛选的 Choose a template 模板库">
      <img src="https://mintcdn.com/scanova-api/q8t3kzcRTgAP7jV0/images/v2/page-builder/overview/template-gallery.png?fit=max&auto=format&n=q8t3kzcRTgAP7jV0&q=85&s=f756133678bdba5f29ed31f0b50a6a02" alt="Choose a template 界面带有分类筛选标签（All、Announcement、Audio、Business、Coupon、Document、Event、Feedback、Gallery、Product、Real Estate、Restaurant、Social Media、Wedding）和一张 Start Blank 卡片" width="1440" height="1027" data-path="images/v2/page-builder/overview/template-gallery.png" />
    </Frame>
  </Step>

  <Step title="选择一个模板或从空白开始">
    选择一个模板或 **Start Blank** 会打开编辑器本身（`/qr/new/landing`），其中已预先填充该模板的区块，或者是空白状态，等待您添加第一个区块。
  </Step>
</Steps>

要编辑您已经创建的页面，请在侧边栏进入 **QR Codes**，点击该行的铅笔/编辑图标，或者打开该二维码的详情页并点击 **Edit Page**。

<Note>
  只有带落地页（分类）的动态二维码才支持 Page Builder。直接跳转类的 Quick Code（URL、电话、邮箱、Wi-Fi、纯文本）没有可编辑的页面——参见 [Quick Code vs. full Page](/zh/qr-codes/create/quick-code-vs-page)。
</Note>

## 构建器布局

编辑器有三个主要区域：左侧边栏（Blocks 和 Pages）、中间展示实时设备预览的画布，以及右侧的检查器。

<Frame caption="Page Builder 编辑器：左侧边栏（Blocks / Pages）、中间画布、右侧检查器">
  <img src="https://mintcdn.com/scanova-api/q8t3kzcRTgAP7jV0/images/v2/page-builder/overview/after-start-blank.png?fit=max&auto=format&n=q8t3kzcRTgAP7jV0&q=85&s=f4c999cc948ac415d8b072916369786c" alt="Page Builder 编辑器左侧显示空的 Blocks 列表和 Pages 列表，中间是移动端画布预览，带有 Page Title、Description 和 Button 的快速添加按钮，右侧是设置面板，包含 Page icon、Page URL slug 和 Password protection 字段" width="1440" height="900" data-path="images/v2/page-builder/overview/after-start-blank.png" />
</Frame>

### 左侧边栏

* **Blocks** —— 当前页面上的每一个区块，按顺序排列。点击某个区块可选中它；拖动可重新排序；点击 **+ Add** 打开区块选择器。
* **Pages** —— 该二维码中的每一个页面（用于多页面站点）。点击 **+ Add** 打开 [Add a page](/zh/page-builder/page-types) 面板，或点击齿轮图标打开 [Page Settings](/zh/page-builder/multi-page-navigation)。

### 画布（Canvas）

在手机、平板或桌面设备边框中展示当前页面的实时预览。点击任意区块即可选中它，并在右侧检查器中编辑。画布右上角有一个小型悬浮工具栏——**Undo** 和 **Redo** 就位于此处（而非顶部栏），此外还有一个预览切换开关和几个布局/网格控件。

### 右侧面板（检查器）

* 选中某个区块时，标签页为 **Content**、**Design** 和 **Event Tracking**。
* 未选中任何内容时，标签页为页面本身的 **Settings**、**Design** 和 **SEO**——您也可以在这里找到该页面的 **Password protection** 开关（参见 [Page-level password protection](/zh/page-builder/page-security)）。

## 顶部栏控件

编辑器顶部的顶部栏提供：**Back**、设备切换器（**Mobile** / **Tablet** / **Desktop**）、**Settings**（打开 [Page Settings](/zh/page-builder/multi-page-navigation)，包括导航样式）、**Theme**、**Save as template**、**Publish**，以及一个 **Help** 按钮。Undo/Redo 不在这里——参见 [Keyboard shortcuts](/zh/page-builder/keyboard-shortcuts) 以及上文所述的画布工具栏。

## 自动保存

您的编辑内容会在操作过程中自动保存——这是真正由服务器保存的记录，而不仅仅是浏览器本地草稿。具体含义以及草稿/已发布状态的运作方式，参见 [Publishing](/zh/page-builder/publishing)。

## 通过 API 创建 Page Builder 二维码

Page Builder 内容的创建方式与其他任何带落地页的二维码相同，都通过 API 完成：`POST /qr/`，携带落地页分类的 `category` ID（例如 `9` 代表 Custom Page，`14` 代表 Wedding，`20` 代表 Event，`25` 代表 Restaurant），以及针对该分类构造的 `info` 载荷。完整的请求结构参见 [Create QR Code](/v1/api-reference/endpoint/qr_manager/create)，所有分类 ID 参见 [Category List](/v1/api-reference/references/category-list)。

<Note>
  您在编辑器中逐块组装的内容（页面、区块及其设置）并不是可以直接通过该接口构造的东西——它是通过构建器界面本身存储和编辑的。API 的 `info` 载荷控制的是二维码的分类和顶层配置，而不是单个区块的内容。
</Note>

## 相关内容

* [Page types](/zh/page-builder/page-types) —— 多页面站点中可用的五种页面类型。
* [Blocks reference](/zh/page-builder/blocks-reference) —— 可添加到页面的每一个内容区块。
* [Templates](/zh/page-builder/templates) —— 从预先构建的模板开始，而不是空白画布。
* [Quick Code vs. full Page](/zh/qr-codes/create/quick-code-vs-page) —— 在直接跳转的 Quick Code 与完整页面之间做出选择。