ElementsKits is an all-in-one addon for Elementor that lets you enhance your website’s capabilities. The add-on includes comprehensive widgets, extensions, and modules to help you add advanced functionalities to your WordPress site using only one plugin.

Det Progress Bar from ElementsKit is a feature to showcase significant stats in a stylish way. You can visualize the numerical growth of any task or milestone using the progress bar in Elementor. Read this documentation to learn how to use the Progress Bar widget for Elementor.

Step-1: Configure Progress Bar in Elementor #

First, open the Elementor editor and drag the Progress Bar widget into your design. Then configure the WordPress progress bar in Elementor.

To configure the widget,

1. Select the progress bar Stil from the list of styles available. If you choose the Inner Content style, you can Tilføj ikon to the progress bar.

2. Indstil Titel text for the progress bar.
3. Gå ind Procent of progress to show.
4. Justere Animation Duration for showing the progression.

Step-2: Customize Progress Bar Styles #

Under the Style tab, you can customize Bar, Track, Title, and Percent styles for the WordPress progress bar in Elementor.

2.1 Bar #

To customize the progress bar,

1. Vælg Baggrundstype, and choose a background color.
2. Juster Højde of the bar.
3. Then customize the Shadow indstillinger.

4. Indstil Grænseradius og Polstring.
5. Juster Margen nederst of the bar.

2.2 Track #

To customize the Track bar,

1. Vælg Baggrundstype and choose a background color.
2. Set the attributes for Shadow.
3. And set the Grænseradius.

2.3 Title #

To customize the Title of the progress bar in Elementor,

1. Vælg Titelfarve.
2. Typografi of the title text.
3. Juster Tekstskygge.

2.4 Percent #

To customize the Percent of the progress bar in Elementor,

1. Vælg Percent Color.
2. Typografi of the percent number.
3. Juster Tekstskygge.

By following the steps above, you can create an eye catchy WordPress Progress Bar in Elementor.