> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://help.dorik.com/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# List Element

# Getting Started

You can add a list to your website using the List element. This article will show how you can add a List element to your website and customize it according to your needs.

# Adding the List element

Follow the steps below to add a **List** to your site. 

- Click on the `+` button labelled **Add Element or Container** within an empty container
- From the **Elements** tab, select **List** element

**Refer to the GIF below:**

![](https://storage.crisp.chat/users/helpdesk/website/cf1fc9cc00911000/gif-recording-2024-05-12-at-50_1y4i8ub.gif)

![](https://storage.crisp.chat/users/helpdesk/website/cf1fc9cc00911000/image_ip1quc.png)

![List element after it is added](https://storage.crisp.chat/users/helpdesk/website/cf1fc9cc00911000/image_1qbglp3.png)

# Editing the List element

Follow the steps and instructions below to add and edit a **List** element on your site.

The **List** element editor has the following options:

* List Items
* List Items Styles
* Icon Styles
* Divider Styles
* List Background

The **List** element editor:

![](https://storage.crisp.chat/users/helpdesk/website/cf1fc9cc00911000/image_1ydq5hs.png)

# List Items

In this option, you can copy, delete, add or edit list items. There are editing options for separate list items as well.

![](https://storage.crisp.chat/users/helpdesk/website/cf1fc9cc00911000/image_16z885d.png)

**Editing an individual List Item:**

![](https://storage.crisp.chat/users/helpdesk/website/cf1fc9cc00911000/gifrecording2022-09-04at110637_1kc505b.gif)

# List Item Styles

In this setting, you can stylize the items in your list with many necessary settings, like adjusting the text size, the gap between the list items, etc.

Refer to the **GIFs** below to see these settings in action:

![](https://storage.crisp.chat/users/helpdesk/website/cf1fc9cc00911000/gifrecording2022-09-04at111007_17lyo0.gif)

![](https://storage.crisp.chat/users/helpdesk/website/cf1fc9cc00911000/gifrecording2022-09-04at111451_1wxvi0i.gif)

---

## Divider Styles

In this setting option, you can add a divider between your links and stylize them according to your preferences. There are necessary settings like changing the type of divider you want, changing the color, and more.

Refer to the **GIF** below to see these settings in action:

![](https://storage.crisp.chat/users/helpdesk/website/cf1fc9cc00911000/gif-recording-2022-09-04-at-11_179ozuz.gif)

## List Background

You can add a background to your list with this setting. You can add plain color or a gradient according to your needs. 

Refer to the **GIF** below to see these settings in action:

![](https://storage.crisp.chat/users/helpdesk/website/cf1fc9cc00911000/gifrecording2022-09-04at112239_1ajofjh.gif)