This feature is available in the evolve Plus premium theme version

NOTE: You can access all the shortcodes via the shortcodes icon on your visual editor. See this document if you need more information

 

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 valuessuffix 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 valuesnone, bounce, fade, flash, shake, slide
  • animation_direction
    • set the animation direction of the component
    • Possible valuesdown, 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

 


0
Pixels

0
Meetings

0
Users

 

Type 2

 


0
Pixels

0
Meetings

0
Users

 

Type 3

 


0
Pixels

0
Meetings

0
Users

 

Animated Examples

 


0
Pixels

0
Meetings

0
Users


0
Pixels

0
Meetings

0
Users