Working with Page Elements

Element Toolbar

In the page content area, the currently selected element is shown with a border along with the Element Toolbar:

The available buttons in the element toolbar are described below:

Select parent of the current element

The Select Parent button in the element toolbar allows you to select the parent of the current element. i.e. the selection now moves to the parent element.

In the example below, the currently selected element is a Layout Column (named Column26). The selection is then moved to its parent (a Layout Row named Row8).

Move the selected element to another part of the page

The Move Element button in the element toolbar allows you to drag and drop the element to another part of the page. Please note that logical rules apply: e.g. a Layout Column can only be moved into a Layout Row.

In the example below, the currently selected element (an image), is moved from the left column to the right column.

Elements can also be moved using the page tree view.

Clone the selected element

The Clone button in the element toolbar creates an identical copy of the selected element (including contained elements) and adds it immediately after the selected element. This can also be achieved by using standard clipboard copy/paste commands.

In the example below, the Layout Column on the left (named Column17) containing the text "Some text in Column1" is cloned and added immediately after the selected column. The existing column on the right now becomes the third column of the parent Layout Row.

The page editor automatically assigns a new ID to cloned elements.

Delete the selected element

The Delete button in the element toolbar deletes the selected element (including contained elements).

In the example below, the Layout Column (named Column30) is deleted. The parent Layout Row now contains two columns.

Text Alignment

The Text Alignment button in the element toolbar is available for elements that contain editable text e.g. the Text, Inline Text, Link, Heading, etc.

Clicking on the option will bring up a menu with alignment choices.

Options

The action taken by the Options button in the element toolbar depends on the selected element. In most cases it will open the settings screen for the selected element.

In some cases, a menu is presented with options specific to the element along with the option to open the settings screen.

See Page Element Settings for more information.

Page Tree View

The page tree view is located in the page element sidebar.

It makes it easier to understand the general anatomy/organization of the page. It also makes it easy to select elements occupying a very small area on the screen.

Element Selection

Selecting an element in the page content area will highlight the element in the page tree view and vice-versa.

To view an element in the page tree view, select it in the page content area. The page tree view will automatically expand the hierarchy of elements leading to the selected node.

The example video shows various elements being selected in the page content area with the corresponding element being highlighted in the page tree view.

You can also click on an element in the page tree view and select it in the page content area. See the example video below.

Moving elements

You can also move elements to another part of the page using the page tree view.

In the example video a button is moved to another part of the page. The second part of the video also shows a layout column being moved after another layout column within the same layout row.