Download
Downloading the Extension
Email : After purchasing the extension from our store, you will receive an email with the link to download the extension.
Store : You can also download the extension from the Downloads section of our store. If you are new to our store, then you have to first create an account using the same email address which you have used while purchasing the extension.
Click to download the extension package - Counters_UNZIP.zip
Unzip the Package
- UNZIP the package Counters_UNZIP.zip using any file unzipper or winrar.
- Upon unzipping the package you will find the following.
- Joomla 4, 5 & 6 - Install the file mod_counters_X.x.zip
- ReadMe.txt file - This file has information about the current version of the extension.
Installation
Go to Extensions > Extension Manager and click on the Upload Package File Tab.
Click on browse to choose the correct installation file and click on "Upload and Install"
After successful installation
- Go to Content > Site Modules
- You will find Counters listed. Click on it to configure.
Note: This module supports Joomla 4, 5, and 6 only. Support for Joomla 3.x has been discontinued.
Styling Settings
Using the Styling Settings, you can customize the appearance of your counters to match your website's design.
- Number Color : Select the color for the counter numbers.
- Number Typography : Configure font size, font weight, and line height for the counter numbers. Supports Google Fonts integration.
- Counter Title Color : Select the color for the counter title/label text.
- Title Typography : Configure font size, font weight, text transform, line height, letter spacing, and text shadow for the counter title. Supports Google Fonts integration.
- Counter Background Color : Set the background color of the counter (supports RGBA format for transparency).
- Counter Padding : Set padding around the counter in pixels. You can set different values for top, right, bottom, and left.
- Counter Margin : Set margin around the counter in pixels. You can set different values for top, right, bottom, and left.
- Counter Border : Configure border width, style, color, and radius for all sides of the counter. Also includes box shadow options.
- Counter Title Position : Choose whether to display the counter title above or below the numbers.
- Thousand Separator : Enable or disable comma separators for large numbers (e.g., 1,000 instead of 1000).
- Thousand Separator Character : When thousand separator is enabled, you can customize the separator character (default is comma).
Counter Settings
In the Counter Settings, click on the Add button (+) to add a new counter. You can add multiple counters to display different metrics.
- Title : The text you want to show above or below the counter (e.g., "Happy Clients", "Projects Completed", etc.).
- Starting Number : The number the counter should start counting from. By default, it is set to 0.
- Ending Number : The target number where the counter should stop. This is the final value that will be displayed.
- Animation Duration (ms) : How long the animation should take to count from the starting number to the ending number, specified in milliseconds (e.g., 2000 = 2 seconds).
- Number Prefix : Add text or symbols before the counter number (e.g., $, €, %, or custom text like "+").
- Number Suffix : Add text or symbols after the counter number (e.g., +, %, users, projects, etc.).
Note: The counter animation will trigger automatically when the counter enters the viewport (becomes visible on screen) using the IntersectionObserver API for optimal performance.
Advanced
- Module Suffix : Add a suffix class to the module to add extra CSS and customize the module. This allows you to apply custom styling to this specific module instance.
Example: If you enter "custom-style" as the module suffix, the module wrapper will have the class "jx-counters-wrapper custom-style", allowing you to target it with custom CSS.
