Number Counter
Number Counter
Welcome to the “Number Counter” documentation.
Looking to integrate a number counter into your website? Our block is a perfect solution for showcasing the statistical values of your achievements.
In this guide, we'll show you how to use the editor to customize your number counter block.
Step 1 : Open the Editor
1. Go to Number Counter templates.
2. Click on "Edit" after choosing your template.
class="flex justify-center items-start h-auto w-auto" alt="">Step 2: customize the content
In this panel, you can easily add, remove, or rearrange counters as needed.
class="flex justify-center items-start h-auto w-auto" alt="">2. Customize each counter by specifying starting and ending numbers, adding a prefix, suffix, and caption, selecting media and its type (icon, custom image, or none). Additionally, you have the option to include a link.
class="flex justify-center items-start h-auto w-auto" alt="">Step 3: Configure settings
Here, you'll handle the counters settings:
1. In the "View" section, you can decide if you want to show the header and the footer, adjust the width and the gap between counters, select the number of grids per line, and even customize the border and the overlay.
class="flex justify-center items-start h-auto w-auto" alt="">2. Customize counter styles by adjusting their width, roundness, and content positioning. You can also incorporate background and hover effects.
Furthermore, you can specify the size of the numbers, their duration, and select your preferred number format.
class="flex justify-center items-start h-auto w-auto" alt="">3. You can also manage media size, roundness, position, and choose to have a background or not.
class="flex justify-center items-start h-auto w-auto" alt="">4. For the caption, decide whether to display it and adjust its size.
class="flex justify-center items-start h-auto w-auto" alt="">Step 4: Choose Colors
1. Within this panel, you can select colors that match your website's design.
class="flex justify-center items-start h-auto w-auto" alt="">Step 5: Preview
Lastly, you can click on “Preview” to see how your number counter block looks on both desktop and mobile devices. After this, you can proceed to the next step.
class="flex justify-center items-start h-auto w-auto" alt="">