A number counter with the extra benefit of animation may have a wonderful impact on your website by demonstrating some value. However, the Divi Number Counter module by default has a lot of limitations. It must address all potential use cases for this module, as it includes one input field and one option to display or hide a percentage sign.
In this article, I will explain “How To Insert Symbols or Texts Before and After The Divi Number Counter”.
Results:
Customizing Divi Number Counter:
After adding the Divi Number Counter Module. You can go to the settings of the Number Counter Settings > Content > Number and add a number of your choice.
Then go to Number Counter Settings > Design > Number Text and do the following customizations.
- Number Font: Montserrat
- Number Font Weight: Bold
- Number Text Color: #000000
- Number Text Size: 50px
Adding the CSS Class:
I have given three different CSS Classes for three different CSS Snippets. You can use the CSS Class according to your code snippet. Go to Divi Number Counter Settings > Advanced > CSS ID & Classes and add the following Classes:
hey-number-counter-before
hey-number-counter-after
hey-number-counter-after
You can use these classes in different Number Counters.
Pasting the CSS Code:
The next action is to copy and paste the required snippet from below onto your webpage. Three distinct snippets are included; one adds text before the number, one adds text after the number, and one adds text both before and after the number. Select the one that you require.
You can paste the below code in Divi > Theme Options > Custom CSS or Paste it in Page Settings > Advanced > Custom CSS for live editing. If you have a Child Theme paste it in your style.css.
Before Number Counter:
/* Add content before number counter value */
.hey-number-counter-before .percent-value:before {
/* Content to be added before the number counter value */
content: "XXX";
}
After Number Counter:
/* Add content before number counter value */
.hey-number-counter-after .percent-value:after {
/* Content to be added before the number counter value */
content: "XXX";
}
Both Together:
/* Add content before and after number counter value */
.hey-number-counter-both .percent-value:before {
/* Content to be added before the number counter value */
content: "XXX";
}
.hey-number-counter-both .percent-value:after {
/* Content to be added after the number counter value */
content: "XXX";
}
I have changed the Text as I needed you can add the Text you need it is up to you.
Conclusion:
“How To Insert Symbols or Texts Before and After The Divi Number Counter” is clarified in the above words. The Divi Number Counter is very flexible and versatile to use but it has a defect in that it only displays Numbers and a % symbol which is not enough. So you can use code to make it more effective.