The user interface of the Thrive editor has been upgraded! Please, check out the changes here, before proceeding.
The "Progress bar"' and the "Fill counter" are the data elements in Thrive Architect. They come in handy, if you want to show data like percentages on your website.
In order to use this element, first drag & drop it to your page and then, customize it to your liking with the help of its options, which are the following:
Fill Color and Background Color
You can change the fill and the background color of your "Progress Bar" quite easily. Click on the boxes with the colors and select the color, as well as the opacity, that you like.
Choosing a light background color is optimal, because this way, the distinction between the "Fill Color" and the "Background Color" is more obvious:
Note: If you have used the "Advanced Custom Fields" plugin to set up a "Number" custom field, and you assigned a value for it for the page you are editing now, after the "Fill Color" and "Background" color options, the section with the "Element Type" options will appear.
If you click on the "Dynamic" option from the "Element Type" options, you can insert the previously created "Number" custom field to the "Progress Bar" element:
This will allow you to choose the previously created custom field. If you need more information about this, make sure to read this article, which explains how to add a custom field with the "Progress Bar" element.
Keep in mind that the "Element Type" options will only be available, if you have followed the steps presented here, in order to set up custom fields.
If you want to change the fill percentage of your progress bar, all you have to do is drag the slider under this specific option, or enter a value manually on the box next to it and you will see how the percentage changes accordingly:
Inner Label and its color
By default, the progress bar comes with an inner label, which is "Progress Bar". You have the possibility to remove this label by unchecking the 'Add Inner Label' box.
You can also change it, by clicking on the label text and writing what you would like the label to say instead. This text should be a representation of what your progress bar displays exactly.
You can use the 'Label color' option if you want to add a color to this label. You just have to click on the box and select the color from the color picker:
Using and customizing this element is similar to how the "Progress bar" works. With the help of its specific options you can have a "Fill Counter" that best suits your needs:
Counter Size and Fill Percentage
Simply drag the slider under these options or enter a value manually in the box next to them, to change the size or the fill percentage of the "Fill Counter".
Please keep in mind, that changing the "Fill Percentage" won't automatically change the percentage number in the counter. You should think about the inner part as a separate part of the counter.
If you wish to change the percentage number, or the "Fill Counter" label, please click on them and edit the inline texts:
Note: If you have previously used the "Advanced Custom Fields" plugin to set up a "Number" custom field, then you will have the possibility to use that field for the "Fill Counter" element.
In such cases the section with the "Element Type" options will appear after the "Counter Size" one, and you have to choose "Dynamic" from it, in order to use the custom field:
Read this article in order to find out how to do use custom fields with the "Fill Counter" element.
If you want to use the "Advanced Custom Fields" plugin, but you are not familiar with it, make sure to check out this article and follow the steps accordingly.
Keep in mind that the "Element Type" options will be available only if you have followed the steps presented in the article mentioned above.
There are three colors of the "Fill Counter" that you can change: the "Circle" color, the "Fill" color and the "Inner Color". Each of these can be changed by clicking on the color box next to them and selecting the specific color from the color picker:
Match fill value with dial value
The last option available in the sidebar is the "Match fill value with dial value":
This basically means that if you activate it, the numerical value shown within the "Fill Counter" will be directly proportional with the fill circle.
Below you can see two images which exemplify this: the image on the left side is with the option activated, whilst the one on the right is deactivated:
In case you want to make further adjustments to the 'Progress Bar' or the 'Fill Counter' elements, you can use the more general options available for both of them.
Should you need more info on how various Thrive Architect elements work, please follow this link.
Hopefully this article was useful for you. If so, please give us a smile below :)