Counter Section

What It Does

Displays animated number counters that count up from zero when they come into view, perfect for showcasing impressive statistics and metrics.

When to Use It

• Company statistics (years in business, clients served, projects completed)
• Performance metrics on landing pages
• Impact numbers in annual reports or case studies
• Achievement highlights on About pages
• ROI or results sections on service pages

How to Add This Module

1. In the page builder, find "Counter Section" in the module list
2. Drag it to where you want it on the page
3. Click on it to open the settings panel

Settings Explained

Content Tab

Counter Items

A repeater where you add each statistic (minimum 1, maximum 6).

Setting	What It Does	Options
Prefix	Text before the number (e.g., "$" or "#")	Any short text
Value	The target number to count up to	Any whole number
Suffix	Text after the number (e.g., "+", "%", "K")	Any short text (default: "+")
Content	Label describing what the number represents	Text (e.g., "Happy Clients")
Enable Bottom Border	Add a decorative border below this counter	On/Off
Border Type	Color of the bottom border (when enabled)	Pink, Orange

Settings

Setting	What It Does	Options
Number of Columns	How counters arrange across the page	1, 2, 3, 4, 5, or 6 columns
Content Alignment	Horizontal alignment of counter content	Left, Center, Right
Disable Animation	Turn off the counting animation	On/Off (default: Off - animation plays)
Animation Duration	How long the count-up animation takes	Number in milliseconds (default: 2000ms = 2 seconds)
Easing Function	The rhythm of the animation	Linear (steady), Ease Out Quart (slows at end), Ease Out Expo (dramatic slowdown)

Style

Setting	What It Does	Options
Text Color	Color of all text in the counters	Black, White
Title Tag	HTML heading level for SEO	H1, H2, H3, H4, H5, H6 (default: H2)
Visual Heading Size	How large the numbers appear visually	Extra Small, Small, Default, Large, Extra Large

Advanced Customization

For developers only - add custom CSS classes or IDs.

Example Setups

Example 1: Company Statistics (4 columns)

1. Add 4 counter items:
   • Counter 1: Prefix: empty, Value: 15, Suffix: "+", Content: "Years Experience"
   • Counter 2: Prefix: empty, Value: 500, Suffix: "+", Content: "Projects Completed"
   • Counter 3: Prefix: empty, Value: 98, Suffix: "%", Content: "Client Satisfaction"
   • Counter 4: Prefix: empty, Value: 50, Suffix: "+", Content: "Team Members"
2. In Settings:
   • Number of Columns: 4
   • Content Alignment: Center
   • Animation Duration: 2000
   • Easing Function: Ease Out Quart
3. In Style:
   • Text Color: White (if on dark background)
   • Title Tag: H2

Example 2: Revenue/Financial Stats

1. Add 3 counter items:
   • Counter 1: Prefix: "$", Value: 10, Suffix: "M+", Content: "Revenue Generated"
   • Counter 2: Prefix: empty, Value: 300, Suffix: "%", Content: "Average ROI"
   • Counter 3: Prefix: "#", Value: 1, Suffix: "", Content: "Industry Ranking"
2. In Settings:
   • Number of Columns: 3
   • Content Alignment: Center

Example 3: Minimal Single Stat

1. Add 1 counter item:
   • Value: 10000, Suffix: "+", Content: "Happy Customers Worldwide"
   • Enable Bottom Border: On
   • Border Type: Pink
2. In Settings:
   • Number of Columns: 1
   • Content Alignment: Center
3. In Style:
   • Visual Heading Size: Extra Large

Tips

• Use round numbers for more impact (500+ instead of 487)
• Match the number of columns to the number of counters for balanced layout
• Use the "+" suffix to imply ongoing growth
• Set Text Color to White when placing on dark backgrounds
• Keep Content labels short (2-3 words) for clean appearance
• Use Ease Out Quart for the most satisfying count-up effect
• If counters are above the fold, the animation plays immediately on page load
• Use bottom borders sparingly to highlight your most important stat