Circle-counters lets you show statistics in an engaging way. They appear as circle graphs filled to a certain percentage, that dynamically start to fill as you scroll down the page. The page designer lets you create them very easily using the Circle-counter module.

Go to the page designer, and add a new module by clicking on the gray plus sign. Choose the circle counter module from the list. If you prefer to find the module automatically, it’s also possible to type it in the search bar on top.

Define contents

The contents tab includes the following options:

Text

Here you can insert a title that represents the graph, that will appear below it. This is also where you insert the value for the percentage of the graph that will be filled.

Elements

You can enable the percentage sign.

Link

If you want that the module opens a new URL when someone clicks on it, paste that link here and decide if the link will open in the same window or tab.

Background

Add a background color, gradient, image or video to your module.

Admin label

You can modify the module’s label for easier identification.

Customize the design

With these settings, you can customize your design.

Circle

Customize the bar background color, and the circle color and opacity.

Text

Control how your text is displayed in terms of alignment, color (dark or light), and text shadow.

Title Text

Define the font, color, alignment, line height, and other settings for the title.

Number Text

You can also adjust the font settings for the number text.

Sizing

Adjust the width of the module.

Spacing

Customize margins and padding sizes.

Border

Define the border’s corner, style, color and width for your module.

Box Shadow

Here you can enable box shadow.

Filters

Adjust the hue of the module as a whole.

Animation

Give an animation style to the module, like fading or sliding when it appears.

Advanced settings

Using this tab you are able to insert CSS code, select device visibility, and manage transitions. Check this guide to know more about how to use these settings.

Use Case

Now, we are going to create a circle counter module with three graphs. We start by adding a three column row, then we create one module and then copy it to the other two, adjusting the text and number.

These are the settings:

Percentage sign: ON

Bar Background Color: #7ebec5

Circle Color: #b3b3b3

Circle Color Opacity: 0.15

Text Color: Dark

Title Text Size: 26px

Title Text Color: #8f8f8f

Number Text Size: 46px

Number Text color: #c88bda