# The element tree

As we explored in the section about *elements*, all objects you place on the page become a part of that pages hierarchical structure. Another way to describe it is as a *parent-child* relationship: any elements that you place within a group become a child of that group.

The element tree displays all the elements on the current page organized into parent-child relationships. The top parent element is the page, and all the groups and elements you place on that page are its children.

<figure><img src="https://34394582-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-M5sbzwG7CljeZdkntrL%2Fuploads%2F0p2GsFQMc7koVr5UQ1OG%2Felement-tree%402x.png?alt=media&#x26;token=ec102a24-e63c-4722-a282-bbef93bf2c93" alt=""><figcaption></figcaption></figure>

## Element tree modes

The Element Tree has two modes. You can either decide to show all elements on the page in a tree view, with parents and children, or only show hideable elements. Hideable elements are elements that are hidden on page load (from which you have unchecked the box 'This is element is visible on page load' in that elements Property Editor).

<figure><img src="https://34394582-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-M5sbzwG7CljeZdkntrL%2Fuploads%2FnQpFdRxNKEXxwYCcutEK%2FCleanShot%202023-02-06%20at%2011.57.29.png?alt=media&#x26;token=d6bc6cd0-b079-4e43-89af-7ab2d67c15f1" alt=""><figcaption><p>Checking <em>Only show hideable elements</em> lets you quickly identify elements that are hidden.</p></figcaption></figure>

In other words, you will only see these elements in the list when the option 'only show hideable elements' is checked. This is a useful feature when editing a page because it lets you quickly show elements that aren't visible for editing purposes, while the other mode is useful to get a full view of the page.

## Moving elements in the hierarchy

{% embed url="<https://www.youtube.com/watch?v=DJOcPN0O0Co>" %}

The element tree show an element's place in the hierarchy. If the element is placed within a group, it will be displayed in the tree as a child of that group.

<figure><img src="https://34394582-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-M5sbzwG7CljeZdkntrL%2Fuploads%2F4amyZvsEn3FoBAktH5VE%2Fmove-elements.gif?alt=media&#x26;token=009209bf-ba03-4ac0-a25e-0ce58dd69233" alt=""><figcaption><p>The blue line shows you where in the hieararchy you are.</p></figcaption></figure>

You can drag and drop elements in the element tree to change their place in the hierarcy. For example, you can drag it from one group into another. If you drag a group that contains other elements, all those elements will be moved along with it.

{% hint style="info" %}
Dragging and dropping elements in the element tree is only supported if the page is built with the [responsive engine](https://manual.bubble.io/~/changes/zEDMkjAAhZbZaeeyXW5d/help-guides/design/elements/the-element-hierarchy/broken-reference).
{% endhint %}