Elements Tree Overview

Video:

Article:

In Convertri, you can now use our tree view feature to easily see a clear overview of all of your elements on the page. You can also use the tree view to easily find covered elements and see which elements are shown on desktop / mobile so you’ll never lose an element again!

How To Use The Elements Tree

In the page editor click on ‘Editor’ from the top toolbar.

Then on Elements, toggle on the Element Tree option to make the element tree appear.

The element tree will then be displayed and you can begin using the element tree.

Once the element tree is open you will see a list of all the elements on your page.

Each element is grouped according to the element they are contained by.

This means that if you have a panel containing a variety of other elements, when you first open the element tree the panel will be visible.

You can use the dropdown icon for each top level element to the element up and see the elements that are contained within it.

Graphical user interface, application, Word

Description automatically generated

Once the dropdown arrow has been clicked the elements are displayed in order of appearance.

To select an element simply click on it so that it highlights blue, this will then select the element in the editor as well, which means that you can now access its element properties as if you had selected the element from the page canvas itself.

Selecting elements from the element tree is a great way to select elements on the page that might be covered up by other elements and are therefore not visible. Instead of moving each element out of the way, you can use the element tree to select any element on the page, no matter where it is positioned or what size it is.

Icons in the Elements Tree

Each element is equipped with three icons. Each icon can be clicked on to toggle the setting that they relate to, meaning you can make direct changes to the page from the element tree.

The three icons allow you to use the elements tree to see which elements have been set to start visible or hidden and which elements have been set to show on desktop / mobile.

The three icons are:

The ‘Visible / Hidden’ icon

This icon will tell you whether or not your element has been set to start visible or start hidden.

If the element has been set to start visible the icon will look like this