Black Friday Sale!

Days
Hours
Min
Sec

Need Help?

Here are some good places you cant start.

Whats New?

Get updated about all the good stuff!

wordpress-black-friday-deals-2025
blocks library for wordpress
Scroll Marquee Effect - Featured Blog

How to Add Vertical Progress Bar in WordPress (Step-by-Step Guide)

This step-by-step guide will show you how to add an upright, informative Vertical Progress Bar block to your WordPress site using the Unlimited Elements Blocks Library. The Vertical Progress Bar block is highly flexible, perfect for showcasing skill proficiency (stacked side-by-side), tracking vertical progress, or adding a modern visual element, and works directly inside the native WordPress block editor (Gutenberg) – no coding required.

Instructions

1

Install Unlimited Elements Blocks Library

  • Go to the Unlimited Elements plugin page on WordPress.org.

  • Click Download, then in your WordPress dashboard, go to Plugins → Add New → Upload Plugin and upload the ZIP file.

  • Click Install Now and then Activate to enable the plugin.

Install-Unlimited-Elements-Block
2

Open the Blocks Library

  • From your WordPress dashboard, go to Unlimited Elements → Blocks Library.

  • This is where all available blocks are listed and managed.

Open-the-Blocks-Library
3

Search for the Vertical Progress Bar Block

  • Use the search bar at the top right and type Vertical Progress Bar.

  • The Vertical Progress Bar block will appear in the results list.

Search-for-Block
4

Install the Vertical Progress Bar Block

  • Hover over the Vertical Progress Bar block and click Install.

  • This adds the block to your available options in the editor.

Install-the-WordPress-Block
5

Add Vertical Progress Bar to a WordPress Page

  • Open any page or post using the WordPress block editor.

  • Click the (+) Add Block button, search for Vertical Progress Bar, and insert it into the page.

Add-Image-Accordion-to-a-WordPress
6

Customize the Vertical Progress Bar Block

Once added, select the Vertical Progress Bar block and use the settings panel on the right. Set the Progress Value and the Text Label. Define the Bar Width and Height and the Fill Orientation . Control the visibility and Position of the Percentage Value. Customize the Styling for the Foreground Color and Background Color, Label Typography and Color, and the Animation Speed to create a functional, visually appealing, and informative data visualization that fits your site’s design.

Customize-the-Image-Accordion-Bl

Grab this deal
before it's gone!

Days
Hrs
Min
Sec

30-Day Money-Back Guarantee

Download is just a click away

Get instant access to tons of Elementor goodies, completely FREE!

Hurray!

You got FREE access to the worlds leading widgets for Elementor page builder!