Skillsets

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.

[TS-VCSC-Spacer height=”20″][TS-VCSC-Icon-Title title=”Skillsets as Raphael Chart” align=”center” font_family=”Default:regular” size=”48″ font_weight=”300″ highlight_allow=”true” highlight_color=”#2691bd” highlight_strings=”UmFwaGFlbCUyQyUyMENoYXJ0″]
[TS_VCSC_Skill_Sets_Raphael skillset_id=”14879″ custompost_name=”Test Skillset 1″ text_default=”Design” max_stroke=”30″]
[TS_VCSC_Skill_Sets_Raphael skillset_id=”14880″ custompost_name=”Test Skillset 2″ text_default=”Languages” max_stroke=”30″]
[TS-VCSC-Icon-Title title=”Skillsets as Bar Charts” align=”center” font_family=”Default:regular” size=”48″ font_weight=”300″ highlight_allow=”true” highlight_color=”#2691bd” highlight_strings=”QmFyJTJDJTIwQ2hhcnRz”]

Style 1: Basic

[TS-VCSC-Divider divider_border_thick=”2″]
[TS_VCSC_Skill_Sets_Standalone skillset_id=”14879″ custompost_name=”Test Skillset 1″ skillset_name=”Test Skillset 1″]
[TS_VCSC_Skill_Sets_Standalone skillset_id=”14880″ custompost_name=”Test Skillset 2″ bar_tooltip=”true” skillset_name=”Test Skillset 2″]
[TS-VCSC-Spacer height=”20″]

Style 1: Custom Height

[TS-VCSC-Divider divider_border_thick=”2″]
[TS_VCSC_Skill_Sets_Standalone skillset_id=”14879″ custompost_name=”Test Skillset 1″ bar_height=”10″ skillset_name=”Test Skillset 1″]
[TS_VCSC_Skill_Sets_Standalone skillset_id=”14880″ custompost_name=”Test Skillset 2″ bar_height=”10″ bar_tooltip=”true” skillset_name=”Test Skillset 2″]
[TS-VCSC-Spacer height=”20″]

Style 1: Custom Height + Stripes

[TS-VCSC-Divider divider_border_thick=”2″]
[TS_VCSC_Skill_Sets_Standalone skillset_id=”14879″ custompost_name=”Test Skillset 1″ bar_height=”20″ bar_stripes=”true” skillset_name=”Test Skillset 1″]
[TS_VCSC_Skill_Sets_Standalone skillset_id=”14880″ custompost_name=”Test Skillset 2″ bar_height=”20″ bar_tooltip=”true” bar_stripes=”true” skillset_name=”Test Skillset 2″]
[TS-VCSC-Spacer height=”20″]

Style 1: Custom Height + Stripes + Animation

[TS-VCSC-Divider divider_border_thick=”2″]
[TS_VCSC_Skill_Sets_Standalone skillset_id=”14879″ custompost_name=”Test Skillset 1″ bar_height=”20″ bar_stripes=”true” bar_animation=”true” skillset_name=”Test Skillset 1″]
[TS_VCSC_Skill_Sets_Standalone skillset_id=”14880″ custompost_name=”Test Skillset 2″ bar_height=”20″ bar_tooltip=”true” bar_stripes=”true” bar_animation=”true” skillset_name=”Test Skillset 2″]
[TS-VCSC-Spacer height=”20″]

Style 2: Custom Height + Stripes + Animation

[TS-VCSC-Divider divider_border_thick=”2″]
[TS_VCSC_Skill_Sets_Standalone skillset_id=”14879″ custompost_name=”Test Skillset 1″ bar_style=”style2″ bar_stripes=”true” bar_animation=”true” skillset_name=”Test Skillset 1″]
[TS_VCSC_Skill_Sets_Standalone skillset_id=”14880″ custompost_name=”Test Skillset 2″ bar_style=”style2″ bar_tooltip=”true” bar_stripes=”true” bar_animation=”true” skillset_name=”Test Skillset 2″]
[TS-VCSC-Spacer height=”20″]

Style 3: Stripes + Animation

[TS-VCSC-Divider divider_border_thick=”2″]
[TS_VCSC_Skill_Sets_Standalone skillset_id=”14879″ custompost_name=”Test Skillset 1″ bar_style=”style3″ bar_stripes=”true” bar_animation=”true” skillset_name=”Test Skillset 1″]
[TS_VCSC_Skill_Sets_Standalone skillset_id=”14880″ custompost_name=”Test Skillset 2″ bar_style=”style3″ bar_tooltip=”true” bar_stripes=”true” bar_animation=”true” skillset_name=”Test Skillset 2″]