booster addons
creative elementor bundle
Purchase Now
Purchase Now
Purchase Now

Home - Widgets - Vertical Skill Bar

Vertical Skill Bar

Preview Widget
Preview Widget
Getting Started
Widget Styling

More Widgets

• Skill Bar
• Countdown
• Counter
• Radial Progress

# Getting started

The vertical skill bar widget is a great tool to display the level of proficiency in a skill by using percentages and a vertical bar.Choose from different styles, layouts, animations, and style everything from the colors to the bar design.

Here are the options available.


In the content section, you can define your skill name and value but also choose a layout and alternate the elements positioning.

  • Skill Name & Value : Define your skill name and the value number that you want to use.
  • Skill Name Style : Choose a style for your skill name.The styles options offer both horizontal and rotated text.
  • Layout Design : Select from 4 available styles each with a different design.
  • Percent Value Position : Control the position for your percent value.
  • Alignement : Align the vertical skill bar widget in the containing section.


Under the styling tab section, you will have the full control over the styling & design of all the vertical skill bar elements and visual aspects.

  • Text Content Styling

Customize the text properties for the name text and percent value.Choose a font style from a great number of font families and change the font size, letter spacing...

-Colors : Customize the color of your text with the possible use gradient colors for the skill name.

-Shadows : Apply shadows for your name text with having full control over the shadow color and blur effect.

  • Container Styling

Change the container settings and style.

- : Change the container height & width to match your needs.This will also affect the vertical bar size.

-Background : Customize the container's background & choose to apply either a solid background color or a gradient color.

-Borders & Shadows : Control border width and style and apply custom box shadow for the container.Note that you can also alternate the border radius to change the container shape.

-Skill Name Margins : Change the skill name margins values to control the space between this element and the vertical skill bar.

  • Bar Styling

This is where you will alternate the vertical bar style.You can change the colors, animation settings , and enable custom designs.

-Background : Customize the background color for the vertical bar.Gradient colors can also be used for this background.

-Duration : Control the animation duration.The higher this number is, the more time it will take for the the animation to complete.The lower this number is, the faster the animation speed will be.

-Animation Delay : Set up the animation delay.This essentially means after how many seconds you want the animation to start.

-Animation Timing : This is where you can change the behavior of the animation.For example, if you want the animation to be slower at the start or faster at the end.Choose from the different options available.

Stripes Settings

-Enable Stripes : You can enable the stripes features to add even more style to the vertical bar.

-Move Stripes : Enable move stripes to change the stripes idle state to a moving animation.

Get Help From Professionals

Can't find what you are looking for?

If you can't find what you are looking for any our documentation website, please feel free to open a support ticket  & get help from our support team.

Open a Ticket
Open a Ticket


We are a group of talented WordPress developers & designers from Earth our main goal is to create great products & provide the best services to our customers.




Email :

WebSite : Certain Dev

Made with love from Earth!

Certain Dev | all rights reserved © 2020