Milestones shortcode is one of shortcodes available in The Ken theme which you can take advantage of. To see a live demo of this feature please click here.

Ken Milestones Demo 3-milestones shortcode

In this article, we will explain how to display the Milestones shortcode and configure the settings.


Displaying Milestones Shortcode

To add the milestones shortcode to a page or post, follow the steps below:

1Add or edit an existing page.
2In the Visual Composer section, click on the + button.

milestones shortcode

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

milestones shortcode

4When the shortcode is added, a new pop-up screen called Milestones Settings will open. Configure the settings as required.

milestones shortcode

5Click on Save Changes and publish or update the page to check the result.

Configuring the Milestones Shortcode Settings

After you add the shortcode, a pop up window will appear which you can set options for this shortcode that you can set to fine tune your shortcode and add it to the page. Followed is detailed description of each option for the shortcode:

Setting Description

Milestones Style?Use this option to set the style of the shortcode. Available options are Classic and Modern.
Number Start atUse this option to set the starting number for the milestones numbers animation.
Number Stop atUse this option to set the finishing number for the milestones numbers animation.
SpeedUse this option to set the speed of numbers animation for the milestones. This option value is in milliseconds.
Number Text SizeUse this option to set the font size of numbers shown in milestones shortcode.
Content Below Numbers?Use this option to set the content below numbers in milestones shortcode. Available options are Icon, Text and No Content.
Add Icon Class NameThis option will be available if you set Icon as the value for Content Below Numbers? option. Use this option to add 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 Ken -> Icon Library.
Icon Size?This option will be available if you set Icon as the value for Content Below Numbers? option. Use this option to set the icon size for the milestones shortcode. Available options are 16px, 32px, 48px, 64px and 128px.
Text Below NumbersThis option will be available if you set Text as the value for Content Below Numbers? option. Use this option to add text below numbers section for the milestones shortcode.
Text SizeThis option will be available if you set Text as the value for Content Below Numbers? option. Use this option to set the text size below numbers section for the milestones shortcode.
Number SuffixThis option will be available if you set the Milestones Style? option to Modern. Use this option to add a suffix for the number section of the milestones shortcode.
Number Suffix Text SizeThis option will be available if you set the Milestones Style? option to Modern in. Use this option to set the font size for the suffix of number section of the milestones shortcode.
Skin colorUse this option to set the skin color for milestones shortcode.
Text/Icon ColorUse this option to set the text and icon color for milestones shortcode.

Extra Class Name

This is an option which is common among most of the shortcodes. If you wish to style particular content element differently, then use this field to add a class name and then refer to it in Custom CSS settings inside Theme Settings > Custom CSS.