Skill Meter Shortcode

Last Updated on

The skill meter shortcode is one of the Jupiter shortcodes that provides an animated representation of your data as a progress bar.

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

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

Skill meter shortcode - demo

In this article

Displaying Skill Meter Shortcode

To add the shortcode:

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

Skill meter shortcode - visual composer screen

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

Skill meter shortcode - add element

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

Skill meter shortcode - Skill meter settings

Configure the settings as required.
Click Save Changes and publish or update the page to check the result.

Configuring Skill Meter Settings

After you added the Skill Meter shortcode, a pop up window will appear where you can set options for this shortcode. Below is the detailed description of each option for Skill Meter shortcode.

TitleSets a title for the shortcode. It will be added at the top of the graphical representation.
PercentSets the percentage to show in the shortcode. The colored section of the bar will fill that percentage of the whole bar to show it as a graphical representation of the data.

Configuring Skill Meter Styling

To set the bar thickness or change colors you need edit the following options. Each option has a description which you can find below:

Bar ThicknessSets the thickness of the bar. The value of the option is in pixels and the default amount is 22 pixels.

Configuring Text Color

There are two options which gives you possibility to edit color for title and percentage:

Setting Description
Title Text ColorSets the text color for the title of the shortcode.
Percentage Text ColorSets the text color of the percentage shown inside the bar.

Configuring Bar Color

There are also two settings which allow you to set colors for bar:

Setting Description
Bar Track ColorSets the background color of the bar which represents the whole spectrum.
Bar Progress ColorSets the foreground color of the bar which represents the percentage to show.

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.

Was this helpful?
Previous Article:
Next Article:

Can't find what you're looking for?

Open New Ticket