How to Use the Number Counter Widget in GoHighLevel

The number counter widget in GoHighLevel lets you showcase stats, results, or milestones in a dynamic way, similar to how ClickUp and other SaaS tools highlight key metrics on their landing pages. In this guide, you will learn exactly how to add, configure, and customize the Number Counter widget in your funnels and websites so it looks professional and aligns with your brand.

This tutorial is based on the official GoHighLevel documentation and is written to help you move quickly from basic setup to polished, conversion-focused counters.

What the GoHighLevel Number Counter Widget Does

The Number Counter widget in GoHighLevel is a visual element that counts up from a starting number to a target number when visitors see it on the page. It is ideal for highlighting:

• Total leads generated
• Revenue milestones
• Number of clients served
• Projects completed
• Any metric that benefits from an animated count-up effect

Using this widget in GoHighLevel funnels or websites can make your social proof and performance data feel more engaging and credible.

Accessing the Number Counter Widget in GoHighLevel

Follow these steps to access the Number Counter widget inside your GoHighLevel account:

1. Log in to your GoHighLevel account.
2. Navigate to Sites, then choose either Funnels or Websites.
3. Open the specific funnel step or web page you want to edit.
4. Click the Edit Page or page editor option to launch the visual builder.
5. In the editor sidebar, locate the Elements panel where all widgets are listed.

Once you are in the page editor, you are ready to drag and drop the Number Counter widget into your layout.

Adding the Number Counter Widget in GoHighLevel

To add the Number Counter widget to a GoHighLevel page, use these steps:

1. In the Elements panel, scroll until you find the Number Counter widget.
2. Click and drag the widget onto your page where you want the counter to appear.
3. Release the widget inside a row or column, such as a hero section or statistics row.
4. Once placed, click on the widget to open its settings panel on the left side of the editor.

After the widget is on your page, you can start customizing the numbers, labels, and styles to match your design.

Configuring Basic Number Counter Settings in GoHighLevel

The basic settings control how the counter behaves and what numbers visitors see. In the widget settings panel, configure the following options:

Number value and label

• Number: Enter the final number you want the counter to reach (for example, 1000 or 25000).
• Prefix / Suffix: Add symbols like $, %, or + before or after the number if supported in your interface.
• Label / Title: Add a short text description under or above the number, such as “Happy Clients” or “Monthly Leads”.

Animation and speed

• Animation Type (if available): Determines how the number animates, typically a simple count-up.
• Animation Duration: Set how long (in milliseconds or seconds) it takes for the counter to go from 0 to the target number.
• Start Trigger (if present): Choose whether the animation starts on page load or when the widget comes into view.

Adjust these values until the counter speed and look feel natural within your GoHighLevel page design.

Styling the Number Counter Widget in GoHighLevel

Visual styling helps the counter fit your brand. In the styling or Styles tab of the widget settings, configure:

Typography settings

• Font Family: Match your brand fonts or global typography settings.
• Font Size: Set different font sizes for the main number and the label so the number stands out.
• Font Weight: Use bold or semi-bold for the main number for better emphasis.
• Text Alignment: Align center for a clean, symmetrical metric block.

Colors and backgrounds

• Number Color: Choose a high-contrast color for readability.
• Label Color: Use a softer tone than the main number to maintain hierarchy.
• Background Color: Add a solid color or keep it transparent depending on the section design.
• Background Image (if available): Use subtle images behind statistics for extra visual interest.

Borders, spacing, and layout

• Padding: Add inner spacing so the counter has breathing room.
• Margin: Create space around the widget relative to other elements.
• Border: Add borders or outlines to separate multiple counters in a row.
• Corner Radius: Soften the edges if you are using cards or boxes.

Test your styling on desktop and mobile views in GoHighLevel to ensure consistency across devices.

Creating Multiple Number Counters in GoHighLevel Sections

Many landing pages use several counters side by side to display different metrics. To build this layout in GoHighLevel:

1. Add a Row element with multiple columns (for example, 3 or 4 columns).
2. Drag one Number Counter widget into each column.
3. Configure each counter with its own number, label, and colors.
4. Use consistent typography and spacing across all counters.

This approach keeps your stats organized while leveraging the Number Counter widget’s visual impact.

Mobile Optimization for GoHighLevel Number Counters

Mobile optimization is crucial because many visitors view your GoHighLevel funnels on smaller screens. In the page editor:

• Switch to the Mobile preview mode.
• Check that numbers and labels are readable and not cut off.
• Reduce font sizes if text wraps awkwardly.
• Adjust padding and margins to avoid overly tall sections.
• Hide redundant counters on mobile if the section becomes too crowded.

Use GoHighLevel’s device-specific settings to fine-tune visibility and spacing for each device type when available.

Best Practices for Using GoHighLevel Number Counters

To get the most from the Number Counter widget in GoHighLevel, follow these best practices:

• Show real, verifiable metrics to maintain trust.
• Limit counters to a few key numbers so visitors are not overwhelmed.
• Place counters near calls-to-action to reinforce credibility.
• Keep labels short and clear, such as “Leads Generated” or “Appointments Booked”.
• Use consistent styling across all counters for a unified look.

These simple guidelines help your GoHighLevel pages convert better while maintaining a professional design.

Reference and Additional Resources

This how-to article is based on the official Number Counter widget documentation from the GoHighLevel help center. You can review the original resource here:

Official GoHighLevel Number Counter Widget Article

If you want strategic help with funnel design, SEO, or GoHighLevel implementation, you can also visit Consultevo for consulting and optimization services.

By following the steps above, you can confidently add and customize Number Counter widgets in your GoHighLevel funnels and websites, helping you display important data in a way that is both visually appealing and conversion-focused.

Need Help With ClickUp?

If you want expert help building, automating, or scaling your GHL , work with ConsultEvo — trusted GoHighLevel Partners.

Scale GoHighLevel

“`