Widgets

Skill Bars

Step-by-Step Tutorial on Using the Skill Bars Widget of Zyre Addon

The Skill Bars widget of Zyre addon helps you visually showcase skills, progress, or expertise with animated progress bars. Ideal for portfolios, resumes, or service sections, it adds an interactive way to highlight strengths and achievements while keeping the design clean and professional.

Learn How To Use Skill Bar Widget:

Exploring the Features of Skill Bars Widget

Step 1: Drag the widget

From the left panel, search or choose the Skill Bars of Zyre Addon and simply drag it into your desired section.

Step 2: Content tab

Skill Bars Content:

  • Skill Bars Style : You can choose a predefined style from here
  • Skills : Create and manage multiple skill items.
    • Name : Enter the name/title of the skill.
    • Level (out of 100) : Define the progress value (0–100).
    • Animation Duration : Set the time it takes for the bar to animate.
    • Want to Customize? (when Toggle Enable)
      • Text Color : Choose the color of the skill text.
      • Level Color : Set the progress bar (filled portion) color.
      • Base Color : Define the background color of the bar.

Step 3: Style tab

In the Style section, you can customize the Skill Bars, Name, Percent Text.

Skill Bars:

  • Height : Set the thickness/height of each skill bar.
  • Spacing Between : Define the space between multiple bars.
  • Border Radius : Control corner roundness of bars.
  • Level Color : Choose the filled progress color.
  • Base Color : Set the background color of the unfilled portion.
  • Box Shadow : Apply drop shadow effects.
  • Background Stripes:
    • Show Stripes : Enable/disable background stripes on the bars.
    • Stripe Color : Select stripe overlay color.
    • Stripe Size : Set thickness/width of each stripe.
    • Stripe Angle : Adjust the angle of the stripes.
    • Stripe Animation : Enable/disable animated stripes.
    • Animation Duration : Control the speed of stripe animation.

Name:

  • Typography : Adjust font family, size, weight, transform, style, decoration, line height, letter spacing, and word spacing. Explore full typography settings here.
  • Text Color : Set the name/title color.
  • Text shadow : Set shadow on each text.
  • Background Color : Set background colors for normal and hover states. Explore full background settings here.
  • Border Type : Define border style, width and color.
  • Border Radius : Control corner roundness.
  • Box Shadow : Apply drop shadow.
  • Padding : Add inner spacing.
  • Horizontal Alignment : Position the name horizontally.
  • Vertical Alignment : Position the name vertically.

Percent Text:

You’ll find the same design options for the Percent Text as in the Name — giving you full freedom to style it just the way you imagine.

  • Arrow:
    • Show Arrow : Enable/disable arrow on percent text.
    • Arrow Shape : Set the shape of the arrow
    • Horizontal Position : Adjust the arrow position horizontally.

Step 4: Advance tab

If you want to customize the layout, backgrounds, or make your design more engaging, head over to the Advanced section. The Advanced panel is a default Elementor feature. Check out this document to learn more about its features.

Finally, hit the Publish button and watch your stunning Skill Bars come to life on your webpage!

Share: