Animated number

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

OptionDefaultExampleDescription
end_number5end_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.
tagspantag="h3"Choose which HTML tag to use for the label:

  • h1
  • h2
  • h3
  • h4
  • h5
  • div
  • span
font_size0font_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
bold0bold="1"Makes the text bold.
margin_top0margin_top="30"CSS top margin.
margin_bottom0margin_bottom="30"CSS bottom margin.
animated1animated="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]
Be inspired. © 2024 ThemeCatcher Ltd. 20-22 Wenlock Road, London, England, N1 7GU | Company No. 08120384 | Built with React | Privacy Policy