Counter Shortcode

[intense_content_section]
<h2>Introduction</h2>
Add a numerical counter to your WordPress site using the counter shortcode. The counter can count up or down and in set increments. Control the speed and styling of the text. You can also increment by less than one. When the number is less than one and/or over 1000, you can control the character used for the decimal place and thousands separator.
[/intense_content_section]
[intense_content_section background_type="color" background_color="#f9f9f9" border_top="1px solid #ededed" border_bottom="1px solid #ededed"]
<h2>Examples</h2>
This is a basic example with the counter shortcode set above some text. Notice how the color of the counter is set to a shade of blue. There are options to control font and background colors. If not set, the counter will take on the normal font styling.
[intense_row padding_top="0"]
[intense_column size="3" medium_size="3"]
<center>
<div style="font-size: 90px; line-height: 90px;">[intense_counter font_color="primary" speed="30"]</div>
<div style="font-size: 40px; line-height: 40px;">Posts</div>
</center>
[/intense_column]
[intense_column size="3" medium_size="3"]
<center>
<div style="font-size: 90px; line-height: 90px;">[intense_counter font_color="primary" end="852" speed="15"]</div>
<div style="font-size: 40px; line-height: 40px;">Images</div>
</center>
[/intense_column]
[intense_column size="3" medium_size="3"]
<center>
<div style="font-size: 90px; line-height: 90px;">[intense_counter font_color="primary" end="10256" speed="30" increment="25"]</div>
<div style="font-size: 40px; line-height: 40px;">Clients</div>
</center>
[/intense_column]
[intense_column size="3" medium_size="3"]
<center>
<div style="font-size: 90px; line-height: 90px;">[intense_counter font_color="primary" end="20" speed="30"]</div>
<div style="font-size: 40px; line-height: 40px;">Items</div>
</center>
[/intense_column]
[/intense_row]

[intense_spacer height="30"]
These examples show the counter shortcode placed in a little different layouts. They are meant to give you an idea of how you can use the counter along with icons.
[intense_row]
[intense_column size="3" medium_size="3"]
<center>
<div style="font-size: 70px; line-height: 70px;">[intense_icon type="star"]</div>
<div style="font-size: 50px; line-height: 50px;">[intense_counter font_color="error" speed="30" end="567"]</div>
<div style="font-size: 20px; line-height: 20px;">[intense_filler is_title="true" words="3" start_with_lorem="0"]</div>
</center>
[/intense_column]
[intense_column size="3" medium_size="3"]
<center>
<div style="font-size: 70px; line-height: 70px;">[intense_icon type="calendar"]</div>
<div style="font-size: 50px; line-height: 50px;">[intense_counter font_color="success" speed="30" start="934" end="0"]</div>
<div style="font-size: 20px; line-height: 20px;">[intense_filler is_title="true" words="3" start_with_lorem="0"]</div>
</center>
[/intense_column]
[intense_column size="3" medium_size="3"]
[intense_spacer height="10"]
<div style="font-size: 70px; line-height: 70px; margin-right: 10px;" class="pull-left">[intense_icon type="camera"]</div>
<div style="font-size: 50px; line-height: 50px;">[intense_counter speed="30" start="934" end="0"]</div>
<div style="font-size: 15px; line-height: 15px;">Photos</div>
[/intense_column]
[intense_column size="3" medium_size="3"]
[intense_spacer height="10"]
<div style="font-size: 70px; line-height: 70px; margin-right: 10px;" class="pull-left">[intense_icon type="tag"]</div>
<div style="font-size: 50px; line-height: 50px;">[intense_counter speed="300" start="0" end="50"]</div>
<div style="font-size: 15px; line-height: 15px;">Tags</div>
[/intense_column]
[/intense_row]

There are options on the shortcode to control the font and background colors. If you have a background color you can set the border radius (rounded corners) amount.

<div style="font-size: 30px;">
The aliens are coming in [intense_counter font_color="#fff" background_color="#000" border_radius="5px" start="1000" end="0" text="
<div style='font-size: 50px; padding: 20px; display: inline-block;'>{0}</div>
"] days.
</div>

[/intense_content_section]

[intense_snippet snippet_id="Child Theme | Shortcodes/footer" snippet_title="Shortcode Page Footer"]