# 4.2. Auto Number

**Auto Number** is a special widget that displays a counting effect from a starting value to an ending value within a specified duration. This feature is commonly used to highlight important metrics on a landing page, such as sales figures, customer counts, app downloads, or impressive statistics.

<figure><img src="https://4288789091-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FcZrhJDsqJxZMsvuaSaiJ%2Fuploads%2FOHewPoeezWQKO6ziAerN%2Fimage.png?alt=media&#x26;token=677ac82d-6c64-44bc-bacf-78ab0170d074" alt=""><figcaption></figcaption></figure>

## 1. Add an Auto Number to the landing page <a href="#to-add-an-accordion-to-your-landing-page" id="to-add-an-accordion-to-your-landing-page"></a>

* Click on **Widgets** in the sidebar of the editor.
* Select **Auto Number** from the **Business** section.
* Choose the **Auto Number** element and drag it onto your landing page.

<figure><img src="https://4288789091-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FcZrhJDsqJxZMsvuaSaiJ%2Fuploads%2Fowiuq4UVFIthwVAHMvzM%2Fimage.png?alt=media&#x26;token=2b6f0c9a-ef81-4538-99eb-d3d75b3551ad" alt=""><figcaption></figcaption></figure>

## 2. Auto Number Editor

### 2.1. Content Editor

To access the **Content Editor**, click on the **Auto Number** widget you wish to modify on the screen and select **Content** from the quick settings bar.

Here, you can configure a starting value, an ending value, and the duration for the counting effect.

<figure><img src="https://4288789091-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FcZrhJDsqJxZMsvuaSaiJ%2Fuploads%2F2mchNj5BMU1c4UiNTEdQ%2Fimage.png?alt=media&#x26;token=d11c08d2-8ce3-45f6-a47e-84d978fe648e" alt=""><figcaption></figcaption></figure>

### 2.2. Design Editor <a href="#id-2.-design-editor" id="id-2.-design-editor"></a>

To access the **Design Editor**, click on the **Auto Number** widget you wish to modify on the screen and select **Design** from the quick settings bar.

<figure><img src="https://4288789091-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FcZrhJDsqJxZMsvuaSaiJ%2Fuploads%2FtFy8k9SOR1aI6ZhUdOvq%2Fimage.png?alt=media&#x26;token=f694effd-8405-4156-b88c-27aa73b91ab2" alt=""><figcaption></figcaption></figure>

* **Align**: Allows you to align the widget within its container. See details [**here**](https://docs.shopone.io/english/basic-setup-tools-for-the-landing-page/quick-setup-bar/design-editor/align).
* **Size**: Adjust the size of the widget, including width, height, and the margin from the widget to the section's edges. See details [**here**](https://docs.shopone.io/english/basic-setup-tools-for-the-landing-page/quick-setup-bar/design-editor/size).
* **Display on**: Select the devices where the widget will be displayed (Desktop, Mobile).
* **Styles:** Allows you to add background and shadow to the widget. See details [**here**](https://docs.shopone.io/english/basic-setup-tools-for-the-landing-page/quick-setup-bar/design-editor/styles).
* **Typography**: Customize the text properties within the widget. See details [**here**](https://docs.shopone.io/english/basic-setup-tools-for-the-landing-page/quick-setup-bar/design-editor/typography).
* **Border**: Add and customize borders around the widget, including adjusting the border radius. See details [**here**](https://docs.shopone.io/english/basic-setup-tools-for-the-landing-page/quick-setup-bar/design-editor/border).

### 2.3. Advanced Editor

To access the **Advanced Editor**, click on the **Auto Number** widget you wish to modify on the screen and select **Advanced** from the quick settings bar.

<figure><img src="https://4288789091-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FcZrhJDsqJxZMsvuaSaiJ%2Fuploads%2FcxwdD3eEzcUl203wghoy%2Fimage.png?alt=media&#x26;token=df551ec7-48b4-465f-bc40-4575b3713360" alt=""><figcaption></figcaption></figure>

* **Events:** Allows you to set events for click or hover actions on the widget. See details [**here**](https://docs.shopone.io/english/basic-setup-tools-for-the-landing-page/quick-setup-bar/advanced-editor/event).
* **Animation**: Allows you to add dynamic animations to the widget on your landing page to make it more attractive and lively. See details [**here**](https://docs.shopone.io/english/basic-setup-tools-for-the-landing-page/quick-setup-bar/advanced-editor/animation).
* **Desktop/Mobile sync design**: Allows you to set synchronization options for the design between desktop and mobile. See details [**here**](https://docs.shopone.io/english/basic-setup-tools-for-the-landing-page/quick-setup-bar/advanced-editor/desktop-mobile-sync-design).
* **Position type**: Lets you choose the appropriate positioning style to optimize the webpage and provide the best experience for users. See details [**here**](https://docs.shopone.io/english/basic-setup-tools-for-the-landing-page/quick-setup-bar/advanced-editor/position-type).
* **Custom advance**: Allows you to customize the appearance and behavior of the component using CSS layers and custom CSS code. See details [**here**](https://docs.shopone.io/english/basic-setup-tools-for-the-landing-page/quick-setup-bar/advanced-editor/custom-advance).