# Toolbar

The toolbar allows you to edit various properties(Text, Image, Color, etc.) of the selected element. 

### Edit Text

You can edit the text of any element by either

* Double click on the element and then edit the text

![](/files/-MacaURWlkKKbSiB3JHB)

* Click on an element that you wish to edit and then select the **Edit** option 

![](/files/-Macb40WQbTKtCDX5HzL)

**Hotkey** to enable Edit option: Click on E

### Guides

It allows you to verify the alignments and measure the distances between two elements. To check the alignments select the **Guide** option and move the mouse cursor on an element for which you wish to see the alignments

![](/files/-Macc-UjzoQuKGPsoLnY)

To check the measurements

* **Click** on an element from which you wish to see the measurement
* Select the **Guide** option
* Move the mouse cursor on any element then you can see the measurement wrt the clicked element

![](/files/-Maccv2wmTjama7U4HSv)

**Hotkey** to enable Guide option: Click on G

### Margin

It allows you to add(increase) or subtract(reduce) outer space from any or all sides of the selected element. To edit the margin

* **Click** on an element for which you wish to edit the margin
* Select the **Margin** option
* To **add** the margin just Click on the **Left**, **Right**, **Bottom** & **Top** arrow keys to add the margin respectively. **For example**, if you click on the Left arrow key then the margin will be increased at the left side of an element

![](/files/-MacnF003rED1Glidg47)

* To **subtract** the margin press **Alt** and click on the **Left**, **Right**, **Bottom** & **Top** arrow keys to subtract the margin respectively. **For example**, if you click on the Top arrow key then the margin will be reduced from the top of an element

![](/files/-MacoIV41AYtiV94ZoOw)

**Hotkey** to enable Margin option: Click on M

### Padding

It allows you to add(increase) or subtract(reduce) inner space from any or all sides of the selected element. To edit the padding

* **Click** on an element for which you wish to edit the padding
* Select the **Padding** option
* To **add** the padding just click on the **Left**, **Right**, **Down** & **Up** arrow keys to add the padding respectively. **For example**, if you click on the Left arrow key then the padding will be increased at the left side of an element

![](/files/-Macoq-2ufLJrrWfrvqF)

* To **subtract** the padding press **Alt** and click on the **Left**, **Right**, **Down** & **Up** arrow keys to subtract the padding respectively. **For example**, if you click on the Top arrow key then the padding will be reduced from the top of an element

![](/files/-Macr79WxA9G3FDDWYV7)

**Hotkey** to enable Padding option: Click on P

### Font Styles

This option allows you to edit the various font styles. To edit the font size

* **Click** on an element for which you wish to increase or decrease the font size
* Select the **Font** option
* Click on the **Up** arrow button to increase the font size
* Click on the **Down** arrow button to decrease the font size

![](/files/-Macw7pzhZGAtKqd1TAU)

To change the font alignment

* **Click** on an element for which you wish to change the alignment
* Select the **Font** option
* Click on the **Left** arrow button to make the font left aligned
* Click on the **Right** arrow button to make the font right-aligned

![](/files/-MacwoihcGBLRo6IsqyB)

To change the line space

* **Click** on an element for which you wish to change the line spacing
* Select the **Font** option
* Press **Shift** and click on the **Up** arrow button to increase the line spacing
* Press **Shift** and click on the **Bottom** arrow button to decrease the line spacing

![](/files/-MacxL7_hGV7bC756Etj)

To change the letter space

* **Click** on an element for which you wish to change the letter spacing
* Select the **Font** option
* Press **Shift** and click on the **Left** arrow button to decrease the letter spacing
* Press **Shift** and click on the **Right** arrow button to increase the letter spacing

![](/files/-MacydoJ5JLOd9q7ZSip)

To change the font-weight(Boldness)

* **Click** on an element for which you wish to change the font-weight
* Select the **Font** option
* Press **Ctrl** and click on the **Up** arrow button to increase the font-weight
* Press **Ctrl** and click on the **Bottom** arrow button to decrease the font-weight

![](/files/-MaczL3VDTA1PMRBzWm1)

**Hotkey** to enable Font Styles option: Click on F


---

# 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://doc.customfit.ai/visual-editor/toolbar.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.