Circle Counter Module

What You'll Learn

What the Circle Counter module Is

How to add  the Circle Counter module to a Landing Page

How to customize the Circle Counter module

What Is The Circle Counter Module?

A Sample of the Circle Counter Module Showing 98% in the center of a graph representing speed increase

The Circle Counter is a stylized way to display statistics and informational numbers on your site. Counters deploy with lazy loading to give some visual pizazz to your page!

To add a Circle Counter Module to your landing page, click on the grey plus (+) sign in your Landing Page builder. (Simply let your cursor hover inside the specific row where you’d like to place the module and the grey + sign will appear.) A menu of the different types of modules available to you will open when you click on this icon.

Locate the Circle Counter Module within the list of modules and click it to add it to your page. The module list is searchable, which means you can also type the words circle counter and then click enter to automatically find and add this module!

Once the module has been added, you will be greeted with a list of options separated into three main groups:

  • Content
  • Design
  • Advanced

Content Options

The content options of your Circle Counter will be where you set the title and number of your counter, the background color or image that will display behind the counter, and the admin label you and your team use to help identify it.

Take this one step further by choosing whether or not to utilize percentages by opening the Element dropdown and turning the percentage marker on or off.

Design Options

The design options will allow you to change the appearance of your counter to match the appearance and tone being used on your landing page. You’ll be able to make changes to the following aspects of your counter:

Text Design

Customize the font size, color, and more for your counter’s Title and Numbers.

When adjusting the size of the Circle, any included text will also adjust and auto-wrap to accommodate the change. Using a Text Module in conjunction with your Circle Counter module can give you more control and is a great example of how the different pieces of your landing page are meant to work together.

Counter Design

Choose your counter’s background color, circle color, and the opacity of your circle. Scroll beyond the text options to customize the size and spacing of your counter to help create the perfect balance. Finish changing the appearance of your counter by customizing the surrounding border, shadows, and animations or filters.


Have a knack for coding and want to make even more changes? Look to the advanced tab where you can leverage your design skills to make changes to the way your counter is being seen by your visitors.

CSS ID & Classes

Add additional CSS Styling by using IDs or classes. These can also be used to create links to particular sections of your page.

Custom CSS

The Advanced tab also allows for you to further design your counter module by adding custom CSS that you can enter based on the field of depth options available to you (Before, Main Element, and After).
The Advanced options also allow for you to use Custom CSS for Percent Container, Circle Counter Title, and the Percent Text.


This option allows you to control which devices can view your counter. You may disable the visibility for phones, tablets, and browser windows by checking the box next to the devices you’d like to exclude.

Updated on September 26, 2023

Was this article helpful?

Related Articles