The milestones shortcode is one of the Jupiter shortcodes that allows to show some statistic data with animation. There are a lot of settings you can use to style and configure the shortcode to your needs.

In this article, we’ll explain about configuring Milestones shortcode.

To see the Milestones shortcode in action, you may check the demo page.

Milestones shortcode - demo

Displaying Milestones Shortcode

To add the shortcode:

1Add a new page or edit an existing page.
2From Visual Composer screen, click + button.

Milestones shortcode - visual composer screen

3In Add Element pop-up screen, search for Milestones and click on it to be added to the page.

Milestones shortcode - add element

4When the shortcode is added, a new pop-up screen called Milestones Settings opens. It gives you the ability to configure the shortcode settings.

Milestones shortcode - Milestones settings

5Configure the settings as required. Other settings are explained in next sections.

Add Icon Class NameAdds the icon class name that you want to have in the shortcode. To see a graphical representation of icons and a reference to their class names, please go to Main Dashboard Menu > Jupiter > Icon Library.
Description Adds text description under the number.
Link (Optional)Adds a link for the whole block. Start URL of a site from http://. Leave the field blank if you don’t want to create link for the shortcode.
6Click Save Changes and publish or update the page to check the result.

Configuring Milestones Settings

There are general settings that allow to configure the Milestones shortcode to your needs. In order you want to change color or set some styling, you can edit the following options described below.

Settings Description

Number PrefixAdds the text that goes before the number.
Number SuffixAdds the text that goes after the number.

Configuring Icons and Text Styling


Icon & Text SizeSets the icon and text size for the milestones shortcode. Available options are: Small, Medium, Large.
Icon Color Sets the color of the icon.
Text ColorSets the text color for milestones shortcode.

Configuring Font Settings

If you want to style font for the text you can use the following options:

Setting Descriotion

Font FamilySets the font of the text.
Number Font WeightSets the font weight of the number.
Number Text Size (Number, Prefix And Suffix)Sets the text size of the number.
Description Text Size Sets the text size of the description.

Configuring Milestones Alignment

There is 1 setting that allow you to set position of the milestone.

Setting Description

AlignSets the shortcode alignment. The available options are: left, center, right.

Configuring Numbers Animation

Three options allow to configure numbers animation. Their description can be found below:

Setting Description

Number Starts AtSets the starting number for the milestones numbers animation.
Number Stops AtSets the finishing number for the milestones numbers animation.
SpeedSets the speed of numbers animation for the milestones. This option value is in milliseconds.

Adding an Extra Class Name

Extra Class Name field in the setting pop-up allows you to add an extra class name to the shortcode. It’s useful when you need to target the shortcode in a style sheet or JavaScript file.

You can read Adding custom CSS class to a shortcode article for further explanation.