Counter With Overlap

Note: The section above this must have a different background from this section’s for the overlap to be apparent.

View a live demo of this section.

Modules:

• Counter

---

---

Usage Guide

The Counter With Overlap section creates a striking visual effect by positioning animated statistics partially over the preceding section on your page. This design technique adds depth and modern appeal to your HubSpot pages, making it ideal for showcasing key performance metrics, customer success numbers, or company milestones.

When adding this section through the page editor’s drag-and-drop interface, positioning is crucial. Place it directly below a section with a contrasting background color—for example, after a dark hero section or colored content block. The overlap effect won’t be visible if both sections share the same background color.

This section works particularly well on homepage templates, about pages, and landing pages where you want to highlight impressive statistics early in the user journey. Consider using it to display metrics like “10,000+ satisfied customers” or “99% uptime guarantee” immediately after your main value proposition.

Customization tips: Access the Counter module settings to adjust animation speed, number formatting, and display duration. You can typically add 3-4 counter items before the layout becomes cluttered on mobile devices. Test your content across different screen sizes using HubSpot’s device preview options.

The animated counting effect triggers when visitors scroll to the section, creating an engaging micro-interaction that draws attention to your statistics. This makes it more impactful than static numbers, especially for SaaS companies showcasing growth metrics or technology firms highlighting performance benchmarks.

For optimal results, use round numbers or percentages that count up smoothly, and ensure your statistics are genuinely impressive—the visual emphasis this section creates will make weak numbers more noticeable.