Counter

Bring in the counter element. Let's go to add elements, and you'll find counter here. Click, hold, and drag, and drop it in the place where you wanted to go. This is a great element for indicating how much has happened or how many units sold. It's very often seen on websites. Access it by clicking on it and go to the far left where you see the counter. Let's focus on this first style, though we have four here because the other three are quite different to the first one. Here you have the to have a start and an end. Often, you will have a start function to go quicker to the end. For example, if you have something like a million there, you don't want to start all the way from zero. Maybe you want to start at something like five 100,000. So you have the option to run from a start to an end. Let's put it at something manageable. I'll put it back to zero, and let's put it to an end like 1,000. Duration is how long the counter will go. Two seconds is good. I'll even go down to one second, but I'll stay away from anything more than two seconds.

The reason for that is that when you are on a mobile device, two seconds may just be that time that it takes a person to swipe up or down and they will miss the counter completely. Hop over to advanced, and here you can have a prefix. For example, if it is money, you can add the unit that you want there. If it is a value, for example, like thousands, you can say 1,000, which which is a million in this case. And then you have the option on how the separator will look after every three units. So if you want a full stop, a period there instead, you can do so, but the comma is a good one to go. Now, let's go and have a look at the other styles. These are almost like pie chart counters. If I click on it, it looks really ugly from the beginning and a few things we will do here. So first of all, you can still keep this value here, and you can see now it is expressed as a percentage Or you can also remove it with the other two styles that we will have here.

Let's stick to this one. Remember, it's a percentage, and let's give it then a percentage value, something like 65 %. Again, you have the duration. Over to advanced, you have the opportunity to take away the percentage if it's not something you want. Again, you have your prefix as well as the separator. But if we put that percentage back, how about that ugly overlap there? What can we do about that? Once you activate this style, a new feature appears, and that is you can go to the settings and you can change the width over here. Increase it, and you can do that in percentage or pixels. The other option you also have is to click on it physically, and then you can drag it with the handlebars in the corners, and you will see very easily you get that real-time visual display of whether it looks good or not. Also important when you work with this one is to You go to your color as well to make sure that it looks good. You can change the background. You can change your progress to a color that you like. I like this scheme, though. And you can add a shadow as well as hover options as well.

Progress is actually a line. And you can see here that we have the size set to seven. You can change around here and make it much thinner, very neat and sleek. And then you can increase it quite a lot if you have something very outrageous in mind. But that brings us to the pie chart. So let's put this back on the default seven, go to the settings again and select the one without any text. And then you have the option of a pie chart, which is the one I've basically created by using my own settings. But here it's done for you. Go again to the color. You will see now you only have the background and the progress easily done. Remember to go and have a look on your tablet devices as well as on your mobile device display, how this will look and make sure that it fits your design nicely.