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.
Displaying Milestones Shortcode
To add the shortcode:
| Setting | Description |
|---|---|
| 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. |
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
| Setting | Description |
|---|---|
| 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.
