> For the complete documentation index, see [llms.txt](https://manual.bubble.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://manual.bubble.io/help-guides/getting-started/navigating-the-bubble-editor/tabs-and-sections/design-tab/the-element-tree.md).

# 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="/files/WTmAyJA9IANEcZwUmN2q" alt="" width="375"><figcaption><p>The element tree shows all the elements in a hierarchy.</p></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 elements that are hidden on page load.

<figure><img src="/files/V7JbvcdS2hamwG165vGp" alt="" width="375"><figcaption><p><em>Show only hidden on page load</em> lets you filter your elements by their visibility on page load.</p></figcaption></figure>

## Moving elements in the hierarchy

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="/files/L5o2cRM0XQmFgUOCWM4I" alt="" width="269"><figcaption></figcaption></figure>

You can drag and drop elements in the element tree to change their place in the hierarchy. 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](/help-guides/design/responsive-design.md).
{% endhint %}

## Other ways to learn

<details>

<summary><mark style="color:blue;">Video lessons</mark></summary>

* [How to drag and drop elements in the element tree](https://www.youtube.com/watch?v=DJOcPN0O0Co)

</details>


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://manual.bubble.io/help-guides/getting-started/navigating-the-bubble-editor/tabs-and-sections/design-tab/the-element-tree.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.