# Basics

<figure><img src="/files/m1iE8qYqrFRCsH4yPCJs" alt=""><figcaption><p>Adding elements</p></figcaption></figure>

### Adding a block

1. Click on `+` icon from the left sidebar
2. Click on the type of element you'd like to add it could be Navbar, Hero or a simple button  or You can drag and drop the element on the canvas&#x20;
3. That's it.&#x20;
4. **You're done!** The new block should now be added to the site.

<br>

### Moving an Element/Block&#x20;

![](/files/pBYoLB2loVra4UdK8YbA)

1. Click on any element
2. Click on the Drag Icon & drag the element before *or* after another element (a green bar will appear indicating which side of the element you're currently targeting).
3. Release click to drop the element.
4. **You're done!** The element should now be moved.<br>

### Editing a Content

1. Click on any text element like Heading or Paragraph or even a Button text
2. You can start editing the text right away
3. **You're done!**

### **Customizing an Element / Block Appreance**

![Changing Element Appearance](/files/p5B9kqUMaNRKhCv3MgVY)

1. To change or customize any block or element appearence like colors, fonts, spacing&#x20;
2. Click on the Color Palette icon&#x20;
3. It open the panel from the left where you can change colors, font properties, spacing, etc...&#x20;

### &#x20;Cloning an Element/Block

![](/files/uDnucqUtB1O6g9WPTxWK)

1. Click the element you'd like to clone
2. Click on the Clone icon from the highlighted toolbar as mentioned in the image above
3. **You're done!** A clone of the element should appear immediately before it.

### &#x20;Deleting an Element/Block

![](/files/VBjE9MMTQahZbXzcA3uq)

1. Click the element you'd like to delete
2. Click on the Trash icon from the highlighted toolbar as mentioned in the image above
3. **You're done!** The element should now be deleted.

\ <br>


---

# 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.gridbox.io/gridbox-editor/basics.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.
