Page Designer Modules

  1. Home
  2. Support
  3. Page Designer Modules
  4. Number Counter Module with the Website Page Designer

Number Counter Module with the Website Page Designer

A number counter is a great way to bring attention to an important number of your website and to engage the attention of your visitors. This counter can display numbers like the number of users of your website or how many social media followers you have.

You can easily add the number counter module to your page by clicking on the gray plus sign. Choose the module from the list. If you prefer to find the module automatically, it’s also possible to type its name in the search bar on top.

Define contents

The contents tab includes the following options:

Text

Type a title for the counter, that will be displayed under the number in smaller text. Then, define the number the counter will count to. Only numbers can be displayed (don’t use percentage signs here).

Elements

You can enable the percent sign on your number by selecting this option.

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.

Text

Control how your text is displayed in terms of orientation, color, and text shadow.

Title Text

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

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

Let’s create a number counter for the number of Facebook followers, using these options:

Title: Facebook Followers

Number: 13568

Percent Sign: off

Text Color: Dark

Title Font Size: 25px

Title Text Color: #474747

Number Font Size: 72px

Number Text color: #0C71C3

Number Line Height: 72px

Here we have it!

Something missing? Contact us
Was this article helpful to you? Yes No

How can we help?