All tips should be working for both Number Counter composite element and Circle Number Counter composite element in Oxygen Builder for WordPress.
Using Dynamic Data in Number Counter
Using the Number Counter from Oxygen Builder’s composite elements is cool until you need to use the dynamic data. When you add dynamic data source, span is created over the number and counter stop working.
What to do to make the dynamic number working?
No big things! Just delete CSS class called “.oxel_number_counter__number” from element named Number and use it on the SPAN inside. Voilà – you are done.
Set custom speed for each number
Click on element which contains your number and go to Advanced -> Attributes -> Add Attribute with name “speed” and value to whatever speed you want. Higher speed attribute = slower counter.
var counterSpeed = 50;
var counterSpeed = number.attr("speed");
PLEASE Use only one code block for all counters on page
If you use more than one Number Counter on page, delete the code block which all of them create. Just left 1 there. It is enough.
Change the number of decimals
If you want your counter to count and increment the decimals and display two decimal places:
currentCount+=0.01; // increment by .01
number.text(currentCount.toFixed(2)); // show number with 2 decimal places
You have defined your Global colors in Oxygen Builder and now you need use them in CSS styles? No Problem! You can use your global colors within CSS styles. Just open Settings > Global Styles > Colors, click on your colour group and you will see your colors with assigned ID’s to each of them. […]