Skill Meter Shortcode

Updated on January 11, 2018

Skill Meter is one of the shortcodes available in The Ken theme which you can take advantage of. It allows you to add a stylish Skill Meter. To see a live demo of this feature please click here.

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

Ken Skill Meter Demo-skill meter shortcode


Displaying a Skill Meter Shortcode

To add the Skill Meter 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.

skill meter shortcode

 

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

skill meter shortcode

 

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

skill meter shortcode

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

Configuring the Skill Meter 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 a detailed description of each option for Skill Meter shortcode:

Setting Description

Title Use this option to add a title of the skill to the shortcode.
Percent Use this option to set the percentage value for the shortcode.
Progress Bar Height? Use this option to set the height of the progress bar in the shortcode.
Title Color Use this option to set the color of title in skill meter shortcode.
Progress Bar Background Color Use this option to set the background color of the progress bar in skill meter shortcode.
Track Bar Background Color Use this option to set the background color of track bar in skill meter shortcode. The track bar is the secondary bar that goes over the progress bar and will indicate the percentage value graphically.

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.

Did this answer your question?