> For the complete documentation index, see [llms.txt](https://docs.gridbox.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.gridbox.io/gridbox-editor/basics.md).

# Basics

Here's a quick rundown of some of the more common tasks:

<figure><img src="https://1993588132-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Mgj45dJ-t6Yc2Yz_AG3%2Fuploads%2FcLyje5r60Xs9UqLbBndL%2Fadd-block.gif?alt=media&amp;token=b97180f8-3ca9-4607-8fb2-804762c04a90" 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;

![](https://1993588132-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Mgj45dJ-t6Yc2Yz_AG3%2Fuploads%2FuEoT0jzPqloioy3Srpze%2Fdrag.png?alt=media\&token=7b132b92-bf5d-4a7d-a822-4c94f9eefa72)

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](https://1993588132-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Mgj45dJ-t6Yc2Yz_AG3%2Fuploads%2FGSu5NzZX2zPaBVymXaBD%2Fapperance.png?alt=media\&token=09d26aee-56e9-495d-9ad0-79a90dfaf115)

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

![](https://1993588132-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Mgj45dJ-t6Yc2Yz_AG3%2Fuploads%2FJzrlHNJwnxdxs8ZcQZsK%2Fcloning-element.png?alt=media\&token=43b69203-7b2e-4e23-9905-3c1fd55e2a96)

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

![](https://1993588132-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Mgj45dJ-t6Yc2Yz_AG3%2Fuploads%2F371NCDDuqIoAov9NxRTO%2Fdeleting-element.png?alt=media\&token=f1da4953-45ab-42b8-a208-5a019ab53e5c)

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>