# Components Folders

<figure><img src="https://3250709389-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MS33S0eoYwMaMrLb7T_%2Fuploads%2FMsECd6Qji8FdGSMt1bQw%2FScreenshot%202023-10-20%20at%2011.31.12.png?alt=media&#x26;token=7adc4301-75de-4025-aed7-0519e8dd36a8" alt=""><figcaption></figcaption></figure>

Components Folders is more of a Components library where you can add, store, access, reorganise and delete your collection of Components Folders.

A Component can be in multiple Component Folders and you can nest as many Components in a Component Folder as necessary.

You can add as many Component Folders as you need.

## Components Folders

Components Folders can be accessed from the Components panel in the Inserter Sidebar.

* Open Components in Inserter Sidebar.
* Open Folders tab.

<figure><img src="https://3250709389-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MS33S0eoYwMaMrLb7T_%2Fuploads%2FbcVpcbwhAIHzGX5Blq2T%2FScreenshot%202023-10-17%20at%2010.10.04.png?alt=media&#x26;token=68d75aca-65fa-4839-8ee8-0fc1829a713e" alt=""><figcaption></figcaption></figure>

### Add Folder

This allows you to add a new Components Folder.

* Open Folders tab.
* Click "Add New Folder".

<figure><img src="https://3250709389-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MS33S0eoYwMaMrLb7T_%2Fuploads%2FtDH0Q29dabyPEkMkhurq%2FScreenshot%202023-10-17%20at%2010.12.35.png?alt=media&#x26;token=f22f96b5-8403-429d-b593-0e5cf0ebaa89" alt=""><figcaption></figcaption></figure>

* This will open an "Add New Folder" modal.

<figure><img src="https://3250709389-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MS33S0eoYwMaMrLb7T_%2Fuploads%2Fy6JEHYSRuLcQ8Zb69CuD%2FScreenshot%202023-10-17%20at%2010.23.28.png?alt=media&#x26;token=68c5b7fb-4aa7-4574-9fe4-ca7b8bc21f9b" alt=""><figcaption></figcaption></figure>

* Input a suitable name for the Components Folder.
* Click "Create".

<figure><img src="https://3250709389-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MS33S0eoYwMaMrLb7T_%2Fuploads%2FCliGdt0ME3B08Rqit0mu%2FScreenshot%202023-10-17%20at%2010.25.36.png?alt=media&#x26;token=be726b90-12b7-441a-86a5-81ac25e6edf0" alt=""><figcaption></figcaption></figure>

### View&#x20;

Once you have added Component Folders, they will be visible in the Components Folders panel.

* Click the required Component Folder to open.

You can choose between component view or paginated.

Drag and Drop to reorder Component Folders as required.

<figure><img src="https://3250709389-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MS33S0eoYwMaMrLb7T_%2Fuploads%2F3sgISUciOCu3EedIwel8%2FScreenshot%202023-10-17%20at%2010.29.39.png?alt=media&#x26;token=07f9fefc-cce7-46b3-85f9-a0a75374031d" alt=""><figcaption></figcaption></figure>

### Rename

This property allows you to rename a Components Folder.

* Open Folders tab.
* Click to open the required Components Folder.
* Click Components Folder name and input a suitable new name.

<figure><img src="https://3250709389-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MS33S0eoYwMaMrLb7T_%2Fuploads%2FgfDHYkFpkjd9QgRz8lYn%2FScreenshot%202023-10-17%20at%2010.52.19.png?alt=media&#x26;token=a75d299f-0888-4de6-9083-64238e1b23c0" alt=""><figcaption></figcaption></figure>

### Change Colour

A colour is automatically assigned to each Components Folder when it is created but the colour can be personalised as required.

* Open Folders tab.
* Click to open the required Components Folder.
* Open the colour picker and select a suitable colour.

<figure><img src="https://3250709389-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MS33S0eoYwMaMrLb7T_%2Fuploads%2FQTaZJA2GWa5ESB8uPChb%2FScreenshot%202023-10-17%20at%2010.30.38.png?alt=media&#x26;token=a7ba0b98-6c46-4c2d-a50e-05c6bc86617b" alt=""><figcaption></figcaption></figure>

### Add Icon

This property allows you to add an Icon to your Components Folder.

* Open Folders tab.
* Click to open the required Components Folder.
* Open the icon modal and select a library.
* Search for required icon or locate manually.

<figure><img src="https://3250709389-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MS33S0eoYwMaMrLb7T_%2Fuploads%2FuRB6E5bhW9y8cSnwuLbw%2FScreenshot%202023-10-17%20at%2010.50.06.png?alt=media&#x26;token=7ceb60ec-5d6f-4dff-b249-6ecf6ae2240c" alt=""><figcaption></figcaption></figure>

The chosen icon will be visible next to the Components Folder.

<figure><img src="https://3250709389-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MS33S0eoYwMaMrLb7T_%2Fuploads%2FoHrQgiiklRLnYFeDZVJA%2FScreenshot%202023-10-17%20at%2010.51.15.png?alt=media&#x26;token=cd3efd0a-7ffb-4323-8ea5-b7da5dbf985e" alt=""><figcaption></figcaption></figure>

### Delete  Folder

Components Folders can be deleted if no longer required.&#x20;

{% hint style="info" %}
This will delete the Components Folder itself but not permanently delete the Components nested inside.
{% endhint %}

* Open Folders tab.
* Click to open the required Components Folder.
* Click "Delete" icon to delete Components Folder.&#x20;

<figure><img src="https://3250709389-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MS33S0eoYwMaMrLb7T_%2Fuploads%2FASwsqe25mUv2JLKcmbEY%2FScreenshot%202023-10-17%20at%2010.58.39.png?alt=media&#x26;token=97d300d7-0b63-41cd-8509-ed10d2ef7ad6" alt=""><figcaption></figcaption></figure>

### Sort Folders

You can change the order of your Components Folders as required.

* Open Folders tab.
* Drag and Drop Components Folders to change the order as necessary.

![](https://3250709389-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MS33S0eoYwMaMrLb7T_%2Fuploads%2F59BjGzbxuq0BDE7mbbkQ%2FScreenshot%202023-10-17%20at%2011.07.09.png?alt=media\&token=a927b2ed-323a-448e-8cff-dd7c88a7cce0)

### Return

Return allows you to leave the selected Components Folder and return to the Components Folders library.

* Click Return icon to go back to the Components Folders library.

## Components&#x20;

Components nested in a Components Folder are visible when you open a Components Folder.

* Open Folders tab.
* Click to open the required Components Folder.
* View Components nested in Folder.

<figure><img src="https://3250709389-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MS33S0eoYwMaMrLb7T_%2Fuploads%2FXasdgNUDrWZw1NRI8T6v%2FScreenshot%202023-10-17%20at%2011.01.21.png?alt=media&#x26;token=6a5e61ff-84c4-4c23-8a18-ac44d0e371cb" alt=""><figcaption></figcaption></figure>

Drag and Drop Components to change the order as necessary.

<figure><img src="https://3250709389-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MS33S0eoYwMaMrLb7T_%2Fuploads%2FyoSXxjYJK3IDaCzE3nC9%2FScreenshot%202023-10-17%20at%2011.03.15.png?alt=media&#x26;token=0ce45691-bf40-4cc1-befb-ed50bae03e53" alt=""><figcaption></figcaption></figure>

### Add

You can add Components to a Components Folder.

* Open Folders tab.
* Click to open the required Components Folder.
* Click the "+" icon to open the "Add components to folder".

<figure><img src="https://3250709389-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MS33S0eoYwMaMrLb7T_%2Fuploads%2FVCtcSXw7ssPcCn9GuW23%2FScreenshot%202023-10-17%20at%2010.32.56.png?alt=media&#x26;token=7a07c3c3-ed6b-49f2-b2a1-1b3133d2e7de" alt=""><figcaption></figcaption></figure>

The "Add components to folder" modal contains a Search Bar to help you locate the component you wish to add to the open Components Folder.

* In the "Add  components to folder" modal, input component name and choose component in the dropdown.

<figure><img src="https://3250709389-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MS33S0eoYwMaMrLb7T_%2Fuploads%2FVhtgooDnVycYe5L3RrvN%2FScreenshot%202023-10-17%20at%2010.35.58.png?alt=media&#x26;token=5356c37b-e308-4c78-afd3-42d216821df7" alt=""><figcaption></figcaption></figure>

The component is now displayed in the folder.

<figure><img src="https://3250709389-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MS33S0eoYwMaMrLb7T_%2Fuploads%2FyDKHn750xLUDdobTRkBG%2FScreenshot%202023-10-17%20at%2010.38.11.png?alt=media&#x26;token=10329cda-75b0-458c-b061-793dcc58faa3" alt=""><figcaption></figcaption></figure>

### Add to Page

Select or Drag components nested in a Components Folder to add to the canvas.&#x20;

<figure><img src="https://3250709389-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MS33S0eoYwMaMrLb7T_%2Fuploads%2FHKfUmnrSzsyhqZTIMWp2%2FScreenshot%202023-10-17%20at%2011.31.54.png?alt=media&#x26;token=ce08fb2b-6f20-489f-8ab5-c871183f7efb" alt=""><figcaption></figcaption></figure>

### Sort&#x20;

Components nested in a Components Folder can be sorted to change their order within the folder.

{% hint style="info" %}
You need to activate "Sort Components" before you attempting to sort your Components otherwise the component will be added to your page by default.
{% endhint %}

* Open Folders tab.
* Click to open the required Components Folder.
* Click "Sort Components" icon to enable sorting.

<figure><img src="https://3250709389-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MS33S0eoYwMaMrLb7T_%2Fuploads%2FXasdgNUDrWZw1NRI8T6v%2FScreenshot%202023-10-17%20at%2011.01.21.png?alt=media&#x26;token=6a5e61ff-84c4-4c23-8a18-ac44d0e371cb" alt=""><figcaption></figcaption></figure>

Drag and Drop Components to change the order as necessary.

<figure><img src="https://3250709389-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MS33S0eoYwMaMrLb7T_%2Fuploads%2FyoSXxjYJK3IDaCzE3nC9%2FScreenshot%202023-10-17%20at%2011.03.15.png?alt=media&#x26;token=0ce45691-bf40-4cc1-befb-ed50bae03e53" alt=""><figcaption></figcaption></figure>

### Delete

This allows you to remove a Component from a Components Folder.&#x20;

{% hint style="info" %}
This will delete the Components from the Folder  but not  remove the Components permanently.
{% endhint %}

* Open Folders tab.
* Click to open the required Components Folder.
* Find the Component to be deleted.
* Click "X" icon.
* Click "Remove"  to delete from Folder.

<figure><img src="https://3250709389-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MS33S0eoYwMaMrLb7T_%2Fuploads%2FrObYHyPh3rFWBg3f7USf%2FScreenshot%202023-10-17%20at%2010.44.03.png?alt=media&#x26;token=5cd0ad89-183c-4148-a9cb-96b05aa4ef3b" alt=""><figcaption></figcaption></figure>
