Subscribe On YouTube

Join other subscribers and enjoy other Divi video tutorials!

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

Nelson Miller Profile Orange
In this tutorial I will show you how to add text or symbols before and after the Divi Number Counter module numbers.

▶️ Please watch the video above to get all the exciting details! 👆

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.

Categories: Tutorials

Subscribe For More Things Like This!

At the start of each month, we send out a recap newsletter from the month before with family news, Divi news, our latest tutorials, and product news. Occasionally, if the news is too exciting to wait, we will send out another email separate from the monthly newsletter. That’s what you get when you subscribe, and of course you can unsubscribe if you are no longer interested!

Blog Post Optin
Divi Logo (2)

Shop Our Divi Products

Plugins • Courses • Templates

Visit The Shop

Featured Products

Asset 4

New! Trail Guides

Follow a series of blog posts carefully arranged around a specific topic or goal! Keep track of your progress by marking posts completed, just like a free course!

View Trial Guides

Divi Tutorials On YouTube

Our videos have views! Join subscribers and enjoy over video tutorials!

Visit Our Channel

Leave A Response!

By commenting you agree to our Blog & YouTube Comments Policy

8 Comments

Comments By Others

  1. janko

    Not 100% relevant to above but still related to this topic and I think you might know the solution: Any way to make the counter only start once the visitor scrolls down to it? In my case, the counter starts (and finishes counting) before the user sees it. Which defeats the purpose.

    Reply
    • Hemant Gaba <span class="comment-author-role-label"><a href="https://www.peeayecreative.com/product/divi-adventure-club/" class="comment-author-role-link" rel="external nofollow" target="_blank">Divi Adventure Club Member</a></span>

      Hi Janko!

      It’s the default feature of the Number counter, it starts only when the visitor reaches the section. If it is not happening, then please contact the Elegant themes support.

      Reply
  2. piciu

    Hello, it is working ok for me, but having trouble how to modify the “content”. The font face etc. is ok, but how to make i.e. square meters 2 is not wirking in the content, any advise?

    Reply
    • Hemant Gaba <span class="comment-author-role-label"><a href="https://www.peeayecreative.com/product/divi-adventure-club/" class="comment-author-role-link" rel="external nofollow" target="_blank">Divi Adventure Club Member</a></span>

      Hi Piciu!

      I’m not able to understand what you meant by square meters 2. Can you share some more details? However, you can add more properties to the code:

      .pa-number-counter-before .percent-value:before {
      content: “XXX”;
      font-family: Open Sans,Arial,sans-serif;
      }

      Hope it helps!

      Reply
  3. jeanette

    This didn’t work for me. I tried to add a plus sign but it is not showing.

    Reply
  4. Narcel

    Perfect solution!, but how do you get the number and the text inline?

    I mean i have for example a counter thats says 5 Jaar (dutch for years 🙂 ) and now bottom part of the 5 is lower then the J form Jaar?

    Regards,

    Marcel

    Reply
    • Hemant Gaba <span class="comment-author-role-label"><a href="https://www.peeayecreative.com/product/divi-adventure-club/" class="comment-author-role-link" rel="external nofollow" target="_blank">Divi Adventure Club Member</a></span>

      Hi Narcel!

      I have checked with the ‘Jaar’ after text and it seems to be working fine and inline with the number. Could you please share the URL of the page? It will help me to understand the issue better.

      Reply

Submit a Comment

Your email address will not be published. Required fields are marked *

Recent Posts

0

Your Cart