---
url: 'https://dxpr.com/zh-hans/hc/documentation/learn-dxpr-builder/editing/element-picker'
title: '查找并添加元素 | DXPR'
author:
  name: Jurriaan
  url: 'https://dxpr.com/users/jurriaan'
date: '2026-10-24T13:52:20+00:00'
updated: '2026-10-24T17:19:22+00:00'
copyright: 'Copyright DXPR. All rights reserved.'
type: article
summary: |-
  您添加的每个元素都来自元素选择器，一个有五个选项卡的对话框：
  布局、内容、Drupal 区块、Drupal 视图和您保存的模板。
  在此您将了解每个选项卡的内容，以及如何快速找到元素。本例访问
  每个选项卡，并从 Content 选项卡添加一个按钮。
tags:
  - 'Edit a 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: |-
        您添加的每个元素都来自元素选择器，一个有五个选项卡的对话框：
        布局、内容、Drupal 区块、Drupal 视图和您保存的模板。
        在此您将了解每个选项卡的内容，以及如何快速找到元素。本例访问
        每个选项卡，并从 Content 选项卡添加一个按钮。
      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:20+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/editing/element-picker'
      articleSection: 编辑页面
    -
      '@type': WebPage
      '@id': 'https://dxpr.com/zh-hans/hc/documentation/learn-dxpr-builder/editing/element-picker'
      description: |-
        您添加的每个元素都来自元素选择器，一个有五个选项卡的对话框：
        布局、内容、Drupal 区块、Drupal 视图和您保存的模板。
        在此您将了解每个选项卡的内容，以及如何快速找到元素。本例访问
        每个选项卡，并从 Content 选项卡添加一个按钮。
      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/build) /[编辑页面](/zh-hans/hc/documentation/learn-dxpr-builder/editing) # 查找并添加元素.

 学习 DXPR Builder搭建页面编辑页面

   ## 本指南内容

 相关指南

- [将元素拖到合适的位置](/zh-hans/hc/documentation/learn-dxpr-builder/editing/drag-and-drop)
- [在页面上编辑文本](/zh-hans/hc/documentation/learn-dxpr-builder/editing/inline-text-editing)

您添加的每个元素都来自元素选择器，一个有五个选项卡的对话框： 布局、内容、Drupal 区块、Drupal 视图和您保存的模板。 在此您将了解每个选项卡的内容，以及如何快速找到元素。本例访问 每个选项卡，并从 **Content** 选项卡添加一个按钮。

  ## 打开选择器

1. 在空内容区点击 **Add Elements**，然后从 **Layout** 选项卡选择 **Section**。
2. 点击版块上的 **+**：选择器会再次打开。您现在选择的内容将进入该版块的顶部。

## 浏览五个选项卡

1. 点击 **Layout**：Section、Row、Tabs、Collapse panel、Carousel 和 Positioned layers。
2. 点击 **Content**：文本、媒体和交互元素，带 **Search** 框。
3. 点击 **Drupal Blocks**：您站点的区块，带 **Filter by category** 和搜索框。
4. 点击 **Drupal Views**：您已启用视图的所有显示，带 **Filter by tag** 和搜索框。
5. 点击 **Saved templates**：您的私有模板和全局模板，带 **Filter by user**、**Filter by type** 和搜索框。

除 **Layout** 外，每个选项卡都有 **Search** 框： 输入名称的一部分即可筛选该选项卡。

## 添加元素

1. 回到 **Content** 选项卡，选择 **Button**：其设置对话框会立即打开。
2. 输入 **Title**，设置 **Link**，将 **Type** 保持为 Primary，然后点击 **Save**。
3. 点击工具栏上的 **Save**。

## 内容元素

| 元素 | 用途 |
|---|---|
| 提醒 | Bootstrap 提醒消息 |
| 引用块 | 带样式的引用 |
| 按钮 | 带链接的样式按钮 |
| 卡片 | 含顶部栏、标题和内容的卡片 |
| 环形计数器 | 环形进度动画 |
| 倒计时器 | 日期时间倒计时 |
| 数字计数器 | 动态计数的数字 |
| HTML | 原始 HTML 代码 |
| 图标 | 来自图标库的图标 |
| 图像 | 带链接和替代文本的单张图像 |
| 图片轮播 | 轮换图片库 |
| 巨幕 | 带标题和引导语的大横幅 |
| 链接 | 样式链接 |
| 地图 | Google Maps 嵌入 |
| 跑马灯 | 滚动图片条 |
| 面板 | 带标题的边框面板 |
| 进度条 | 动态进度指示器 |
| 分隔线 | 水平线 |
| 文本 | 支持内联编辑的富文本 |
| 本地视频 | 自托管视频文件 |
| 视频 | 嵌入式视频（YouTube、Vimeo） |
| 社交链接 | 社交媒体图标链接 |

## 您会看到的内容

大多数元素在您选择后会立即打开其设置对话框。卡片、分隔线和面板 会直接落在页面上，版块、行、Tabs 和 Collapse panel 也是如此。 Carousel 和 Positioned layers 会先打开其设置。新元素位于您点击的版块或列的顶部； 如果它属于更下方的位置，请将其向下拖。

## 如果您没有看到该元素

- **选项卡中缺少某个元素。**您的用户档案隐藏了它。 管理员可在档案中的 **Elements** 下勾选它，位置在 **DXPR Studio** > **DXPR Builder** > **User Profiles**（`/admin/dxpr_studio/dxpr_builder/profile`）。 档案中对某些元素的命名不同：**Separator** 即分隔线， **Counter** 即数字计数器，**Countdown** 即倒计时器， **Blockquote** 即引用块。
- **缺少新的区块或视图显示。**除非档案中的 **Check/Uncheck all Blocks** 或 **Check/Uncheck all Views**复选框已勾选，否则用户档案不会自动添加新的区块和显示。 管理员可在同一档案中的 **Blocks** 或 **Views** 下勾选它。
- **缺少 Drupal Blocks 选项卡。**只有当 Drupal 的 **Block Content** 模块启用时，构建器才会列出区块。 请在 **Extend**（`/admin/modules`）中启用它。
- **Saved templates 为空。**尚未保存任何内容。 请在元素的 **More** 菜单中选择 **Save as template**； 请参阅[用户模板](/zh-hans/hc/documentation/learn-dxpr-builder/reusable-templates/user-templates)。

## 接下来做什么？

- [将元素拖到合适的位置](/zh-hans/hc/documentation/learn-dxpr-builder/editing/drag-and-drop)：将新元素移到其所属位置。
- [在页面上编辑文本](/zh-hans/hc/documentation/learn-dxpr-builder/editing/inline-text-editing)：无需对话框即可输入和格式化文本。
- [元素](/hc/documentation/learn-dxpr-builder/elements)：每个元素的作用及设置方法。