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.

1. Add an Auto Number to the landing page

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

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.

2.2. Design Editor

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.

• Align: Allows you to align the widget within its container. See details here.

• Size: Adjust the size of the widget, including width, height, and the margin from the widget to the section's edges. See details here.

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

• Typography: Customize the text properties within the widget. See details here.

• Border: Add and customize borders around the widget, including adjusting the border radius. See details here.

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.

• Events: Allows you to set events for click or hover actions on the widget. See details here.

• Animation: Allows you to add dynamic animations to the widget on your landing page to make it more attractive and lively. See details here.

• Desktop/Mobile sync design: Allows you to set synchronization options for the design between desktop and mobile. See details here.

• Position type: Lets you choose the appropriate positioning style to optimize the webpage and provide the best experience for users. See details here.

• Custom advance: Allows you to customize the appearance and behavior of the component using CSS layers and custom CSS code. See details here.