Skip to content

Reach the part of the page you want to edit

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?

Something wrong or missing on this page? Report it or edit the page.