Create and customize progress bar in Elementor

Progress Bars are an effective element in web design that inform your visitors about the progress of a project or goal in an appealing way. Elementor, as one of the most popular Page Builder plugins for WordPress, offers you the ability to easily integrate progress bars into your web pages. This guide will take you through the individual steps to create and customize a progress bar in Elementor.

Main Takeaways

• Progress bars provide a visual representation of progress and goals.
• You can customize titles, values, and colors individually.
• The inner text can be optionally shown or hidden.
• Various styles and customization options are available to adapt the bar to your design.

Step-by-Step Guide

First, open your WordPress page and navigate to the Elementor editor. There you can add a new element and select the progress bar.

Now you are ready to enter the title of your progress bar. Think of a suitable title, such as "Revenue Goal." This gives your visitors an initial idea of what it is about.

In the next step, you need to set the goal or success message. Think about what exactly you want to display and write it in the designated field. This step helps make your progress bar more understandable for users.

Now you can set the color of the progress bar. This is not mandatory, but it is a good opportunity to adjust the design. You can choose a shade that harmonizes with the rest of your website.

Next, go to the percentage settings. Here you can set your progress, for example, at 40%. Remember that you can set the maximum value to 100% and the minimum value to 0%. This feedback helps your visitors quickly grasp the progress.

The percentage can be shown or hidden. It often looks more appealing if you hide the text, especially if you prefer a clean design. Consider which option is best suited for your project.

If you wish, you can also add inner text containing the percentages. This feature is particularly useful if you want to represent immediate progress. If you opt-out of inner text, you can also hide the number here.

Now it's about the style of the progress bar. You can individually customize the color of the bar, the background color for the unfilled area, and the height of the bar. Choose a dark green tone for the filled area and a neutral background color for a clean look.

In addition, you can round the corners of the progress bar to give it a more appealing shape. Remember that the corners can only be rounded on the front until the progress reaches 100%.

If you want to customize the inner text, you can also change the color and typography here. You may decide to disable the font to focus on the progress.

Finally, you will come to the advanced settings, where you can customize the text color and style for the title. A black, bold title with optional shadow ensures that your title stands out.

Now save your changes and go to your page to see the result. You may decide that it makes sense to display the percentage. If not, the progress bar will still be visually appealing.

Your progress bar now shows the set value without animating from 0. Instead, the progress is visualized immediately.

If you are using the Pro version of Elementor, you will also be offered dynamic attributes. This feature is particularly useful for customizing progress bars based on external data or even database-driven values.

Summary

In this guide, you have learned how to create and customize a progress bar in Elementor. You can set titles and progress, choose colors, and make various adjustments to integrate an appealing and effective progress bar.