Skill Bar

Skill Bar widget will enable you to display project percentage, user skill, and other useful information in an unique and professional way.

Step 1

To use our Skill Bar widget, first, create a section by clicking on the “+” icon on Elementor and then from the block section of the left bar search for Skill Bar. Drag the Skill Bar block and drop it into your created section.

Now under the Content tab, you can select the layouts from the templates dropdown menu. There are different professional-looking styles available for the Skill Bar. You can choose any of the styles you want.

Now click on the content menu where you will see your skill bar items. By default, there are three items available. You can delete any of the items by clicking on the “X” icon, similarly, you can copy any item by clicking the copy icon. Click on the Add item button to a new item.

Click any of the items to edit the information. At first, you can add the title and select the HTML tag for the title. There is also an option to show or hide the title. After that, you can add an icon from the icon library.

Now you can set the progress value and start value. If the start value is larger than the progress value the skill bar progress animation starts from the end. You can also set the animation delay time too.

You can also enable the progress bar tooltip option. The tooltip option is only available for the pro user. Now add the skill bar height and set progress bar color, progress fill color, title color, number color, number background color, tooltip arrow color, and skill bar radius.

Step 2

Move on to the Style menu where you will find different style options to customize your skill bar section.

Title & Icon

Set title typography like font family, size, line height, letter spacing. You can also set the tile and icon padding too.

Similarly, you can the number typography and padding.

That’s it! your skill bar section is fully ready to use.

Was this article helpful to you? Yes No