The [counter] shortcode is a wonderfully simple, yet incredibly engaging element that can be used almost anywhere. It’s great for sharing statistics or tidbits of information about your company or service. The [counter] shortcode will not begin incrementing until it has come into the viewport of the screen so that you can see the effect take place. Keep scrolling down the page to more examples in action!
[counter num_start="0" num_end="40" num_suffix="+" num_speed="1500" num_color="#272727" text_below="Shortcodes"][counter num_start="0" num_end="14" num_speed="1500" num_color="#272727" text_below="Counters"]Number Prefix and Suffix
The shortcode comes with two parameters (num_prefix and num_suffix) that allow you to place symbols or additional text before or after your number.
[counter num_start="0" num_end="817" num_prefix="-" num_speed="1500" num_color="#272727" text_below="Points"][counter num_start="0" num_end="463" num_suffix="*" num_speed="1500" num_color="#272727" text_below="Widgets"]Place Text Before and After
Additionally, the text_above and text_below parameters give you the ability to provide a context for what your numbers are meant to convey.
[counter num_start="0" num_end="2716" num_speed="1500" num_color="#272727" text_above="We Have" text_below="Employees"][counter num_start="0" num_end="128" num_speed="1500" num_color="#272727" text_above="Across" text_below="Countries"]Add a Little Color
Spice up your numbers with a little color using the num_color parameter. Colors can be used to help convey a statistic more clearly and generate interest.
[counter num_start="0" num_end="132" num_prefix="-" num_speed="1500" num_color="#3498db" text_above="It Is" text_below="Degrees"][counter num_start="0" num_end="272" num_speed="1500" num_color="#2ecc71" text_above="We Made" text_below="Dollars"]Time it Just Right
Use the num_speed parameter to determine how long you want your counter to increment. This parameter accepts time in milliseconds, so if you would like for it to last for two seconds, you would enter in “2000.”
[counter num_start="0" num_end="3000" num_suffix="ms" num_speed="3000" num_color="#272727" text_above="This is"][counter num_start="0" num_end="5000" num_suffix="ms" num_speed="5000" num_color="#272727" text_above="This is"]Get Creative
You can even include icons as part of your number suffix or prefix. To do so, you’ll need to input the appropriate HTML for the icon you want. First, find the icon you want (e.g. “camera-retro”) and then input the following HTML: <i class='x-icon-camera-retro' data-x-icon=''></i>. Make sure to use single quotes around the class so that it gets output properly in the shortcode.
[counter num_start="0" num_end="4891" num_prefix="<i class='x-icon-camera-retro' data-x-icon=''></i> " num_speed="1500" num_color="#9b59b6" text_above="We Took" text_below="Pictures"][counter num_start="0" num_end="823" num_suffix=" <i class='x-icon-lightbulb-o' data-x-icon=''></i>" num_speed="1500" num_color="#f1c40f" text_above="We Have" text_below="Big Ideas"]