{"id":7398,"date":"2014-09-19T17:45:37","date_gmt":"2014-09-19T22:45:37","guid":{"rendered":"http:\/\/theme.co\/x\/demo\/icon\/1\/?page_id=7398"},"modified":"2014-09-19T17:45:37","modified_gmt":"2014-09-19T22:45:37","slug":"counter","status":"publish","type":"page","link":"https:\/\/demo.theme.co\/icon-1\/shortcodes\/counter\/","title":{"rendered":"Counter"},"content":{"rendered":"

The [counter]<\/code> 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]<\/code> 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!<\/p>\n

\n
\n
0<\/span>+<\/span><\/div>Shortcodes<\/span><\/div>\n
\n 
[counter num_start=\"0\" num_end=\"40\" num_suffix=\"+\" num_speed=\"1500\" num_color=\"#272727\" text_below=\"Shortcodes\"]<\/code><\/pre>\n  <\/div>\n  
\n    
\n  <\/div>\n  
\n    
0<\/span><\/div>Counters<\/span><\/div>\n    
\n    
[counter num_start=\"0\" num_end=\"14\" num_speed=\"1500\" num_color=\"#272727\" text_below=\"Counters\"]<\/code><\/pre>\n  <\/div>\n<\/div><\/div>\n
Number Prefix and Suffix<\/span><\/h2>\n
The shortcode comes with two parameters (num_prefix<\/code> and num_suffix<\/code>) that allow you to place symbols or additional text before or after your number.<\/p>\n
\n  
\n    
-<\/span>0<\/span><\/div>Points<\/span><\/div>\n    
\n    
[counter num_start=\"0\" num_end=\"817\" num_prefix=\"-\" num_speed=\"1500\" num_color=\"#272727\" text_below=\"Points\"]<\/code><\/pre>\n  <\/div>\n  
\n    
\n  <\/div>\n  
\n    
0<\/span>*<\/span><\/div>Widgets<\/span><\/div>\n    
\n    
[counter num_start=\"0\" num_end=\"463\" num_suffix=\"*\" num_speed=\"1500\" num_color=\"#272727\" text_below=\"Widgets\"]<\/code><\/pre>\n  <\/div>\n<\/div><\/div>\n
Place Text Before and After<\/span><\/h2>\n
Additionally, the text_above<\/code> and text_below<\/code> parameters give you the ability to provide a context for what your numbers are meant to convey.<\/p>\n
\n  
\n    
We Have<\/span>
0<\/span><\/div>Employees<\/span><\/div>\n    
\n    
[counter num_start=\"0\" num_end=\"2716\" num_speed=\"1500\" num_color=\"#272727\" text_above=\"We Have\" text_below=\"Employees\"]<\/code><\/pre>\n  <\/div>\n  
\n    
\n  <\/div>\n  
\n    
Across<\/span>
0<\/span><\/div>Countries<\/span><\/div>\n    
\n    
[counter num_start=\"0\" num_end=\"128\" num_speed=\"1500\" num_color=\"#272727\" text_above=\"Across\" text_below=\"Countries\"]<\/code><\/pre>\n  <\/div>\n<\/div><\/div>\n
Add a Little Color<\/span><\/h2>\n
Spice up your numbers with a little color using the num_color<\/code> parameter. Colors can be used to help convey a statistic more clearly and generate interest.<\/p>\n
\n  
\n    
It Is<\/span>
-<\/span>0<\/span><\/div>Degrees<\/span><\/div>\n    
\n    
[counter num_start=\"0\" num_end=\"132\" num_prefix=\"-\" num_speed=\"1500\" num_color=\"#3498db\" text_above=\"It Is\" text_below=\"Degrees\"]<\/code><\/pre>\n  <\/div>\n  
\n    
\n  <\/div>\n  
\n    
We Made<\/span>
0<\/span><\/div>Dollars<\/span><\/div>\n    
\n    
[counter num_start=\"0\" num_end=\"272\" num_speed=\"1500\" num_color=\"#2ecc71\" text_above=\"We Made\" text_below=\"Dollars\"]<\/code><\/pre>\n  <\/div>\n<\/div><\/div>\n
Time it Just Right<\/span><\/h2>\n
Use the num_speed<\/code> 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.”<\/p>\n
\n  
\n    
This is<\/span>
0<\/span>ms<\/span><\/div><\/div>\n    
\n    
[counter num_start=\"0\" num_end=\"3000\" num_suffix=\"ms\" num_speed=\"3000\" num_color=\"#272727\" text_above=\"This is\"]<\/code><\/pre>\n  <\/div>\n  
\n    
\n  <\/div>\n  
\n    
This is<\/span>
0<\/span>ms<\/span><\/div><\/div>\n    
\n    
[counter num_start=\"0\" num_end=\"5000\" num_suffix=\"ms\" num_speed=\"5000\" num_color=\"#272727\" text_above=\"This is\"]<\/code><\/pre>\n  <\/div>\n<\/div><\/div>\n
Get Creative<\/span><\/h2>\n
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><\/code>. Make sure to use single quotes around the class so that it gets output properly in the shortcode.<\/p>\n
\n  
\n    
We Took<\/span>
<\/i> <\/span>0<\/span><\/div>Pictures<\/span><\/div>\n    
\n    
[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\"]<\/code><\/pre>\n  <\/div>\n  
\n    
\n  <\/div>\n  
\n    
We Have<\/span>
0<\/span> <\/i><\/span><\/div>Big Ideas<\/span><\/div>\n    
\n    
[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\"]<\/code><\/pre>\n  <\/div>\n<\/div><\/div>\n
Options<\/span><\/h2>\n
    \n
  • <\/i>id<\/strong>: add a unique ID to the shortcode.<\/li>\n
  • <\/i>class<\/strong>: add a class or multiple classes to the shortcode. <\/li>\n
  • <\/i>style<\/strong>: add inline styles to the shortcode.<\/li>\n
  • <\/i>num_start<\/strong>: include the starting number for the counter.<\/li>\n
  • <\/i>num_end<\/strong>: include the ending number for the counter.<\/li>\n
  • <\/i>num_prefix<\/strong>: prefix the number with text or symbols.<\/li>\n
  • <\/i>num_suffix<\/strong>: suffix the number with text or symbols.<\/li>\n
  • <\/i>num_color<\/strong>: optionally include a color for your number.<\/li>\n
  • <\/i>text_above<\/strong>: include text to appear above the number.<\/li>\n
  • <\/i>text_below<\/strong>: include text to appear below the number.<\/li>\n
  • <\/i>text_color<\/strong>: optionally include a color for the text above and below the number.<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"
    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 …<\/p>\n","protected":false},"author":16,"featured_media":0,"parent":259,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0},"_links":{"self":[{"href":"https:\/\/demo.theme.co\/icon-1\/wp-json\/wp\/v2\/pages\/7398"}],"collection":[{"href":"https:\/\/demo.theme.co\/icon-1\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/demo.theme.co\/icon-1\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/demo.theme.co\/icon-1\/wp-json\/wp\/v2\/users\/16"}],"replies":[{"embeddable":true,"href":"https:\/\/demo.theme.co\/icon-1\/wp-json\/wp\/v2\/comments?post=7398"}],"version-history":[{"count":0,"href":"https:\/\/demo.theme.co\/icon-1\/wp-json\/wp\/v2\/pages\/7398\/revisions"}],"up":[{"embeddable":true,"href":"https:\/\/demo.theme.co\/icon-1\/wp-json\/wp\/v2\/pages\/259"}],"wp:attachment":[{"href":"https:\/\/demo.theme.co\/icon-1\/wp-json\/wp\/v2\/media?parent=7398"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}