---
url: 'https://dxpr.com/hc/documentation/learn-dxpr-builder/editing/selecting-elements'
title: 'Reach the part of the page you want to edit | DXPR'
author:
  name: docs-sync
  url: 'https://dxpr.com/users/docs-sync'
date: '2026-10-23T14:31:17+00:00'
copyright: 'Copyright DXPR. All rights reserved.'
type: article
summary: 'Reach an element, its column, row or section by hovering, or pick any level from the 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-23T14:31:17+0000'
  'image:alt': 'DXPR, powered by Drupal: AI-powered Drupal for marketers.'
schema:
  '@context': 'https://schema.org'
  '@graph':
    -
      mainEntity: {  }
    -
      '@type': TechArticle
      headline: 'Reach the part of the page you want to edit'
      description: 'Reach an element, its column, row or section by hovering, or pick any level from the 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-23T14:31:17+0000'
      dateModified: '2026-10-23T14:31:17+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/hc/documentation/learn-dxpr-builder/editing/selecting-elements'
      articleSection: 'Edit a page'
    -
      '@type': WebPage
      '@id': 'https://dxpr.com/hc/documentation/learn-dxpr-builder/editing/selecting-elements'
      description: 'Reach an element, its column, row or section by hovering, or pick any level from the Layers panel'
      breadcrumb:
        '@type': BreadcrumbList
        itemListElement:
          -
            '@type': ListItem
            position: 1
            name: Home
            item: 'https://dxpr.com/'
      publisher:
        '@type': Organization
        '@id': 'https://dxpr.com/#organization'
        name: DXPR
      inLanguage: en
---
[Help Center](/hc)/[Documentation](/hc/documentation) /[Learn DXPR Builder](/hc/documentation/learn-dxpr-builder) /[Build pages](/hc/documentation/learn-dxpr-builder/build) /[Edit a page](/hc/documentation/learn-dxpr-builder/editing) # Reach the part of the page you want to edit.

Reach an element, its column, row or section by hovering, or pick any level from the Layers panel

 Learn DXPR BuilderBuild pagesEdit a page

   ## In this guide

 Related guides

- [Inline text editing](/hc/documentation/learn-dxpr-builder/editing/inline-text-editing)
- [Context menus](/hc/documentation/learn-dxpr-builder/editing/context-menus)
- [Keyboard shortcuts](/hc/documentation/learn-dxpr-builder/reference/keyboard-shortcuts)

Every part of your page has its own control bar: the element, its column, its row and its section. You reach each one by hovering, or pick any level from the Layers panel. The video builds a two-column row with a text and a button, then visits every level.

  ## Build a two-column row

1. Click **+** in the content area and pick **Section** from the **Layout** tab.
2. Click **+** on the section and pick **Row**. It arrives with two equal columns.
3. Click **+** in the left column and pick **Text** from the **Content** tab.
4. Type a heading and a line of text, then click **Save**.
5. Click **+** in the right column and pick **Button**.
6. Type the **Title**, set the **Link** and click **Save**.

## Reach each level by hovering

1. Hover the button. Its control bar names the element and holds its **More** button.
2. Move the pointer to the edge of the column. The bar now reads **Column**.
3. Hover the row. Its bar reads **Row**, with the column layout icon.
4. Hover the section. The outermost bar reads **Section**.

The bar you see belongs to the innermost part under the pointer. Click a control bar to select its part: the part gets an outline. Keyboard shortcuts such as **Ctrl+C** act on the selected part, or on the part under the pointer when nothing is selected. Click an empty spot outside your content to clear the selection.

## Pick a level from the Layers panel

1. Open **More** on the DXPR toolbar and choose **Layers panel**.
2. Click a layer in the tree. The page scrolls to that part and highlights it.
3. Click the three dots on the layer to open the same menu as its control bar.
4. Close the panel and click **Save**.

**Ctrl+Shift+J** (**Cmd+Shift+J** on a Mac) opens and closes the panel.

## What you see

The page is built from nested levels, always in this order: **Section**, **Row**, **Column**, then the element. Each level's bar carries its own **More** button with the actions for that level. The Layers panel shows the same levels as a tree, so a part that is hard to hover is one click away.

## Control bars on each element or in one row

| Option | What you see |
|---|---|
| **On each element** | Every element shows its own bar. Nested elements get extra space while you edit. |
| **One row** | One row of bars above the element you point at: **Section**, **Row**, **Column**, **Button**. The page keeps its published layout while you edit. |

In **One row**, moving onto a bar lights up its part of the page. On a narrow screen the outer bars drop off the row; hover the edge of a container to reach that level.

1. Open **More** on the DXPR toolbar and choose **Editor settings**, or press **Ctrl+;** (**Cmd+;** on a Mac).
2. Under **Control bars**, pick **On each element** or **One row**.
3. Click **Save**. The page changes at once.

**Ctrl+Shift+B** (**Cmd+Shift+B** on a Mac) switches between the two without the dialog. Your choice is stored with your user account, so it follows you to other browsers. You can also change it on your account's edit page, under **DXPR Builder**. The option tagged **Default** is your site's choice. Pick it to keep following the site, even when an administrator changes the default later.

## If you don't see the control bars

- **No control bar appears.** The page is in Preview. Open the view menu, the **eye icon** on the DXPR toolbar, and choose **Edit**.
- **The bar belongs to the wrong part.** The pointer is over a child element. Move to the padding at the edge of the container, or pick the part in the **Layers panel**.
- **Clicking a text opens the text editor.** That is inline editing, not selection. Click outside the text, then click the text's control bar instead.

## What's next?

- [Edit text in place](/hc/documentation/learn-dxpr-builder/editing/inline-text-editing): change words right on the page.
- [Context menus](/hc/documentation/learn-dxpr-builder/editing/context-menus): every action in the **More**menu.
- [Keyboard shortcuts](/hc/documentation/learn-dxpr-builder/reference/keyboard-shortcuts): act on the selected part without the mouse.