Table of Contents

Use Page Layers

Blocks are organized on the Canvas in a hierarchy. A list view of this hierarchy is visible by selecting the Page Layers tab in the toolbox. This can make selecting Blocks simpler and easier as some Applications may have many nested layers and it can be difficult to select them on the Canvas itself. Each Block that is selected also displays a list of any children Blocks if applicable. This allows you to find the exact Block you need to manipulate.

Note

It is recommended that you read the article listed below to improve your understanding of Page Layers.

Selecting a block

Individual Blocks can be selected from the Page Layers view. To select a block on the Page using the Page Layers list, follow the steps below:

  1. Click on Page Layers.
  2. Expand layers to get to the element.
  3. Click on the Block you want to select.
  4. The Block selected will be highlighted on the Page.

Screenshot showing the Page Layers panel in the right sidebar with a hierarchical view of blocks. A block named "Card" is selected in the layers panel, and the corresponding card is highlighted with a blue outline on the canvas.

Moving blocks around

Clicking and dragging the handle on the right of the Block will re-arrange itself in the list as well as the page. To move Blocks around, follow the steps below:

  1. Click on Page Layers.
  2. Expand layers to get to the element.
  3. Click and drag the handle on the right.
  4. Drop the Block in another place to move it around. The selected new location will be highlighted in orange on the Page.

Screenshot showing a user grabbing the drag handle (six dots icon) on the right side of a block named "Column" in the Page Layers panel. The cursor has changed to a move icon indicating the block is being dragged.

Screenshot showing the block being dragged to a new position in the layers hierarchy. An orange insertion line appears between blocks to indicate where the dragged block will be placed when released.

The Block will be moved on the Page.

Screenshot showing the result after the block has been moved. The layout on the canvas has changed to reflect the new hierarchy position of the moved block.

Renaming blocks

Renaming Blocks will not affect what the block looks like at runtime, it will only change the text or label that will appear when you hover over the Block. To rename Blocks, follow the steps below:

  1. Click on Page Layers.
  2. Expand layers to get to the element.
  3. Double Click on the text to highlight it and change it.

Screenshot showing a user double-clicking on the text label "Title" in the Page Layers panel. The text is highlighted in blue, indicating it's ready to be edited.

4. Enter the new name of the Block.

Note

Changing the name will not change the content of the Block, it will only change what the Block is called.

Screenshot showing the text being edited in the Page Layers panel. The user has changed the name from "Title" to "Main Heading" and the text field is still in edit mode.

Hide and Show blocks

You can press the hide on the left to hide elements on the page. This will hide the elements on the page and also in runtime view as well.

  1. Click on Page Layers.
  2. Expand layers to get to the element.
  3. Click on the eye symbol on the left to toggle the visibility of the Block.

Screenshot showing the eye icon next to a block in the Page Layers panel. The cursor is hovering over the eye icon, indicating it can be clicked to toggle visibility.

Screenshot showing the Page Layers panel after the eye icon has been clicked. The eye icon now appears as crossed out, and the corresponding block has disappeared from the canvas view, indicating it is now hidden.

Last modified: June 04, 2025