Displaying Statistics

What You'll Build

An animated statistics section that counts up to impressive numbers when visitors scroll it into view. Perfect for showcasing achievements, milestones, or key metrics that build credibility.

Before You Start

• Gather your key statistics (clients served, years in business, projects completed, etc.)
• Verify numbers are accurate and up-to-date
• Decide how many stats to display (1-6 recommended)
• Plan which numbers to highlight for maximum impact

Step-by-Step Instructions

Step 1: Add the Counter Section Module

1. In the page editor, click the Add button in your desired section
2. Search for Counter Section
3. Click to add it to your page

What you'll see: A single counter item with default values.

Step 2: Configure Your First Counter

1. Open the Counter Items group
2. Click on the first counter in the list
3. Fill in these fields:

Prefix (optional):

• Text before the number
• Examples: "$", "#", or leave empty

Value:

• The number to count up to
• Enter whole numbers only (e.g., 500, 1000, 50000)

Suffix:

• Text after the number
• Examples: "+", "%", "K", "M", or leave empty

Content:

• Label describing the statistic
• Examples: "Clients Served", "Years Experience", "Projects Completed"

4. Configure bottom border (optional):
   • Toggle Enable Bottom Border if you want a decorative line
   • Choose Border Type (Pink or Orange)

What you'll see: A counter showing your number with label.

Step 3: Add More Counters

1. Click the + Add button below the counter list
2. Repeat Step 2 for each statistic
3. You can add up to 6 counters
4. Drag to reorder as needed

What you'll see: Multiple counters in a row or grid.

Step 4: Configure Layout Settings

1. Open the Settings group

2. Set the Number of Columns:

   • One: Single column, stacked vertically
   • Two: 2 counters per row
   • Three: 3 counters per row
   • Four: 4 counters per row (recommended for 4 stats)
   • Five/Six: For larger displays

3. Set Content Alignment:

   • Left: Numbers aligned left
   • Center: Numbers centered (most common)
   • Right: Numbers aligned right

What you'll see: Counters arranged according to your layout.

Step 5: Configure Animation

1. In the Settings group, find the animation options:

Disable Animation:

• Toggle ON to show final numbers instantly
• Toggle OFF for the count-up animation (recommended)

Animation Duration:

• Time in milliseconds for count-up to complete
• Default: 2000ms (2 seconds)
• Range: 500ms to 5000ms

Easing Function:

• Linear: Constant speed throughout
• Ease Out Quart: Starts fast, slows at end (recommended)
• Ease Out Expo: Even more dramatic slowdown

What you'll see: Numbers animating when you preview the page.

Step 6: Configure Visual Style

1. Open the Style group

2. Set Text Color:

   • Black: For light backgrounds
   • White: For dark backgrounds

3. Set Title Tag (HTML heading level):

   • H1 through H6 for semantic structure
   • H2 is common for statistics sections

4. Set Visual Heading Size:

   • Independent of HTML tag
   • Controls how large numbers appear

What you'll see: Styled counters matching your design.

Common Settings

Setting	What It Does	Recommended Value
Number of Columns	How counters are arranged	Match your counter count (3 stats = 3 columns)
Content Alignment	Text alignment within columns	Center for balanced look
Animation Duration	How long count-up takes	2000ms (2 seconds)
Easing Function	Animation curve style	Ease Out Quart for natural feel
Text Color	Color of numbers and labels	Match your background (black on light, white on dark)
Enable Bottom Border	Decorative underline	Optional, for visual emphasis

Formatting Tips for Numbers

What You Want	Value	Prefix	Suffix	Result
500+	500		+	500+
$1.2M	1.2	$	M	$1.2M
98%	98		%	98%
#1	1	#		#1
10K+	10		K+	10K+

Tips and Best Practices

• Use round numbers for cleaner appearance (500 instead of 487)
• Limit to 3-4 statistics for maximum impact
• Lead with your most impressive number
• Use consistent suffixes (all percentages or all with "+")
• Make sure statistics are verifiable and current
• Test animation on slower devices to ensure smooth performance
• Consider disabling animation for accessibility

Troubleshooting

Problem: Numbers are not animating. Solution: Check that "Disable Animation" is toggled OFF. Also verify JavaScript is not blocked on the page.

Problem: Animation happens before I scroll to the section. Solution: The animation triggers when the section enters the viewport. This is normal behavior.

Problem: Numbers look too small or too large. Solution: Adjust the Visual Heading Size in the Style group.

Problem: Counters are not evenly spaced. Solution: Make sure Number of Columns matches how many counters you have, or choose a column count that divides evenly.

Problem: Text color blends with background. Solution: Change Text Color in the Style group to contrast with your section background.

Problem: Borders are not visible. Solution: Verify "Enable Bottom Border" is toggled ON for the specific counter item, and check that the border color contrasts with your background.

Problem: Animation is too fast or too slow. Solution: Adjust the Animation Duration setting. 2000ms is the default; try 3000ms for slower or 1000ms for faster.

Problem: Large numbers cause layout issues. Solution: Use abbreviations with suffixes (1M instead of 1000000) or reduce the number of columns.