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

# Toolbar

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

### 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&#x20;

![](/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
