# Add Element

To add a new element to a page in **Page Designer**, simply drag the desired component from the **Components Panel** and drop it onto the area of the page where you want it to appear.

Once dropped, the new element is placed on the **design canvas** and becomes part of the page layout.

***

### How to Add an Element

1. Open the **Add Components** menu.
2. Select an element (for example: paragraph, heading, image, form element).
3. Drag the element from the Components Panel.
4. Drop it onto the desired location on the page.

A new element will immediately appear where you released it.

***

### Moving an Element After Adding

After an element is added, you can reposition it at any time using the **Drag Handle** icon.

<figure><img src="https://2015371994-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FMpDjHWFRUtZ5nJcSfVXd%2Fuploads%2F2SGzkYOed2Wb1mJTTvyK%2Fimage.png?alt=media&#x26;token=d521fa2c-3e56-414e-8ecd-b6ec48a4f1be" alt=""><figcaption></figcaption></figure>

Click and hold the drag handle, then move the element to the new position that fits your layout.

***

### Example: Adding an Element

The image below shows an example of dragging a component onto the design panel.

<figure><img src="https://2015371994-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FMpDjHWFRUtZ5nJcSfVXd%2Fuploads%2FKhYUoVO9hzU4Gclq6E1k%2FAdd%20Element%20fn.png?alt=media&#x26;token=97dd9081-05bb-403c-a0d1-9fe5334185d2" alt=""><figcaption></figcaption></figure>

***

### Supported Elements

You can drag and add all available components from the Components Panel, including:

* Paragraphs
* Headings
* Labels and text elements
* Media components
* Form elements
* Layout containers

Each added element can later be styled, connected to data, or configured using the **Generic Tools** and **Open Tools** menus.

***

### Summary

Adding elements in Page Designer is simple and intuitive:

* Drag components from the Components Panel
* Drop them onto the design canvas
* Reposition them using the drag handle
* Configure them as needed

This drag‑and‑drop workflow allows users to build page layouts quickly without writing any code.


---

# Agent Instructions: 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:

```
GET https://docs.onewebstack.com/oneweb-platform-th/designer-reference/page-designer/page-designer-tools/generic-tools/add-element.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
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.
