Milestones Shortcode

Updated on August 16, 2017

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 Name Adds 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 Prefix Adds the text that goes before the number.
Number Suffix Adds the text that goes after the number.

Configuring Icons and Text Styling


Icon & Text Size Sets the icon and text size for the milestones shortcode. Available options are: Small, Medium, Large.
Icon Color  Sets the color of the icon.
Text Color Sets 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 Family Sets the font of the text.
Number Font Weight Sets 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

Align Sets 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 At Sets the starting number for the milestones numbers animation.
Number Stops At Sets the finishing number for the milestones numbers animation.
Speed Sets 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.

Did this answer your question?