# Placing of Element
When a user drags an element from the **Components Panel** onto the **Design Canvas**, Page Designer provides **visual placement indicators** to help determine **where the new element will be inserted** relative to existing elements.
These indicators ensure accurate layout positioning and avoid unintended placement.
***
### Placement Indicators
While dragging an element over the design canvas:
* A **blue outline** highlights the border of the existing element.
* A **small blue arrow** appears to indicate **the insertion position** of the new element.
#### Example: Placement Relative to an Existing Element
In the example above:
* The **blue arrow appears to the right of the Login button**
* This indicates that the new element will be placed **to the right of the Login button**
* If the arrow appears **below** the existing element, the new element will be placed **underneath** it
By moving the dragged element around the canvas, users can adjust the arrow position and select the desired placement.
***
### Placing an Element Inside a Container
To place an element **inside a container**:
* Drag the element until the **container border is highlighted in orange**
* Ensure **no blue arrow** appears on any side
* Drop the element while the orange highlight is visible
This indicates that the element will become a **child element of the container**, rather than being positioned before or after it.
#### Example: Placing an Element Inside a Container
***
### Placement Summary
| Visual Indicator | Meaning |
| ------------------------ | --------------------------------- |
| Blue outline | Target element for placement |
| Blue arrow | Insert before/after or left/right |
| Orange container border | Insert inside the container |
| No arrow + orange border | Child element placement |
***
### Best Practices
* Move the dragged element slowly to observe placement indicators
* Use **Structure View** to verify the final hierarchy
* Place elements inside containers for better layout control
* Avoid accidental sibling placement by waiting for the correct highlight
***
### Summary
Page Designer uses **visual placement cues** to help users precisely control where elements are added:
* **Blue arrows** indicate relative placement
* **Orange borders** indicate container insertion
* Users can reposition elements freely before dropping
These indicators make layout creation predictable, accurate, and user‑friendly—especially in complex page structures.
---
# 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/designer-reference/page-designer/page-designer-tools/generic-tools/placing-of-element.md?ask=
```
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.
