Animated number

The Animated number shortcode allows you to display a number that will animate to the final value. See examples here.

Option Default Example Description
end_number 5 end_number="50" Add any numerical value greater that the number within the enclosed content area of the shortcode.
label (empty) label="My Number" Add a label to the number.
tag span tag="h3" Choose which HTML tag to use for the label:

  • h1
  • h2
  • h3
  • h4
  • h5
  • div
  • span
font_size 0 font_size="30" Choose a font size. This will be a pixel value. If it is 0, then it will inherit the font size.
text_align (empty) text_align="textright" Text alignment options:

  • (empty) – Inline
  • textleft – Left
  • textcenter – Center
  • textright – Right
bold 0 bold="1" Makes the text bold.
margin_top 0 margin_top="30" CSS top margin.
margin_bottom 0 margin_bottom="30" CSS bottom margin.
animated 1 animated="0" Add a subtle animation when the number comes into view.

Example

 [animated_number end_number="30" font_size="50" text_align="textcenter" bold="1"]0[/animated_number]

Still having trouble? Head over to the forums.

Forums