Add individual stats to build a custom section.
Stats count from 0 up to your selected number, creating a simple animated effect.
How does the Sub Steps Module affect page speed?
-
Low impact: Very minimal impact on page load speed. The code for this module has been optimized to limit resources needed on page load.
-
Medium impact: An image or video background added to the section or column may impact page performance.
Performance Tips:
-
Convert images to WebP where possible to meet “serve images in next-gen format” criteria.
-
Use TinyPNG to compress images (JPG, PNG, WebP) without losing quality.
-
Refer to the Performance Guide for best practices to optimize your website’s speed.
Note: For more detailed performance advice, review the POWER Performance Guide!
Helpful Links: Settings that apply to all Sub Modules and Settings for Theme Styles.
Stat
This is where you add the information displayed in the stats counter.
Stat → Number
The number to be counted up to from 0. Can include decimals or commas.
Example: 12.34 or 1,200.
Stat → Suffix
Option to include a suffix to quantify your number, e.g. 12.34M, 12.34k, or 12.34%.
How do I add a space between the number and suffix of the stats counter?
Stat → Title
The title represents the name of the metric being displayed, for example “Subscribers.”
It appears below the stat counter.
Layout → Centered
Checked by default, with the option to uncheck to remove centering of the stats content.
How do I style the module?
Style → Color Scheme
Choice between Light or Dark color schemes.
Tip:
If you change the background color for the module, note that:
-
Light scheme = light background with dark text
-
Dark scheme = dark background with light text
Adjust the color scheme to ensure proper text contrast and readability.
Style → Text Color
Leave blank to use the default color based on the Color Scheme selected.
Alternatively, add a HEX value or use the color picker to customize the text color.
How can I add animations and anchors?
Animation
Enable or disable Animate on Scroll for this section.
Turning off applies only to this module.
To disable animations globally, see Theme Options → Animations.
Anchor Link ID
Set a custom anchor link (e.g., #company-stats) to allow direct navigation or integration with a sticky sub-menu.
This is ideal for linking users directly to the stats section without scrolling.
Easily add an anchor link to this section, for full instructions refer to Setting up Anchor Links.
How can I add a custom CSS class?
Custom Class
Add a custom CSS class for advanced styling within your child.css file.
Use this for individual module customizations or targeted layout adjustments.
See full instructions for setting a Custom Class for Section Modules.