How To Add Text Or Symbols Before And After The Divi Number Counter Tutorial By Pee Aye Creative

How To Add Text Or Symbols Before And After The Divi Number Counter

In this tutorial I will show you how to add text or symbols before and after the Divi Number Counter module numbers.
Categories: Tutorials

Join subscribers on our YouTube channel and enjoy other Divi video tutorials!

1. Add A CSS Class To The Number Counter Module

The first step is to place the Divi Number Counter module in your layout and write your own number value. Each module will need to have a CSS class in order to add connect the code from step #2 to the module. Go to the Number Counter module settings>Advanced tab>CSS ID & Classes toggle and add the class “pa-number-counter-before” to the CSS Class input field. 

Since you probably need to add specific values to individual Number counter modules, you will need to have a unique CSS class selector for each module. You can also make additional custom CSS selectors like “pa-number-counter-after” and “pa-number-counter-both” since we will give you these snippets in step #2.

add css class to the Divi number counter to extend the values

2. Add Custom CSS Code Snippet To The Number Counter Module

The second step is to copy and paste whichever snippet you need below to your website. You can see there are three different snippets, one for adding text before the number, one for adding text after the number, and one for adding it both before and after the number. Choose whichever one you need.

If you are using our free Divi child theme, place this snippet into the style.css file. Otherwise, place this in your Divi>Theme Options>Custom CSS code box. If you need help, check out our complete guide on Where To Add Custom Code In Divi.

Before

/*add content before number counter value*/
.pa-number-counter-before .percent-value:before {
	content: "XXX";
}

After

/*add content after number counter value*/
.pa-number-counter-after .percent-value:after {
	content: "XXX";
}

Both

/*add content before and after number counter value*/
.pa-number-counter-both .percent-value:before {
	content: "XXX";
}

.pa-number-counter-both .percent-value:after {
	content: "XXX";
}

Add Your Own Values

Obviously you need to replace the XX with your own values. Just write whatever text or symbol inside the quotation marks.

Add Space As Needed

If you need to add a space like in our example in the video of the “250 Clients” then just add a space inside the quotation marks at the beginning or end.

Adjust The Module Or Column Width

Because of the way we are adding this extra text, you may need to make the module width wider or adjust the column width for it to fit properly.

Make More Unique Snippets

If you need more than one module to have different text before the numbers, simply copy the snippets and make a unique CSS class selector for each module.

Last updated Jan 2, 2023 @ 10:07 pm

Subscribe

Each month we send out a roundup email newsletter with the latest tutorials, product updates, helpful resources, and any other industry or personal news. Occasionally we send an extra separate email here and there if we just can’t wait! So that’s what you will get if you subscribe, and you can always unsubscribe at any time if you just can’t take it anymore :)

Blog Post Optin

Please share this post!

Nelson Lee Miller (aka The Divi Teacher)

Nelson is the owner of Pee-Aye Creative in the beautiful state of Pennsylvania. He loves helping small businesses, exploring outdoors, building websites with Divi, and teaching others.

Leave A Response!

By commenting you agree to our Blog & YouTube Comments Policy

0 Comments

Submit a Comment

Your email address will not be published.

Recent Posts

0

Your Cart