Visual Composer provides an element “Progressbar”, which can also be used to display skill sets. However, that element is limited in functionality. For example, all bars within the same set share one color and the color choices are limited. That’s why Visual Composer Extensions includes a new element “TS Skillset”. In conjunction with a custom post type to provide the data for each skillset, you are now able to assign custom colors to each skill, among other improvements.

Default Settings

[TS_VCSC_Skill_Sets_Standalone skillset_id=”14879″ skillset_name=”Test Skillset 1″ bar_height=”2″ bar_stripes=”false” bar_animation=”false” margin_top=”0″ margin_bottom=”0″ bar_Animation=”false”]
[TS_VCSC_Skill_Sets_Standalone skillset_id=”14880″ skillset_name=”Test Skillset 2″ bar_height=”2″ bar_stripes=”false” bar_animation=”false” margin_top=”0″ margin_bottom=”0″ bar_Animation=”false”]

Custom Height Settings

[TS_VCSC_Skill_Sets_Standalone skillset_id=”14879″ skillset_name=”Test Skillset 1″ bar_height=”10″ bar_stripes=”false” bar_animation=”false” margin_top=”0″ margin_bottom=”0″]
[TS_VCSC_Skill_Sets_Standalone skillset_id=”14880″ skillset_name=”Test Skillset 2″ bar_height=”10″ bar_stripes=”false” bar_animation=”false” margin_top=”0″ margin_bottom=”0″]

Custom Height Settings + Stripes

[TS_VCSC_Skill_Sets_Standalone skillset_id=”14879″ skillset_name=”Test Skillset 1″ bar_height=”20″ bar_stripes=”true” bar_animation=”false” margin_top=”0″ margin_bottom=”0″]
[TS_VCSC_Skill_Sets_Standalone skillset_id=”14880″ skillset_name=”Test Skillset 2″ bar_height=”20″ bar_stripes=”true” bar_animation=”false” margin_top=”0″ margin_bottom=”0″]

Custom Height Settings + Stripes + Animation

[TS_VCSC_Skill_Sets_Standalone skillset_id=”14879″ skillset_name=”Test Skillset 1″ bar_height=”20″ bar_stripes=”true” bar_animation=”true” margin_top=”0″ margin_bottom=”0″]
[TS_VCSC_Skill_Sets_Standalone skillset_id=”14880″ skillset_name=”Test Skillset 2″ bar_height=”20″ bar_stripes=”true” bar_animation=”true” margin_top=”0″ margin_bottom=”0″]