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

# Counter Circle

# Getting Started

You can add a custom circle in your website’s empty section from the elements option. The counter circle can be used for many purposes because of its many customizing options built to suit your needs. This article will cover how you can add a counter circle to your website and start customizing it.

---

# Adding a Counter Circle

Start adding a counter circle to your website; refer to the **steps, picture** or the **GIF** provided below:

- Click on the `+` button labeled **Add Element or Container** within an empty container
- Choose **Counter Circle** from the **Elements** tab
- A counter circle will appear!


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


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

![](https://storage.crisp.chat/users/helpdesk/website/cf1fc9cc00911000/untitled-13_116iur2.png)

| _Counter Circle after it is added_

---

# Adjusting and Stylizing the Counter Circle

The Countdown timer element has multiple stylizing options. You can set the:

* Items Setting
* Circle Style
* Title Style
* Content Style
* Background

…of the **Countdown timer element**! Let us see these settings one by one:

# Items Setting


This option lets you customize the layout of your counter circle, add more or delete counter circles, and adjust the progress values, titles, or every individual counter circle.

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

![](https://storage.crisp.chat/users/helpdesk/website/cf1fc9cc00911000/gifrecording2022-08-31at55833p_1f9spdc.gif)

**Counter Circle Items:**


![](https://storage.crisp.chat/users/helpdesk/website/cf1fc9cc00911000/untitled-14_1r0ac3k.png)

**Editing Counter Circle Item:**


![](https://storage.crisp.chat/users/helpdesk/website/cf1fc9cc00911000/gifrecording2022-08-31at60152p_1xh69xm.gif)


![](https://storage.crisp.chat/users/helpdesk/website/cf1fc9cc00911000/gifrecording2022-08-31at60458p_cqc0q5.gif)

---

# Circle Style


Stylize the circles in the counter circle element with this option. With settings like adjusting the circle size, loading border size, the gap between them, aligning the element, etc. 

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


![](https://storage.crisp.chat/users/helpdesk/website/cf1fc9cc00911000/gifrecording2022-08-31at60640p_102htla.gif)


![](https://storage.crisp.chat/users/helpdesk/website/cf1fc9cc00911000/gifrecording2022-08-31at60828p_4g8urg.gif)

---

# Title Styles

With this setting, you will be able to change how your counter circle’s title will look like. The title exists in the middle of your counter circle.


![](https://storage.crisp.chat/users/helpdesk/website/cf1fc9cc00911000/gifrecording2022-08-31at61103p_qn0vuo.gif)

---

# Content Style

With this setting, you can change the texts or content below your counter circle. Refer to the GIF below for the demonstration.

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

---

**Related Articles**

[Image Gallery](/en/article/image-gallery-4a1sc5/)