> 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. 

### Edit Text

You can edit the text of any element by either

* Double click on the element and then edit the text

![](https://1136256215-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MUgAFLO61VraHX8jwLt%2F-MacaK9kc4AN2M8sp4LG%2F-MacaURWlkKKbSiB3JHB%2FEdit1.gif?alt=media\&token=415e4bc2-2134-4644-a0fc-daff035e8181)

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

![](https://1136256215-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MUgAFLO61VraHX8jwLt%2F-MacaK9kc4AN2M8sp4LG%2F-Macb40WQbTKtCDX5HzL%2FEdit2.gif?alt=media\&token=955e8f4c-f145-4c45-8614-1afd8b0e5584)

**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

![](https://1136256215-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MUgAFLO61VraHX8jwLt%2F-MacaK9kc4AN2M8sp4LG%2F-Macc-UjzoQuKGPsoLnY%2FAlignment.gif?alt=media\&token=2ee938b5-c6c5-4866-bbce-8014b9987ba0)

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

![](https://1136256215-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MUgAFLO61VraHX8jwLt%2F-MacaK9kc4AN2M8sp4LG%2F-Maccv2wmTjama7U4HSv%2FMeasurement.gif?alt=media\&token=20567e9d-d323-40d1-82c9-0c2e918af17b)

**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

![](https://1136256215-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MUgAFLO61VraHX8jwLt%2F-MacaK9kc4AN2M8sp4LG%2F-MacnF003rED1Glidg47%2FAddmargin.gif?alt=media\&token=6e0dc773-5581-49e1-bace-25f0fa1129cf)

* 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

![](https://1136256215-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MUgAFLO61VraHX8jwLt%2F-MacaK9kc4AN2M8sp4LG%2F-MacoIV41AYtiV94ZoOw%2FRemove_margin.gif?alt=media\&token=e2b6c47e-a896-43f2-bcc4-8452f124bbcf)

**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

![](https://1136256215-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MUgAFLO61VraHX8jwLt%2F-MacaK9kc4AN2M8sp4LG%2F-Macoq-2ufLJrrWfrvqF%2FAdd_Padding.gif?alt=media\&token=535dfbca-db96-466a-ae55-5ed2e2e1e15e)

* 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

![](https://1136256215-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MUgAFLO61VraHX8jwLt%2F-MacaK9kc4AN2M8sp4LG%2F-Macr79WxA9G3FDDWYV7%2FRemove_Padding.gif?alt=media\&token=0a870bb2-c4e7-4c5f-b318-d44eb945bb1c)

**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

![](https://1136256215-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MUgAFLO61VraHX8jwLt%2F-Macv9Gi6EK3QHxNny78%2F-Macw7pzhZGAtKqd1TAU%2FFontsize.gif?alt=media\&token=29f9487c-afae-4194-9c09-a15f7bc0cf20)

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

![](https://1136256215-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MUgAFLO61VraHX8jwLt%2F-Macv9Gi6EK3QHxNny78%2F-MacwoihcGBLRo6IsqyB%2FFontalignment.gif?alt=media\&token=ffe1894e-b7b4-4d4d-b18c-62576d9f9196)

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

![](https://1136256215-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MUgAFLO61VraHX8jwLt%2F-Macv9Gi6EK3QHxNny78%2F-MacxL7_hGV7bC756Etj%2FLinespacing.gif?alt=media\&token=c60b265f-56d0-420e-b6da-e40a15f36203)

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

![](https://1136256215-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MUgAFLO61VraHX8jwLt%2F-MacyXsDQJ6XS6e3VPbo%2F-MacydoJ5JLOd9q7ZSip%2FLetter_spacing.gif?alt=media\&token=ca613644-88e2-4d99-8c34-0a32a19482be)

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

![](https://1136256215-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MUgAFLO61VraHX8jwLt%2F-MacyXsDQJ6XS6e3VPbo%2F-MaczL3VDTA1PMRBzWm1%2FFontweight.gif?alt=media\&token=d3aefb4b-2a8b-4f15-b7cf-16b618f3bd27)

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