---
url: 'https://dxpr.com/zh-hans/hc/documentation/learn-dxpr-builder/editing/selecting-elements'
title: '找到要编辑的页面部分 | DXPR'
author:
  name: Jurriaan
  url: 'https://dxpr.com/users/jurriaan'
date: '2026-10-24T13:52:24+00:00'
updated: '2026-10-24T17:19:22+00:00'
copyright: 'Copyright DXPR. All rights reserved.'
type: article
summary: |-
  页面的每个部分都有自己的控制栏：元素、其所在的列、行和版块。
  您可以将鼠标悬停来找到每一层，或从 Layers panel 中选择任意层级。
  该视频构建了一个带文本和按钮的双列行，然后访问了每一层。
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: |-
        页面的每个部分都有自己的控制栏：元素、其所在的列、行和版块。
        您可以将鼠标悬停来找到每一层，或从 Layers panel 中选择任意层级。
        该视频构建了一个带文本和按钮的双列行，然后访问了每一层。
      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:24+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/selecting-elements'
      articleSection: 编辑页面
    -
      '@type': WebPage
      '@id': 'https://dxpr.com/zh-hans/hc/documentation/learn-dxpr-builder/editing/selecting-elements'
      description: |-
        页面的每个部分都有自己的控制栏：元素、其所在的列、行和版块。
        您可以将鼠标悬停来找到每一层，或从 Layers panel 中选择任意层级。
        该视频构建了一个带文本和按钮的双列行，然后访问了每一层。
      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/inline-text-editing)
- [使用元素的 More 菜单](/zh-hans/hc/documentation/learn-dxpr-builder/editing/context-menus)
- [键盘快捷键](/zh-hans/hc/documentation/learn-dxpr-builder/reference/keyboard-shortcuts)

页面的每个部分都有自己的控制栏：元素、其所在的列、行和版块。 您可以将鼠标悬停来找到每一层，或从 Layers panel 中选择任意层级。 该视频构建了一个带文本和按钮的双列行，然后访问了每一层。

  ## 构建双列行

1. 在内容区点击 **+**，从 **Layout** 选项卡选择 **Section**。
2. 点击版块上的 **+**，选择 **Row**。它自带两个等宽的列。
3. 点击左侧列中的 **+**，从 **Content** 选项卡选择 **Text**。
4. 输入标题和一行文本，然后点击 **Save**。
5. 点击右侧列中的 **+**，选择 **Button**。
6. 输入 **Title**，设置 **Link**，然后点击 **Save**。

## 悬停找到每一层

1. 将鼠标悬停在按钮上。其控制栏会标明元素名称，并有其 **More** 按钮。
2. 将指针移到列的边缘。此时控制栏显示 **Column**。
3. 悬停在行上。其控制栏显示 **Row**，并带有列布局图标。
4. 悬停在版块上。最外层的控制栏显示 **Section**。

您看到的控制栏属于指针下方最内层的部分。 点击控制栏可选中其所属部分：该部分会出现轮廓。 **Ctrl+C** 等键盘快捷键作用于选中的部分； 未选中任何内容时，则作用于指针下方的部分。点击内容之外的空白处可清除选择。

## 从 Layers panel 中选择层级

1. 打开 DXPR 工具栏上的 **More**，选择 **Layers panel**。
2. 点击树中的某一层。页面会滚动到该部分并高亮显示。
3. 点击层上的三个点，打开与其控制栏相同的菜单。
4. 关闭面板，点击 **Save**。

**Ctrl+Shift+J**（在 Mac 上为 **Cmd+Shift+J**）可打开或关闭该面板。

## 您会看到的内容

页面由嵌套层级构成，顺序恒为： **Section**、**Row**、**Column**，然后是元素。每一层的控制栏都有自己的 **More** 按钮，包含该层级的操作。Layers panel 以树形显示相同的层级， 因此难以悬停的部分只需点击一次即可找到。

## 每个元素上的控制栏或单行控制栏

| 选项 | 显示效果 |
|---|---|
| **On each element** | 每个元素都显示自己的控制栏。编辑时，嵌套元素会获得额外的空间。 |
| **One row** | 在您指向的元素上方显示单行控制栏：**Section**、**Row**、**Column**、**Button**。编辑时页面保持其发布后的布局。 |

在 **One row** 模式下，移到某个控制栏上会点亮页面的相应部分。在窄屏幕上， 外层控制栏会掉出该行；请悬停在容器的边缘以找到该层级。

1. 打开 DXPR 工具栏上的 **More**，选择 **Editor settings**， 或按 **Ctrl+;**（在 Mac 上为 **Cmd+;**）。
2. 在 **Control bars** 下选择 **On each element** 或 **One row**。
3. 点击 **Save**。页面会立即变化。

**Ctrl+Shift+B**（在 Mac 上为 **Cmd+Shift+B**）可在两者之间切换，无需对话框。 您的选择随用户账户存储，因此会跟随您到其他浏览器。您也可以在账户编辑页面的 **DXPR Builder** 下更改它。标有 **Default** 的选项是您站点的选择。 选择它可继续跟随站点，即使管理员日后更改默认值。

## 如果您没有看到控制栏

- **没有出现控制栏。**页面处于 Preview 中。请打开视图菜单， 即 DXPR 工具栏上的 **眼睛图标**，选择 **Edit**。
- **控制栏属于错误的部分。**指针正位于子元素上。 请移到容器边缘的内边距处，或在 **Layers panel** 中选择该部分。
- **点击文本会打开文本编辑器。**那是内联编辑，而非选中。 请先点击文本之外，再点击文本的控制栏。

## 接下来做什么？

- [就地编辑文本](/zh-hans/hc/documentation/learn-dxpr-builder/editing/inline-text-editing)：直接在页面上修改文字。
- [上下文菜单](/zh-hans/hc/documentation/learn-dxpr-builder/editing/context-menus)：**More** 菜单中的所有操作。
- [键盘快捷键](/zh-hans/hc/documentation/learn-dxpr-builder/reference/keyboard-shortcuts)：无需鼠标即可对选中部分执行操作。