--- url: 'https://dxpr.com/zh-hans/hc/documentation/learn-dxpr-builder/getting-started/first-page' title: '构建您的第一个页面 | DXPR' author: name: Jurriaan url: 'https://dxpr.com/users/jurriaan' date: '2026-10-24T13:52:04+00:00' updated: '2026-10-24T17:19:22+00:00' copyright: 'Copyright DXPR. All rights reserved.' type: article summary: |- 使用 DXPR Builder 构建一个页面：在标题旁放一张图像，再加一段简短的文字和一个按钮。 您也可以从现成的模板开始，只改其中的文字。两种方式都只需几分钟， 最终您会得到一个已保存的页面，并能以访问者看到的样子预览它。请在 安装 DXPR Builder 后阅读本页。 该视频从零开始构建页面：版块、行、图像、按钮和文本， 然后保存并预览。 tags: - 'Build your first page' image: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg' published: true og: site_name: DXPR updated_time: '2026-10-24T17:19:22+0000' 'image:alt': 'DXPR, powered by Drupal: AI-powered Drupal for marketers.' schema: '@context': 'https://schema.org' '@graph': - mainEntity: { } - '@type': TechArticle headline: 构建您的第一个页面 description: |- 使用 DXPR Builder 构建一个页面：在标题旁放一张图像，再加一段简短的文字和一个按钮。 您也可以从现成的模板开始，只改其中的文字。两种方式都只需几分钟， 最终您会得到一个已保存的页面，并能以访问者看到的样子预览它。请在 安装 DXPR Builder 后阅读本页。 该视频从零开始构建页面：版块、行、图像、按钮和文本， 然后保存并预览。 image: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg' width: '1200' height: '630' datePublished: '2026-10-24T13:52:04+0000' dateModified: '2026-10-24T17:19:22+0000' author: '@type': Organization '@id': 'https://dxpr.com/#organization' name: DXPR url: 'https://dxpr.com/' logo: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/dxpr-logo-dark.svg' width: '1348' height: '501' publisher: '@type': Organization '@id': 'https://dxpr.com/#organization' name: DXPR url: 'https://dxpr.com/' logo: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/dxpr-logo-dark.svg' width: '1348' height: '501' mainEntityOfPage: 'https://dxpr.com/zh-hans/hc/documentation/learn-dxpr-builder/getting-started/first-page' articleSection: 搭建首个页面 - '@type': WebPage '@id': 'https://dxpr.com/zh-hans/hc/documentation/learn-dxpr-builder/getting-started/first-page' description: |- 使用 DXPR Builder 构建一个页面：在标题旁放一张图像，再加一段简短的文字和一个按钮。 您也可以从现成的模板开始，只改其中的文字。两种方式都只需几分钟， 最终您会得到一个已保存的页面，并能以访问者看到的样子预览它。请在 安装 DXPR Builder 后阅读本页。 该视频从零开始构建页面：版块、行、图像、按钮和文本， 然后保存并预览。 breadcrumb: '@type': BreadcrumbList itemListElement: - '@type': ListItem position: 1 name: 首页 item: 'https://dxpr.com/zh-hans' publisher: '@type': Organization '@id': 'https://dxpr.com/#organization' name: DXPR inLanguage: zh-hans --- [帮助中心](/zh-hans/node/75)/[文档](/zh-hans/hc/documentation) /[学习 DXPR Builder](/zh-hans/hc/documentation/learn-dxpr-builder) /[从这里开始](/zh-hans/hc/documentation/learn-dxpr-builder/start-here) /[搭建首个页面](/zh-hans/hc/documentation/learn-dxpr-builder/start-here/first-steps) # 构建您的第一个页面. 学习 DXPR Builder从这里开始搭建首个页面 ## 本指南内容 使用 DXPR Builder 构建一个页面：在标题旁放一张图像，再加一段简短的文字和一个按钮。 您也可以从现成的模板开始，只改其中的文字。两种方式都只需几分钟， 最终您会得到一个已保存的页面，并能以访问者看到的样子预览它。请在 [安装 DXPR Builder](/zh-hans/hc/documentation/learn-dxpr-builder/getting-started/installation) 后阅读本页。 该视频从零开始构建页面：版块、行、图像、按钮和文本， 然后保存并预览。 ## 开始之前 - DXPR Builder 已安装并填入您的产品密钥 （[安装 DXPR Builder](/zh-hans/hc/documentation/learn-dxpr-builder/getting-started/installation)）。 - 某个内容类型显示了构建器：其文本字段使用 **DXPR Builder** 格式化器，例如 **Drag and drop Page**（来自 `dxpr_builder_page`）。 - 您的角色拥有 **Edit with DXPR Builder** 权限。 ## 创建页面 1. 前往 **Content** > **Add content**，选择一个显示构建器的内容类型。 2. 输入**Title**，然后点击 **Save**。 保存后的页面打开时构建器是空的。DXPR Builder 在此页面上工作， 而不是在编辑表单上。 ## 方案 A：从模板开始 元素选择器中的 **Saved templates** 选项卡列出了您站点上用户为复用而保存的布局。 DXPR CMS 自带了多个，例如 **Colored icon boxes**。在 其他站点上该选项卡可能为空；此时空页面上的 **Choose a template**会提供 DXPR Builder 自带的页面模板。 [插入已保存的模板](/zh-hans/hc/documentation/learn-dxpr-builder/reusable-templates/saved-templates-tab)通过视频演示了这些步骤。 1. 点击 **Add Elements**，打开元素选择器。 2. 切换到 **Saved templates** 选项卡。 3. 点击某个模板将其插入。其版块、行和元素会出现在页面上，随时可以编辑。 4. 点击工具栏上的 **Save**。 5. 打开眼睛菜单，选择 **Preview**，以访问者看到的样子查看页面。 ## 方案 B：从零构建 上面的视频遵循以下步骤。 1. 点击 **Add Elements**，在 **Layout** 选项卡上选择 **Section**。 2. 点击版块控制栏上的 **+**，选择 **Row**。 3. 点击行上的网格图标，选择 1/3 + 2/3 等列预设，然后点击 **Save**。 4. 点击左侧列中的 **+**，打开 **Content** 选项卡，选择 **Image**。 5. 点击 **Select Image**，用 **Apply filters** 在媒体浏览器中搜索，勾选一张照片，然后点击 **Insert selected**。 6. 打开 **SEO** 面板，输入 **Alt attribute**，然后点击 **Save**。 7. 点击右侧列中的 **+**，选择 **Button**。 8. 输入 **Title** 和 **Link**，选择 **Type**，然后点击 **Save**。 9. 点击宽列控制栏上的 **+**，选择 **Text**。 10. 输入一个标题，将其设为 **Heading 2**，在下方输入一段文字，然后点击 **Save**。 11. 点击工具栏上的 **Save**。 12. 打开眼睛菜单，选择 **Preview**，以访问者看到的样子查看页面。在同一菜单中选择 **Edit** 可继续工作。 ## 修改您添加的内容 - **Text**：点击文本元素即可就地编辑。工具栏提供 加粗、斜体、标题、链接、列表、字体颜色等功能。您的 [用户档案](/zh-hans/hc/documentation/learn-dxpr-builder/admin/user-profiles-admin)决定显示哪些按钮。 - **Settings**：打开元素控制栏上的 **More**，选择 **Settings**。图像有宽度、高度、链接和替代文本； 按钮有 **Type**、尺寸和链接。 - **顺序**：按住元素的控制栏，将其拖到另一个位置。 完成后点击工具栏上的 **Save**。如果您在有未保存更改时试图离开页面， 浏览器会警告您。 ## 您会看到的内容 在 **Preview** 中，图像位于左侧。标题、段落和按钮位于右侧， 不带控制栏。回到 **Edit** 后，将鼠标悬停在每个元素上即会显示其控制栏。 DXPR Builder 将页面以 HTML 形式存储在其编辑的字段中，通常是 **Body**。 内容发布后，访问者即可看到页面。 ## 如果您没有看到 Add Elements 按钮 - **空页面显示 "Choose a template"和"Or add elements using the +"。** **Enable page creation assistant** 在 `/admin/dxpr_studio/dxpr_builder/ai_settings` 中已关闭。请改为点击构建器工具栏上的 **+**，打开元素选择器。 - **页面完全没有显示构建器。**该内容类型未使用 **DXPR Builder** 格式化器，或您的角色缺少 **Edit with DXPR Builder**。请参阅[验证安装](/zh-hans/hc/documentation/learn-dxpr-builder/getting-started/installation#verify-the-installation)。 - **Saved templates 选项卡没有列出任何模板。**站点上还没有人保存过模板，或您的用户档案隐藏了它们。请使用空页面上的 **Choose a template**，或[保存您自己的模板](/zh-hans/hc/documentation/learn-dxpr-builder/reusable-templates/user-templates)。 - **重新加载后您的更改消失了。**页面未保存。请在离开页面前点击构建器工具栏上的 **Save**。 ## 接下来做什么？ - [编辑工具](/hc/documentation/learn-dxpr-builder/editing)：所有控件，以及键盘快捷键。 - [元素](/hc/documentation/learn-dxpr-builder/elements)：全部 22 个内容元素和 6 个布局元素。 - [布局](/hc/documentation/learn-dxpr-builder/layout/overview)：适应各种屏幕的版块、行和列。