Number Counter Element in Funnel and Website Builder
The Number Counter Widget is a native element in the Funnels & Website builder that transforms numerical values into lively, count‑up animations.
In This Article:
To add a number counter element, click on the plus sign in the upper left hand corner and select elements from the left side of the panel that opens. Find the Custom section, select the Number Counter element and drag it to the desired location on the page.
General Options
The first options for the number counter allow you to set your font and font size for both your number that animates and the caption below that gives it context.
These settings will apply to all counters within the element.
Setting Your Numbers
The first number is pre-populated for you. Clicking on the name Counter 1 will allow you to change the details for the counter.
- The caption is what is listed below the number and provides context for what the number represents.
- If you want to have an image above the number counter, you can use the image icon to select an image from your media library or upload a new one.
- The start value is the number that the animation starts counting at.
- The end value is the final number that the animation counts up to and stops at.
- You can add a prefix or suffix, like a dollar sign or a percent sign, if it gives context to your numbers.
From within the counter list, you can click on the two lines to the left of the number and drag to a new place in the list to change the order the numbers are in. You can delete a counter by clicking the trashcan to the right of it. You can add a new counter by clicking the Add Counter button.
Layout and Colors
After you have added your numbers, you can adjust the counter layout.
- You can change the size of the image
- You can change the space between the counters
- You can change the number of columns (therefore the number of counters on each row).
- You can also change the animation duration, which is the amount of time that it spends going from the start number to the end number.
- You can also adjust the colors of the number, caption, background and container background.
At any time, you can click preview animation to preview what the counter will look like counting with the settings you have.
Styles Options
- Margin and Padding: There is a setting to manage the margin and padding for spacing adjustments. Margin will add spacing outside of the element, so outside of the orange outline, whereas padding adds space inside the element or inside the orange outline.
- Border: Set a border for the entire number counter element. You can set the border width, color, whether the border has rounded corners (corner radius) and your border style.
- Box Shadow: You can set a box shadow on the element for depth.
- Visibility: Turn on or off visibility on mobile or desktop. Blue icons means that it is visible on that device, whereas gray icons means that it is hidden on that device.
- Classes and CSS: Custom class and CSS selector allow you to make CSS adjustments that target this element.