Counter Blocks

Description and Code

The Counter Blocks shortcode let you place boxes on your page with counters that will either count up or down, depending on your preference. Here's an example of the shortcode in code view:

[counter_blocks_component columns="4" class="" id=""]
[counter_block type="1" value="" unit="" unit_position="suffix" icon="" text_color="" background_color="" direction="up" animation_type="0" animation_direction="down" animation_speed="0.1"]Text[/counter_block]
[/counter_blocks_component]

Parameters

Counter blocks container - [ counter_blocks_component ]

• columns
  • defines the maximum number of counter blocks columns to display
  • Possible values - number - like 1, 4 etc. - max. 12

• class
  • custom class for CSS of component
  • Possible values - string - like custom-element-class

• id
  • custom ID for CSS of component
  • Possible values - string - like custom-element-id

Counter block - [ counter_block ]

• type
  • set the predefined layout of the counter block
  • Possible values - 1, 2 or 3

• value
  • defines the value which will be used for counting
  • Possible values - integer - like 20, 500, 10000 etc.

• unit
  • defines the unit which is shown before/after the text
  • Possible values - %, $ etc.

• unit_position
  • defines the position of the unit
  • Possible values - suffix or prefix

• icon
  • set the icon for the counter block
  • Possible values - use Font Awesome like fas fa-tag

• text_color
  • defines the counter block text color
  • Possible values - hex code #000000, or color name black or rgba values like rgba(0,0,0,0.4)

• background_color
  • defines the counter block background color
  • Possible values - hex code #000000, or color name black or rgba values like rgba(0,0,0,0.4)

• direction
  • sets the direction of the counting
  • Possible values - up or down

• animation_type
  • set the animation type of the component
  • Possible values - none, bounce, fade, flash, shake, slide

• animation_direction
  • set the animation direction of the component
  • Possible values - down, left, right, up

• animation_speed
  • set the animation speed of the component
  • Possible values - in seconds like 0.1, 1, 5.3 etc.

Basic Examples

Type 1

Type 2

Type 3

Animated Examples