The Counter Number block displays numbers with a counting animation, perfect for showing things like how many customers or projects you have.

Adding Frontis Counter Number Block 

To insert the Counter Number block, navigate to the post or page where you wish to include it. Next, tap the (+) plus icon located at the upper left corner of the display.

The Frontis menu bar interface will appear to you. Search for the Counter Number block in the search box or select it from the menu bar.

After inserting the Counter Number blocks, follow the steps below;

• Click on the Document Overview button, and you will be able to see the blocks list view on the right side.
• Click on the block; all the control tabs will show here (Basic, Style, Extra).

Basic Section

Basic section > Counter setting

• Alignment: In this section, you can change the alignment of your counter number to left, right, and center.
• Starting and End number:  In this section, you can change the starting and end numbers according to your work’s needs. 
• Duration: The duration feature controls how fast the number counts up. A shorter time means faster counting, and a longer time means slower counting. You can customize the value as you need.
• Counter prefix: The counter prefix adds a symbol or text before the number. Here, you can add any text or symbol that appears before the number. If you want to close it, simply disable the toggle.
• Counter suffix: The counter suffix adds a symbol or text after the number. Here, you can add any text or symbol that appears after the number. If you want to close it, simply disable the toggle.
• Separator: To add a separator, enable the Show Separator toggle. After allowing the toggle, you will see the separator type options (comma, dot, and space). choose any one of them.
• Icon Section: This feature lets you add or remove an icon. You can also upload an image as an icon.
• Title section: You can customize the title text and title tag (h1-h6, p, and span) in this section. Simply add any text in the title section that will show in the counter number section. Icon position

Style  Section

Style > Item

• Icon position: Here, you can change the icon position to top, right, bottom, or left.
• Card align: Here, you can change the icon and title’s position to left, right, and center.
• Item size: In this section, you can customize the width of the counter number section according to your needs.
• Background Color: This feature lets you change the color of your Background.
• Border:  This section lets you add the Border and customize the Border style, Border color, Border stroke, and Border radius of the counter number.

Icon section: This section lets you change the icon color and customize the icon size. You can also add a margin and icon square ratio from here.

Counter number: This feature lets you customize the typography and typography color. You can also add a margin here.

Counter title: In this section, you can change the title position (left, right, top, and bottom), title color, typography, and typography color. You can also add a margin here.

Extra Section

Z-Index: Consider the z-index as layers of sheets on a table. The greater the z-index, the more “above” the element appears. Therefore, if two elements intersect, the one with the greater z-index will be displayed in front.

However, it functions only when the element is positioned (relative, absolute, fixed, or sticky). Without it, z-index has no effect. 

Overflow section: The Overflow feature in the Advanced section of Frontis Blocks controls how extra content behaves when it goes beyond the block’s size. The overflow property determines the action to take in this scenario.

Values of overflow:

• Visible:- The visible overflow value shows all content, even if it goes outside the box. It won’t be hidden or cut off, and no scrollbars will appear. 
• Hidden: The hidden overflow value hides any content that goes outside the box. It gets cut off, and no scrollbars appear, so users can’t see the extra content.
• Scroll: The scroll overflow value always shows scrollbars. If the content is too big, you can scroll to see it. Even if there’s no extra content, scrollbars still appear.
• Auto: The auto overflow value adds scrollbars only when needed. If the content fits inside the box, no scrollbars show. If it overflows, scrollbars appear automatically.
• Clip: The clip overflow value hides any content that overflows the box without showing scrollbars. The extra content is simply cut off and cannot be seen or scrolled.

Padding: Padding allows you to add spaces around an object to increase the inner area. You can also add space on a single side with this feature. Click on the Link icon and add or reduce the padding on any side you want.

Margin: Margin enables the adjustment of an object’s placement on the canvas. With this feature, you can add a margin around an object or a single side. Click on the Link icon and add or reduce the Margin on any side you want.

Border and Shadow: You can place a border around the entire area, and you can adjust the border color and border radius using this option. This option allows you to apply a box shadow to the counter number block.

Responsive Control: In this section, you will get 3 switches (Hide on Desktop, Hide on Tablet, Hide on Mobile). These switches let you show or hide the section on different devices.

Custom CSS: If you are an expert or have coding knowledge, you can add custom CSS in this section to make it responsive.