Counter - Greenshift

Blog Staff

interactions

May 4, 2022

Use it for any dynamic counters.

Satisfied Users

Users Online

Comments per day

Here is also example of block with background

Users

You can also make it as circle

This block has also Dynamic field option (requires Query Addon)

Copy this post’s content

Copy code below, and paste it (CTRL+V) in content of page

<p>Use it for any dynamic counters. </p>

<div id="gspb_row-id-gsbp-9a9fd0e1-fcf7" class="gspb_row gspb_row-id-gsbp-9a9fd0e1-fcf7 wp-block-greenshift-blocks-row gspb_row-id-gsbp-9a9fd0e1-fcf7"><div class="gspb_row__content"> 
<div id="gspb_col-id-gsbp-b9114a42-dd4b" class="gspb_row__col--4 wp-block-greenshift-blocks-row-column  gspb_col-id-gsbp-b9114a42-dd4b">
<div class="wp-block-greenshift-blocks-counter gs-counterwrap gspb_counter-id-gsbp-0e7f8942-7a5e"><div class="gs-counterdiv"><div class="gs-counter" data-start="0" data-end="1000" data-duration="3">0</div><div class="gs-counterlabel">Satisfied Users</div></div></div>
</div>

<div id="gspb_col-id-gsbp-25baf49d-15b6" class="gspb_row__col--4 wp-block-greenshift-blocks-row-column  gspb_col-id-gsbp-25baf49d-15b6">
<div class="wp-block-greenshift-blocks-counter gs-counterwrap gspb_counter-id-gsbp-db79a20c-bf96"><div class="gs-counterdiv"><div class="gs-counter" data-start="0" data-end="500" data-duration="2">0</div><div class="gs-counterlabel">Users Online</div></div></div>
</div>

<div id="gspb_col-id-gsbp-feed2868-1dc3" class="gspb_row__col--4 wp-block-greenshift-blocks-row-column  gspb_col-id-gsbp-feed2868-1dc3">
<div class="wp-block-greenshift-blocks-counter gs-counterwrap gspb_counter-id-gsbp-6e53881a-ee41"><div class="gs-counterdiv"><div class="gs-counter" data-start="0" data-end="333" data-duration="2.4">0</div><div class="gs-counterlabel">Comments per day</div></div></div>
</div>
 </div></div>

<p class="has-text-align-center">Here is also example of block with background</p>

<div class="wp-block-greenshift-blocks-counter gs-counterwrap gspb_counter-id-gsbp-dbf6a68d-a35b"><div class="gs-counterdiv"><div class="gs-counter" data-start="0" data-end="1000" data-duration="2">0</div><div class="gs-counterlabel">Users</div></div></div>

<p class="has-text-align-center">You can also make it as circle</p>

<div class="wp-block-greenshift-blocks-counter gs-counterwrap gspb_counter-id-gsbp-3bdbf9cd-19d0"><div class="gs-counterdiv"><div class="gs-counter" data-start="0" data-end="10" data-duration="3">0</div></div></div>

<div id="gspb_infoBox-id-gsbp-bc0d4833-a4f0" class="gspb_infoBox gspb_infoBox-id-gsbp-bc0d4833-a4f0 wp-block-greenshift-blocks-infobox"><div class="gs-box info_type icon_type"><div class="gs-box-icon"><svg x="0px" y="0px" viewBox="0 0 512 512"> <g><g> <path d="M256,0C114.497,0,0,114.507,0,256c0,141.503,114.507,256,256,256c141.503,0,256-114.507,256-256 C512,114.497,397.492,0,256,0z M256,472c-119.393,0-216-96.615-216-216c0-119.393,96.615-216,216-216 c119.393,0,216,96.615,216,216C472,375.393,375.384,472,256,472z"></path> </g> </g> <g> <g> <path d="M256,214.33c-11.046,0-20,8.954-20,20v128.793c0,11.046,8.954,20,20,20s20-8.955,20-20.001V234.33 C276,223.284,267.046,214.33,256,214.33z"></path> </g> </g> <g> <g> <circle cx="256" cy="162.84" r="27"></circle> </g> </g> </svg></div><div class="gs-box-text">
<p>This block has also Dynamic field option (requires Query Addon)</p>
</div></div></div>

interactions