Working with the component tree

Use the component tree to navigate to specific elements on your page. You can also access the options menu or rename the component.

You can display the components for a page when you click on the component tree tab from the page menu.

Open the component tree menu (A). The components are shown in the order in which they are nested for the selected page. The example page shown here contains, for example, a row in which a column is nested. Within the column, an Alert, a checkbox, and a text component are nested. Names have been applied to identify the columns in this component tree: - Column1 - Column2 (B) - Column3 Applying a name to a component from the component tree menu You can open the menu ... (C) for the selected component and click the Rename (D) button. The name field for the component is displayed and you can apply the required name.

Utilizing all of the component tree

In the image above you can see the component tree on the left side of the page. When you click on the right-arrow button in the top right of the component tree you can move it to the other side of your page.

Now the component tree and the component options of the selected component in the tree or canvas are open at the same time! This setting remains while switching pages.

Some other neat functions that the component tree has that you might not be aware of are the keybindings that you can use on the canvas. Think about for example pressing the up arrow key, this will navigate to the component above the currently selected one. Or pressing the delete button, this will delete the currently selected component after confirmation.