---
url: 'https://dxpr.com/zh-hans/hc/documentation/learn-dxpr-builder/getting-started/product-guide'
title: '游览 DXPR Builder 并选择配置 | DXPR'
author:
  name: Jurriaan
  url: 'https://dxpr.com/users/jurriaan'
date: '2026-10-24T13:50:14+00:00'
updated: '2026-10-24T17:19:22+00:00'
copyright: 'Copyright DXPR. All rights reserved.'
type: article
summary: |-
  快速游览 DXPR Builder，了解 DXPR Theme 的位置。您打开元素选择器，搭建一个带样式的版块并预览。本页其余部分展示每个产品带来什么，帮您在单独构建器、构建器加 DXPR Theme，或两者兼备的 DXPR CMS 之间选择。
  本视频在全新空白页面游览 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: '游览 DXPR Builder 并选择配置'
      description: |-
        快速游览 DXPR Builder，了解 DXPR Theme 的位置。您打开元素选择器，搭建一个带样式的版块并预览。本页其余部分展示每个产品带来什么，帮您在单独构建器、构建器加 DXPR Theme，或两者兼备的 DXPR CMS 之间选择。
        本视频在全新空白页面游览 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:50:14+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/product-guide'
      articleSection: 搭建首个页面
    -
      '@type': WebPage
      '@id': 'https://dxpr.com/zh-hans/hc/documentation/learn-dxpr-builder/getting-started/product-guide'
      description: |-
        快速游览 DXPR Builder，了解 DXPR Theme 的位置。您打开元素选择器，搭建一个带样式的版块并预览。本页其余部分展示每个产品带来什么，帮您在单独构建器、构建器加 DXPR Theme，或两者兼备的 DXPR CMS 之间选择。
        本视频在全新空白页面游览 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从这里开始搭建首个页面

   ## 本指南内容

 相关指南

- [构建您的第一个页面](/zh-hans/hc/documentation/learn-dxpr-builder/getting-started/first-page)
- [谁使用 DXPR Builder](/zh-hans/hc/documentation/learn-dxpr-builder/start-here/who-uses-it)

快速游览 DXPR Builder，了解 DXPR Theme 的位置。您打开元素选择器，搭建一个带样式的版块并预览。本页其余部分展示每个产品带来什么，帮您在单独构建器、构建器加 DXPR Theme，或两者兼备的 DXPR CMS 之间选择。

本视频在全新空白页面游览 DXPR Builder 并搭建一个版块。

  ## 游览编辑器

从显示构建器的内容类型的已保存空白页面开始。

1. 点击 **Add Elements** 打开元素选择器。
2. 浏览其选项卡：**Content**、**Drupal Blocks**、**Drupal Views**、**Saved templates** 和 **Layout**。
3. 从 **Layout** 选项卡选择 **Section**。
4. 悬停版块，打开 **More**，选择 **Settings**，在 **Style** 面板选择 **Background**。
5. 点击版块上的 **+** 添加 **Row**，再向其列添加 **Button** 和 **Text**。在其 **Style** 面板给文本选择 **Font color**。
6. 点击工具栏上的 **Save**，再打开视图菜单并选择 **Preview**。

## What you see

在 **Preview** 中，浅灰版块显示两列。左列是标题、一行文本和 **Learn more** 按钮；右列是紫色标题及其文本。预览隐藏控制栏和加号按钮，您看到的就是访客看到的页面。

## 每个产品带来什么

**DXPR Builder** 是您刚游览的 Drupal 模块。它适用于任何主题，带来：

- 22 个内容元素和 6 个布局元素
- 在页面上直接编辑，带预览
- AI 文本、页面创建和图像（安装 AI 模块后）
- 可复用的页面模板和用户模板
- 设置各角色可用的用户档案
- 布局中的 Drupal 区块和视图

**DXPR Theme** 是 DXPR 的 Bootstrap 5 主题。它增加颜色、字体、页眉和页面布局的设置，自适应手机和平板。它不需要自己的产品密钥。

|  | DXPR Builder 配其他主题 | DXPR Builder 配 DXPR Theme |
|---|---|---|
| Bootstrap 5 | 来自主题，或 **Sideload Bootstrap files** 设为 **Bootstrap 5** | 主题提供 |
| 构建器中的颜色色块 | 主题的调色板（如有） | DXPR Theme 调色板 |
| 粘性页眉下的平滑滚动 | 将 **Scroll offset selector** 设为您的页眉 | 安装即用 |
| 产品密钥 | 需要 | 仅 DXPR Builder 需要 |

两个设置都在 DXPR Builder **General Settings** 页面，**Bootstrap** 和 **Advanced Settings** 下。

## 选择您的配置

| 我想…… | 用 | 需要 |
|---|---|---|
| 新建站点且一切就绪 | [DXPR CMS](/zh-hans/hc/documentation/learn-dxpr-builder/getting-started/installing-dxpr-cms) | 全新的 Drupal 11 站点 |
| 给已在运行的站点加可视化建页 | [单独的 DXPR Builder](/zh-hans/hc/documentation/learn-dxpr-builder/getting-started/installation) | 主题或 sideload 设置提供的 Bootstrap 5 |
| 让构建器适配自定义主题 | DXPR Builder 加 [主题定制](/hc/documentation/learn-dxpr-builder/development/theming) | 一位开发者 |

从零开始的内容营销人员最适合 DXPR CMS：两个产品和演示页面开箱即用。有现成站点的网站管理员添加 DXPR Builder 并保留主题。

## If you don't see the element picker

- **空白页面显示 "Choose a template" 但没有 Add Elements 按钮。** **Enable page creation assistant** 在 `/admin/dxpr_studio/dxpr_builder/ai_settings` 已关闭。请改点击构建器工具栏上的 **+** 打开选择器。
- **按钮和列没有样式。** 主题未加载 Bootstrap 5。请将 **Sideload Bootstrap files** 设为 **Bootstrap 5**（**Bootstrap** 下，`/admin/dxpr_studio/dxpr_builder/settings`）。
- **颜色选择器没有色块。** 主题没有定义调色板。请直接在选择器中选色，或换用带调色板的主题，如 DXPR Theme。

## What's next?

- [搭建您的第一页](/zh-hans/hc/documentation/learn-dxpr-builder/getting-started/first-page)：完整页面，逐步完成。
- [谁使用 DXPR Builder](/zh-hans/hc/documentation/learn-dxpr-builder/start-here/who-uses-it)：营销人员、网站管理员和开发者各自用它做什么。